@universal-material/web 3.0.140 → 3.0.142

package/snackbar/snackbar.js

@@ -0,0 +1,133 @@
+var UmSnackbar_1;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './snackbar.styles.js';
+import '../button/button.js';
+import '../button/icon-button.js';
+export var SnackbarDuration;
+(function (SnackbarDuration) {
+    SnackbarDuration[SnackbarDuration["short"] = 2500] = "short";
+    SnackbarDuration[SnackbarDuration["long"] = 5000] = "long";
+    SnackbarDuration[SnackbarDuration["infinite"] = -1] = "infinite";
+})(SnackbarDuration || (SnackbarDuration = {}));
+let UmSnackbar = class UmSnackbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.buttonLabel = '';
+        this.showClose = false;
+        this.dismissed = false;
+    }
+    static { UmSnackbar_1 = this; }
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        const classes = { dismiss: this.dismissed };
+        return html `
+      <div class="snackbar ${classMap(classes)}">
+        <div class="label">${this.label}</div>
+        ${this.renderButton()} ${this.renderCloseButton()}
+      </div>
+    `;
+    }
+    renderButton() {
+        return this.buttonLabel
+            ? html `
+          <u-button variant="text">${this.buttonLabel}</u-button>
+        `
+            : nothing;
+    }
+    renderCloseButton() {
+        return this.showClose
+            ? html `
+          <u-icon-button @click=${this.dismiss.bind(this)}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="1em"
+              viewBox="0 -960 960 960"
+              width="1em"
+              fill="currentColor">
+              <path
+                d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+            </svg>
+          </u-icon-button>
+        `
+            : nothing;
+    }
+    dismiss() {
+        if (this.dismissed) {
+            return;
+        }
+        this.dismissed = true;
+        const onAnimationEnd = () => {
+            this.snackbar.removeEventListener('animationend', onAnimationEnd);
+            this.remove();
+            UmSnackbar_1.showNext();
+        };
+        this.snackbar.addEventListener('animationend', onAnimationEnd);
+    }
+    static { this._queue = []; }
+    static show(configOrLabel) {
+        if (typeof configOrLabel === 'string') {
+            configOrLabel = {
+                label: configOrLabel,
+            };
+        }
+        configOrLabel.duration ??= SnackbarDuration.short;
+        const snackbar = this.createSnackbar(configOrLabel);
+        UmSnackbar_1._queue.push(snackbar);
+        if (!UmSnackbar_1._consuming) {
+            UmSnackbar_1.consumeQueue();
+        }
+        return snackbar;
+    }
+    static consumeQueue() {
+        if (UmSnackbar_1._queue.length) {
+            UmSnackbar_1._consuming = true;
+            UmSnackbar_1.showNext();
+        }
+    }
+    static showNext() {
+        if (!UmSnackbar_1._queue.length) {
+            UmSnackbar_1._consuming = false;
+            return;
+        }
+        const snackbar = UmSnackbar_1._queue[0];
+        UmSnackbar_1._queue = UmSnackbar_1._queue.slice(1);
+        document.body.appendChild(snackbar);
+        if (snackbar.duration === -1) {
+            return;
+        }
+        setTimeout(() => snackbar.dismiss(), snackbar.duration);
+    }
+    static createSnackbar(config) {
+        const snackbar = document.createElement('u-snackbar');
+        snackbar.label = config.label;
+        snackbar.buttonLabel = config.buttonLabel;
+        snackbar.showClose = config.showClose;
+        snackbar.duration = config.duration;
+        return snackbar;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], UmSnackbar.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], UmSnackbar.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-close', reflect: true })
+], UmSnackbar.prototype, "showClose", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmSnackbar.prototype, "dismissed", void 0);
+__decorate([
+    query('.snackbar')
+], UmSnackbar.prototype, "snackbar", void 0);
+UmSnackbar = UmSnackbar_1 = __decorate([
+    customElement('u-snackbar')
+], UmSnackbar);
+export { UmSnackbar };
+//# sourceMappingURL=snackbar.js.map

