material-web-evo 10002.10001.10000

package/labs/segmentedbuttonset/internal/outlined-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.js","sourceRoot":"","sources":["outlined-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mFAAmF;AACnF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/segmentedbuttonset/internal/outlined-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-outlined-segmented-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-segmented-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-segmented-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-segmented-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_shape-start-start: var(--md-outlined-segmented-button-shape-start-start, var(--md-outlined-segmented-button-shape, var(--md-sys-shape-corner-full, 9999px)));--_shape-start-end: var(--md-outlined-segmented-button-shape-start-end, var(--md-outlined-segmented-button-shape, var(--md-sys-shape-corner-full, 9999px)));--_shape-end-end: var(--md-outlined-segmented-button-shape-end-end, var(--md-outlined-segmented-button-shape, var(--md-sys-shape-corner-full, 9999px)));--_shape-end-start: var(--md-outlined-segmented-button-shape-end-start, var(--md-outlined-segmented-button-shape, var(--md-sys-shape-corner-full, 9999px)))}\n`;\n"]}

package/labs/segmentedbuttonset/internal/outlined-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './outlined-segmented-button-set';
+// go/keep-sorted end
+
+@include outlined-segmented-button-set.styles;

package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { SegmentedButton } from '../../segmentedbutton/internal/segmented-button.js';
+declare const segmentedButtonSetBaseClass: import("../../behaviors/mixin.js").MixinReturn<typeof LitElement>;
+/**
+ * SegmentedButtonSet is the parent component for two or more
+ * `SegmentedButton` components. **Only** `SegmentedButton` components may be
+ * used as children.
+ *
+ * @fires segmented-button-set-selection {CustomEvent<{button: SegmentedButton, selected: boolean, index: number}>}
+ * Dispatched when a button is selected programattically with the
+ * `setButtonSelected` or the `toggleSelection` methods as well as on user
+ * interaction. --bubbles --composed
+ */
+export declare class SegmentedButtonSet extends segmentedButtonSetBaseClass {
+    multiselect: boolean;
+    buttons: SegmentedButton[];
+    getButtonDisabled(index: number): boolean;
+    setButtonDisabled(index: number, disabled: boolean): void;
+    getButtonSelected(index: number): boolean;
+    setButtonSelected(index: number, selected: boolean): void;
+    private handleSegmentedButtonInteraction;
+    private toggleSelection;
+    private indexOutOfBounds;
+    private emitSelectionEvent;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected getRenderClasses(): {};
+}
+export {};

package/labs/segmentedbuttonset/internal/segmented-button-set.js

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { mixinDelegatesAria } from '../../../internal/aria/delegate.js';
+// Separate variable needed for closure.
+const segmentedButtonSetBaseClass = mixinDelegatesAria(LitElement);
+/**
+ * SegmentedButtonSet is the parent component for two or more
+ * `SegmentedButton` components. **Only** `SegmentedButton` components may be
+ * used as children.
+ *
+ * @fires segmented-button-set-selection {CustomEvent<{button: SegmentedButton, selected: boolean, index: number}>}
+ * Dispatched when a button is selected programattically with the
+ * `setButtonSelected` or the `toggleSelection` methods as well as on user
+ * interaction. --bubbles --composed
+ */
+export class SegmentedButtonSet extends segmentedButtonSetBaseClass {
+    constructor() {
+        super(...arguments);
+        this.multiselect = false;
+    }
+    getButtonDisabled(index) {
+        if (this.indexOutOfBounds(index))
+            return false;
+        return this.buttons[index].disabled;
+    }
+    setButtonDisabled(index, disabled) {
+        if (this.indexOutOfBounds(index))
+            return;
+        this.buttons[index].disabled = disabled;
+    }
+    getButtonSelected(index) {
+        if (this.indexOutOfBounds(index))
+            return false;
+        return this.buttons[index].selected;
+    }
+    setButtonSelected(index, selected) {
+        // Ignore out-of-index values.
+        if (this.indexOutOfBounds(index))
+            return;
+        // Ignore disabled buttons.
+        if (this.getButtonDisabled(index))
+            return;
+        if (this.multiselect) {
+            this.buttons[index].selected = selected;
+            this.emitSelectionEvent(index);
+            return;
+        }
+        // Single-select segmented buttons are not unselectable.
+        if (!selected)
+            return;
+        this.buttons[index].selected = true;
+        this.emitSelectionEvent(index);
+        // Deselect all other buttons for single-select.
+        for (let i = 0; i < this.buttons.length; i++) {
+            if (i === index)
+                continue;
+            this.buttons[i].selected = false;
+        }
+    }
+    handleSegmentedButtonInteraction(event) {
+        const index = this.buttons.indexOf(event.target);
+        this.toggleSelection(index);
+    }
+    toggleSelection(index) {
+        if (this.indexOutOfBounds(index))
+            return;
+        this.setButtonSelected(index, !this.buttons[index].selected);
+    }
+    indexOutOfBounds(index) {
+        return index < 0 || index >= this.buttons.length;
+    }
+    emitSelectionEvent(index) {
+        this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {
+            detail: {
+                button: this.buttons[index],
+                selected: this.buttons[index].selected,
+                index,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <span
+        role="group"
+        @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"
+        aria-label=${ariaLabel || nothing}
+        class="md3-segmented-button-set">
+        <slot></slot>
+      </span>
+    `;
+    }
+    getRenderClasses() {
+        return {};
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], SegmentedButtonSet.prototype, "multiselect", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], SegmentedButtonSet.prototype, "buttons", void 0);
+//# sourceMappingURL=segmented-button-set.js.map

