@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/select/internal/selectoption/select-option.js

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { MenuItemEl } from '../../../menu/internal/menuitem/menu-item.js';
+import { createRequestDeselectionEvent, createRequestSelectionEvent } from '../shared.js';
+/**
+ * @fires close-menu Closes the encapsulating menu on
+ * @fires request-selection Requests the parent md-select to select this element
+ * (and deselect others if single-selection) when `selected` changed to `true`.
+ * @fires request-deselection Requests the parent md-select to deselect this
+ * element when `selected` changed to `false`.
+ */
+export class SelectOptionEl extends MenuItemEl {
+    constructor() {
+        super(...arguments);
+        /**
+         * Form value of the option.
+         */
+        this.value = '';
+        /**
+         * Whether or not this option is selected.
+         */
+        this.selected = false;
+        this.type = 'option';
+    }
+    willUpdate(changed) {
+        if (changed.has('selected')) {
+            // Synchronize selected -> active but not the other way around because
+            // active is used for keyboard navigation and doesn't mean the option
+            // should be selected if active.
+            this.active = this.selected;
+            this.ariaSelected = this.selected ? 'true' : 'false';
+            // By default active = true focuses the element. We want to prevent that
+            // in this case because we set active = this.selected and that may mess
+            // around with menu's restore focus function once the menu closes.
+            this.focusOnActivation = false;
+        }
+        super.willUpdate(changed);
+    }
+    updated(changed) {
+        super.updated(changed);
+        // Restore the active = true focusing behavior which happens in
+        // super.updated() if it was turned off.
+        this.focusOnActivation = true;
+        // Do not dispatch event on first update / boot-up.
+        if (changed.has('selected') && changed.get('selected') !== undefined) {
+            // This section is really useful for when the user sets selected on the
+            // option programmatically. Most other cases (click and keyboard) are
+            // handled by md-select because it needs to coordinate the
+            // single-selection behavior.
+            if (this.selected) {
+                this.dispatchEvent(createRequestSelectionEvent());
+            }
+            else {
+                this.dispatchEvent(createRequestDeselectionEvent());
+            }
+        }
+    }
+}
+__decorate([
+    property()
+], SelectOptionEl.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectOptionEl.prototype, "selected", void 0);
+//# sourceMappingURL=select-option.js.map

