@proximus/lavender-phone-number 1.4.14-beta.3

package/dist/PhoneNumber.d.ts

@@ -0,0 +1,30 @@
+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 fieldStateObserver?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    setupErrorState(): void;
+    projectSlot(field: HTMLElement, slotName: 'helper' | 'status-text', source: Element | null): void;
+    applyHiddenLabel(): 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,99 @@
+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.shadowRoot.innerHTML = this.template();
+	}
+	connectedCallback() {
+		this.$slotSelect?.addEventListener("slotchange", () => this.setupErrorState()), this.$slotInput?.addEventListener("slotchange", () => this.setupErrorState()), this.$slotHelper?.addEventListener("slotchange", () => this.setupErrorState()), this.fieldStateObserver = new MutationObserver(() => this.setupErrorState()), this.fieldStateObserver.observe(this, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["state"]
+		}), this.setupErrorState();
+	}
+	disconnectedCallback() {
+		this.fieldStateObserver?.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() {
+		this.applyHiddenLabel();
+		let e = this.$slotStateText?.assignedElements()[0] ?? null, n = this.state === "error" && !!e;
+		this.state === "error" && !e && t("<px-fieldset> with state=\"error\" requires a slot=\"error-text\" containing the error description."), n ? this.$fieldset.setAttribute("state", "error") : this.$fieldset.removeAttribute("state"), [this.$slottedSelect, this.$slottedInput].forEach((t) => {
+			if (!t) return;
+			this.projectSlot(t, "helper", this.$slottedHelper);
+			let r = n && t.getAttribute("state") === "error";
+			this.projectSlot(t, "status-text", r ? e : null);
+		});
+	}
+	projectSlot(e, t, n) {
+		let r = `data-px-projected-${t}`;
+		if (e.querySelector(`[${r}]`)?.remove(), !n) return;
+		let i = n.cloneNode(!0);
+		i.setAttribute("slot", t), i.setAttribute("shown--sr", ""), i.setAttribute(r, ""), e.appendChild(i);
+	}
+	applyHiddenLabel() {
+		this.$slottedSelect?.setAttribute("hidden-label", ""), this.$slottedInput?.setAttribute("hidden-label", ""), this.$slottedSelectLabel?.setAttribute("shown--sr", ""), this.$slottedInputLabel?.setAttribute("shown--sr", "");
+	}
+	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.14-beta.3",
+  "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"
+}