@universal-material/web 3.0.69 → 3.0.70

package/navigation/side-navigation.js

@@ -4,18 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _UmSideNavigation_toggleDrawer;
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
@@ -26,18 +14,23 @@ import '../elevation/elevation.js';
 let UmSideNavigation = class UmSideNavigation extends LitElement {
     constructor() {
         super(...arguments);
-        _UmSideNavigation_toggleDrawer.set(this, false);
+        this.#toggleDrawer = false;
         this.disableSlideAnimation = false;
     }
+    static { this.styles = [
+        baseStyles,
+        config.navigationDrawer.useSwiperJs ? swiperStyles : styles
+    ]; }
+    #toggleDrawer;
     /**
      * Toggle the navigation drawer visibility
      *
      * _Modal drawer_: Open if `true`, closed if `false`
      * _Standard drawer_: Collapsed if `true`, visible if `false`
      */
-    get toggleDrawer() { return __classPrivateFieldGet(this, _UmSideNavigation_toggleDrawer, "f"); }
+    get toggleDrawer() { return this.#toggleDrawer; }
     set toggleDrawer(toggleDrawer) {
-        __classPrivateFieldSet(this, _UmSideNavigation_toggleDrawer, toggleDrawer, "f");
+        this.#toggleDrawer = toggleDrawer;
         if (!this.disableSlideAnimation) {
             this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);
         }
@@ -131,11 +124,6 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
         this.swiperContainer.swiper.slideTo(1);
     }
 };
-_UmSideNavigation_toggleDrawer = new WeakMap();
-UmSideNavigation.styles = [
-    baseStyles,
-    config.navigationDrawer.useSwiperJs ? swiperStyles : styles
-];
 __decorate([
     property({ type: Boolean, attribute: 'toggle-drawer' })
 ], UmSideNavigation.prototype, "toggleDrawer", null);