package/select/internal/selectoption/select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAe,UAAU,EAAC,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAC,6BAA6B,EAAE,2BAA2B,EAAe,MAAM,cAAc,CAAC;AAEtG;;;;;;GAMG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACE;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAEzC,SAAI,GAAiB,QAAQ,CAAC;IAqClD,CAAC;IAnCU,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,sEAAsE;YACtE,qEAAqE;YACrE,gCAAgC;YAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACrD,wEAAwE;YACxE,uEAAuE;YACvE,kEAAkE;YAClE,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAChC;QAED,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC5C,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,+DAA+D;QAC/D,wCAAwC;QACxC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAE9B,mDAAmD;QACnD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE;YACpE,uEAAuE;YACvE,qEAAqE;YACrE,0DAA0D;YAC1D,6BAA6B;YAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,aAAa,CAAC,2BAA2B,EAAE,CAAC,CAAC;aACnD;iBAAM;gBACL,IAAI,CAAC,aAAa,CAAC,6BAA6B,EAAE,CAAC,CAAC;aACrD;SACF;IACH,CAAC;CACF;AA5Ca;IAAX,QAAQ,EAAE;6CAAY;AAKmB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAAkB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ListItemRole, MenuItemEl} from '../../../menu/internal/menuitem/menu-item.js';\nimport {createRequestDeselectionEvent, createRequestSelectionEvent, SelectOption} from '../shared.js';\n\n/**\n * @fires close-menu Closes the encapsulating menu on\n * @fires request-selection Requests the parent md-select to select this element\n * (and deselect others if single-selection) when `selected` changed to `true`.\n * @fires request-deselection Requests the parent md-select to deselect this\n * element when `selected` changed to `false`.\n */\nexport class SelectOptionEl extends MenuItemEl implements SelectOption {\n  /**\n   * Form value of the option.\n   */\n  @property() value = '';\n\n  /**\n   * Whether or not this option is selected.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  override readonly type: ListItemRole = 'option';\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('selected')) {\n      // Synchronize selected -> active but not the other way around because\n      // active is used for keyboard navigation and doesn't mean the option\n      // should be selected if active.\n      this.active = this.selected;\n      this.ariaSelected = this.selected ? 'true' : 'false';\n      // By default active = true focuses the element. We want to prevent that\n      // in this case because we set active = this.selected and that may mess\n      // around with menu's restore focus function once the menu closes.\n      this.focusOnActivation = false;\n    }\n\n    super.willUpdate(changed);\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n    // Restore the active = true focusing behavior which happens in\n    // super.updated() if it was turned off.\n    this.focusOnActivation = true;\n\n    // Do not dispatch event on first update / boot-up.\n    if (changed.has('selected') && changed.get('selected') !== undefined) {\n      // This section is really useful for when the user sets selected on the\n      // option programmatically. Most other cases (click and keyboard) are\n      // handled by md-select because it needs to coordinate the\n      // single-selection behavior.\n      if (this.selected) {\n        this.dispatchEvent(createRequestSelectionEvent());\n      } else {\n        this.dispatchEvent(createRequestDeselectionEvent());\n      }\n    }\n  }\n}\n"]}

package/select/internal/shared-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/select/internal/shared-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/select/internal/shared.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItem } from '../../menu/internal/shared.js';
+/**
+ * The interface specific to a Select Option
+ */
+interface SelectOptionSelf {
+    /**
+     * The form value associated with the Select Option. (Note: the visual portion
+     * of the SelectOption is the headline defined in ListItem)
+     */
+    value: string;
+    /**
+     * Whether or not the SelectOption is selected.
+     */
+    selected: boolean;
+}
+/**
+ * The interface to implement for a select option. Additionally, the element
+ * must have `md-list-item` and `md-menu-item` attributes on the host.
+ */
+export type SelectOption = SelectOptionSelf & MenuItem;
+/**
+ * A type that describes a SelectOption and its index.
+ */
+export type SelectOptionRecord = [SelectOption, number];
+/**
+ * Given a list of select options, this function will return an array of
+ * SelectOptionRecords that are selected.
+ *
+ * @return An array of SelectOptionRecords describing the options that are
+ * selected.
+ */
+export declare function getSelectedItems(items: SelectOption[]): SelectOptionRecord[];
+/**
+ * Creates an event fired by a SelectOption to request selection from md-select.
+ * Typically fired after `selected` changes from `false` to `true`.
+ */
+export declare function createRequestSelectionEvent(): Event;
+/**
+ * Creates an event fired by a SelectOption to request deselection from
+ * md-select. Typically fired after `selected` changes from `true` to `false`.
+ */
+export declare function createRequestDeselectionEvent(): Event;
+export {};

package/select/internal/shared.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Given a list of select options, this function will return an array of
+ * SelectOptionRecords that are selected.
+ *
+ * @return An array of SelectOptionRecords describing the options that are
+ * selected.
+ */
+export function getSelectedItems(items) {
+    const selectedItemRecords = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.selected) {
+            selectedItemRecords.push([item, i]);
+        }
+    }
+    return selectedItemRecords;
+}
+/**
+ * Creates an event fired by a SelectOption to request selection from md-select.
+ * Typically fired after `selected` changes from `false` to `true`.
+ */
+export function createRequestSelectionEvent() {
+    return new Event('request-selection', {
+        bubbles: true,
+        composed: true,
+    });
+}
+/**
+ * Creates an event fired by a SelectOption to request deselection from
+ * md-select. Typically fired after `selected` changes from `true` to `false`.
+ */
+export function createRequestDeselectionEvent() {
+    return new Event('request-deselection', {
+        bubbles: true,
+        composed: true,
+    });
+}
+//# sourceMappingURL=shared.js.map

