@proximus/lavender-input 2.0.0-alpha.182 → 2.0.0-alpha.183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/AbstractInput.d.ts +4 -0
  2. package/dist/codeInput.d.ts +17 -0
  3. package/dist/index.es.js +15 -10
  4. package/package.json +1 -1
package/dist/AbstractInput.d.ts CHANGED
@@ -13,11 +13,15 @@ export declare abstract class AbstractInputElement<INPUT_ELEMENT extends HTMLInp
13
13
  stateChangeCallback(oldValue: InputState, newValue: InputState): void;
14
14
  formData(): FormData;
15
15
  connectedCallback(): void;
16
+ disconnectedCallback(): void;
17
+ private onHelperSlotChange;
18
+ private onStatusTextSlotChange;
16
19
  static get formAssociated(): boolean;
17
20
  formResetCallback(): void;
18
21
  formStateRestoreCallback(state: string): void;
19
22
  setupForId(): void;
20
23
  setupAriaDescribedBy(slotElements: NodeListOf<Element>, targetElement: Element, descriptor: string): void;
24
+ private ariaDescribedByRank;
21
25
  get state(): InputState;
22
26
  set state(value: InputState);
23
27
  get extended(): boolean;
package/dist/codeInput.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { AbstractInputElement } from './AbstractInput.ts';
2
+ export declare class CodeInput extends AbstractInputElement<HTMLInputElement> {
3
+ static styles: CSSStyleSheet;
4
+ static nativeName: string;
5
+ template(): string;
6
+ constructor();
7
+ connectedCallback(): void;
8
+ disconnectedCallback(): void;
9
+ static get observedAttributes(): string[];
10
+ attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
11
+ setupSize(): void;
12
+ private focusBoxAt;
13
+ private renderBoxes;
14
+ get $input(): HTMLInputElement | null;
15
+ get $container(): Element | null;
16
+ get $boxesContainer(): HTMLElement | null;
17
+ }
package/dist/index.es.js CHANGED
@@ -13,7 +13,7 @@ var i = class extends e {
13
13
  </div>
14
14
  ${this.template()}
15
15
  </div>
16
- `, this.shadowRoot.innerHTML = this.containerTemplate(), this.internals = this.attachInternals?.();
16
+ `, this.onHelperSlotChange = () => this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.onStatusTextSlotChange = () => this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), this.shadowRoot.innerHTML = this.containerTemplate(), this.internals = this.attachInternals?.();
17
17
  }
18
18
  static get observedAttributes() {
19
19
  return [
@@ -31,7 +31,7 @@ var i = class extends e {
31
31
  e === "aria-describedby" && n !== r ? t(this, this.$el, !1) : e === "state" && n !== r ? this.stateChangeCallback(n, r) : (e === "extended" || e === "extended--mobile" || e === "extended--tablet" || e === "extended--laptop" || e === "extended--desktop") && n !== r ? this.$el.classList.toggle(e) : super.attributeChangedCallback(e, n, r);
32
32
  }
33
33
  stateChangeCallback(e, t) {
34
- this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.ariaInvalid = "true", this.internals && (this.internals.ariaInvalid = "true"), this.$statusTextSlot.classList.remove("success")) : t === "success" ? (this.$statusTextSlot.classList.remove("error"), this.$statusTextSlot.classList.toggle("success")) : (this.$el.removeAttribute("aria-invalid"), this.internals && (this.internals.ariaInvalid = null), this.$statusTextSlot.classList.remove("error", "success"), this.$labelSlot.classList.remove("error", "success"), this.$el.style.backgroundImage = ""), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
34
+ this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.setAttribute("aria-invalid", "true"), this.internals && (this.internals.ariaInvalid = "true"), this.$statusTextSlot.classList.remove("success")) : t === "success" ? (this.$statusTextSlot.classList.remove("error"), this.$statusTextSlot.classList.toggle("success")) : (this.$el.removeAttribute("aria-invalid"), this.internals && (this.internals.ariaInvalid = null), this.$statusTextSlot.classList.remove("error", "success"), this.$labelSlot.classList.remove("error", "success"), this.$el.style.backgroundImage = ""), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
35
35
  }
36
36
  formData() {
37
37
  let e = new FormData(), t = this.getAttribute("name");
@@ -45,7 +45,10 @@ var i = class extends e {
45
45
  composed: !0
46
46
  }));
47
47
  });
48
- }), this.setupForId(), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
48
+ }), this.setupForId(), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), this.$helperSlot.addEventListener("slotchange", this.onHelperSlotChange), this.$statusTextSlot.addEventListener("slotchange", this.onStatusTextSlotChange);
49
+ }
50
+ disconnectedCallback() {
51
+ this.$helperSlot.removeEventListener("slotchange", this.onHelperSlotChange), this.$statusTextSlot.removeEventListener("slotchange", this.onStatusTextSlotChange);
49
52
  }
50
53
  static get formAssociated() {
51
54
  return !0;
@@ -61,11 +64,12 @@ var i = class extends e {
61
64
  this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
62
65
  }
63
66
  setupAriaDescribedBy(e, t, n) {
64
- if (e.length > 0 && this.$el.hasAttribute("id")) {
65
- t.setAttribute("id", `${this.$el.id}-${n}`);
66
- let e = this.$el.getAttribute("aria-describedby");
67
- e ? e += ` ${this.$el.id}-${n}` : e = `${this.$el.id}-${n}`, this.$el.setAttribute("aria-describedby", e);
68
- }
67
+ if (!this.$el?.hasAttribute("id")) return;
68
+ let r = `${this.$el.id}-${n}`, i = (this.$el.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== r);
69
+ e.length > 0 && (t.setAttribute("id", r), i.push(r)), i.sort((e, t) => this.ariaDescribedByRank(e) - this.ariaDescribedByRank(t)), i.length > 0 ? this.$el.setAttribute("aria-describedby", i.join(" ")) : this.$el.removeAttribute("aria-describedby");
70
+ }
71
+ ariaDescribedByRank(e) {
72
+ return e.endsWith("-status-text") ? 0 : e.endsWith("-helper") ? 1 : 2;
69
73
  }
70
74
  get state() {
71
75
  return this.getAttribute("state");
@@ -150,7 +154,7 @@ var i = class extends e {
150
154
  }
151
155
  }
152
156
  disconnectedCallback() {
153
- this.observer?.disconnect();
157
+ super.disconnectedCallback(), this.observer?.disconnect();
154
158
  }
155
159
  template() {
156
160
  return "<div><input type=\"text\" /></div>";
@@ -191,6 +195,7 @@ var s = class extends i {
191
195
  }
192
196
  constructor() {
193
197
  super(), this.observer = null, this.#e = () => {
198
+ if (!this.$el) return;
194
199
  let e = Array.from(this.children).filter((e) => {
195
200
  let t = e.tagName.toLowerCase();
196
201
  return t === "option" || t === "optgroup";
@@ -209,7 +214,7 @@ var s = class extends i {
209
214
  }
210
215
  #e;
211
216
  disconnectedCallback() {
212
- this.observer?.disconnect();
217
+ super.disconnectedCallback(), this.observer?.disconnect();
213
218
  }
214
219
  };
215
220
  customElements.get("px-select") || customElements.define("px-select", s);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-input",
3
- "version": "2.0.0-alpha.182",
3
+ "version": "2.0.0-alpha.183",
4
4
  "description": "Input component for the Proximus Design System",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",