package/navigation/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport { config } from '../config.js';\n\nimport '../elevation/elevation.js';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n\n  static override styles = [\n      baseStyles,\n      config.navigationDrawer.useSwiperJs ? swiperStyles : styles\n    ];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({type: Boolean, attribute: 'toggle-drawer'})\n  get toggleDrawer() { return this.#toggleDrawer; }\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @query('swiper-container') swiperContainer!: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs\n      ? this.renderWithSwipe()\n      : this.renderDefault();\n  }\n\n  private renderDefault() {\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n      </swiper-container>`;\n  }\n\n  private swiperActiveIndexChange() {\n\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() =>\n      this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const swiper = (<any>e).detail[0];\n    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer.swiper.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': UmSideNavigation;\n  }\n}\n"]}
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport { config } from '../config.js';\n\nimport '../elevation/elevation.js';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n\n  static override styles = [\n      baseStyles,\n      config.navigationDrawer.useSwiperJs ? swiperStyles : styles\n    ];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({type: Boolean, attribute: 'toggle-drawer'})\n  get toggleDrawer() { return this.#toggleDrawer; }\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @query('swiper-container') swiperContainer!: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs\n      ? this.renderWithSwipe()\n      : this.renderDefault();\n  }\n\n  private renderDefault() {\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n      </swiper-container>`;\n  }\n\n  private swiperActiveIndexChange() {\n\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() =>\n      this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const swiper = (<any>e).detail[0];\n    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer.swiper.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': UmSideNavigation;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.69",
+  "version": "3.0.70",
   "description": "Material web components",
   "type": "module",
   "keywords": [
@@ -48,31 +48,25 @@
   "license": "MIT",
   "homepage": "https://universal-material.github.io",
   "dependencies": {
-    "@angular/animations": "^17.3.4",
-    "@angular/common": "^17.3.4",
-    "@angular/compiler": "^17.3.4",
-    "@angular/core": "^17.3.4",
-    "@angular/forms": "^17.3.4",
-    "@angular/platform-browser": "^17.3.4",
-    "@angular/platform-browser-dynamic": "^17.3.4",
-    "@angular/router": "^17.3.4",
     "@lit/context": "^1.1.1",
     "@material/material-color-utilities": "^0.2.7",
-    "highlight.js": "^11.9.0",
     "lit": "^3.1.3",
-    "ngx-highlightjs": "^11.0.0-beta.1",
-    "ngx-markdown": "^17.2.0",
-    "rxjs": "~7.8.0",
-    "swiper": "^11.1.1",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "swiper": "^11.1.1"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
     "@angular-devkit/build-angular": "^17.3.4",
+    "@angular/animations": "^17.3.4",
     "@angular/cli": "^17.3.4",
+    "@angular/common": "^17.3.4",
+    "@angular/compiler": "^17.3.4",
     "@angular/compiler-cli": "^17.3.0",
+    "@angular/core": "^17.3.4",
+    "@angular/forms": "^17.3.4",
+    "@angular/platform-browser": "^17.3.4",
+    "@angular/platform-browser-dynamic": "^17.3.4",
+    "@angular/router": "^17.3.4",
     "@custom-elements-manifest/analyzer": "^0.6.3",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -96,9 +90,12 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
-    "gulp-typescript": "^6.0.0-alpha.1",
+    "gulp-typescript": "^5.0.1",
+    "highlight.js": "^11.9.0",
     "html-entities": "^2.5.2",
     "lit-analyzer": "^1.2.1",
+    "ngx-highlightjs": "^11.0.0-beta.1",
+    "ngx-markdown": "^17.2.0",
     "ngx-pug-builders": "^17.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
@@ -109,10 +106,13 @@
     "rollup-plugin-summary": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
+    "rxjs": "~7.8.0",
     "sass": "^1.74.1",
     "through2": "^4.0.2",
     "ts-morph": "^22.0.0",
-    "typescript": "~5.3.3"
+    "tslib": "^2.6.2",
+    "typescript": "~5.4.5",
+    "zone.js": "~0.14.3"
   },
   "customElements": "custom-elements.json"
 }

package/progress/circular-progress.d.ts

@@ -1,5 +1,4 @@
-import { LitElement } from 'lit';
-import { TemplateResult } from 'lit-html';
+import { LitElement, TemplateResult } from 'lit';
 export declare class UmCircularProgress extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];

package/progress/circular-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAQ1C,qBACa,kBAAmB,SAAQ,UAAU;;IAChD,OAAgB,MAAM,4BAAY;IAER,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAK;cAEvB,MAAM,IAAI,cAAc;CA6D5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"circular-progress.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAQtD,qBACa,kBAAmB,SAAQ,UAAU;;IAChD,OAAgB,MAAM,4BAAY;IAER,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAK;cAEvB,MAAM,IAAI,cAAc;CA6D5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}

package/progress/circular-progress.js

@@ -4,12 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmCircularProgress_instances, _UmCircularProgress_renderCircle, _UmCircularProgress_renderIndeterminate, _UmCircularProgress_renderDeterminate;
 import { LitElement, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './circular-progress.styles.js';
@@ -18,18 +12,16 @@ const basePercentage = 255;
 let UmCircularProgress = class UmCircularProgress extends LitElement {
     constructor() {
         super(...arguments);
-        _UmCircularProgress_instances.add(this);
         this.max = 1;
     }
+    static { this.styles = [styles]; }
     render() {
         return this.value === undefined
-            ? __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderIndeterminate).call(this)
-            : __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderDeterminate).call(this);
+            ? this.#renderIndeterminate()
+            : this.#renderDeterminate();
     }
-};
-_UmCircularProgress_instances = new WeakSet();
-_UmCircularProgress_renderCircle = function _UmCircularProgress_renderCircle(className) {
-    return svg `
+    #renderCircle(className) {
+        return svg `
       <svg class="circular ${className}" viewBox="0 0 50 50">
         <circle
           class="path"
@@ -40,19 +32,19 @@ _UmCircularProgress_renderCircle = function _UmCircularProgress_renderCircle(cla
           stroke-width="4"
           stroke-miterlimit="10" />
       </svg>`;
-};
-_UmCircularProgress_renderIndeterminate = function _UmCircularProgress_renderIndeterminate() {
-    return __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderCircle).call(this, 'indeterminate');
-};
-_UmCircularProgress_renderDeterminate = function _UmCircularProgress_renderDeterminate() {
-    let proportion = this.value / this.max;
-    const offset = proportion === 0 || proportion === 1
-        ? 0
-        : 0.10625;
-    proportion = Math.floor(proportion * 100) / 100;
-    const percentage = basePercentage - basePercentage * proportion;
-    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;
-    return svg `
+    }
+    #renderIndeterminate() {
+        return this.#renderCircle('indeterminate');
+    }
+    #renderDeterminate() {
+        let proportion = this.value / this.max;
+        const offset = proportion === 0 || proportion === 1
+            ? 0
+            : 0.10625;
+        proportion = Math.floor(proportion * 100) / 100;
+        const percentage = basePercentage - basePercentage * proportion;
+        const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;
+        return svg `
       <svg class="circular on-going" viewBox="0 0 50 50">
         <circle
           class="path"
@@ -78,8 +70,8 @@ _UmCircularProgress_renderDeterminate = function _UmCircularProgress_renderDeter
           stroke-dashoffset=${`${trackPercentage}%`}/>
       </svg>
     `;