package/select/internal/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA8BH;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAqB;IACpD,MAAM,mBAAmB,GAAyB,EAAE,CAAC;IAErD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;SACrC;KACF;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,2BAA2B;IACzC,OAAO,IAAI,KAAK,CAAC,mBAAmB,EAAE;QACpC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,6BAA6B;IAC3C,OAAO,IAAI,KAAK,CAAC,qBAAqB,EAAE;QACtC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItem} from '../../menu/internal/shared.js';\n\n/**\n * The interface specific to a Select Option\n */\ninterface SelectOptionSelf {\n  /**\n   * The form value associated with the Select Option. (Note: the visual portion\n   * of the SelectOption is the headline defined in ListItem)\n   */\n  value: string;\n  /**\n   * Whether or not the SelectOption is selected.\n   */\n  selected: boolean;\n}\n\n/**\n * The interface to implement for a select option. Additionally, the element\n * must have `md-list-item` and `md-menu-item` attributes on the host.\n */\nexport type SelectOption = SelectOptionSelf&MenuItem;\n\n/**\n * A type that describes a SelectOption and its index.\n */\nexport type SelectOptionRecord = [SelectOption, number];\n\n/**\n * Given a list of select options, this function will return an array of\n * SelectOptionRecords that are selected.\n *\n * @return An array of SelectOptionRecords describing the options that are\n * selected.\n */\nexport function getSelectedItems(items: SelectOption[]) {\n  const selectedItemRecords: SelectOptionRecord[] = [];\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.selected) {\n      selectedItemRecords.push([item, i]);\n    }\n  }\n\n  return selectedItemRecords;\n}\n\n/**\n * Creates an event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport function createRequestSelectionEvent() {\n  return new Event('request-selection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * Creates an event fired by a SelectOption to request deselection from\n * md-select. Typically fired after `selected` changes from `true` to `false`.\n */\nexport function createRequestDeselectionEvent() {\n  return new Event('request-deselection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n"]}

package/select/outlined-select.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { OutlinedSelect } from './lib/outlined-select.js';
+import { OutlinedSelect } from './internal/outlined-select.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-outlined-select': MdOutlinedSelect;

package/select/outlined-select.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as outlinedForcedColorsStyles } from './lib/outlined-forced-colors-styles.css.js';
-import { OutlinedSelect } from './lib/outlined-select.js';
-import { styles } from './lib/outlined-select-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { styles as outlinedForcedColorsStyles } from './internal/outlined-forced-colors-styles.css.js';
+import { OutlinedSelect } from './internal/outlined-select.js';
+import { styles } from './internal/outlined-select-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary
  * Select menus display a list of choices on temporary surfaces and display the

package/select/outlined-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-select.js","sourceRoot":"","sources":["outlined-select.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,4CAA4C,CAAC;AAChG,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAC3D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,0BAA0B,CAAC,CAAC;AADjE,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as outlinedForcedColorsStyles} from './lib/outlined-forced-colors-styles.css.js';\nimport {OutlinedSelect} from './lib/outlined-select.js';\nimport {styles} from './lib/outlined-select-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-select': MdOutlinedSelect;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the \"outlined\"\n * variant.\n *\n * @example\n * ```html\n * <md-outlined-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-select')\nexport class MdOutlinedSelect extends OutlinedSelect {\n  static override styles = [sharedStyles, styles, outlinedForcedColorsStyles];\n}\n"]}
+{"version":3,"file":"outlined-select.js","sourceRoot":"","sources":["outlined-select.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,iDAAiD,CAAC;AACrG,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,EAAC,MAAM,0CAA0C,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,0BAA0B,CAAC,CAAC;AADjE,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as outlinedForcedColorsStyles} from './internal/outlined-forced-colors-styles.css.js';\nimport {OutlinedSelect} from './internal/outlined-select.js';\nimport {styles} from './internal/outlined-select-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-select': MdOutlinedSelect;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the \"outlined\"\n * variant.\n *\n * @example\n * ```html\n * <md-outlined-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-select')\nexport class MdOutlinedSelect extends OutlinedSelect {\n  static override styles = [sharedStyles, styles, outlinedForcedColorsStyles];\n}\n"]}

