@universal-material/web 3.0.0 → 3.0.1

package/card/card.styles.d.ts

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

package/card/card.styles.d.ts.map

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

package/card/card.styles.js

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));
+  }
+
+  :host(:not(:first-child)) {
+    margin-top: 8px;
+  }
+
+  :host([variant=elevated]) {
+    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));
+    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);
+  }
+
+  :host([variant=filled]) {
+    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));
+  }
+
+  :host([variant=outlined]) {
+    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
+  }
+`;
+//# sourceMappingURL=card.styles.js.map

package/card/card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host(:not(:first-child)) {\n    margin-top: 8px;\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n`;\n"]}

package/checkbox/checkbox.d.ts

@@ -0,0 +1,16 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class UmCheckbox extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private readonly ripple;
+    private readonly assignedInputs;
+    private input;
+    render(): HTMLTemplateResult;
+    private handleSlotChange;
+    private handleInputChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-checkbox': UmCheckbox;
+    }
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMhE,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA4BpB;IAEiB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAsB;IAErD,OAAO,CAAC,KAAK,CAA+B;IAEnC,MAAM,IAAI,kBAAkB;IAOrC,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,iBAAiB,CAIvB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}

package/checkbox/checkbox.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { customElement, query, queryAssignedElements } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles';
+let UmCheckbox = class UmCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.handleInputChange = (e) => {
+            if (this.input !== document.elementFromPoint(e.clientX, e.clientY)) {
+                this.ripple.createRipple();
+            }
+        };
+    }
+    render() {
+        return html `
+      <div class="touch">
+        <u-ripple><slot @slotchange="${this.handleSlotChange}"></slot></u-ripple>
+      </div>`;
+    }
+    handleSlotChange() {
+        console.log('slotchange');
+        if (this.input) {
+            this.input.removeEventListener('click', this.handleInputChange);
+        }
+        this.input = this.assignedInputs[0];
+        if (this.input) {
+            this.input.addEventListener('click', this.handleInputChange);
+        }
+    }
+};
+UmCheckbox.styles = [
+    baseStyles,
+    css `
+      :host {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 48px;
+        height: 48px;
+      }
+      
+      ::slotted(input) {
+        position: relative;
+        padding: 0;
+        margin: 0;
+        aspect-ratio: 1;
+        height: 100%;
+        z-index: 1;
+        appearance: none;
+      }
+      
+      .touch {
+        position: absolute;
+        inset: 0;
+        border-radius: 9999px;
+      }
+    `
+];
+__decorate([
+    query('u-ripple')
+], UmCheckbox.prototype, "ripple", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'input', flatten: true })
+], UmCheckbox.prototype, "assignedInputs", void 0);
+UmCheckbox = __decorate([
+    customElement('u-checkbox')
+], UmCheckbox);
+export { UmCheckbox };
+//# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAGhF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGtD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA0DG,sBAAiB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC5C,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;gBACnE,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IA1BU,MAAM;QACb,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,gBAAgB;aAC/C,CAAC;IACZ,CAAC;IAEO,gBAAgB;QACtB,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAClE,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;;AAvDe,iBAAM,GAAG;IACvB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;CACF,AA5BqB,CA4BpB;AAEkC;IAAnC,KAAK,CAAC,UAAU,CAAC;0CAAoC;AAErC;IADhB,qBAAqB,CAAC,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kDACL;AAjC1C,UAAU;IADtB,aAAa,CAAC,YAAY,CAAC;GACf,UAAU,CA+DtB","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple';\nimport { styles as baseStyles } from '../shared/base.styles';\n\n@customElement('u-checkbox')\nexport class UmCheckbox extends LitElement {\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        width: 48px;\n        height: 48px;\n      }\n      \n      ::slotted(input) {\n        position: relative;\n        padding: 0;\n        margin: 0;\n        aspect-ratio: 1;\n        height: 100%;\n        z-index: 1;\n        appearance: none;\n      }\n      \n      .touch {\n        position: absolute;\n        inset: 0;\n        border-radius: 9999px;\n      }\n    `\n  ];\n\n  @query('u-ripple') private readonly ripple!: UmRipple;\n  @queryAssignedElements({selector: 'input', flatten: true})\n  private readonly assignedInputs!: HTMLInputElement[];\n\n  private input: HTMLInputElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"touch\">\n        <u-ripple><slot @slotchange=\"${this.handleSlotChange}\"></slot></u-ripple>\n      </div>`;\n  }\n\n  private handleSlotChange(): void {\n    console.log('slotchange');\n\n    if (this.input) {\n      this.input.removeEventListener('click', this.handleInputChange);\n    }\n\n    this.input = this.assignedInputs[0];\n\n    if (this.input) {\n      this.input.addEventListener('click', this.handleInputChange);\n    }\n  }\n\n  private handleInputChange = (e: MouseEvent) => {\n    if (this.input !== document.elementFromPoint(e.clientX, e.clientY)) {\n      this.ripple.createRipple();\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-checkbox': UmCheckbox;\n  }\n}\n"]}

