@proximus/lavender-autocomplete 2.0.0-alpha.181 → 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.
- package/dist/index.es.js +15 -10
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -176,7 +176,7 @@ var E = class extends t {
|
|
|
176
176
|
</div>
|
|
177
177
|
${this.template()}
|
|
178
178
|
</div>
|
|
179
|
-
`, this.shadowRoot.innerHTML = this.containerTemplate(), this.internals = this.attachInternals?.();
|
|
179
|
+
`, 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?.();
|
|
180
180
|
}
|
|
181
181
|
static get observedAttributes() {
|
|
182
182
|
return [
|
|
@@ -194,7 +194,7 @@ var E = class extends t {
|
|
|
194
194
|
e === "aria-describedby" && t !== n ? v(this, this.$el, !1) : e === "state" && t !== n ? this.stateChangeCallback(t, n) : (e === "extended" || e === "extended--mobile" || e === "extended--tablet" || e === "extended--laptop" || e === "extended--desktop") && t !== n ? this.$el.classList.toggle(e) : super.attributeChangedCallback(e, t, n);
|
|
195
195
|
}
|
|
196
196
|
stateChangeCallback(e, t) {
|
|
197
|
-
this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.
|
|
197
|
+
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");
|
|
198
198
|
}
|
|
199
199
|
formData() {
|
|
200
200
|
let e = new FormData(), t = this.getAttribute("name");
|
|
@@ -208,7 +208,10 @@ var E = class extends t {
|
|
|
208
208
|
composed: !0
|
|
209
209
|
}));
|
|
210
210
|
});
|
|
211
|
-
}), this.setupForId(), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
|
|
211
|
+
}), 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);
|
|
212
|
+
}
|
|
213
|
+
disconnectedCallback() {
|
|
214
|
+
this.$helperSlot.removeEventListener("slotchange", this.onHelperSlotChange), this.$statusTextSlot.removeEventListener("slotchange", this.onStatusTextSlotChange);
|
|
212
215
|
}
|
|
213
216
|
static get formAssociated() {
|
|
214
217
|
return !0;
|
|
@@ -224,11 +227,12 @@ var E = class extends t {
|
|
|
224
227
|
this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
|
|
225
228
|
}
|
|
226
229
|
setupAriaDescribedBy(e, t, n) {
|
|
227
|
-
if (
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
230
|
+
if (!this.$el?.hasAttribute("id")) return;
|
|
231
|
+
let r = `${this.$el.id}-${n}`, i = (this.$el.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== r);
|
|
232
|
+
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");
|
|
233
|
+
}
|
|
234
|
+
ariaDescribedByRank(e) {
|
|
235
|
+
return e.endsWith("-status-text") ? 0 : e.endsWith("-helper") ? 1 : 2;
|
|
232
236
|
}
|
|
233
237
|
get state() {
|
|
234
238
|
return this.getAttribute("state");
|
|
@@ -313,7 +317,7 @@ var E = class extends t {
|
|
|
313
317
|
}
|
|
314
318
|
}
|
|
315
319
|
disconnectedCallback() {
|
|
316
|
-
this.observer?.disconnect();
|
|
320
|
+
super.disconnectedCallback(), this.observer?.disconnect();
|
|
317
321
|
}
|
|
318
322
|
template() {
|
|
319
323
|
return "<div><input type=\"text\" /></div>";
|
|
@@ -354,6 +358,7 @@ var le = class extends E {
|
|
|
354
358
|
}
|
|
355
359
|
constructor() {
|
|
356
360
|
super(), this.observer = null, this.#e = () => {
|
|
361
|
+
if (!this.$el) return;
|
|
357
362
|
let e = Array.from(this.children).filter((e) => {
|
|
358
363
|
let t = e.tagName.toLowerCase();
|
|
359
364
|
return t === "option" || t === "optgroup";
|
|
@@ -372,7 +377,7 @@ var le = class extends E {
|
|
|
372
377
|
}
|
|
373
378
|
#e;
|
|
374
379
|
disconnectedCallback() {
|
|
375
|
-
this.observer?.disconnect();
|
|
380
|
+
super.disconnectedCallback(), this.observer?.disconnect();
|
|
376
381
|
}
|
|
377
382
|
};
|
|
378
383
|
customElements.get("px-select") || customElements.define("px-select", le);
|