package/labs/segmentedbuttonset/internal/segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {SegmentedButton} from '../../segmentedbutton/internal/segmented-button.js';\n\n// Separate variable needed for closure.\nconst segmentedButtonSetBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n *\n * @fires segmented-button-set-selection {CustomEvent<{button: SegmentedButton, selected: boolean, index: number}>}\n * Dispatched when a button is selected programattically with the\n * `setButtonSelected` or the `toggleSelection` methods as well as on user\n * interaction. --bubbles --composed\n */\nexport class SegmentedButtonSet extends segmentedButtonSetBaseClass {\n  @property({type: Boolean}) multiselect = false;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(event: CustomEvent) {\n    const index = this.buttons.indexOf(event.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(\n      new CustomEvent('segmented-button-set-selection', {\n        detail: {\n          button: this.buttons[index],\n          selected: this.buttons[index].selected,\n          index,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <span\n        role=\"group\"\n        @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n        aria-label=${ariaLabel || nothing}\n        class=\"md3-segmented-button-set\">\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {};\n  }\n}\n"]}

package/labs/segmentedbuttonset/internal/shared-styles.css

@@ -0,0 +1 @@
+:host{display:flex;outline:none}.md3-segmented-button-set{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;grid-auto-rows:auto;width:100%;height:var(--_container-height)}.md3-segmented-button-set ::slotted(:first-child){border-start-start-radius:var(--_shape-start-start);border-end-start-radius:var(--_shape-end-start)}.md3-segmented-button-set ::slotted(:last-child){border-start-end-radius:var(--_shape-start-end);border-end-end-radius:var(--_shape-end-end)}/*# sourceMappingURL=shared-styles.css.map */

package/labs/segmentedbuttonset/internal/shared-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_shared.scss"],"names":[],"mappings":"AASE,MACE,aACA,aAGF,0BACE,aACA,sBACA,sBACA,oBACA,WACA,gCAEA,kDACE,oDACA,gDAGF,iDACE,gDACA","file":"shared-styles.css"}

package/labs/segmentedbuttonset/internal/shared-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/labs/segmentedbuttonset/internal/shared-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/segmentedbuttonset/internal/shared-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{display:flex;outline:none}.md3-segmented-button-set{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;grid-auto-rows:auto;width:100%;height:var(--_container-height)}.md3-segmented-button-set ::slotted(:first-child){border-start-start-radius:var(--_shape-start-start);border-end-start-radius:var(--_shape-end-start)}.md3-segmented-button-set ::slotted(:last-child){border-start-end-radius:var(--_shape-start-end);border-end-end-radius:var(--_shape-end-end)}
+`;
+//# sourceMappingURL=shared-styles.js.map

package/labs/segmentedbuttonset/internal/shared-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.js","sourceRoot":"","sources":["shared-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iFAAiF;AACjF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/segmentedbuttonset/internal/shared-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{display:flex;outline:none}.md3-segmented-button-set{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;grid-auto-rows:auto;width:100%;height:var(--_container-height)}.md3-segmented-button-set ::slotted(:first-child){border-start-start-radius:var(--_shape-start-start);border-end-start-radius:var(--_shape-end-start)}.md3-segmented-button-set ::slotted(:last-child){border-start-end-radius:var(--_shape-start-end);border-end-end-radius:var(--_shape-end-end)}\n`;\n"]}