package/select/select-option.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { SelectOptionEl } from './lib/selectoption/select-option.js';
+import { SelectOptionEl } from './internal/selectoption/select-option.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-select-option': MdSelectOption;

package/select/select-option.js

@@ -5,12 +5,12 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as listItemForcedColorsStyles } from '../list/lib/listitem/forced-colors-styles.css.js';
-import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
-import { styles as forcedColorsStyles } from '../menu/lib/menuitem/forced-colors-styles.css.js';
-import { styles } from '../menu/lib/menuitem/menu-item-styles.css.js';
+import { styles as listItemForcedColorsStyles } from '../list/internal/listitem/forced-colors-styles.css.js';
+import { styles as listItemStyles } from '../list/internal/listitem/list-item-styles.css.js';
+import { styles as forcedColorsStyles } from '../menu/internal/menuitem/forced-colors-styles.css.js';
+import { styles } from '../menu/internal/menuitem/menu-item-styles.css.js';
 // TODO(b/236285090): update with HCM best practices
-import { SelectOptionEl } from './lib/selectoption/select-option.js';
+import { SelectOptionEl } from './internal/selectoption/select-option.js';
 /**
  * @summary
  * Select menus display a list of choices on temporary surfaces and display the

package/select/select-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,kDAAkD,CAAC;AAC9F,OAAO,EAAC,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAEpE,oDAAoD;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAC;AAQnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;;AAChC,qBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAG1B;SAHY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\nimport {styles as forcedColorsStyles} from '../menu/lib/menuitem/forced-colors-styles.css.js';\nimport {styles} from '../menu/lib/menuitem/menu-item-styles.css.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {SelectOptionEl} from './lib/selectoption/select-option.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-select-option': MdSelectOption;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the option that\n * can be placed inside of an md-select.\n *\n * This component is a subclass of `md-menu-item` and can accept the same slots,\n * properties, and events as `md-menu-item`.\n *\n * @example\n * ```html\n * <md-outlined-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-select-option')\nexport class MdSelectOption extends SelectOptionEl {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["select-option.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,uDAAuD,CAAC;AACnG,OAAO,EAAC,MAAM,EAAC,MAAM,mDAAmD,CAAC;AAEzE,oDAAoD;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,0CAA0C,CAAC;AAQxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;;AAChC,qBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAG1B;SAHY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemForcedColorsStyles} from '../list/internal/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/internal/listitem/list-item-styles.css.js';\nimport {styles as forcedColorsStyles} from '../menu/internal/menuitem/forced-colors-styles.css.js';\nimport {styles} from '../menu/internal/menuitem/menu-item-styles.css.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {SelectOptionEl} from './internal/selectoption/select-option.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-select-option': MdSelectOption;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the option that\n * can be placed inside of an md-select.\n *\n * This component is a subclass of `md-menu-item` and can accept the same slots,\n * properties, and events as `md-menu-item`.\n *\n * @example\n * ```html\n * <md-outlined-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-select-option')\nexport class MdSelectOption extends SelectOptionEl {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}

package/slider/_slider.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/slider' show theme;
+@forward './internal/slider' show theme;

package/slider/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Slider } from './lib/slider.js';
+import { Slider } from './internal/slider.js';
 /**
  * Test harness for slider.
  */