package/snackbar/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './snackbar.styles.js';\n\nimport '../button/button.js';\nimport '../button/icon-button.js';\n\nexport interface SnackbarConfig {\n  label: string;\n  duration?: SnackbarDuration;\n  buttonLabel?: string;\n  showClose?: boolean;\n}\n\nexport enum SnackbarDuration {\n  short = 2500,\n  long = 5000,\n  infinite = -1,\n}\n\n@customElement('u-snackbar')\nexport class UmSnackbar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  @property({ reflect: true }) label = '';\n  @property({ reflect: true }) buttonLabel = '';\n  @property({ type: Boolean, attribute: 'show-close', reflect: true })\n  showClose = false;\n  @property({ type: Boolean, reflect: true }) dismissed = false;\n\n  private duration!: SnackbarDuration | number;\n  @query('.snackbar') private readonly snackbar!: HTMLElement;\n\n  override render(): HTMLTemplateResult {\n    const classes = { dismiss: this.dismissed };\n\n    return html`\n      <div class=\"snackbar ${classMap(classes)}\">\n        <div class=\"label\">${this.label}</div>\n        ${this.renderButton()} ${this.renderCloseButton()}\n      </div>\n    `;\n  }\n\n  private renderButton() {\n    return this.buttonLabel\n      ? html`\n          <u-button variant=\"text\">${this.buttonLabel}</u-button>\n        `\n      : nothing;\n  }\n\n  private renderCloseButton() {\n    return this.showClose\n      ? html`\n          <u-icon-button @click=${this.dismiss.bind(this)}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n            </svg>\n          </u-icon-button>\n        `\n      : nothing;\n  }\n\n  dismiss(): void {\n    if (this.dismissed) {\n      return;\n    }\n\n    this.dismissed = true;\n\n    const onAnimationEnd = () => {\n      this.snackbar.removeEventListener('animationend', onAnimationEnd);\n      this.remove();\n\n      UmSnackbar.showNext();\n    };\n\n    this.snackbar.addEventListener('animationend', onAnimationEnd);\n  }\n\n  private static _queue: UmSnackbar[] = [];\n  private static _consuming: boolean;\n\n  static show(label: string): UmSnackbar;\n  static show(config: SnackbarConfig): UmSnackbar;\n  static show(configOrLabel: SnackbarConfig | string): UmSnackbar {\n    if (typeof configOrLabel === 'string') {\n      configOrLabel = {\n        label: configOrLabel,\n      };\n    }\n\n    configOrLabel.duration ??= SnackbarDuration.short;\n\n    const snackbar = this.createSnackbar(configOrLabel);\n    UmSnackbar._queue.push(snackbar);\n\n    if (!UmSnackbar._consuming) {\n      UmSnackbar.consumeQueue();\n    }\n\n    return snackbar;\n  }\n\n  private static consumeQueue() {\n    if (UmSnackbar._queue.length) {\n      UmSnackbar._consuming = true;\n      UmSnackbar.showNext();\n    }\n  }\n\n  private static showNext() {\n    if (!UmSnackbar._queue.length) {\n      UmSnackbar._consuming = false;\n      return;\n    }\n\n    const snackbar = UmSnackbar._queue[0];\n\n    UmSnackbar._queue = UmSnackbar._queue.slice(1);\n\n    document.body.appendChild(snackbar);\n\n    if (snackbar.duration === -1) {\n      return;\n    }\n\n    setTimeout(() => snackbar.dismiss(), snackbar.duration);\n  }\n\n  private static createSnackbar(config: SnackbarConfig): UmSnackbar {\n    const snackbar = document.createElement('u-snackbar');\n    snackbar.label = config.label;\n    snackbar.buttonLabel = config.buttonLabel!;\n    snackbar.showClose = config.showClose!;\n    snackbar.duration = config.duration!;\n\n    return snackbar;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-snackbar': UmSnackbar;\n  }\n}\n"]}

package/snackbar/snackbar.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=snackbar.styles.d.ts.map

package/snackbar/snackbar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.styles.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8ElB,CAAC"}

package/snackbar/snackbar.styles.js

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --u-elevation-level: var(--u-snackbar-elevation-level, 3);
+    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    padding: var(--_snackbar-margin);
+    z-index: var(--u-snackbar-z-index, 1070);
+    display: flex;
+    justify-content: center;
+  }
+
+  .snackbar {
+    display: flex;
+    align-items: center;
+    min-height: var(--u-snackbar-height, 48px);
+    color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
+    background-color: var(--u-snackbar-bg-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
+    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));
+    animation-name: snackbar-fade-in;
+    animation-duration: 450ms;
+    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    animation-fill-mode: forwards;
+    min-width: var(--u-snackbar-min-width, 100%);
+    max-width: var(--u-snackbar-max-width, 100%);
+  }
+  .snackbar.dismiss {
+    animation-name: snackbar-fade-out;
+  }
+
+  u-button {
+    color: var(--u-color-inverse-primary, );
+    margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));
+  }
+
+  u-icon-button {
+    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));
+    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));
+  }
+
+  .label {
+    flex: 1;
+    overflow: hidden;
+    color: var(--u-on-inverse-surface-color);
+    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));
+    line-height: 18px;
+  }
+
+  @media (min-width: 840px) {
+    :host {
+      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));
+    }
+    .snackbar {
+      min-width: var(--u-snackbar-min-width, 288px);
+      max-width: var(--u-snackbar-max-width, 568px);
+    }
+  }
+  @keyframes snackbar-fade-in {
+    0% {
+      opacity: 0;
+      transform: scale3d(0.5, 0.5, 1);
+    }
+    100% {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+  @keyframes snackbar-fade-out {
+    0% {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale3d(0.5, 0.5, 1);
+    }
+  }
+`;
+//# sourceMappingURL=snackbar.styles.js.map

package/snackbar/snackbar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.styles.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n    position: fixed;\n    inset-inline: 0;\n    inset-block-end: 0;\n    padding: var(--_snackbar-margin);\n    z-index: var(--u-snackbar-z-index, 1070);\n    display: flex;\n    justify-content: center;\n  }\n\n  .snackbar {\n    display: flex;\n    align-items: center;\n    min-height: var(--u-snackbar-height, 48px);\n    color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n    background-color: var(--u-snackbar-bg-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n    animation-name: snackbar-fade-in;\n    animation-duration: 450ms;\n    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n    animation-fill-mode: forwards;\n    min-width: var(--u-snackbar-min-width, 100%);\n    max-width: var(--u-snackbar-max-width, 100%);\n  }\n  .snackbar.dismiss {\n    animation-name: snackbar-fade-out;\n  }\n\n  u-button {\n    color: var(--u-color-inverse-primary, );\n    margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));\n  }\n\n  u-icon-button {\n    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  .label {\n    flex: 1;\n    overflow: hidden;\n    color: var(--u-on-inverse-surface-color);\n    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n    line-height: 18px;\n  }\n\n  @media (min-width: 840px) {\n    :host {\n      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n    }\n    .snackbar {\n      min-width: var(--u-snackbar-min-width, 288px);\n      max-width: var(--u-snackbar-max-width, 568px);\n    }\n  }\n  @keyframes snackbar-fade-in {\n    0% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n    100% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n  }\n  @keyframes snackbar-fade-out {\n    0% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n  }\n`;\n"]}

package/switch/switch-list-item.d.ts

@@ -0,0 +1,11 @@
+import { UmSwitch } from './switch.js';
+declare const UmSwitchListItem_base: import("../shared/mixin.js").MixinReturn<typeof UmSwitch>;
+export declare class UmSwitchListItem extends UmSwitchListItem_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-switch-list-item': UmSwitchListItem;
+    }
+}
+export {};
+//# sourceMappingURL=switch-list-item.d.ts.map

