@odx/foundation 1.0.0-beta.87 → 1.0.0-beta.89
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.
|
@@ -13,6 +13,7 @@ export declare class OdxSelect extends ListboxFormControl<OptionControl> {
|
|
|
13
13
|
protected readonly dropdown: OdxDropdown;
|
|
14
14
|
maxVisibleSelectedOptions: number;
|
|
15
15
|
constructor();
|
|
16
|
+
connectedCallback(): void;
|
|
16
17
|
firstUpdated(props: PropertyValues<this>): void;
|
|
17
18
|
isDropdownOpen(): boolean;
|
|
18
19
|
showDropdown(): void;
|
package/dist/components.js
CHANGED
|
@@ -103,7 +103,7 @@ __decorateClass([
|
|
|
103
103
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
104
104
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
105
105
|
|
|
106
|
-
const styles$1d = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-
|
|
106
|
+
const styles$1d = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-12) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-typography-font-size-5);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);[part~=base]{outline-offset:0}}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
107
107
|
|
|
108
108
|
const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
|
|
109
109
|
const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
@@ -1170,10 +1170,11 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
|
1170
1170
|
}
|
|
1171
1171
|
}
|
|
1172
1172
|
#updateAriaAttributes(referenceElement, id) {
|
|
1173
|
+
const ariaAttribute = this.role === "listbox" ? "aria-controls" : "aria-describedby";
|
|
1173
1174
|
if (id) {
|
|
1174
|
-
referenceElement.setAttribute(
|
|
1175
|
+
referenceElement.setAttribute(ariaAttribute, id);
|
|
1175
1176
|
} else {
|
|
1176
|
-
referenceElement.removeAttribute(
|
|
1177
|
+
referenceElement.removeAttribute(ariaAttribute);
|
|
1177
1178
|
}
|
|
1178
1179
|
}
|
|
1179
1180
|
#handleClick;
|
|
@@ -1916,7 +1917,7 @@ __decorateClass([
|
|
|
1916
1917
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1917
1918
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1918
1919
|
|
|
1919
|
-
const styles$M = ":host{--_stroke-color: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:
|
|
1920
|
+
const styles$M = ":host{--_stroke-color: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_stroke-color);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--_icon-size: var(--odx-typography-font-size-5);--_icon-margin: 0;--odx-color-background-disabled-rest: transparent}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([clearable],[type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-size-px)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]:not([readonly])){--_stroke-color: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_stroke-color: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part=input]{cursor:default}}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
|
|
1920
1921
|
|
|
1921
1922
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1922
1923
|
constructor() {
|
|
@@ -1989,14 +1990,14 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
1989
1990
|
@search=${forwardEvent(this)}
|
|
1990
1991
|
/>
|
|
1991
1992
|
${when(
|
|
1992
|
-
isNumberInput,
|
|
1993
|
+
!this.readonly && isNumberInput,
|
|
1993
1994
|
() => html`
|
|
1994
1995
|
<odx-button-group>
|
|
1995
1996
|
${this.renderControl("decrement", "core::minus", () => this.stepDown(), this.disabled || !canStepDown)}
|
|
1996
1997
|
${this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp)}
|
|
1997
1998
|
</odx-button-group>
|
|
1998
1999
|
`,
|
|
1999
|
-
() => when(this.clearable, () => this.renderControl("clear", "core::
|
|
2000
|
+
() => when(!(this.disabled || this.readonly) && this.clearable, () => this.renderControl("clear", "core::cancel", () => this.clear(), this.disabled))
|
|
2000
2001
|
)}
|
|
2001
2002
|
<slot name="suffix"></slot>
|
|
2002
2003
|
`;
|
|
@@ -2004,8 +2005,8 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
2004
2005
|
renderControl(type, icon, listener, disabled) {
|
|
2005
2006
|
if (this.hideControls || this.readonly) return nothing;
|
|
2006
2007
|
return html`
|
|
2007
|
-
<odx-icon-button part="control control-${type}" icon=${icon} size="sm" variant="ghost" ?disabled=${disabled}
|
|
2008
|
-
</odx-icon-button
|
|
2008
|
+
<odx-icon-button part="control control-${type}" icon=${icon} size="sm" tabindex="-1" variant="ghost" ?disabled=${disabled} @click=${listener}>
|
|
2009
|
+
</odx-icon-button>
|
|
2009
2010
|
`;
|
|
2010
2011
|
}
|
|
2011
2012
|
#isClearable() {
|
|
@@ -2744,7 +2745,7 @@ __decorateClass([
|
|
|
2744
2745
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
2745
2746
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
2746
2747
|
|
|
2747
|
-
const styles$y = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
|
|
2748
|
+
const styles$y = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{margin-inline-end:auto}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
|
|
2748
2749
|
|
|
2749
2750
|
class OdxOption extends OptionControl {
|
|
2750
2751
|
static {
|
|
@@ -2757,7 +2758,9 @@ class OdxOption extends OptionControl {
|
|
|
2757
2758
|
() => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`,
|
|
2758
2759
|
() => html`<slot name="prefix"></slot>`
|
|
2759
2760
|
)}
|
|
2760
|
-
<
|
|
2761
|
+
<div class="label">
|
|
2762
|
+
<slot></slot>
|
|
2763
|
+
</div>
|
|
2761
2764
|
<slot name="suffix"></slot>
|
|
2762
2765
|
`;
|
|
2763
2766
|
}
|
|
@@ -3223,7 +3226,7 @@ __decorateClass([
|
|
|
3223
3226
|
], _OdxSearchBar.prototype, "readonly", 2);
|
|
3224
3227
|
let OdxSearchBar = _OdxSearchBar;
|
|
3225
3228
|
|
|
3226
|
-
const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-size-
|
|
3229
|
+
const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}}";
|
|
3227
3230
|
|
|
3228
3231
|
const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
3229
3232
|
constructor() {
|
|
@@ -3261,12 +3264,16 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3261
3264
|
static {
|
|
3262
3265
|
customElement("odx-select", styles$o)(_OdxSelect);
|
|
3263
3266
|
}
|
|
3267
|
+
connectedCallback() {
|
|
3268
|
+
super.connectedCallback();
|
|
3269
|
+
this.role = "combobox";
|
|
3270
|
+
}
|
|
3264
3271
|
firstUpdated(props) {
|
|
3265
3272
|
super.firstUpdated(props);
|
|
3266
3273
|
this.dropdown.mountPopover(this.shadowRoot?.querySelector(".base") ?? null);
|
|
3267
3274
|
}
|
|
3268
3275
|
isDropdownOpen() {
|
|
3269
|
-
return this.dropdown
|
|
3276
|
+
return this.dropdown?.isPopoverOpen();
|
|
3270
3277
|
}
|
|
3271
3278
|
showDropdown() {
|
|
3272
3279
|
this.dropdown.showPopover();
|
|
@@ -3277,17 +3284,17 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3277
3284
|
render() {
|
|
3278
3285
|
const allSelected = this.value.length === this.options.length;
|
|
3279
3286
|
return html`
|
|
3280
|
-
<div class="base" tabindex="0">
|
|
3287
|
+
<div class="base" tabindex="0" aria-haspopup="listbox">
|
|
3281
3288
|
<div class="value" odxPreventTextOverflow>
|
|
3282
3289
|
${when(
|
|
3283
3290
|
this.selectedOptions.length,
|
|
3284
3291
|
() => html`${this.selectedOptions.map((option) => option.label).join(", ")}`,
|
|
3285
|
-
() => html`<slot name="placeholder"
|
|
3292
|
+
() => when(!(this.disabled || this.readonly), () => html`<slot name="placeholder">${this.placeholder}</slot>`)
|
|
3286
3293
|
)}
|
|
3287
3294
|
</div>
|
|
3288
3295
|
${when(
|
|
3289
3296
|
this.#isClearable(),
|
|
3290
|
-
() => html`<odx-icon-button icon="core::
|
|
3297
|
+
() => html`<odx-icon-button icon="core::cancel" size="sm" tabindex="-1" variant="ghost" @click=${this.#handleClear}></odx-icon-button>`
|
|
3291
3298
|
)}
|
|
3292
3299
|
<odx-icon class="indicator" name="core::chevron-down"></odx-icon>
|
|
3293
3300
|
</div>
|
|
@@ -3295,7 +3302,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3295
3302
|
${when(
|
|
3296
3303
|
this.multiple,
|
|
3297
3304
|
() => html`
|
|
3298
|
-
<odx-option type="checkbox" @click=${this.#handleToggleAll} ?selected=${allSelected}>Toggle all</odx-option>
|
|
3305
|
+
<odx-option type="checkbox" @click=${this.#handleToggleAll} ?selected=${allSelected} aria-hidden="true">Toggle all</odx-option>
|
|
3299
3306
|
`
|
|
3300
3307
|
)}
|
|
3301
3308
|
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
@@ -3303,7 +3310,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3303
3310
|
`;
|
|
3304
3311
|
}
|
|
3305
3312
|
#isClearable() {
|
|
3306
|
-
return !(this.
|
|
3313
|
+
return !(this.disabled || this.readonly || this.required) && this.selectedOptions.length > 0;
|
|
3307
3314
|
}
|
|
3308
3315
|
#handleSlotChange;
|
|
3309
3316
|
#handleBlur;
|
|
@@ -3734,10 +3741,12 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
|
3734
3741
|
}
|
|
3735
3742
|
willUpdate(props) {
|
|
3736
3743
|
super.willUpdate(props);
|
|
3737
|
-
if (props.has("selectedIndex")
|
|
3744
|
+
if (props.has("selectedIndex")) {
|
|
3738
3745
|
const option = this.options[this.selectedIndex];
|
|
3739
|
-
|
|
3740
|
-
|
|
3746
|
+
if (option) {
|
|
3747
|
+
this.value = option.value;
|
|
3748
|
+
this.emit("change", { detail: { index: this.selectedIndex, option } });
|
|
3749
|
+
}
|
|
3741
3750
|
}
|
|
3742
3751
|
}
|
|
3743
3752
|
updated(props) {
|
|
@@ -8,6 +8,7 @@ export declare abstract class ListboxFormControl<Option extends OptionControl> e
|
|
|
8
8
|
protected abstract options: Option[];
|
|
9
9
|
autoSelect: boolean;
|
|
10
10
|
multiple: boolean;
|
|
11
|
+
placeholder: string;
|
|
11
12
|
value: string[] | string;
|
|
12
13
|
get selectedOptions(): Option[];
|
|
13
14
|
get selectedIndices(): number[];
|
package/dist/main.js
CHANGED
|
@@ -409,7 +409,6 @@ class ActiveDescendantsController {
|
|
|
409
409
|
}
|
|
410
410
|
deactivate() {
|
|
411
411
|
this.#host.removeEventListener("keydown", this.#handleKeyboardEvent);
|
|
412
|
-
this.#host.removeAttribute("aria-activedescendant");
|
|
413
412
|
this.update();
|
|
414
413
|
}
|
|
415
414
|
previous() {
|
|
@@ -500,7 +499,7 @@ class OptionControl extends CanBeDisabled(CustomElement) {
|
|
|
500
499
|
willUpdate(props) {
|
|
501
500
|
super.willUpdate(props);
|
|
502
501
|
if (props.has("selected")) {
|
|
503
|
-
this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
|
|
502
|
+
this.ariaSelected = this.canSelect() ? toAriaBooleanAttribute(this.selected, false) : null;
|
|
504
503
|
}
|
|
505
504
|
}
|
|
506
505
|
}
|
|
@@ -530,6 +529,7 @@ class ListboxFormControl extends FormControl {
|
|
|
530
529
|
});
|
|
531
530
|
this.autoSelect = false;
|
|
532
531
|
this.multiple = false;
|
|
532
|
+
this.placeholder = "";
|
|
533
533
|
this.value = "";
|
|
534
534
|
this.#handleBlur = (_event) => {
|
|
535
535
|
this.activeDescendants.deactivate();
|
|
@@ -653,6 +653,9 @@ __decorateClass([
|
|
|
653
653
|
__decorateClass([
|
|
654
654
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
655
655
|
], ListboxFormControl.prototype, "multiple", 2);
|
|
656
|
+
__decorateClass([
|
|
657
|
+
property()
|
|
658
|
+
], ListboxFormControl.prototype, "placeholder", 2);
|
|
656
659
|
__decorateClass([
|
|
657
660
|
property()
|
|
658
661
|
], ListboxFormControl.prototype, "value", 2);
|
|
@@ -784,29 +787,6 @@ __decorateClass([
|
|
|
784
787
|
property()
|
|
785
788
|
], RadioGroupFormControl.prototype, "value", 2);
|
|
786
789
|
|
|
787
|
-
const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
|
|
788
|
-
const IsDraggable = (superClass) => {
|
|
789
|
-
class IsDraggableElement extends superClass {
|
|
790
|
-
constructor() {
|
|
791
|
-
super(...arguments);
|
|
792
|
-
this.dragDisabled = false;
|
|
793
|
-
}
|
|
794
|
-
get isDragActive() {
|
|
795
|
-
return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
|
|
796
|
-
}
|
|
797
|
-
dragStart() {
|
|
798
|
-
this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
|
|
799
|
-
}
|
|
800
|
-
afterDragEnd() {
|
|
801
|
-
this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
__decorateClass([
|
|
805
|
-
property({ type: Boolean })
|
|
806
|
-
], IsDraggableElement.prototype, "dragDisabled", 2);
|
|
807
|
-
return IsDraggableElement;
|
|
808
|
-
};
|
|
809
|
-
|
|
810
790
|
const DragControllerOptions = (config) => ({
|
|
811
791
|
getDraggableElements: () => [],
|
|
812
792
|
...config
|
|
@@ -1081,6 +1061,29 @@ const CanBeExpanded = (superClass) => {
|
|
|
1081
1061
|
return CanBeExpandedMixin;
|
|
1082
1062
|
};
|
|
1083
1063
|
|
|
1064
|
+
const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
|
|
1065
|
+
const IsDraggable = (superClass) => {
|
|
1066
|
+
class IsDraggableElement extends superClass {
|
|
1067
|
+
constructor() {
|
|
1068
|
+
super(...arguments);
|
|
1069
|
+
this.dragDisabled = false;
|
|
1070
|
+
}
|
|
1071
|
+
get isDragActive() {
|
|
1072
|
+
return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
|
|
1073
|
+
}
|
|
1074
|
+
dragStart() {
|
|
1075
|
+
this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
|
|
1076
|
+
}
|
|
1077
|
+
afterDragEnd() {
|
|
1078
|
+
this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
__decorateClass([
|
|
1082
|
+
property({ type: Boolean })
|
|
1083
|
+
], IsDraggableElement.prototype, "dragDisabled", 2);
|
|
1084
|
+
return IsDraggableElement;
|
|
1085
|
+
};
|
|
1086
|
+
|
|
1084
1087
|
const Placement = {
|
|
1085
1088
|
TOP: "top",
|
|
1086
1089
|
TOP_START: "top-start",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"description": "A library of Web Component building blocks for ODX",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.89",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"stylelint-config-standard": "38.0.0",
|
|
40
40
|
"ts-lit-plugin": "2.0.2",
|
|
41
41
|
"vite": "6.3.5",
|
|
42
|
-
"vite-plugin-dts": "4.5.
|
|
42
|
+
"vite-plugin-dts": "4.5.4",
|
|
43
43
|
"@odx/storybook-utils": "0.0.0",
|
|
44
44
|
"@odx/typescript-config": "0.0.0"
|
|
45
45
|
},
|