@proximus/lavender-phone-number 1.4.15-alpha.10

package/dist/PhoneNumber.d.ts

@@ -0,0 +1,36 @@
+import { PxElement } from '@proximus/lavender-common';
+import '@proximus/lavender-layout';
+import '@proximus/lavender-fieldset';
+export declare class PhoneNumber extends PxElement<HTMLElement> {
+    static nativeName: string;
+    template: () => string;
+    private selectStateObserver?;
+    private inputStateObserver?;
+    private readonly onSelectSlotChange;
+    private readonly onInputSlotChange;
+    private readonly onHelperSlotChange;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    setupErrorState(): void;
+    ensureHelperId(): string;
+    updateAriaDescribedBy(element: HTMLElement | null, helperId: string, errorId: string): void;
+    applyHiddenLabel(): void;
+    observeSlottedFieldState(): void;
+    get $fieldset(): Element;
+    get $slottedHelper(): HTMLElement | null;
+    get $slotStateText(): HTMLSlotElement | null;
+    get $slotHelper(): HTMLSlotElement | null;
+    get $slotSelect(): HTMLSlotElement | null;
+    get $slotInput(): HTMLSlotElement | null;
+    get $slottedSelect(): HTMLElement | null;
+    get $slottedInput(): HTMLElement | null;
+    get $slottedSelectLabel(): HTMLElement | null;
+    get $slottedInputLabel(): HTMLElement | null;
+    get state(): string;
+    set state(value: string | null);
+    get inverted(): boolean;
+    set inverted(value: string | null);
+}

package/dist/index.d.ts

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

package/dist/index.es.js