package/slider/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Slider} from './lib/slider.js';\n\n/**\n * Test harness for slider.\n */\nexport class SliderHarness extends Harness<Slider> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!;\n  }\n\n  getInputs() {\n    return [\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!,\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!\n    ];\n  }\n  getHandles() {\n    return [\n      this.element.renderRoot.querySelector('.handle.end')!,\n      this.element.renderRoot.querySelector('.handle.start')!\n    ];\n  }\n\n  getLabels() {\n    return Array.from(this.element.renderRoot.querySelectorAll('.label'));\n  }\n\n  isLabelShowing() {\n    const labels = this.getLabels();\n    return labels.some(l => {\n      // remove transition to avoid the need to wait for it.\n      (l as HTMLElement).style.setProperty('transition', 'none');\n      const {width} = l.getBoundingClientRect();\n      (l as HTMLElement).style.removeProperty('transition');\n      return width > 0;\n    });\n  }\n\n  async simulateValueInteraction(value: number, el?: HTMLInputElement) {\n    if (!el) {\n      el = (this.getInputs())[0];\n    }\n    el.focus();\n    el.dispatchEvent(new Event('pointerdown', {bubbles: true, composed: true}));\n    el.value = String(value);\n    el.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('pointerup', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('change', {bubbles: true}));\n    await this.element.updateComplete;\n  }\n\n  private positionEventAtHandle(init: PointerEventInit, startHandle = false) {\n    const handle = this.getHandles()[startHandle ? 1 : 0];\n    const {x, y} = handle.getBoundingClientRect();\n    return {...init, clientX: x, clientY: y, screenX: x, screenY: y};\n  }\n\n  protected override simulateStartHover(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    const i = this.getInputs().indexOf(element as HTMLInputElement);\n    if ((i >= 0) || (element === this.element)) {\n      init = this.positionEventAtHandle(init, i === 1);\n    }\n    super.simulateStartHover(element, init);\n  }\n\n  protected override simulateMousePress(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    super.simulateMousePress(element, init);\n    // advance beyond RAF, which is used by the element's pointerDown handler.\n    jasmine.clock().tick(1);\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Slider} from './internal/slider.js';\n\n/**\n * Test harness for slider.\n */\nexport class SliderHarness extends Harness<Slider> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!;\n  }\n\n  getInputs() {\n    return [\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!,\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!\n    ];\n  }\n  getHandles() {\n    return [\n      this.element.renderRoot.querySelector('.handle.end')!,\n      this.element.renderRoot.querySelector('.handle.start')!\n    ];\n  }\n\n  getLabels() {\n    return Array.from(this.element.renderRoot.querySelectorAll('.label'));\n  }\n\n  isLabelShowing() {\n    const labels = this.getLabels();\n    return labels.some(l => {\n      // remove transition to avoid the need to wait for it.\n      (l as HTMLElement).style.setProperty('transition', 'none');\n      const {width} = l.getBoundingClientRect();\n      (l as HTMLElement).style.removeProperty('transition');\n      return width > 0;\n    });\n  }\n\n  async simulateValueInteraction(value: number, el?: HTMLInputElement) {\n    if (!el) {\n      el = (this.getInputs())[0];\n    }\n    el.focus();\n    el.dispatchEvent(new Event('pointerdown', {bubbles: true, composed: true}));\n    el.value = String(value);\n    el.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('pointerup', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('change', {bubbles: true}));\n    await this.element.updateComplete;\n  }\n\n  private positionEventAtHandle(init: PointerEventInit, startHandle = false) {\n    const handle = this.getHandles()[startHandle ? 1 : 0];\n    const {x, y} = handle.getBoundingClientRect();\n    return {...init, clientX: x, clientY: y, screenX: x, screenY: y};\n  }\n\n  protected override simulateStartHover(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    const i = this.getInputs().indexOf(element as HTMLInputElement);\n    if ((i >= 0) || (element === this.element)) {\n      init = this.positionEventAtHandle(init, i === 1);\n    }\n    super.simulateStartHover(element, init);\n  }\n\n  protected override simulateMousePress(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    super.simulateMousePress(element, init);\n    // advance beyond RAF, which is used by the element's pointerDown handler.\n    jasmine.clock().tick(1);\n  }\n}\n"]}