package/switch/switch-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-list-item.d.ts","sourceRoot":"","sources":["../../src/switch/switch-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAEvC,qBACa,gBAAiB,SAAQ,qBAAuC;CAE5E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/switch/switch-list-item.js

@@ -0,0 +1,11 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';
+import { UmSwitch } from './switch.js';
+let UmSwitchListItem = class UmSwitchListItem extends mixinSelectionControlListItem(UmSwitch) {
+};
+UmSwitchListItem = __decorate([
+    customElement('u-switch-list-item')
+], UmSwitchListItem);
+export { UmSwitchListItem };
+//# sourceMappingURL=switch-list-item.js.map

package/switch/switch-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-list-item.js","sourceRoot":"","sources":["../../src/switch/switch-list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGhC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,6BAA6B,CAAC,QAAQ,CAAC;CAE5E,CAAA;AAFY,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';\nimport { UmSwitch } from './switch.js';\n\n@customElement('u-switch-list-item')\nexport class UmSwitchListItem extends mixinSelectionControlListItem(UmSwitch) {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-switch-list-item': UmSwitchListItem;\n  }\n}\n"]}

package/switch/switch.d.ts

@@ -0,0 +1,14 @@
+import { HTMLTemplateResult } from 'lit';
+import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+export declare class UmSwitch extends UmSelectionControl {
+    static styles: import("lit").CSSResultGroup[];
+    constructor();
+    protected renderRipple: boolean;
+    protected renderIndicator(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-switch': UmSwitch;
+    }
+}
+//# sourceMappingURL=switch.d.ts.map