@@ -0,0 +1,120 @@
+import { PxElement as e, log as t } from "@proximus/lavender-common";
+import "@proximus/lavender-layout";
+import "@proximus/lavender-fieldset";
+//#region src/phone-number.css?inline
+var n = ":host{display:block}:host *{box-sizing:border-box}::slotted([slot=label]){font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default);margin-bottom:var(--px-spacing-2xs-mobile);display:block}@media screen and (width>=48rem){::slotted([slot=label]){font-size:var(--px-text-size-label-m-tablet);margin-bottom:var(--px-spacing-2xs-tablet)}}@media screen and (width>=64.0625rem){::slotted([slot=label]){font-size:var(--px-text-size-label-m-laptop);margin-bottom:var(--px-spacing-2xs-laptop)}}@media screen and (width>=90.0625rem){::slotted([slot=label]){font-size:var(--px-text-size-label-m-desktop);margin-bottom:var(--px-spacing-2xs-desktop)}}", r = new CSSStyleSheet();
+r.replaceSync(n);
+var i = class extends e {
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(r), this.template = () => "<px-fieldset>\n      <slot name=\"label\" slot=\"legend\"></slot>\n      <slot name=\"helper\" slot=\"helper\"></slot>\n      <slot name=\"state-text\" slot=\"error-text\"></slot>\n      <px-hstack gap=\"xs\">\n        <slot name=\"select\"></slot>\n        <slot name=\"input\"></slot>\n      </px-hstack>\n    </px-fieldset>", this.onSelectSlotChange = () => {
+			this.applyHiddenLabel(), this.observeSlottedFieldState(), this.setupErrorState();
+		}, this.onInputSlotChange = () => {
+			this.applyHiddenLabel(), this.observeSlottedFieldState(), this.setupErrorState();
+		}, this.onHelperSlotChange = () => {
+			this.setupErrorState();
+		}, this.shadowRoot.innerHTML = this.template();
+	}
+	connectedCallback() {
+		this.$slotSelect?.addEventListener("slotchange", this.onSelectSlotChange), this.$slotInput?.addEventListener("slotchange", this.onInputSlotChange), this.$slotHelper?.addEventListener("slotchange", this.onHelperSlotChange), this.applyHiddenLabel(), this.observeSlottedFieldState(), this.setupErrorState();
+	}
+	disconnectedCallback() {
+		this.$slotSelect?.removeEventListener("slotchange", this.onSelectSlotChange), this.$slotInput?.removeEventListener("slotchange", this.onInputSlotChange), this.$slotHelper?.removeEventListener("slotchange", this.onHelperSlotChange), this.selectStateObserver?.disconnect(), this.inputStateObserver?.disconnect();
+	}
+	static get observedAttributes() {
+		return [...super.observedAttributes, "state"];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "state":
+				this.setupErrorState();
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	setupErrorState() {
+		let e = this.$slotStateText, n = (e?.assignedNodes().length ?? 0) > 0, r = this.ensureHelperId(), i = "";
+		if (this.state === "error" && !n && t("<px-fieldset> with state=\"error\" requires a slot=\"error-text\" containing the error description."), this.state === "error" && n) {
+			this.$fieldset.setAttribute("state", "error");
+			let t = Math.random().toString(36).substr(2, 9);
+			e?.setAttribute("id", `${t}-state-text`), i = `${t}-state-text`, this.$slottedSelect?.getAttribute("state") === "error" ? this.$slottedSelect.setAttribute("aria-invalid", "true") : this.$slottedSelect?.removeAttribute("aria-invalid"), this.$slottedInput?.getAttribute("state") === "error" ? this.$slottedInput.setAttribute("aria-invalid", "true") : this.$slottedInput?.removeAttribute("aria-invalid");
+		} else this.$fieldset.removeAttribute("state"), this.$slottedSelect?.removeAttribute("aria-invalid"), this.$slottedInput?.removeAttribute("aria-invalid"), e?.removeAttribute("id");
+		this.updateAriaDescribedBy(this.$slottedSelect, r, this.$slottedSelect?.getAttribute("state") === "error" ? i : ""), this.updateAriaDescribedBy(this.$slottedInput, r, this.$slottedInput?.getAttribute("state") === "error" ? i : "");
+	}
+	ensureHelperId() {
+		if (!this.$slottedHelper) return "";
+		if (!this.$slottedHelper.id) {
+			let e = Math.random().toString(36).substr(2, 9);
+			this.$slottedHelper.setAttribute("id", `${e}-helper`);
+		}
+		return this.$slottedHelper.id;
+	}
+	updateAriaDescribedBy(e, t, n) {
+		if (!e) return;
+		let r = [t, n].filter(Boolean).join(" ");
+		r ? e.setAttribute("aria-describedby", r) : e.removeAttribute("aria-describedby");
+	}
+	applyHiddenLabel() {
+		this.$slottedSelect?.setAttribute("hidden-label", ""), this.$slottedInput?.setAttribute("hidden-label", ""), this.$slottedSelectLabel?.setAttribute("shown--sr", ""), this.$slottedInputLabel?.setAttribute("shown--sr", "");
+	}
+	observeSlottedFieldState() {
+		this.selectStateObserver?.disconnect(), this.inputStateObserver?.disconnect(), this.$slottedSelect && (this.selectStateObserver = new MutationObserver(() => {
+			this.setupErrorState();
+		}), this.selectStateObserver.observe(this.$slottedSelect, {
+			attributes: !0,
+			attributeFilter: ["state"]
+		})), this.$slottedInput && (this.inputStateObserver = new MutationObserver(() => {
+			this.setupErrorState();
+		}), this.inputStateObserver.observe(this.$slottedInput, {
+			attributes: !0,
+			attributeFilter: ["state"]
+		}));
+	}
+	get $fieldset() {
+		return this.shadowRoot.querySelector("px-fieldset");
+	}
+	get $slottedHelper() {
+		return this.querySelector("[slot=\"helper\"]");
+	}
+	get $slotStateText() {
+		return this.shadowRoot.querySelector("slot[name=\"state-text\"]");
+	}
+	get $slotHelper() {
+		return this.shadowRoot.querySelector("slot[name=\"helper\"]");
+	}
+	get $slotSelect() {
+		return this.shadowRoot.querySelector("slot[name=\"select\"]");
+	}
+	get $slotInput() {
+		return this.shadowRoot.querySelector("slot[name=\"input\"]");
+	}
+	get $slottedSelect() {
+		return this.querySelector("[slot=\"select\"]");
+	}
+	get $slottedInput() {
+		return this.querySelector("[slot=\"input\"]");
+	}
+	get $slottedSelectLabel() {
+		return this.$slottedSelect?.querySelector("[slot=\"label\"]");
+	}
+	get $slottedInputLabel() {
+		return this.$slottedInput?.querySelector("[slot=\"label\"]");
+	}
+	get state() {
+		return this.getAttribute("state") || "";
+	}
+	set state(e) {
+		super._updateAttribute("state", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		super._updateAttribute("inverted", e);
+	}
+};
+customElements.get("px-phone-number") || customElements.define("px-phone-number", i);
+//#endregion
+export { i as PhoneNumber };

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@proximus/lavender-phone-number",
+  "version": "1.4.15-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"
+}