package/labs/segmentedbuttonset/internal/shared-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './shared';
+// go/keep-sorted end
+
+@include shared.styles;

package/labs/segmentedbuttonset/outlined-segmented-button-set.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { OutlinedSegmentedButtonSet } from './internal/outlined-segmented-button-set.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;
+    }
+}
+/**
+ * MdOutlinedSegmentedButtonSet is the custom element for the Material
+ * Design outlined segmented button set component.
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
+    static styles: CSSResultOrNative[];
+}

package/labs/segmentedbuttonset/outlined-segmented-button-set.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OutlinedSegmentedButtonSet } from './internal/outlined-segmented-button-set.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * MdOutlinedSegmentedButtonSet is the custom element for the Material
+ * Design outlined segmented button set component.
+ * @final
+ * @suppress {visibility}
+ */
+export let MdOutlinedSegmentedButtonSet = class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
+};
+MdOutlinedSegmentedButtonSet.styles = [sharedStyles, outlinedStyles];
+MdOutlinedSegmentedButtonSet = __decorate([
+    customElement('md-outlined-segmented-button-set')
+], MdOutlinedSegmentedButtonSet);
+//# sourceMappingURL=outlined-segmented-button-set.js.map

package/labs/segmentedbuttonset/outlined-segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,6CAA6C,CAAC;AACvF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;;;GAKG;AAEI,WAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAwB,CAAC,YAAY,EAAE,cAAc,CAAC,AAAtD,CAAuD;AADlE,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './internal/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"]}

package/list/_list-item.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/listitem/list-item' show theme;

package/list/_list.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/list' show theme;

