feat(mdc-menu): remove dependency on menu bar

Each MdcMenu component now functions like the canonical definition of menu in the MDC Web guides
If a bar is present, it delegates control, otherwise handles events locally

Signed-off-by:Vish Desai <shadyvd@hotmail.com>

Author: shadyvd

packages/ember-mdc-web/addon/components/mdc-menu/index.hbs

@@ -1,27 +1,99 @@
-<ul
-	class='mdc-list emdc-menu'
-	{{! Ensure id is present - we need it for the events }}
-	{{requires-id ignore=true}}
-	{{! React to clicks outside the menu area}}
-	{{not-on 'click' this.closeSubMenus}}
-	{{! Store reference to the element for DOM manipulation }}
-	{{store-element this.storeElement}}
-	{{! HTML attributes added in the calling template }}
-	...attributes
->
-	{{yield
-		(hash
-			Item=(component
-				this.itemComponent
-				menuControls=this.controls
-				triggerEvent=this.triggerEvent
-				xAlign=@xAlign
-				xOffset=@xOffset
-				yAlign=@yAlign
-				yOffset=@yOffset
-				equalTriggerContentWidth=@equalTriggerContentWidth
-				palette=@palette
-			)
-		)
-	}}
-</ul>
+{{! template-lint-disable no-invalid-interactive }}
+{{#if (has-block 'items')}}
+	<MdcAbstractDropdown
+		@tag='li'
+		class='mdc-list-item overflow-visible'
+		@customComponents={{(hash
+			trigger=(component this.triggerComponent)
+			content=(component this.listComponent)
+		)}}
+		@xAlign='left'
+		@xOffset='0'
+		@yAlign='bottom'
+		@yOffset='0'
+		@equalTriggerContentWidth={{false}}
+		@triggerEvent={{@triggerEvent}}
+		@palette={{@palette}}
+		{{! Ensure id is present - we need it for the events }}
+		{{requires-id ignore=true}}
+		{{! React to clicks outside the menu area}}
+		{{not-on 'click' this.notOnClick}}
+		{{! React to trigger events }}
+		{{on this.triggerEvent this.onTriggerEvent}}
+		{{! Monitor changes to disabled status }}
+		{{on-mutation
+			this.onAttributeMutation
+			attributeFilter=(array 'disabled')
+		}}
+		{{! Attach/detach event handler as necessary }}
+		{{on-args-change this.listenToClicks this.triggerEvent}}
+		{{! Re-calculate colours as necessary }}
+		{{on-args-change this.recalcStyles @palette}}
+		{{! Store reference to the element for DOM manipulation }}
+		{{store-element this.storeElement}}
+		{{! HTML attributes added in the calling template }}
+		...attributes
+	>
+		<:trigger as |Trigger|>
+			{{yield
+				(component Trigger itemControls=this.itemControls)
+				to='trigger'
+			}}
+		</:trigger>
+
+		<:content as |Content|>
+			{{yield
+				(component Content itemControls=this.itemControls)
+				to='items'
+			}}
+		</:content>
+	</MdcAbstractDropdown>
+{{else}}
+	<li
+		class='mdc-list-item'
+		{{! Add styling classes as necessary }}
+		{{has-class-if this.open 'mdc-list-item--selected'}}
+		{{! Ensure id is present - we need it for the events }}
+		{{requires-id ignore=true}}
+		{{! React to clicks outside the menu area}}
+		{{not-on 'click' this.notOnClick}}
+		{{! React to trigger events }}
+		{{on this.triggerEvent this.onTriggerEvent}}
+		{{! Monitor changes to disabled status }}
+		{{on-mutation
+			this.onAttributeMutation
+			attributeFilter=(array 'disabled')
+		}}
+		{{! Attach/detach event handler as necessary }}
+		{{on-args-change this.listenToClicks this.triggerEvent}}
+		{{! Re-calculate colours as necessary }}
+		{{on-args-change this.recalcStyles @palette}}
+		{{! Store reference to the element for DOM manipulation }}
+		{{store-element this.storeElement}}
+		{{! HTML attributes added in the calling template }}
+		...attributes
+	>
+		<div
+			class='ripple-container absolute inset-0 pointer-events-none overflow-hidden'
+		>
+			<span class='mdc-list-item__ripple'></span>
+		</div>
+
+		{{#if (has-block 'icon')}}
+			{{yield
+				(component
+					this.iconComponent disabled=this.disabled palette=@palette
+				)
+				to='icon'
+			}}
+		{{/if}}
+
+		<span class='mdc-list-item__text'>
+			{{#if (has-block 'icon')}}
+				{{yield to='text'}}
+			{{else}}
+				{{yield}}
+			{{/if}}
+		</span>
+	</li>
+{{/if}}