package/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAGtF,qBACa,QAAS,SAAQ,kBAAkB;IAC9C,OAAgB,MAAM,iCAAuC;;IAM7D,UAAmB,YAAY,UAAS;cAErB,eAAe,IAAI,kBAAkB;CASzD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/switch/switch.js

@@ -0,0 +1,26 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+import { styles } from './switch.styles.js';
+let UmSwitch = class UmSwitch extends UmSelectionControl {
+    static { this.styles = [UmSelectionControl.styles, styles]; }
+    constructor() {
+        super();
+        this.renderRipple = false;
+    }
+    renderIndicator() {
+        return html `
+      <div class="indicator">
+        <div class="state-layer">
+          <div class="handle"></div>
+        </div>
+      </div>
+    `;
+    }
+};
+UmSwitch = __decorate([
+    customElement('u-switch')
+], UmSwitch);
+export { UmSwitch };
+//# sourceMappingURL=switch.js.map

package/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,kBAAkB;aAC9B,WAAM,GAAG,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,AAAtC,CAAuC;IAE7D;QACE,KAAK,EAAE,CAAC;QAGS,iBAAY,GAAG,KAAK,CAAC;IAFxC,CAAC;IAIkB,eAAe;QAChC,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;;AAjBU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAkBpB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './switch.styles.js';\n\n@customElement('u-switch')\nexport class UmSwitch extends UmSelectionControl {\n  static override styles = [UmSelectionControl.styles, styles];\n\n  constructor() {\n    super();\n  }\n\n  protected override renderRipple = false;\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`\n      <div class=\"indicator\">\n        <div class=\"state-layer\">\n          <div class=\"handle\"></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-switch': UmSwitch;\n  }\n}\n"]}

package/switch/switch.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=switch.styles.d.ts.map

package/switch/switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2ElB,CAAC"}

package/switch/switch.styles.js

@@ -0,0 +1,78 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_width: 3.25rem;
+    --_height: 2rem;
+    --_state-layer-padding: 0;
+    --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));
+    --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);
+    --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
+    --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);
+    --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);
+    --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);
+  }
+
+  .indicator-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: var(--_height);
+    transition: width 200ms;
+  }
+
+  .state-layer,
+  .indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .indicator {
+    width: var(--_height);
+    height: var(--_height);
+  }
+
+  .state-layer {
+    flex-shrink: 0;
+    width: var(--_state-layer-size);
+    height: var(--_state-layer-size);
+    border-radius: var(--u-shape-corner-full, 9999px);
+  }
+
+  .handle {
+    width: var(--_unselected-handle-size);
+    height: var(--_unselected-handle-size);
+    background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));
+    border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));
+    transition: background 200ms, width 200ms, height 200ms;
+  }
+
+  input {
+    border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));
+    background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));
+    transition: background 200ms, border-color 200ms;
+  }
+  input:checked {
+    background-color: var(--_selected-track-background);
+    border-color: var(--_selected-track-background);
+  }
+  input:checked ~ .indicator-container {
+    width: 100%;
+  }
+  input:checked ~ .indicator-container .handle {
+    width: var(--_selected-handle-size);
+    height: var(--_selected-handle-size);
+    background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));
+  }
+
+  @media (hover: hover) {
+    :host(:not([disabled]):hover) .state-layer {
+      background-color: color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)), transparent);
+    }
+  }
+  :host(:not([disabled]):active) .indicator-container .handle {
+    width: var(--_active-handle-size);
+    height: var(--_active-handle-size);
+  }
+`;
+//# sourceMappingURL=switch.styles.js.map

package/switch/switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_width: 3.25rem;\n    --_height: 2rem;\n    --_state-layer-padding: 0;\n    --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n    --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n    --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n    --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n  }\n\n  .indicator-container {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    width: var(--_height);\n    transition: width 200ms;\n  }\n\n  .state-layer,\n  .indicator {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .indicator {\n    width: var(--_height);\n    height: var(--_height);\n  }\n\n  .state-layer {\n    flex-shrink: 0;\n    width: var(--_state-layer-size);\n    height: var(--_state-layer-size);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  .handle {\n    width: var(--_unselected-handle-size);\n    height: var(--_unselected-handle-size);\n    background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n    border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n    transition: background 200ms, width 200ms, height 200ms;\n  }\n\n  input {\n    border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n    background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n    transition: background 200ms, border-color 200ms;\n  }\n  input:checked {\n    background-color: var(--_selected-track-background);\n    border-color: var(--_selected-track-background);\n  }\n  input:checked ~ .indicator-container {\n    width: 100%;\n  }\n  input:checked ~ .indicator-container .handle {\n    width: var(--_selected-handle-size);\n    height: var(--_selected-handle-size);\n    background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .state-layer {\n      background-color: color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)), transparent);\n    }\n  }\n  :host(:not([disabled]):active) .indicator-container .handle {\n    width: var(--_active-handle-size);\n    height: var(--_active-handle-size);\n  }\n`;\n"]}

package/tab-bar/tab-bar.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, TemplateResult } from 'lit';
+import { UmTab } from './tab.js';
+export declare class UmTabBar extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    variant: 'primary' | 'secondary';
+    private readonly _scrollLeft;
+    private readonly _scrollRight;
+    private readonly _container;
+    private readonly _tabIndicator?;
+    assignedElements: HTMLElement[];
+    get activeTabIndex(): number;
+    set activeTabIndex(index: number);
+    get activeTab(): UmTab | null;
+    set activeTab(activeTab: UmTab | null);
+    attributeChangedCallback(name: string, _: string | null, __: string | null): void;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    constructor();
+    _updateTabIndicator(): void;
+    _setScrollIndicatorsActive(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tab-bar': UmTabBar;
+    }
+}
+//# sourceMappingURL=tab-bar.d.ts.map

package/tab-bar/tab-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAe;IAC1C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAC/C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACtC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAc;IAE5B,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAE3E,IAAI,cAAc,IAAI,MAAM,CAM3B;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IAED,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAuBpC;IAEQ,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,GAAG,IAAI,EAChB,EAAE,EAAE,MAAM,GAAG,IAAI;IAOV,iBAAiB;cAMP,MAAM,IAAI,cAAc;;IAsE3C,mBAAmB;IAmCnB,0BAA0B;CA8B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/tab-bar/tab-bar.js

@@ -0,0 +1,200 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, query, queryAssignedElements, } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './tab-bar.styles.js';
+import { UmTab } from './tab.js';
+let UmTabBar = class UmTabBar extends LitElement {
+    static { this.styles = [baseStyles, styles]; }
+    #tabs;
+    #activeTab;
+    #resizeObserver;
+    get activeTabIndex() {
+        if (!this.activeTab) {
+            return -1;
+        }
+        return this.#tabs.indexOf(this.activeTab);
+    }
+    set activeTabIndex(index) {
+        this.activeTab = this.#tabs[index];
+    }
+    get activeTab() {
+        return this.#activeTab;
+    }
+    set activeTab(activeTab) {
+        if (!this.#tabs.length) {
+            this.#activeTab = null;
+            this._updateTabIndicator();
+            return;
+        }
+        if (!activeTab
+            || this.#activeTab === activeTab
+            || !this.#tabs.includes(activeTab)) {
+            return;
+        }
+        const previouslyActiveTab = this.#activeTab;
+        this.#activeTab = activeTab;
+        previouslyActiveTab?.requestUpdate();
+        activeTab.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        activeTab.requestUpdate();
+        this._updateTabIndicator();
+    }
+    attributeChangedCallback(name, _, __) {
+        if (name === 'variant') {
+            this._updateTabIndicator();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#attach();
+    }
+    render() {
+        const classes = { secondary: this.variant === 'secondary' };
+        return html `
+      <div
+        class="scroll-indicator scroll-left active"
+        @click=${this.#scrollToLeft}>
+        <u-elevation></u-elevation>
+        <u-ripple></u-ripple>
+        <slot name="scroll-left">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="1em"
+            viewBox="0 -960 960 960"
+            width="1em"
+            fill="currentColor">
+            <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
+          </svg>
+        </slot>
+      </div>
+      <div
+        class="container ${classMap(classes)}"
+        @scrollend=${this.#handleContainerScrollEnd}>
+        <slot @slotchange=${this.#handleSlotChange}></slot>
+        <div class="tab-indicator"></div>
+      </div>
+      <div
+        class="scroll-indicator scroll-right active"
+        @click=${this.#scrollToRight}>
+        <u-elevation></u-elevation>
+        <u-ripple></u-ripple>
+        <slot name="scroll-right">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="1em"
+            viewBox="0 -960 960 960"
+            width="1em"
+            fill="currentColor">
+            <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
+          </svg>
+        </slot>
+      </div>
+    `;
+    }
+    constructor() {
+        super();
+        this.#tabs = [];
+        this.#activeTab = null;
+        this.#resizeObserver = new ResizeObserver(() => {
+            this._setScrollIndicatorsActive();
+            this._updateTabIndicator();
+        });
+        this.variant = 'primary';
+        this.#handleSlotChange = (e) => {
+            const slot = e.target;
+            this.#tabs =
+                slot.assignedElements({ flatten: true }).filter(element => element instanceof UmTab);
+            for (const tab of this.#tabs) {
+                tab._bar = this;
+            }
+            if (this.activeTabIndex > -1) {
+                return;
+            }
+            this.activeTab = this.#tabs[0];
+        };
+        this.#handleContainerScrollEnd = () => {
+            this._setScrollIndicatorsActive();
+        };
+        this.#scrollToLeft = () => {
+            this._container.scrollBy({
+                left: this._container.offsetWidth / -2,
+                behavior: 'smooth',
+            });
+        };
+        this.#scrollToRight = () => {
+            this._container.scrollBy({
+                left: this._container.offsetWidth / 2,
+                behavior: 'smooth',
+            });
+        };
+        this.#resizeObserver.observe(this);
+    }
+    #handleSlotChange;
+    #handleContainerScrollEnd;
+    _updateTabIndicator() {
+        if (!this._tabIndicator) {
+            return;
+        }
+        if (!this.activeTab) {
+            this._tabIndicator.style.left = '0';
+            this._tabIndicator.style.width = '0';
+            return;
+        }
+        const tabStyles = getComputedStyle(this.activeTab);
+        const padding = this.variant === 'primary' ? parseInt(tabStyles.paddingInline, 10) : 0;
+        this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;
+        this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;
+    }
+    #scrollToLeft;
+    #scrollToRight;
+    _setScrollIndicatorsActive() {
+        const scrollSafeMargin = 1;
+        const scrollLength = this._container.scrollWidth - this._container.offsetWidth;
+        const isRtl = getComputedStyle(this._container).direction === 'rtl';
+        const scrollStart = isRtl
+            ? this._container.scrollLeft + scrollLength
+            : this._container.scrollLeft;
+        if (scrollStart - scrollSafeMargin <= 0) {
+            this._container.scrollBy(-1, 0);
+            this._scrollLeft.classList.remove('active');
+        }
+        else {
+            this._scrollLeft.classList.add('active');
+        }
+        if (scrollStart >= scrollLength - scrollSafeMargin) {
+            this._container.scrollBy(1, 0);
+            this._scrollRight.classList.remove('active');
+        }
+        else {
+            this._scrollRight.classList.add('active');
+        }
+    }
+    async #attach() {
+        await this.updateComplete;
+        this._setScrollIndicatorsActive();
+    }
+};
+__decorate([
+    property({ reflect: true })
+], UmTabBar.prototype, "variant", void 0);
+__decorate([
+    query('.scroll-left')
+], UmTabBar.prototype, "_scrollLeft", void 0);
+__decorate([
+    query('.scroll-right')
+], UmTabBar.prototype, "_scrollRight", void 0);
+__decorate([
+    query('.container')
+], UmTabBar.prototype, "_container", void 0);
+__decorate([
+    query('.tab-indicator')
+], UmTabBar.prototype, "_tabIndicator", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], UmTabBar.prototype, "assignedElements", void 0);
+UmTabBar = __decorate([
+    customElement('u-tab-bar')
+], UmTabBar);
+export { UmTabBar };
+//# sourceMappingURL=tab-bar.js.map