+    }
 };
-UmCircularProgress.styles = [styles];
 __decorate([
     property({ type: Number })
 ], UmCircularProgress.prototype, "value", void 0);

package/progress/circular-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,6CAA6C;AAEtC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;;QAIqB,QAAG,GAAW,CAAC,CAAC;IA+D5C,CAAC;IA7DoB,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,uBAAA,IAAI,8EAAqB,MAAzB,IAAI,CAAuB;YAC7B,CAAC,CAAC,uBAAA,IAAI,4EAAmB,MAAvB,IAAI,CAAqB,CAAC;IAChC,CAAC;;;6EAEa,SAAiB;IAC7B,OAAO,GAAG,CAAA;6BACe,SAAS;;;;;;;;;aASzB,CAAC;AACZ,CAAC;;IAGC,OAAO,uBAAA,IAAI,uEAAc,MAAlB,IAAI,EAAe,eAAe,CAAC,CAAC;AAC7C,CAAC;;IAIC,IAAI,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;QACjD,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,OAAO,CAAC;IACZ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IACjD,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;IAChE,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpG,OAAO,GAAG,CAAA;;;;;;;;;;6BAUe,GAAG,cAAc,GAAG;8BACnB,GAAG,UAAU,GAAG;;;;;;;;;;;6BAWjB,GAAG,cAAc,GAAG;8BACnB,GAAG,eAAe,GAAG;;KAE9C,CAAC;AACJ,CAAC;AAjEe,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAER;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAiB;AAJ/B,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAmE9B","sourcesContent":["import { LitElement, svg } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './circular-progress.styles.js';\n\nconst basePercentage = 255;\n\n// https://codepen.io/ConAntonakos/pen/ryMaOX\n@customElement('u-circular-progress')\nexport class UmCircularProgress extends LitElement {\n  static override styles = [styles];\n\n  @property({type: Number}) value: number | undefined;\n  @property({type: Number}) max: number = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderCircle(className: string): TemplateResult {\n    return svg`\n      <svg class=\"circular ${className}\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\" />\n      </svg>`;\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return this.#renderCircle('indeterminate');\n  }\n\n  #renderDeterminate(): TemplateResult {\n\n    let proportion = this.value! / this.max;\n    const offset = proportion === 0 || proportion === 1\n      ? 0\n      : 0.10625;\n    proportion = Math.floor(proportion! * 100) / 100;\n    const percentage = basePercentage - basePercentage * proportion;\n    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;\n\n    return svg`\n      <svg class=\"circular on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`} \n          stroke-dashoffset=${`${percentage}%`} />\n      </svg>\n      <svg class=\"circular track on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`}\n          stroke-dashoffset=${`${trackPercentage}%`}/>\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-circular-progress': UmCircularProgress;\n  }\n}\n"]}
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,6CAA6C;AAEtC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAIqB,QAAG,GAAW,CAAC,CAAC;IA+D5C,CAAC;aAlEiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAKf,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChC,CAAC;IAED,aAAa,CAAC,SAAiB;QAC7B,OAAO,GAAG,CAAA;6BACe,SAAS;;;;;;;;;aASzB,CAAC;IACZ,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;IAED,kBAAkB;QAEhB,IAAI,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QACxC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;YACjD,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,OAAO,CAAC;QACZ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QACjD,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;QAChE,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAEpG,OAAO,GAAG,CAAA;;;;;;;;;;6BAUe,GAAG,cAAc,GAAG;8BACnB,GAAG,UAAU,GAAG;;;;;;;;;;;6BAWjB,GAAG,cAAc,GAAG;8BACnB,GAAG,eAAe,GAAG;;KAE9C,CAAC;IACJ,CAAC;;AA/DyB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAiB;AAJ/B,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAmE9B","sourcesContent":["import { LitElement, svg, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './circular-progress.styles.js';\n\nconst basePercentage = 255;\n\n// https://codepen.io/ConAntonakos/pen/ryMaOX\n@customElement('u-circular-progress')\nexport class UmCircularProgress extends LitElement {\n  static override styles = [styles];\n\n  @property({type: Number}) value: number | undefined;\n  @property({type: Number}) max: number = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderCircle(className: string): TemplateResult {\n    return svg`\n      <svg class=\"circular ${className}\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\" />\n      </svg>`;\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return this.#renderCircle('indeterminate');\n  }\n\n  #renderDeterminate(): TemplateResult {\n\n    let proportion = this.value! / this.max;\n    const offset = proportion === 0 || proportion === 1\n      ? 0\n      : 0.10625;\n    proportion = Math.floor(proportion! * 100) / 100;\n    const percentage = basePercentage - basePercentage * proportion;\n    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;\n\n    return svg`\n      <svg class=\"circular on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`} \n          stroke-dashoffset=${`${percentage}%`} />\n      </svg>\n      <svg class=\"circular track on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`}\n          stroke-dashoffset=${`${trackPercentage}%`}/>\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-circular-progress': UmCircularProgress;\n  }\n}\n"]}

package/progress/progress-bar.d.ts

@@ -1,5 +1,4 @@
-import { LitElement } from 'lit';
-import { TemplateResult } from 'lit-html';
+import { LitElement, TemplateResult } from 'lit';
 export declare class UmProgressBar extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,qBACa,aAAc,SAAQ,UAAU;;IAC3C,OAAgB,MAAM,4BAAY;IAER,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAK;cAEvB,MAAM,IAAI,cAAc;CA+B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,qBACa,aAAc,SAAQ,UAAU;;IAC3C,OAAgB,MAAM,4BAAY;IAER,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAK;cAEvB,MAAM,IAAI,cAAc;CA+B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/progress/progress-bar.js

@@ -4,30 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmProgressBar_instances, _UmProgressBar_renderIndeterminate, _UmProgressBar_renderDeterminate;
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './progress-bar.styles.js';
 let UmProgressBar = class UmProgressBar extends LitElement {
     constructor() {
         super(...arguments);
-        _UmProgressBar_instances.add(this);
         this.max = 1;
     }
+    static { this.styles = [styles]; }
     render() {
         return this.value === undefined
-            ? __classPrivateFieldGet(this, _UmProgressBar_instances, "m", _UmProgressBar_renderIndeterminate).call(this)
-            : __classPrivateFieldGet(this, _UmProgressBar_instances, "m", _UmProgressBar_renderDeterminate).call(this);
+            ? this.#renderIndeterminate()
+            : this.#renderDeterminate();
     }
-};
-_UmProgressBar_instances = new WeakSet();
-_UmProgressBar_renderIndeterminate = function _UmProgressBar_renderIndeterminate() {
-    return html `
+    #renderIndeterminate() {
+        return html `
       <div class="indeterminate">
         <div class="bar track first"></div>
         <div class="bar active fast"></div>
@@ -36,19 +28,19 @@ _UmProgressBar_renderIndeterminate = function _UmProgressBar_renderIndeterminate
         <div class="bar track last"></div>
       </div>
     `;
-};
-_UmProgressBar_renderDeterminate = function _UmProgressBar_renderDeterminate() {
-    const proportion = this.value / this.max;
-    const percentage = Math.floor(proportion * 1000) / 10;
-    const trackPercentage = 100 - percentage;
-    return html `
+    }
+    #renderDeterminate() {
+        const proportion = this.value / this.max;
+        const percentage = Math.floor(proportion * 1000) / 10;
+        const trackPercentage = 100 - percentage;
+        return html `
       <div class="determinate">
         <div class="bar active" style="flex-basis: ${percentage}%"></div>
         <div class="bar track" style="flex-basis: ${trackPercentage}%"></div>
       </div>
     `;
+    }
 };