package/list/harness.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { List } from './internal/list.js';
+import { ListItemHarness } from './internal/listitem/harness.js';
+import { ListItemEl } from './internal/listitem/list-item.js';
+export { ListItemHarness } from './internal/listitem/harness.js';
+declare const NAVIGABLE_KEYS: {
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowUp: "ArrowUp";
+    readonly Home: "Home";
+    readonly End: "End";
+};
+/**
+ * Keys that are handled by MdList. Keys not included in this are not handled by
+ * MdList and should be dispatched by yourself.
+ */
+export type HandledListKeys = (typeof NAVIGABLE_KEYS)[keyof typeof NAVIGABLE_KEYS];
+/**
+ * Test harness for list.
+ */
+export declare class ListHarness extends Harness<List> {
+    /**
+     * Returns the first list item element.
+     */
+    protected getInteractiveElement(): Promise<List>;
+    /** @return List item harnesses. */
+    getItems(): ListItemHarness<ListItemEl>[];
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    pressHandledKey<T extends string = HandledListKeys>(key: T): Promise<void>;
+    /**
+     * Dispatches a keypress on the list. It may or may not be a supported event.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    keypress(key: string, init?: KeyboardEventInit): Promise<void>;
+}

package/list/harness.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { ListItemHarness } from './internal/listitem/harness.js';
+export { ListItemHarness } from './internal/listitem/harness.js';
+const NAVIGABLE_KEYS = {
+    'ArrowDown': 'ArrowDown',
+    'ArrowUp': 'ArrowUp',
+    'Home': 'Home',
+    'End': 'End',
+};
+/**
+ * Test harness for list.
+ */
+export class ListHarness extends Harness {
+    /**
+     * Returns the first list item element.
+     */
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element;
+    }
+    /** @return List item harnesses. */
+    getItems() {
+        return this.element.items.map((item) => new ListItemHarness(item));
+    }
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    async pressHandledKey(key) {
+        await this.keypress(key, { code: key });
+    }
+    /**
+     * Dispatches a keypress on the list. It may or may not be a supported event.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    async keypress(key, init = {}) {
+        init = { code: key, ...init };
+        await super.keypress(key, init);
+    }
+}
+//# sourceMappingURL=harness.js.map

package/list/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,cAAc,GAAG;IACrB,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;CACJ,CAAC;AASX;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAe,CAAC;IAC9B,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAC3B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAkB,CAAC,CAClD,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACM,KAAK,CAAC,QAAQ,CAAC,GAAW,EAAE,OAAO,EAAuB;QACjE,IAAI,GAAG,EAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAC,CAAC;QAC5B,MAAM,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {List} from './internal/list.js';\nimport {ListItemHarness} from './internal/listitem/harness.js';\nimport {ListItemEl} from './internal/listitem/list-item.js';\n\nexport {ListItemHarness} from './internal/listitem/harness.js';\n\nconst NAVIGABLE_KEYS = {\n  'ArrowDown': 'ArrowDown',\n  'ArrowUp': 'ArrowUp',\n  'Home': 'Home',\n  'End': 'End',\n} as const;\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n  (typeof NAVIGABLE_KEYS)[keyof typeof NAVIGABLE_KEYS];\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as List;\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map(\n      (item) => new ListItemHarness(item as ListItemEl),\n    );\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n\n  /**\n   * Dispatches a keypress on the list. It may or may not be a supported event.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  override async keypress(key: string, init = {} as KeyboardEventInit) {\n    init = {code: key, ...init};\n    await super.keypress(key, init);\n  }\n}\n"]}

package/list/internal/_list.scss

@@ -0,0 +1,43 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+@use './listitem/list-item';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-list-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-list-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-list-values();
+
+  :host {
+    background: map.get($tokens, 'container-color');
+    color: unset;
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    padding: 8px 0;
+    // Add position so the elevation overlay (which is absolutely positioned)
+    // can be positioned relative to the list root.
+    position: relative;
+  }
+}

package/list/internal/list-controller.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItem } from './list-navigation-helpers.js';
+/**
+ * Default keys that trigger navigation.
+ */
+export declare const NavigableKeys: {
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowRight: "ArrowRight";
+    readonly Home: "Home";
+    readonly End: "End";
+};
+/**
+ * Default set of navigable keys.
+ */
+export type NavigableKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];
+/**
+ * The configuration object to customize the behavior of the List Controller
+ */
+export interface ListControllerConfig<Item extends ListItem> {
+    /**
+     * A function that determines whether or not the given element is an Item
+     */
+    isItem: (item: HTMLElement) => item is Item;
+    /**
+     * A function that returns an array of elements to consider as items. For
+     * example, all the slotted elements.
+     */
+    getPossibleItems: () => HTMLElement[];
+    /**
+     * A function that returns whether or not the list is in an RTL context.
+     */
+    isRtl: () => boolean;
+    /**
+     * Deactivates an item such as setting the tabindex to -1 and or sets selected
+     * to false.
+     */
+    deactivateItem: (item: Item) => void;
+    /**
+     * Activates an item such as setting the tabindex to 1 and or sets selected to
+     * true (but does not focus).
+     */
+    activateItem: (item: Item) => void;
+    /**
+     * Whether or not the key should be handled by the list for navigation.
+     */
+    isNavigableKey: (key: string) => boolean;
+    /**
+     * Whether or not the item can be activated. Defaults to items that are not
+     * disabled.
+     */
+    isActivatable?: (item: Item) => boolean;
+    /**
+     * Whether or not navigating past the end of the list wraps to the beginning
+     * and vice versa. Defaults to true.
+     */
+    wrapNavigation?: () => boolean;
+}
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+export declare class ListController<Item extends ListItem> {
+    isItem: (item: HTMLElement) => item is Item;
+    private readonly getPossibleItems;
+    private readonly isRtl;
+    private readonly deactivateItem;
+    private readonly activateItem;
+    private readonly isNavigableKey;
+    private readonly isActivatable?;
+    private readonly wrapNavigation;
+    constructor(config: ListControllerConfig<Item>);
+    /**
+     * The items being managed by the list. Additionally, attempts to see if the
+     * object has a sub-item in the `.item` property.
+     */
+    get items(): Item[];
+    /**
+     * Handles keyboard navigation. Should be bound to the node that will act as
+     * the List.
+     */
+    handleKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem(): Item | null;
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem(): Item | null;
+    /**
+     * Listener to be bound to the `deactivate-items` item event.
+     */
+    onDeactivateItems: () => void;
+    /**
+     * Listener to be bound to the `request-activation` item event..
+     */
+    onRequestActivation: (event: Event) => void;
+    /**
+     * Listener to be bound to the `slotchange` event for the slot that renders
+     * the items.
+     */
+    onSlotchange: () => void;
+}