@proximus/lavender-spinner 1.0.0-alpha.14

package/dist/index.js

@@ -0,0 +1,70 @@
+import { iconSizeValues as n } from "@proximus/lavender-common";
+const l = ".spinner{display:inline-block;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);border-top:3px solid var(--px-color-txt-primary-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-color-txt-primary-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop)}}", x = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}", o = new CSSStyleSheet(), s = new CSSStyleSheet();
+o.replaceSync(l);
+s.replaceSync(x);
+class a extends HTMLElement {
+  template() {
+    return `
+        <div class="spinner">
+            <slot></slot>
+        </div>
+    `;
+  }
+  constructor() {
+    var e;
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.adoptedStyleSheets = [o, s];
+  }
+  static get observedAttributes() {
+    return ["size", "inverted", "timeout", "aria-label"];
+  }
+  connectedCallback() {
+    !this.ariaLabel && this.internals && (this.internals.ariaHidden = "true");
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
+        case "size":
+          this.updateAttribute(e, t, i, n);
+          break;
+        case "aria-label":
+          i !== "" && (this.internals.ariaHidden = "false");
+          break;
+      }
+  }
+  configureAccessibility(e) {
+    this.internals.ariaHidden = e;
+  }
+  updateAttribute(e, t, i, r) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), i !== null && i !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${i}`), this.checkName(r, i) || console.error(
+      `${i} is not an allowed ${e} value for ${this.$el}`
+    );
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".spinner");
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  get timeout() {
+    return this.getAttribute("timeout");
+  }
+  set timeout(e) {
+    this.setAttribute("timeout", e);
+  }
+}
+customElements.define("px-spinner", a);
+export {
+  a as Spinner
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-spinner",
+  "version": "1.0.0-alpha.14",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}