-UmProgressBar.styles = [styles];
 __decorate([
     property({ type: Number })
 ], UmProgressBar.prototype, "value", void 0);

package/progress/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;;QAIqB,QAAG,GAAW,CAAC,CAAC;IAiC5C,CAAC;IA/BoB,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,uBAAA,IAAI,oEAAqB,MAAzB,IAAI,CAAuB;YAC7B,CAAC,CAAC,uBAAA,IAAI,kEAAmB,MAAvB,IAAI,CAAqB,CAAC;IAChC,CAAC;;;;IAGC,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACJ,CAAC;;IAGC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IAE1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvD,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;IAEzC,OAAO,IAAI,CAAA;;qDAEsC,UAAU;oDACX,eAAe;;KAE9D,CAAC;AACJ,CAAC;AAnCe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAER;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CAAiB;AAJ/B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAqCzB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './progress-bar.styles.js';\n\n@customElement('u-progress-bar')\nexport class UmProgressBar extends LitElement {\n  static override styles = [styles];\n\n  @property({type: Number}) value: number | undefined;\n  @property({type: Number}) max: number = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return html`\n      <div class=\"indeterminate\">\n        <div class=\"bar track first\"></div>\n        <div class=\"bar active fast\"></div>\n        <div class=\"bar track middle\"></div>\n        <div class=\"bar active slow\"></div>\n        <div class=\"bar track last\"></div>\n      </div>\n    `;\n  }\n\n  #renderDeterminate(): TemplateResult {\n    const proportion = this.value! / this.max;\n\n    const percentage = Math.floor(proportion! * 1000) / 10;\n    const trackPercentage = 100 - percentage;\n\n    return html`\n      <div class=\"determinate\">\n        <div class=\"bar active\" style=\"flex-basis: ${percentage}%\"></div>\n        <div class=\"bar track\" style=\"flex-basis: ${trackPercentage}%\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-progress-bar': UmProgressBar;\n  }\n}\n"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIqB,QAAG,GAAW,CAAC,CAAC;IAiC5C,CAAC;aApCiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAKf,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7B,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAChC,CAAC;IAED,oBAAoB;QAClB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QAE1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvD,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,OAAO,IAAI,CAAA;;qDAEsC,UAAU;oDACX,eAAe;;KAE9D,CAAC;IACJ,CAAC;;AAjCyB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CAAiB;AAJ/B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAqCzB","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './progress-bar.styles.js';\n\n@customElement('u-progress-bar')\nexport class UmProgressBar extends LitElement {\n  static override styles = [styles];\n\n  @property({type: Number}) value: number | undefined;\n  @property({type: Number}) max: number = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return html`\n      <div class=\"indeterminate\">\n        <div class=\"bar track first\"></div>\n        <div class=\"bar active fast\"></div>\n        <div class=\"bar track middle\"></div>\n        <div class=\"bar active slow\"></div>\n        <div class=\"bar track last\"></div>\n      </div>\n    `;\n  }\n\n  #renderDeterminate(): TemplateResult {\n    const proportion = this.value! / this.max;\n\n    const percentage = Math.floor(proportion! * 1000) / 10;\n    const trackPercentage = 100 - percentage;\n\n    return html`\n      <div class=\"determinate\">\n        <div class=\"bar active\" style=\"flex-basis: ${percentage}%\"></div>\n        <div class=\"bar track\" style=\"flex-basis: ${trackPercentage}%\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-progress-bar': UmProgressBar;\n  }\n}\n"]}

