@proximus/lavender-autocomplete 2.0.0-alpha.130 → 2.0.0-alpha.132
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 -15
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -465,15 +465,15 @@ let Z = J;
|
|
|
465
465
|
customElements.get("px-fileupload") || customElements.define("px-fileupload", Z);
|
|
466
466
|
const he = new CSSStyleSheet();
|
|
467
467
|
he.replaceSync(Ie);
|
|
468
|
-
var A,
|
|
468
|
+
var A, z, b, be, $, L;
|
|
469
469
|
const Q = class Q extends S {
|
|
470
470
|
constructor() {
|
|
471
471
|
var t;
|
|
472
472
|
super(he);
|
|
473
473
|
l(this, b);
|
|
474
474
|
l(this, A);
|
|
475
|
-
l(this, $);
|
|
476
475
|
l(this, z);
|
|
476
|
+
l(this, $);
|
|
477
477
|
g(this, A, Math.random().toString(36).substring(2, 15)), this.template = () => `
|
|
478
478
|
<px-dropdown anchoralignment="bottom-left" manual-toggle>
|
|
479
479
|
<px-input slot="trigger" auto-complete>
|
|
@@ -484,7 +484,7 @@ const Q = class Q extends S {
|
|
|
484
484
|
<div class="dropdown-content" slot="popover" role="listbox">
|
|
485
485
|
<slot name="dropdown-content"></slot>
|
|
486
486
|
</div>
|
|
487
|
-
</px-dropdown>`, g(this,
|
|
487
|
+
</px-dropdown>`, g(this, z, (i) => {
|
|
488
488
|
if (i.key !== "ArrowDown" && i.key !== "ArrowUp" || this.$input.$el.getAttribute("aria-expanded") !== "true")
|
|
489
489
|
return;
|
|
490
490
|
const r = a(this, b, be);
|
|
@@ -496,7 +496,7 @@ const Q = class Q extends S {
|
|
|
496
496
|
);
|
|
497
497
|
let n;
|
|
498
498
|
i.key === "ArrowDown" ? n = o < r.length - 1 ? o + 1 : 0 : n = o > 0 ? o - 1 : r.length - 1, r[n].focus();
|
|
499
|
-
}), g(this,
|
|
499
|
+
}), g(this, $, () => {
|
|
500
500
|
var i;
|
|
501
501
|
this.$input.value ? (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${(i = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : i.offsetWidth}px`, this.$dropDown.showPopover()) : (this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.focus()), u(this, b, L).call(this);
|
|
502
502
|
}), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
@@ -536,12 +536,12 @@ const Q = class Q extends S {
|
|
|
536
536
|
}
|
|
537
537
|
connectedCallback() {
|
|
538
538
|
var i, r;
|
|
539
|
-
this.$input.addEventListener("input", a(this,
|
|
539
|
+
this.$input.addEventListener("input", a(this, $)), this.addEventListener("keydown", a(this, z)), this.$dropDownContent.style.width = `${(i = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : i.offsetWidth}px`, this.$input.$el.setAttribute("role", "combobox"), this.$input.$el.setAttribute("autocomplete", "off"), this.$input.$el.setAttribute("aria-autocomplete", "both"), this.$input.$el.setAttribute("aria-expanded", "false"), this.$input.$el.setAttribute("aria-controls", a(this, A)), this.$dropDownContent.setAttribute("id", a(this, A)), this.$dropDownContent.setAttribute("role", "listbox");
|
|
540
540
|
const t = (r = this.$label) == null ? void 0 : r.getAttribute("id");
|
|
541
541
|
t && this.$dropDownContent.setAttribute("aria-labelledby", t), this.setDefaultPopoverHeight();
|
|
542
542
|
}
|
|
543
543
|
disconnectedCallback() {
|
|
544
|
-
this.$input.removeEventListener("input", a(this,
|
|
544
|
+
this.$input.removeEventListener("input", a(this, $)), this.removeEventListener("keydown", a(this, z));
|
|
545
545
|
}
|
|
546
546
|
setDefaultPopoverHeight() {
|
|
547
547
|
this.popoverHeight || (this.popoverHeight = "16.5rem");
|
|
@@ -580,13 +580,13 @@ const Q = class Q extends S {
|
|
|
580
580
|
t ? this.setAttribute("popover-height", t) : this.removeAttribute("popover-height");
|
|
581
581
|
}
|
|
582
582
|
};
|
|
583
|
-
A = new WeakMap(),
|
|
583
|
+
A = new WeakMap(), z = new WeakMap(), b = new WeakSet(), be = function() {
|
|
584
584
|
return Array.from(
|
|
585
585
|
this.querySelectorAll(
|
|
586
586
|
"px-autocomplete-option:not([disabled])"
|
|
587
587
|
)
|
|
588
588
|
);
|
|
589
|
-
},
|
|
589
|
+
}, $ = new WeakMap(), L = function() {
|
|
590
590
|
var t;
|
|
591
591
|
if (this.name) {
|
|
592
592
|
const i = new FormData();
|
|
@@ -2145,7 +2145,7 @@ class ct extends S {
|
|
|
2145
2145
|
}
|
|
2146
2146
|
}
|
|
2147
2147
|
customElements.get("px-page") === void 0 && customElements.define("px-page", ct);
|
|
2148
|
-
const lt = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", pt = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-
|
|
2148
|
+
const lt = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", pt = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (min-width: 64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (min-width: 90.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", me = new CSSStyleSheet(), ye = new CSSStyleSheet();
|
|
2149
2149
|
me.replaceSync(lt);
|
|
2150
2150
|
ye.replaceSync(pt);
|
|
2151
2151
|
const ee = class ee extends ne {
|
|
@@ -2259,14 +2259,14 @@ H = new WeakSet(), Ae = function() {
|
|
|
2259
2259
|
((t = this.parentElement) == null ? void 0 : t.localName) === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
|
|
2260
2260
|
};
|
|
2261
2261
|
customElements.get("px-autocomplete-header") || customElements.define("px-autocomplete-header", dt);
|
|
2262
|
-
const
|
|
2263
|
-
|
|
2264
|
-
var M,
|
|
2262
|
+
const ze = new CSSStyleSheet();
|
|
2263
|
+
ze.replaceSync(ke);
|
|
2264
|
+
var M, $e;
|
|
2265
2265
|
class ut extends HTMLElement {
|
|
2266
2266
|
constructor() {
|
|
2267
2267
|
super();
|
|
2268
2268
|
l(this, M);
|
|
2269
|
-
this.template = () => '<px-container tabindex="-1" padding="none" background-color="none"><button type="button" role="option"><px-span size="body-s"><slot></slot></px-span></button></px-container>', this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
2269
|
+
this.template = () => '<px-container tabindex="-1" padding="none" background-color="none"><button type="button" role="option"><px-span size="body-s"><slot></slot></px-span></button></px-container>', this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [ze];
|
|
2270
2270
|
}
|
|
2271
2271
|
static get observedAttributes() {
|
|
2272
2272
|
return ["selected", "type"];
|
|
@@ -2281,7 +2281,7 @@ class ut extends HTMLElement {
|
|
|
2281
2281
|
}
|
|
2282
2282
|
}
|
|
2283
2283
|
connectedCallback() {
|
|
2284
|
-
u(this, M,
|
|
2284
|
+
u(this, M, $e).call(this), this.$button.setAttribute(
|
|
2285
2285
|
"aria-selected",
|
|
2286
2286
|
String(this.hasAttribute("selected"))
|
|
2287
2287
|
), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
|
|
@@ -2306,7 +2306,7 @@ class ut extends HTMLElement {
|
|
|
2306
2306
|
return this.shadowRoot.querySelector("button");
|
|
2307
2307
|
}
|
|
2308
2308
|
}
|
|
2309
|
-
M = new WeakSet(),
|
|
2309
|
+
M = new WeakSet(), $e = function() {
|
|
2310
2310
|
var t;
|
|
2311
2311
|
((t = this.parentElement) == null ? void 0 : t.localName) === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
|
|
2312
2312
|
};
|