chore: mocing button logic to src/, fixing icon rendering

Author: jarrodek

anypoint-dropdown-menu-icons.js

@@ -1,3 +1,3 @@
-import { AnypointDropdownMenu } from './AnypointDropdownMenu.js';
+import { AnypointDropdownMenu } from './src/AnypointDropdownMenu.js';
 
 window.customElements.define('anypoint-dropdown-menu', AnypointDropdownMenu);

anypoint-dropdown-menu.js

@@ -33,7 +33,6 @@
     "@anypoint-web-components/anypoint-control-mixins": "^1.0.2",
     "@anypoint-web-components/anypoint-dropdown": "^1.0.0",
     "@anypoint-web-components/validatable-mixin": "^1.0.2",
-    "@polymer/iron-iconset-svg": "^3.0.1",
     "lit-element": "^2.0.1",
     "lit-html": "^1.1.2"
   },

package-lock.json

@@ -3,7 +3,7 @@ import { ControlStateMixin } from '@anypoint-web-components/anypoint-control-mix
 import { ValidatableMixin } from '@anypoint-web-components/validatable-mixin/validatable-mixin.js';
 import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
 import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import './anypoint-dropdown-menu-icons.js';
+import { arrowDown } from './icons.js';
 /**
  * Accessible dropdown menu for Anypoint platform.
  *
@@ -174,6 +174,10 @@ export class AnypointDropdownMenu extends ValidatableMixin(ControlStateMixin(Lit
       transition: transform 0.12s ease-in-out;
       will-change: transform;
       color: var(--anypoint-dropdown-menu-label-color, #616161);
+      fill: currentColor;
+      display: inline-block;
+      width: 24px;
+      height: 24px;
     }
 
     .trigger-icon.opened {
@@ -384,10 +388,9 @@ export class AnypointDropdownMenu extends ValidatableMixin(ControlStateMixin(Lit
           tabindex="-1"
           aria-label="Toggles dropdown menu"
           class="${_triggerClass}"
-          ?compatibility="${compatibility}">
-          <iron-icon
-            class="trigger-icon ${opened ? 'opened' : ''}"
-            icon="anypoint-dropdown-menu:adm-arrow-down"></iron-icon>
+          ?compatibility="${compatibility}"
+        >
+          <span class="trigger-icon ${opened ? 'opened' : ''}">${arrowDown}</span>
         </anypoint-icon-button>
       </div>
 
@@ -408,7 +411,9 @@ export class AnypointDropdownMenu extends ValidatableMixin(ControlStateMixin(Lit
         @overlay-closed="${this._dropdownClosed}"
         @overlay-opened="${this._dropdownOpened}"
         @select="${this._selectHandler}"
-        @deselect="${this._deselectHandler}">
+        @deselect="${this._deselectHandler}"
+        @activate="${this._activateHandler}"
+      >
         <div slot="dropdown-content" class="dropdown-content">
           <slot id="content" name="dropdown-content"></slot>
         </div>
@@ -1173,4 +1178,8 @@ export class AnypointDropdownMenu extends ValidatableMixin(ControlStateMixin(Lit
       node.removeAttribute('role');
     }, 1000);
   }
+
+  _activateHandler() {
+    this.close();
+  }
 }

package.json

@@ -0,0 +1,5 @@
+import { svg } from 'lit-element';
+/* eslint-disable max-len */
+const iconWrapper = (tpl) => svg`<svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">${tpl}</svg>`;
+
+export const arrowDown = iconWrapper(svg`<path xmlns="http://www.w3.org/2000/svg" d="M8.002 11.352L3.501 4.924l1.027-.276 3.473 4.96 3.471-4.959 1.027.275-4.497 6.428z"></path>`);