@proximus/lavender-status 1.0.0-alpha.0

package/dist/index.js

@@ -0,0 +1,166 @@
+import { PxElement as l } from "@proximus/lavender-common";
+const a = ":host,:host>*{display:block;box-sizing:border-box}.status{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:400;line-height:var(--px-line-height-m);color:var(--px-text-color-heading-brand-default)}.status.success{color:var(--px-text-color-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-text-color-purpose-warning-default)}.status.error{color:var(--px-text-color-purpose-error-default)}.status.unlimited{color:var(--px-text-color-purpose-unlimited-default)}.status[disabled]{color:var(--px-text-color-action-disabled-default)}:host([inverted]) .status{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .status.success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.status{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.status{font-size:var(--px-text-size-label-m-desktop)}}", r = new CSSStyleSheet();
+r.replaceSync(a);
+const c = [
+  "",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "ongoing",
+  "unlimited"
+], n = class n extends l {
+  constructor() {
+    super(r), this.template = () => `
+<div class="status">
+  <px-hstack gap="after-element-2xs" align-items="flex-start">
+    <px-icon name="information_fill" from="lavender" size="s" color="content-brand"></px-icon>
+    <slot name="label"></slot>
+  </px-hstack>
+</div>`, this.shadowRoot.innerHTML = this.template(), (!this.$label || !this.iconAriaLabel) && console.warn(
+      'Label slot and icon aria-label slot are mandatory even with icon-only case. For accessibility the label slot will only be red by screen readers if the component is set to "icon-only".'
+    );
+  }
+  static get observedAttributes() {
+    return [
+      "state",
+      "icon-only",
+      "icon-only--mobile",
+      "icon-only--tablet",
+      "icon-only--laptop",
+      "disabled",
+      "inverted",
+      "icon-aria-label"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.state || this.setRole("info");
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
+      switch (t) {
+        case "state":
+          this.updateState(e), this.$el.classList.toggle(`${e}`), this.setRole(e);
+          break;
+        case "icon-aria-label":
+          this.$statusIcon.setAttribute("aria-label", e);
+          break;
+        case "icon-only":
+          this.updateIconOnly(null);
+          break;
+        case "icon-only--mobile":
+          this.updateIconOnly("mobile");
+          break;
+        case "icon-only--tablet":
+          this.updateIconOnly("tablet");
+          break;
+        case "icon-only--laptop":
+          this.updateIconOnly("laptop");
+          break;
+        case "disabled":
+          this.$el.toggleAttribute("disabled", e !== null), this.$statusIcon.color = "action-disabled";
+          break;
+        case "inverted":
+          for (let o = 0; o < this.$children.length; o++)
+            this.$children[o].hasAttribute("inverted") || this.$children[o].toggleAttribute("inverted");
+          this.$el.toggleAttribute("inverted", e !== null), this.$statusIcon.toggleAttribute("inverted", e !== null);
+          break;
+        default:
+          super.attributeChangedCallback(t, i, e);
+          break;
+      }
+  }
+  updateState(t) {
+    if (!this.checkName(c, t)) {
+      console.error(`${t} is not a valid state value for ${this.$el}`);
+      return;
+    }
+    const i = {
+      info: { name: "information_fill", color: "content-brand" },
+      success: { name: "checkmark_fill", color: "purpose-success" },
+      warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
+      error: { name: "minus_fill", color: "purpose-error" },
+      ongoing: { name: "clock_fill", color: "purpose-warning" },
+      unlimited: { name: "infinity_fill", color: "purpose-unlimited" }
+    }, { name: e, color: o } = i[t] || i.info;
+    this.$statusIcon.name = e, this.$statusIcon.color = o;
+  }
+  setRole(t) {
+    this.$el.setAttribute(
+      "role",
+      !t || t === "info" ? "status" : t
+    );
+  }
+  updateIconOnly(t) {
+    var e;
+    const i = t ? `--${t}` : "";
+    this.$label.setAttribute(`shown--sr${i}`, ""), (t === "laptop" || t === null) && this.$statusIcon.setAttribute(
+      "title",
+      ((e = this.$label.textContent) == null ? void 0 : e.trim()) || ""
+    );
+  }
+  get $label() {
+    return this.querySelector('[slot="label"]');
+  }
+  get $statusIcon() {
+    return this.shadowRoot.querySelector("px-icon");
+  }
+  get $children() {
+    return this.querySelectorAll("px-status > *");
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(t) {
+    this.setAttribute("state", t);
+  }
+  get iconAriaLabel() {
+    return this.getAttribute("icon-aria-label");
+  }
+  set iconAriaLabel(t) {
+    this.setAttribute("icon-aria-label", t);
+  }
+  get iconOnly() {
+    return this.hasAttribute("icon-only");
+  }
+  set iconOnly(t) {
+    t ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
+  }
+  get iconOnlyMobile() {
+    return this.hasAttribute("icon-only--mobile");
+  }
+  set iconOnlyMobile(t) {
+    t ? this.setAttribute("icon-only--mobile", "") : this.removeAttribute("icon-only--mobile");
+  }
+  get iconOnlyTablet() {
+    return this.hasAttribute("icon-only--tablet");
+  }
+  set iconOnlyTablet(t) {
+    t ? this.setAttribute("icon-only--tablet", "") : this.removeAttribute("icon-only--tablet");
+  }
+  get iconOnlyLaptop() {
+    return this.hasAttribute("icon-only--laptop");
+  }
+  set iconOnlyLaptop(t) {
+    t ? this.setAttribute("icon-only--laptop", "") : this.removeAttribute("icon-only--laptop");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+};
+n.nativeName = "div";
+let s = n;
+customElements.define("px-status", s);
+export {
+  s as Status,
+  c as stateValues
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@proximus/lavender-status",
+  "version": "1.0.0-alpha.0",
+  "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": "tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/*.cjs",
+          "dist/css/**/*.css",
+          "dist/js/**/*.js",
+          "dist/*.svg",
+          "dist/*.ttf",
+          "dist/glyphmap.json",
+          "dist/*.d.ts"
+        ]
+      }
+    }
+  },
+  "gitHead": "21c1cee9841df9d3f26e1b2a7809e152ef983fd6"
+}