@universal-material/web 3.5.0 → 3.5.1

package/badge/badge.d.ts

@@ -1,7 +1,9 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
 export declare class UmBadge extends LitElement {
+    #private;
     static styles: import("lit").CSSResult;
     static: boolean;
+    private _empty;
     protected render(): HTMLTemplateResult;
 }
 declare global {

package/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;cAExC,MAAM,IAAI,kBAAkB;CAGhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,qBACa,OAAQ,SAAQ,UAAU;;IACrC,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IAClD,OAAO,CAAC,MAAM,CAAQ;cAEZ,MAAM,IAAI,kBAAkB;CAiBhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}

package/badge/badge.js

@@ -1,20 +1,37 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './badge.styles.js';
 let UmBadge = class UmBadge extends LitElement {
     constructor() {
         super(...arguments);
         this.static = false;
+        this._empty = true;
     }
     static { this.styles = styles; }
     render() {
-        return html `<slot></slot>`;
+        const containerClasses = classMap({
+            static: this.static,
+            empty: this._empty,
+        });
+        return html `
+      <div class="container ${containerClasses}">
+        <slot @slotchange=${this.#handleSlotChange}></slot>
+      </div>
+    `;
+    }
+    #handleSlotChange(e) {
+        const slot = e.target;
+        this._empty = !!slot.assignedElements().length;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmBadge.prototype, "static", void 0);
+__decorate([
+    state()
+], UmBadge.prototype, "_empty", void 0);
 UmBadge = __decorate([
     customElement('u-badge')
 ], UmBadge);

package/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/badge/badge.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,mBAAmB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,WAAM,GAAG,KAAK,CAAC;IAK7D,CAAC;aAPiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAIb,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAJ2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAgB;AAHhD,OAAO;IADnB,aAAa,CAAC,SAAS,CAAC;GACZ,OAAO,CAQnB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './badge.styles.js';\n\n@customElement('u-badge')\nexport class UmBadge extends LitElement {\n  static override styles = styles;\n\n  @property({ type: Boolean, reflect: true }) static = false;\n\n  protected override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-badge': UmBadge;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,WAAM,GAAG,KAAK,CAAC;QAC1C,WAAM,GAAG,IAAI,CAAC;IAmBjC,CAAC;aAtBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAKb,MAAM;QACvB,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,MAAM;SACnB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACe,gBAAgB;4BAClB,IAAI,CAAC,iBAAiB;;KAE7C,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,CAAQ;QACxB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC;IACjD,CAAC;;AAnB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAgB;AAC1C;IAAhB,KAAK,EAAE;uCAAuB;AAJpB,OAAO;IADnB,aAAa,CAAC,SAAS,CAAC;GACZ,OAAO,CAuBnB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './badge.styles.js';\n\n@customElement('u-badge')\nexport class UmBadge extends LitElement {\n  static override styles = styles;\n\n  @property({ type: Boolean, reflect: true }) static = false;\n  @state() private _empty = true;\n\n  protected override render(): HTMLTemplateResult {\n    const containerClasses = classMap({\n      static: this.static,\n      empty: this._empty,\n    });\n\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <slot @slotchange=${this.#handleSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  #handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._empty = !!slot.assignedElements().length;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-badge': UmBadge;\n  }\n}\n"]}

package/badge/badge.styles.d.ts.map

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

package/badge/badge.styles.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 export const styles = css `
-  :host {
+  .container {
     --_badge-size: var(--u-badge-small-size, 6px);
     font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
     line-height: var(--u-badge-line-height, var(--u-label-s-line-height, 1rem));
@@ -17,15 +17,13 @@ export const styles = css `
     color: var(--u-badge-color, var(--u-color-on-error, rgb(255, 255, 255)));
     border-radius: calc(var(--_badge-size) / 2);
   }
-
-  :host(:not([static])) {
+  .container:not(.static) {
     --_badge-inline-start: calc(100% - var(--_badge-size));
     position: absolute;
     top: 0;
     inset-inline-start: var(--_badge-inline-start);
   }
-
-  :host(:not(:empty)) {
+  .container:not(.empty) {
     --_badge-size: var(--u-badge-large-size, 16px);
     top: var(--u-badge-top-offset, -2px);
     inset-inline-start: calc(var(--_badge-inline-start) - var(--u-badge-inline-offset, -4px));

package/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_badge-size: var(--u-badge-small-size, 6px);\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-badge-line-height, var(--u-label-s-line-height, 1rem));\n    font-size: var(--u-badge-font-size, var(--u-label-s-font-size, 0.6875rem));\n    letter-spacing: var(--u-badge-letter-spacing, var(--u-label-s-letter-spacing, 0.0454545455rem));\n    font-weight: var(--u-badge-font-weight, var(--u-label-s-font-weight, var(--u-font-weight-medium, 500)));\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--_badge-size);\n    height: var(--_badge-size);\n    line-height: var(--_badge-size);\n    background-color: var(--u-badge-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-badge-color, var(--u-color-on-error, rgb(255, 255, 255)));\n    border-radius: calc(var(--_badge-size) / 2);\n  }\n\n  :host(:not([static])) {\n    --_badge-inline-start: calc(100% - var(--_badge-size));\n    position: absolute;\n    top: 0;\n    inset-inline-start: var(--_badge-inline-start);\n  }\n\n  :host(:not(:empty)) {\n    --_badge-size: var(--u-badge-large-size, 16px);\n    top: var(--u-badge-top-offset, -2px);\n    inset-inline-start: calc(var(--_badge-inline-start) - var(--u-badge-inline-offset, -4px));\n    padding-inline: var(--u-badge-padding, 4px);\n  }\n`;\n"]}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .container {\n    --_badge-size: var(--u-badge-small-size, 6px);\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-badge-line-height, var(--u-label-s-line-height, 1rem));\n    font-size: var(--u-badge-font-size, var(--u-label-s-font-size, 0.6875rem));\n    letter-spacing: var(--u-badge-letter-spacing, var(--u-label-s-letter-spacing, 0.0454545455rem));\n    font-weight: var(--u-badge-font-weight, var(--u-label-s-font-weight, var(--u-font-weight-medium, 500)));\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--_badge-size);\n    height: var(--_badge-size);\n    line-height: var(--_badge-size);\n    background-color: var(--u-badge-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-badge-color, var(--u-color-on-error, rgb(255, 255, 255)));\n    border-radius: calc(var(--_badge-size) / 2);\n  }\n  .container:not(.static) {\n    --_badge-inline-start: calc(100% - var(--_badge-size));\n    position: absolute;\n    top: 0;\n    inset-inline-start: var(--_badge-inline-start);\n  }\n  .container:not(.empty) {\n    --_badge-size: var(--u-badge-large-size, 16px);\n    top: var(--u-badge-top-offset, -2px);\n    inset-inline-start: calc(var(--_badge-inline-start) - var(--u-badge-inline-offset, -4px));\n    padding-inline: var(--u-badge-padding, 4px);\n  }\n`;\n"]}