package/container/container.d.ts

@@ -0,0 +1,14 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+type SpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';
+export declare class UmContainer extends LitElement {
+    static styles: import("lit").CSSResult;
+    margin: SpacingSizes | undefined;
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-container': UmContainer;
+    }
+}
+export {};
+//# sourceMappingURL=container.d.ts.map

package/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE3E,qBACa,WAAY,SAAQ,UAAU;IAEzC,OAAgB,MAAM,0BAAU;IAEL,MAAM,EAAE,YAAY,GAAG,SAAS,CAAC;IAEnD,MAAM,IAAI,kBAAkB;CAGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}

package/container/container.js

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './container.styles.js';
+let UmContainer = class UmContainer extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+UmContainer.styles = styles;
+__decorate([
+    property({ reflect: true })
+], UmContainer.prototype, "margin", void 0);
+UmContainer = __decorate([
+    customElement('u-container')
+], UmContainer);
+export { UmContainer };
+//# sourceMappingURL=container.js.map

package/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/container/container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAMhC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AANe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAEL;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAkC;AAJjD,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CASvB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './container.styles.js';\n\ntype SpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';\n\n@customElement('u-container')\nexport class UmContainer extends LitElement {\n\n  static override styles = styles;\n\n  @property({reflect: true}) margin: SpacingSizes | undefined;\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-container': UmContainer;\n  }\n}\n"]}

package/container/container.styles.d.ts

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

package/container/container.styles.d.ts.map

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

package/container/container.styles.js

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_grid-spacing-small: var(--u-spacing-sm, 8px);
+    --_grid-spacing-medium: var(--u-spacing-md, 16px);
+    --_grid-spacing-large: var(--u-spacing-lg, 24px);
+    --_grid-spacing-extra-large: var(--u-spacing-xl, 40px);
+  }
+
+  :host([margin=none]) {
+    --_container-margin: 0;
+  }
+
+  :host([margin=small]) {
+    --_container-margin: var(--u-container-margin, var(--_grid-spacing-small));
+  }
+
+  :host([margin=medium]) {
+    --_container-margin: var(--u-container-margin, var(--_grid-spacing-medium));
+  }
+
+  :host([margin=large]) {
+    --_container-margin: var(--u-container-margin, var(--_grid-spacing-large));
+  }
+
+  :host([margin=extra-large]) {
+    --_container-margin: var(--u-container-margin, var(--_grid-spacing-extra-large));
+  }
+
+  :host {
+    display: block;
+    width: 100%;
+    max-width: var(--u-container-max-width, 992px);
+    margin-inline: auto;
+    padding: var(--_container-margin, var(--_grid-spacing-medium));
+  }
+
+  :host::after {
+    content: "";
+    display: block;
+  }
+`;
+//# sourceMappingURL=container.styles.js.map

package/container/container.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../src/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_grid-spacing-small: var(--u-spacing-sm, 8px);\n    --_grid-spacing-medium: var(--u-spacing-md, 16px);\n    --_grid-spacing-large: var(--u-spacing-lg, 24px);\n    --_grid-spacing-extra-large: var(--u-spacing-xl, 40px);\n  }\n\n  :host([margin=none]) {\n    --_container-margin: 0;\n  }\n\n  :host([margin=small]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-small));\n  }\n\n  :host([margin=medium]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-medium));\n  }\n\n  :host([margin=large]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-large));\n  }\n\n  :host([margin=extra-large]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-extra-large));\n  }\n\n  :host {\n    display: block;\n    width: 100%;\n    max-width: var(--u-container-max-width, 992px);\n    margin-inline: auto;\n    padding: var(--_container-margin, var(--_grid-spacing-medium));\n  }\n\n  :host::after {\n    content: \"\";\n    display: block;\n  }\n`;\n"]}