package/radio/radio.js

@@ -4,18 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmRadio_instances, _UmRadio_siblings_get, _UmRadio_handleKeyDown;
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './radio.styles.js';
 import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
 let UmRadio = class UmRadio extends UmSelectionControl {
+    static { this.styles = [
+        baseStyles,
+        styles
+    ]; }
     renderIndicator() {
         return html `<div class="indicator"></div>`;
     }
@@ -32,9 +30,15 @@ let UmRadio = class UmRadio extends UmSelectionControl {
             this.input.tabIndex = 0;
         }
     }
+    get #siblings() {
+        if (!this.name) {
+            return [this];
+        }
+        return Array
+            .from(this.getRootNode().querySelectorAll(`${this.tagName}[name="${this.name}"]`));
+    }
     constructor() {
         super();
-        _UmRadio_instances.add(this);
         this.hideStateLayer = false;
         this.inputType = 'radio';
     }
@@ -44,11 +48,50 @@ let UmRadio = class UmRadio extends UmSelectionControl {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('keydown', __classPrivateFieldGet(this, _UmRadio_instances, "m", _UmRadio_handleKeyDown));
+        this.addEventListener('keydown', this.#handleKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('keydown', __classPrivateFieldGet(this, _UmRadio_instances, "m", _UmRadio_handleKeyDown));
+        this.removeEventListener('keydown', this.#handleKeyDown);
+    }
+    #handleKeyDown(event) {
+        const isDown = event.key === 'ArrowDown';
+        const isUp = event.key === 'ArrowUp';
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        if (!isLeft && !isRight && !isDown && !isUp) {
+            return;
+        }
+        // Don't try to select another sibling if there aren't any.
+        const siblings = this.#siblings;
+        if (!siblings.length) {
+            return;
+        }
+        event.preventDefault();
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const forwards = isRtl ? isLeft || isDown : isRight || isDown;
+        const factor = forwards ? 1 : -1;
+        const thisIndex = siblings.indexOf(this);
+        let nextIndex = thisIndex + factor;
+        while (nextIndex !== thisIndex) {
+            if (nextIndex >= siblings.length) {
+                // Return to start if moving past the last item.
+                nextIndex = 0;
+            }
+            else if (nextIndex < 0) {
+                // Go to end if moving before the first item.
+                nextIndex = siblings.length - 1;
+            }
+            const nextSibling = siblings[nextIndex];
+            if (nextSibling.disabled) {
+                nextIndex += factor;
+                continue;
+            }
+            nextSibling.checked = true;
+            nextSibling.input.focus();
+            nextSibling.dispatchEvent(new Event('change', { bubbles: true }));
+            break;
+        }
     }
     ensureOnlyOneChecked() {
         if (!this.name) {
@@ -64,7 +107,7 @@ let UmRadio = class UmRadio extends UmSelectionControl {
         lastChecked.checked = true;
     }
     uncheckSiblings() {
-        for (const radio of __classPrivateFieldGet(this, _UmRadio_instances, "a", _UmRadio_siblings_get)) {
+        for (const radio of this.#siblings) {
             if (radio === this) {
                 continue;
             }
@@ -75,57 +118,6 @@ let UmRadio = class UmRadio extends UmSelectionControl {
         }
     }
 };
-_UmRadio_instances = new WeakSet();
-_UmRadio_siblings_get = function _UmRadio_siblings_get() {
-    if (!this.name) {
-        return [this];
-    }
-    return Array
-        .from(this.getRootNode().querySelectorAll(`${this.tagName}[name="${this.name}"]`));
-};
-_UmRadio_handleKeyDown = function _UmRadio_handleKeyDown(event) {
-    const isDown = event.key === 'ArrowDown';
-    const isUp = event.key === 'ArrowUp';
-    const isLeft = event.key === 'ArrowLeft';
-    const isRight = event.key === 'ArrowRight';
-    if (!isLeft && !isRight && !isDown && !isUp) {
-        return;
-    }
-    // Don't try to select another sibling if there aren't any.
-    const siblings = __classPrivateFieldGet(this, _UmRadio_instances, "a", _UmRadio_siblings_get);
-    if (!siblings.length) {
-        return;
-    }
-    event.preventDefault();
-    const isRtl = getComputedStyle(this).direction === 'rtl';
-    const forwards = isRtl ? isLeft || isDown : isRight || isDown;
-    const factor = forwards ? 1 : -1;
-    const thisIndex = siblings.indexOf(this);
-    let nextIndex = thisIndex + factor;
-    while (nextIndex !== thisIndex) {
-        if (nextIndex >= siblings.length) {
-            // Return to start if moving past the last item.
-            nextIndex = 0;
-        }
-        else if (nextIndex < 0) {
-            // Go to end if moving before the first item.
-            nextIndex = siblings.length - 1;
-        }
-        const nextSibling = siblings[nextIndex];
-        if (nextSibling.disabled) {
-            nextIndex += factor;
-            continue;
-        }
-        nextSibling.checked = true;
-        nextSibling.input.focus();
-        nextSibling.dispatchEvent(new Event('change', { bubbles: true }));
-        break;
-    }
-};
-UmRadio.styles = [
-    baseStyles,
-    styles
-];
 __decorate([
     property({ type: Boolean, attribute: 'hide-state-layer', reflect: true })
 ], UmRadio.prototype, "hideStateLayer", void 0);

package/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './radio.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n  static override styles = [\n    baseStyles,\n    styles\n  ];\n\n  @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n  protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`<div class=\"indicator\"></div>`;\n  }\n\n  override get checked() {\n    return super.checked;\n  }\n  override set checked(value: boolean) {\n    super.checked = value;\n\n    if (!value) {\n      return;\n    }\n\n    this.uncheckSiblings();\n\n    if (this.input) {\n      this.input.tabIndex = 0\n    }\n  }\n\n  get #siblings(): UmRadio[] {\n    if (!this.name) {\n      return [this];\n    }\n\n    return Array\n      .from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.ensureOnlyOneChecked();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.#handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#handleKeyDown);\n  }\n\n  #handleKeyDown(event: KeyboardEvent) {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.#siblings;\n\n    if (!siblings.length) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n    const factor = forwards ? 1 : -1;\n\n    const thisIndex = siblings.indexOf(this);\n    let nextIndex = thisIndex + factor;\n\n    while (nextIndex !== thisIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      const nextSibling = siblings[nextIndex];\n\n      if (nextSibling.disabled) {\n        nextIndex += factor;\n\n        continue;\n      }\n\n      nextSibling.checked = true;\n      nextSibling.input.focus();\n      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n      break;\n    }\n  }\n\n  private ensureOnlyOneChecked() {\n    if (!this.name) {\n      return;\n    }\n\n    const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n    const lastChecked = radios\n      .reverse()\n      .find(r => r.checked);\n\n    if (!lastChecked) {\n      return;\n    }\n\n    lastChecked.checked = true;\n  }\n\n  private uncheckSiblings() {\n    for (const radio of this.#siblings) {\n      if (radio === this) {\n        continue;\n      }\n\n      if (radio.input) {\n        radio.input.tabIndex = -1;\n      }\n\n      radio.checked = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio': UmRadio;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './radio.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n  static override styles = [\n    baseStyles,\n    styles\n  ];\n\n  @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n  protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`<div class=\"indicator\"></div>`;\n  }\n\n  override get checked() {\n    return super.checked;\n  }\n  override set checked(value: boolean) {\n    super.checked = value;\n\n    if (!value) {\n      return;\n    }\n\n    this.uncheckSiblings();\n\n    if (this.input) {\n      this.input.tabIndex = 0\n    }\n  }\n\n  get #siblings(): UmRadio[] {\n    if (!this.name) {\n      return [this];\n    }\n\n    return Array\n      .from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.ensureOnlyOneChecked();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.#handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#handleKeyDown);\n  }\n\n  #handleKeyDown(event: KeyboardEvent) {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.#siblings;\n\n    if (!siblings.length) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n    const factor = forwards ? 1 : -1;\n\n    const thisIndex = siblings.indexOf(this);\n    let nextIndex = thisIndex + factor;\n\n    while (nextIndex !== thisIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      const nextSibling = siblings[nextIndex];\n\n      if (nextSibling.disabled) {\n        nextIndex += factor;\n\n        continue;\n      }\n\n      nextSibling.checked = true;\n      nextSibling.input.focus();\n      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n      break;\n    }\n  }\n\n  private ensureOnlyOneChecked() {\n    if (!this.name) {\n      return;\n    }\n\n    const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n    const lastChecked = radios\n      .reverse()\n      .find(r => r.checked);\n\n    if (!lastChecked) {\n      return;\n    }\n\n    lastChecked.checked = true;\n  }\n\n  private uncheckSiblings() {\n    for (const radio of this.#siblings) {\n      if (radio === this) {\n        continue;\n      }\n\n      if (radio.input) {\n        radio.input.tabIndex = -1;\n      }\n\n      radio.checked = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio': UmRadio;\n  }\n}\n"]}

package/ripple/ripple.js

@@ -8,7 +8,9 @@ var UmRipple_1;
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { styles } from './ripple.styles.js';
-let UmRipple = UmRipple_1 = class UmRipple extends LitElement {
+let UmRipple = class UmRipple extends LitElement {
+    static { UmRipple_1 = this; }
+    static { this.styles = styles; }
     constructor() {
         super();
         this.isTouching = false;
@@ -110,7 +112,6 @@ let UmRipple = UmRipple_1 = class UmRipple extends LitElement {
         element.style.marginTop = `${-size / 2}px`;
     }
 };
-UmRipple.styles = styles;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmRipple.prototype, "disabled", void 0);