@proximus/lavender-fieldset 1.0.0-alpha.10

package/dist/Fieldset.d.ts

@@ -0,0 +1,22 @@
+import { PxElement } from '@proximus/lavender-common';
+export declare class Fieldset extends PxElement<HTMLFieldSetElement> {
+    static nativeName: string;
+    private template;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    setupErrorState(): void;
+    get $slotLegend(): HTMLSlotElement;
+    get $slotError(): HTMLSlotElement;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get role(): string;
+    set role(value: string);
+    get ariaRequired(): string;
+    set ariaRequired(value: string);
+    get ariaDisabled(): string;
+    set ariaDisabled(value: string);
+    get state(): string;
+    set state(value: string);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Fieldset';

package/dist/index.es.js

@@ -0,0 +1,109 @@
+import { PxElement as a, transferAccessibilityAttributes as d } from "@proximus/lavender-common";
+const n = ':host{display:block}:host *{box-sizing:border-box}fieldset{display:flex;flex-direction:column;margin:0;padding:0;border:0;font-family:var(--px-font-family)}fieldset legend{padding:0}fieldset ::slotted([slot="legend"]:not([shown--sr])){display:block;margin-bottom:var(--px-spacing-xs-mobile)}fieldset ::slotted([slot="error-text"]){display:none;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-purpose-error-default);margin-bottom:var(--px-spacing-xs-mobile)}:host([state="error"]) ::slotted([slot="error-text"]){display:block}@media only screen and (min-width: 48em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-tablet)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-laptop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-desktop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]) fieldset ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}', o = new CSSStyleSheet();
+o.replaceSync(n);
+const i = class i extends a {
+  constructor() {
+    super(o), this.template = () => `<fieldset >
+      <legend><slot name="legend"></slot></legend>
+      <slot name="error-text"></slot>
+      <slot></slot>
+    </fieldset>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "role",
+      "aria-required",
+      "aria-disabled",
+      "state"
+    ];
+  }
+  connectedCallback() {
+    var t;
+    ((t = this.$slotLegend) == null ? void 0 : t.assignedNodes().length) > 0 || console.error(
+      '<px-fieldset> requires a slot="legend" containing the description of the fieldset.'
+    ), this.setupErrorState(), d(this, this.$el, !1);
+  }
+  attributeChangedCallback(e, t, r) {
+    if (t !== r)
+      switch (e) {
+        case "disabled": {
+          this.querySelectorAll(
+            "px-radio-group, px-radio, px-checkbox, px-fileupload, px-input, px-textarea, px-select, px-switch"
+          ).forEach((l) => {
+            l.setAttribute(e, "true");
+          });
+          break;
+        }
+        case "role":
+        case "aria-required":
+        case "aria-disabled":
+          r !== null && (this.$el.setAttribute(e, this.getAttribute(e)), this.removeAttribute(e));
+          break;
+        case "state":
+          this.setupErrorState();
+          break;
+        default:
+          super.attributeChangedCallback(e, t, r);
+          break;
+      }
+  }
+  setupErrorState() {
+    var t;
+    const e = ((t = this.$slotError) == null ? void 0 : t.assignedNodes().length) > 0;
+    if (this.state === "error" && !e && console.error(
+      '<px-fieldset> with state="error" requires a slot="error-text" containing the error description.'
+    ), this.state === "error" && e) {
+      const r = Math.random().toString(36).substr(2, 9);
+      this.$el.setAttribute("id", r), this.$el.setAttribute("aria-describedby", `${r}-error-text`), this.$el.setAttribute("aria-invalid", "true"), this.$slotError.setAttribute("id", `${r}-error-text`);
+    } else
+      this.$el.removeAttribute("id"), this.$el.removeAttribute("aria-describedby"), this.$el.removeAttribute("aria-invalid"), this.$slotError.removeAttribute("id");
+  }
+  get $slotLegend() {
+    return this.shadowRoot.querySelector(
+      'slot[name="legend"]'
+    );
+  }
+  get $slotError() {
+    return this.shadowRoot.querySelector(
+      'slot[name="error-text"]'
+    );
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(e) {
+    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get role() {
+    return this.getAttribute("role");
+  }
+  set role(e) {
+    e ? this.setAttribute("role", e) : this.removeAttribute("role");
+  }
+  get ariaRequired() {
+    return this.getAttribute("aria-required");
+  }
+  set ariaRequired(e) {
+    e ? this.setAttribute("aria-required", e) : this.removeAttribute("aria-required");
+  }
+  get ariaDisabled() {
+    return this.getAttribute("aria-disabled");
+  }
+  set ariaDisabled(e) {
+    e ? this.setAttribute("aria-disabled", e) : this.removeAttribute("aria-disabled");
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(e) {
+    e ? this.setAttribute("state", e) : this.removeAttribute("state");
+  }
+};
+i.nativeName = "fieldset";
+let s = i;
+customElements.get("px-fieldset") || customElements.define("px-fieldset", s);
+export {
+  s as Fieldset
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@proximus/lavender-fieldset",
+  "version": "1.0.0-alpha.10",
+  "description": "",
+  "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
+    "test": "vitest run --coverage",
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json",
+  "gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
+}