@odx/foundation 1.0.0-beta.13 → 1.0.0-beta.15
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/cdk/control/listbox-form-control.d.ts +1 -1
- package/dist/cdk.js +8 -6
- package/dist/components/accordion/accordion.d.ts +4 -0
- package/dist/components/button/button.d.ts +1 -3
- package/dist/components/button/button.models.d.ts +1 -0
- package/dist/components/input/input.d.ts +3 -0
- package/dist/components/select/select.d.ts +3 -0
- package/dist/components.js +164 -113
- package/dist/lib/controllers/expandable-controller.d.ts +0 -1
- package/dist/lib/main.d.ts +1 -1
- package/dist/lib/mixins/can-be-expanded.d.ts +0 -2
- package/dist/lib/mixins/can-be-selected.d.ts +1 -1
- package/dist/lib/{utils → types}/a11y.d.ts +0 -5
- package/dist/lib/utils/dom.d.ts +0 -2
- package/dist/lib/utils/lit.d.ts +1 -2
- package/dist/main.js +5 -11
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/dist/components.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CanBeExpanded, CustomElement, fromToggleEventState, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, ExpandableItemManager, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent,
|
|
1
|
+
import { CanBeExpanded, CustomElement, fromToggleEventState, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, ExpandableItemManager, CanBeDisabled, SharedResizeObserver, optionalAttr, createIntersectionObserver, createMutationObserver, getElementFromEvent, optionalSlot, toggleAttribute, getKeyboardEventInfo, queryAssignedElement, parseDate, searchTextContent, waitForAnimations, FormControl, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, toPx, getAssignedElements, emptySlotFallbackFix, NumberControl } from '@odx/foundation';
|
|
2
2
|
import { html, isServer, css, nothing } from 'lit';
|
|
3
3
|
import { property, queryAssignedElements, query, queryAll, state } from 'lit/decorators.js';
|
|
4
4
|
import { signal, computed, effect, SignalWatcher } from '@lit-labs/preact-signals';
|
|
@@ -10,7 +10,7 @@ import { R as RovingTabindexController, r as round, d as debounce } from './vend
|
|
|
10
10
|
import { createContext, consume, provide } from '@lit/context';
|
|
11
11
|
import { classMap } from 'lit/directives/class-map.js';
|
|
12
12
|
|
|
13
|
-
const styles$
|
|
13
|
+
const styles$1b = "@layer base{:host{display:block;odx-list-item{margin-block:var(--odx-size-37)}odx-list-item::part(separator){display:none}}}";
|
|
14
14
|
|
|
15
15
|
var __defProp$1m = Object.defineProperty;
|
|
16
16
|
var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
|
|
@@ -28,7 +28,7 @@ var __decorateClass$1m = (decorators, target, key, kind) => {
|
|
|
28
28
|
var __accessCheck$w = (obj, member, msg) => member.has(obj) || __typeError$w("Cannot " + msg);
|
|
29
29
|
var __privateGet$r = (obj, member, getter) => (__accessCheck$w(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
30
30
|
var __privateAdd$w = (obj, member, value) => member.has(obj) ? __typeError$w("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
31
|
-
var __privateMethod$
|
|
31
|
+
var __privateMethod$j = (obj, member, method) => (__accessCheck$w(obj, member, "access private method"), method);
|
|
32
32
|
var _handleToggle$1, _OdxAccordionHeader_instances, updateAriaAttributes_fn$3;
|
|
33
33
|
let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
|
|
34
34
|
constructor() {
|
|
@@ -48,7 +48,7 @@ let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
|
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
50
|
return html`
|
|
51
|
-
<odx-list-item part="base" compact ?disabled=${this.disabled} ?expanded=${this.expanded} @toggle=${__privateGet$r(this, _handleToggle$1)} with-expand-indicator role="presentation">
|
|
51
|
+
<odx-list-item part="base" exportparts="expand-control" compact ?disabled=${this.disabled} ?expanded=${this.expanded} @toggle=${__privateGet$r(this, _handleToggle$1)} with-expand-indicator role="presentation">
|
|
52
52
|
<slot name="prefix" slot="prefix"></slot>
|
|
53
53
|
<odx-text class="content" ?emphasized=${this.expanded}>
|
|
54
54
|
<slot></slot>
|
|
@@ -60,7 +60,7 @@ let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
|
|
|
60
60
|
updated(props) {
|
|
61
61
|
super.updated?.(props);
|
|
62
62
|
if (props.has("disabled") || props.has("expanded")) {
|
|
63
|
-
__privateMethod$
|
|
63
|
+
__privateMethod$j(this, _OdxAccordionHeader_instances, updateAriaAttributes_fn$3).call(this);
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
};
|
|
@@ -74,10 +74,10 @@ updateAriaAttributes_fn$3 = function() {
|
|
|
74
74
|
this.panel.setAttribute("aria-labelledby", this.id);
|
|
75
75
|
};
|
|
76
76
|
OdxAccordionHeader = __decorateClass$1m([
|
|
77
|
-
customElement("odx-accordion-header", [styles$
|
|
77
|
+
customElement("odx-accordion-header", [styles$1b])
|
|
78
78
|
], OdxAccordionHeader);
|
|
79
79
|
|
|
80
|
-
const styles$
|
|
80
|
+
const styles$1a = "@layer base{:host{display:block}odx-separator{--margin-block: 0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
|
|
81
81
|
|
|
82
82
|
var __defProp$1l = Object.defineProperty;
|
|
83
83
|
var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
|
|
@@ -115,10 +115,10 @@ __decorateClass$1l([
|
|
|
115
115
|
], OdxAccordionPanel.prototype, "hidden", 2);
|
|
116
116
|
OdxAccordionPanel = __decorateClass$1l([
|
|
117
117
|
requestUpdateOnAriaChange(["ariaHidden"]),
|
|
118
|
-
customElement("odx-accordion-panel", [styles$
|
|
118
|
+
customElement("odx-accordion-panel", [styles$1a])
|
|
119
119
|
], OdxAccordionPanel);
|
|
120
120
|
|
|
121
|
-
const styles$
|
|
121
|
+
const styles$19 = ":host{display:block}";
|
|
122
122
|
|
|
123
123
|
var __defProp$1k = Object.defineProperty;
|
|
124
124
|
var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
|
|
@@ -134,17 +134,28 @@ let OdxAccordion = class extends CustomElement {
|
|
|
134
134
|
constructor() {
|
|
135
135
|
super();
|
|
136
136
|
this.multiple = false;
|
|
137
|
-
new ExpandableItemManager(this, { getItems: () =>
|
|
137
|
+
new ExpandableItemManager(this, { getItems: () => this.items });
|
|
138
|
+
}
|
|
139
|
+
toggleAll(force, emitEvent = false) {
|
|
140
|
+
for (const item of this.items) {
|
|
141
|
+
item.toggle(force, emitEvent);
|
|
142
|
+
}
|
|
138
143
|
}
|
|
139
144
|
};
|
|
145
|
+
__decorateClass$1k([
|
|
146
|
+
queryAssignedElements({ selector: OdxAccordionHeader.selector, flatten: true })
|
|
147
|
+
], OdxAccordion.prototype, "items", 2);
|
|
148
|
+
__decorateClass$1k([
|
|
149
|
+
property({ reflect: true, attribute: "control-position" })
|
|
150
|
+
], OdxAccordion.prototype, "controlPosition", 2);
|
|
140
151
|
__decorateClass$1k([
|
|
141
152
|
property({ type: Boolean })
|
|
142
153
|
], OdxAccordion.prototype, "multiple", 2);
|
|
143
154
|
OdxAccordion = __decorateClass$1k([
|
|
144
|
-
customElement("odx-accordion", [styles$
|
|
155
|
+
customElement("odx-accordion", [styles$19])
|
|
145
156
|
], OdxAccordion);
|
|
146
157
|
|
|
147
|
-
const styles$
|
|
158
|
+
const styles$18 = "@layer base{:host{display:flex;justify-content:flex-end;overflow:hidden}.base{display:flex;align-items:center}.container{flex-wrap:nowrap}}";
|
|
148
159
|
|
|
149
160
|
var __defProp$1j = Object.defineProperty;
|
|
150
161
|
var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
|
|
@@ -162,7 +173,7 @@ var __decorateClass$1j = (decorators, target, key, kind) => {
|
|
|
162
173
|
var __accessCheck$v = (obj, member, msg) => member.has(obj) || __typeError$v("Cannot " + msg);
|
|
163
174
|
var __privateGet$q = (obj, member, getter) => (__accessCheck$v(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
164
175
|
var __privateAdd$v = (obj, member, value) => member.has(obj) ? __typeError$v("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
165
|
-
var __privateMethod$
|
|
176
|
+
var __privateMethod$i = (obj, member, method) => (__accessCheck$v(obj, member, "access private method"), method);
|
|
166
177
|
var _breakpoints, _position, _currentBreakpoint, _OdxActionGroup_instances, captureSize_fn, _handleSlotChange$9;
|
|
167
178
|
let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
|
|
168
179
|
constructor() {
|
|
@@ -179,7 +190,7 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
|
|
|
179
190
|
}));
|
|
180
191
|
this.connected = false;
|
|
181
192
|
__privateAdd$v(this, _handleSlotChange$9, () => {
|
|
182
|
-
__privateMethod$
|
|
193
|
+
__privateMethod$i(this, _OdxActionGroup_instances, captureSize_fn).call(this);
|
|
183
194
|
});
|
|
184
195
|
}
|
|
185
196
|
connectedCallback() {
|
|
@@ -212,7 +223,7 @@ let OdxActionGroup = class extends CanBeDisabled(CustomElement) {
|
|
|
212
223
|
updated(props) {
|
|
213
224
|
super.updated?.(props);
|
|
214
225
|
if (props.has("connected") || props.has("size")) {
|
|
215
|
-
__privateMethod$
|
|
226
|
+
__privateMethod$i(this, _OdxActionGroup_instances, captureSize_fn).call(this);
|
|
216
227
|
}
|
|
217
228
|
}
|
|
218
229
|
};
|
|
@@ -254,7 +265,7 @@ __decorateClass$1j([
|
|
|
254
265
|
property({ reflect: true })
|
|
255
266
|
], OdxActionGroup.prototype, "variant", 2);
|
|
256
267
|
OdxActionGroup = __decorateClass$1j([
|
|
257
|
-
customElement("odx-action-group", [styles$
|
|
268
|
+
customElement("odx-action-group", [styles$18])
|
|
258
269
|
], OdxActionGroup);
|
|
259
270
|
|
|
260
271
|
var __defProp$1i = Object.defineProperty;
|
|
@@ -321,7 +332,7 @@ __decorateClass$1i([
|
|
|
321
332
|
property()
|
|
322
333
|
], BaseLink.prototype, "download", 2);
|
|
323
334
|
|
|
324
|
-
const styles$
|
|
335
|
+
const styles$17 = ":host{--_color-foreground: var(--odx-palette-blue-50);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}[part~=base]{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground-base);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);[part~=base]{cursor:default}}";
|
|
325
336
|
|
|
326
337
|
var __defProp$1h = Object.defineProperty;
|
|
327
338
|
var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
|
|
@@ -347,10 +358,10 @@ __decorateClass$1h([
|
|
|
347
358
|
property({ type: Boolean, reflect: true })
|
|
348
359
|
], OdxLink.prototype, "subtle", 2);
|
|
349
360
|
OdxLink = __decorateClass$1h([
|
|
350
|
-
customElement("odx-link", [styles$
|
|
361
|
+
customElement("odx-link", [styles$17])
|
|
351
362
|
], OdxLink);
|
|
352
363
|
|
|
353
|
-
const styles$
|
|
364
|
+
const styles$16 = "@layer base{:host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;padding-inline:var(--odx-size-50);transition:var(--odx-transition-reduced);transition-property:border-color,color}}@layer state{odx-link[aria-current=true]{font-weight:var(--odx-typography-font-weight-medium);--_color-foreground: var(--odx-color-foreground-base)}}@layer variant{:host(:not([vertical])){align-items:center;block-size:var(--odx-size-225);odx-link{--_outline-offset: var(--odx-focus-ring-offset)}odx-link[aria-current=true]{border-radius:0;text-decoration:underline}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-selection-control-stroke);odx-link{border-inline-start:inherit;margin-inline-start:calc(-1 * var(--odx-border-width-thick))}odx-link[aria-current=true]{border-inline-start-color:var(--odx-color-highlight-rest)}}}";
|
|
354
365
|
|
|
355
366
|
const ANCHOR_SELECTOR = "odx-anchor";
|
|
356
367
|
class AnchorObserver {
|
|
@@ -417,7 +428,7 @@ var __accessCheck$u = (obj, member, msg) => member.has(obj) || __typeError$u("Ca
|
|
|
417
428
|
var __privateGet$p = (obj, member, getter) => (__accessCheck$u(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
418
429
|
var __privateAdd$u = (obj, member, value) => member.has(obj) ? __typeError$u("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
419
430
|
var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$u(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
420
|
-
var __privateMethod$
|
|
431
|
+
var __privateMethod$h = (obj, member, method) => (__accessCheck$u(obj, member, "access private method"), method);
|
|
421
432
|
var _anchorObserver, _OdxAnchorNavigation_instances, handleContainerChange_fn, _handleClick$7;
|
|
422
433
|
let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
|
|
423
434
|
constructor() {
|
|
@@ -435,7 +446,7 @@ let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
|
|
|
435
446
|
}
|
|
436
447
|
connectedCallback() {
|
|
437
448
|
super.connectedCallback();
|
|
438
|
-
__privateMethod$
|
|
449
|
+
__privateMethod$h(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
|
|
439
450
|
}
|
|
440
451
|
disconnectedCallback() {
|
|
441
452
|
__privateGet$p(this, _anchorObserver)?.disconnect();
|
|
@@ -463,7 +474,7 @@ let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
|
|
|
463
474
|
}
|
|
464
475
|
updated(props) {
|
|
465
476
|
if (props.has("container")) {
|
|
466
|
-
__privateMethod$
|
|
477
|
+
__privateMethod$h(this, _OdxAnchorNavigation_instances, handleContainerChange_fn).call(this);
|
|
467
478
|
}
|
|
468
479
|
}
|
|
469
480
|
};
|
|
@@ -484,10 +495,10 @@ __decorateClass$1g([
|
|
|
484
495
|
property({ type: Boolean })
|
|
485
496
|
], OdxAnchorNavigation.prototype, "vertical", 2);
|
|
486
497
|
OdxAnchorNavigation = __decorateClass$1g([
|
|
487
|
-
customElement("odx-anchor-navigation", [styles$
|
|
498
|
+
customElement("odx-anchor-navigation", [styles$16])
|
|
488
499
|
], OdxAnchorNavigation);
|
|
489
500
|
|
|
490
|
-
const styles$
|
|
501
|
+
const styles$15 = ":host{display:flex;justify-content:space-between;align-items:center;gap:var(--odx-size-150);padding:var(--odx-size-75)}.content{margin-inline-end:auto}";
|
|
491
502
|
|
|
492
503
|
var __defProp$1f = Object.defineProperty;
|
|
493
504
|
var __getOwnPropDesc$1f = Object.getOwnPropertyDescriptor;
|
|
@@ -517,7 +528,7 @@ __decorateClass$1f([
|
|
|
517
528
|
property({ reflect: true })
|
|
518
529
|
], OdxAreaHeader.prototype, "variant", 2);
|
|
519
530
|
OdxAreaHeader = __decorateClass$1f([
|
|
520
|
-
customElement("odx-area-header", [styles$
|
|
531
|
+
customElement("odx-area-header", [styles$15])
|
|
521
532
|
], OdxAreaHeader);
|
|
522
533
|
|
|
523
534
|
const AreaHeaderSize = {
|
|
@@ -530,7 +541,7 @@ const AreaHeaderVariant = {
|
|
|
530
541
|
DEFAULT: "default"
|
|
531
542
|
};
|
|
532
543
|
|
|
533
|
-
const styles$
|
|
544
|
+
const styles$14 = "@layer base{:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;flex:0 0 auto;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}}";
|
|
534
545
|
|
|
535
546
|
var __defProp$1e = Object.defineProperty;
|
|
536
547
|
var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
|
|
@@ -554,7 +565,7 @@ __decorateClass$1e([
|
|
|
554
565
|
property({ reflect: true })
|
|
555
566
|
], OdxAvatar.prototype, "variant", 2);
|
|
556
567
|
OdxAvatar = __decorateClass$1e([
|
|
557
|
-
customElement("odx-avatar", [styles$
|
|
568
|
+
customElement("odx-avatar", [styles$14])
|
|
558
569
|
], OdxAvatar);
|
|
559
570
|
|
|
560
571
|
const AvatarSize = {
|
|
@@ -568,7 +579,7 @@ const AvatarVariant = {
|
|
|
568
579
|
RECTANGLE: "rectangle"
|
|
569
580
|
};
|
|
570
581
|
|
|
571
|
-
const styles$
|
|
582
|
+
const styles$13 = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-border-width-thin) solid var(--odx-color-separator)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
|
|
572
583
|
|
|
573
584
|
var __defProp$1d = Object.defineProperty;
|
|
574
585
|
var __getOwnPropDesc$1d = Object.getOwnPropertyDescriptor;
|
|
@@ -601,10 +612,10 @@ __decorateClass$1d([
|
|
|
601
612
|
property({ reflect: true })
|
|
602
613
|
], OdxAvatarGroup.prototype, "variant", 2);
|
|
603
614
|
OdxAvatarGroup = __decorateClass$1d([
|
|
604
|
-
customElement("odx-avatar-group", [styles$
|
|
615
|
+
customElement("odx-avatar-group", [styles$13])
|
|
605
616
|
], OdxAvatarGroup);
|
|
606
617
|
|
|
607
|
-
const styles$
|
|
618
|
+
const styles$12 = "@layer base{@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-100);display:inline-block;pointer-events:none;vertical-align:middle}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--_block-size);line-height:var(--_block-size);min-inline-size:var(--_block-size);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-25);text-align:center}}@layer variant{:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([compact]){--_block-size: var(--odx-size-75);.content{inline-size:var(--_block-size);padding:0;margin:var(--odx-size-12)}}:host([pulse]){.content{animation:pulse 1.25s infinite}}}";
|
|
608
619
|
|
|
609
620
|
var __defProp$1c = Object.defineProperty;
|
|
610
621
|
var __getOwnPropDesc$1c = Object.getOwnPropertyDescriptor;
|
|
@@ -635,7 +646,7 @@ __decorateClass$1c([
|
|
|
635
646
|
property({ reflect: true })
|
|
636
647
|
], OdxBadge.prototype, "variant", 2);
|
|
637
648
|
OdxBadge = __decorateClass$1c([
|
|
638
|
-
customElement("odx-badge", [styles$
|
|
649
|
+
customElement("odx-badge", [styles$12])
|
|
639
650
|
], OdxBadge);
|
|
640
651
|
|
|
641
652
|
const BadgeVariant = {
|
|
@@ -650,7 +661,7 @@ const BadgeType = {
|
|
|
650
661
|
STATUS: "status"
|
|
651
662
|
};
|
|
652
663
|
|
|
653
|
-
const styles$
|
|
664
|
+
const styles$11 = ":host{display:contents}.separator{--size: var(--odx-size-75);color:var(--odx-color-foreground-muted);margin:var(--odx-size-37)}:host([aria-hidden=\"true\"]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-muted)!important}::slotted(*){margin:0}";
|
|
654
665
|
|
|
655
666
|
var __defProp$1b = Object.defineProperty;
|
|
656
667
|
var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
|
|
@@ -696,10 +707,10 @@ __decorateClass$1b([
|
|
|
696
707
|
], OdxBreadcrumbsItem.prototype, "fallback", 2);
|
|
697
708
|
OdxBreadcrumbsItem = __decorateClass$1b([
|
|
698
709
|
requestUpdateOnAriaChange(["ariaHidden"]),
|
|
699
|
-
customElement("odx-breadcrumbs-item", [styles$
|
|
710
|
+
customElement("odx-breadcrumbs-item", [styles$11])
|
|
700
711
|
], OdxBreadcrumbsItem);
|
|
701
712
|
|
|
702
|
-
const styles
|
|
713
|
+
const styles$10 = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
|
|
703
714
|
|
|
704
715
|
var __defProp$1a = Object.defineProperty;
|
|
705
716
|
var __getOwnPropDesc$1a = Object.getOwnPropertyDescriptor;
|
|
@@ -716,7 +727,7 @@ var __decorateClass$1a = (decorators, target, key, kind) => {
|
|
|
716
727
|
};
|
|
717
728
|
var __accessCheck$t = (obj, member, msg) => member.has(obj) || __typeError$t("Cannot " + msg);
|
|
718
729
|
var __privateAdd$t = (obj, member, value) => member.has(obj) ? __typeError$t("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
719
|
-
var __privateMethod$
|
|
730
|
+
var __privateMethod$g = (obj, member, method) => (__accessCheck$t(obj, member, "access private method"), method);
|
|
720
731
|
var _OdxBreadcrumbs_instances, isItemVisible_fn, renderItems_fn, updateContext_fn;
|
|
721
732
|
let OdxBreadcrumbs = class extends CustomElement {
|
|
722
733
|
constructor() {
|
|
@@ -731,14 +742,14 @@ let OdxBreadcrumbs = class extends CustomElement {
|
|
|
731
742
|
}
|
|
732
743
|
render() {
|
|
733
744
|
if (Array.isArray(this.items)) {
|
|
734
|
-
return __privateMethod$
|
|
745
|
+
return __privateMethod$g(this, _OdxBreadcrumbs_instances, renderItems_fn).call(this, this.items);
|
|
735
746
|
}
|
|
736
|
-
return html`<slot @slotchange=${__privateMethod$
|
|
747
|
+
return html`<slot @slotchange=${__privateMethod$g(this, _OdxBreadcrumbs_instances, updateContext_fn)}></slot>`;
|
|
737
748
|
}
|
|
738
749
|
updated(props) {
|
|
739
750
|
super.updated(props);
|
|
740
751
|
if (props.has("max")) {
|
|
741
|
-
__privateMethod$
|
|
752
|
+
__privateMethod$g(this, _OdxBreadcrumbs_instances, updateContext_fn).call(this);
|
|
742
753
|
}
|
|
743
754
|
}
|
|
744
755
|
};
|
|
@@ -749,7 +760,7 @@ isItemVisible_fn = function(_, index, items) {
|
|
|
749
760
|
renderItems_fn = function(items) {
|
|
750
761
|
return html`
|
|
751
762
|
${repeat(
|
|
752
|
-
items.filter(__privateMethod$
|
|
763
|
+
items.filter(__privateMethod$g(this, _OdxBreadcrumbs_instances, isItemVisible_fn).bind(this)),
|
|
753
764
|
(item) => item.href,
|
|
754
765
|
({ label, href }) => html`
|
|
755
766
|
<odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>
|
|
@@ -759,7 +770,7 @@ renderItems_fn = function(items) {
|
|
|
759
770
|
};
|
|
760
771
|
updateContext_fn = function() {
|
|
761
772
|
for (const [index, item] of this.itemElements.entries()) {
|
|
762
|
-
item.ariaHidden = toAriaBooleanAttribute(!__privateMethod$
|
|
773
|
+
item.ariaHidden = toAriaBooleanAttribute(!__privateMethod$g(this, _OdxBreadcrumbs_instances, isItemVisible_fn).call(this, item, index, this.itemElements));
|
|
763
774
|
}
|
|
764
775
|
for (const [, item] of Array.from(this.renderedItemElements).entries()) {
|
|
765
776
|
item.requestUpdate();
|
|
@@ -778,10 +789,10 @@ __decorateClass$1a([
|
|
|
778
789
|
property({ attribute: false })
|
|
779
790
|
], OdxBreadcrumbs.prototype, "items", 2);
|
|
780
791
|
OdxBreadcrumbs = __decorateClass$1a([
|
|
781
|
-
customElement("odx-breadcrumbs", [styles
|
|
792
|
+
customElement("odx-breadcrumbs", [styles$10])
|
|
782
793
|
], OdxBreadcrumbs);
|
|
783
794
|
|
|
784
|
-
const styles
|
|
795
|
+
const styles$$ = "@layer base{:host{display:inline-flex;align-items:center;gap:var(--odx-size-px)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}@layer variant{:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host(:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(*){margin-inline:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([vertical]){flex-direction:column;::slotted(*){margin-block:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}}";
|
|
785
796
|
|
|
786
797
|
var __defProp$19 = Object.defineProperty;
|
|
787
798
|
var __getOwnPropDesc$19 = Object.getOwnPropertyDescriptor;
|
|
@@ -807,12 +818,12 @@ __decorateClass$19([
|
|
|
807
818
|
property({ type: Boolean, reflect: true })
|
|
808
819
|
], OdxButtonGroup.prototype, "vertical", 2);
|
|
809
820
|
OdxButtonGroup = __decorateClass$19([
|
|
810
|
-
customElement("odx-button-group", [styles
|
|
821
|
+
customElement("odx-button-group", [styles$$])
|
|
811
822
|
], OdxButtonGroup);
|
|
812
823
|
|
|
813
824
|
const BaseButtonStyles = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=base]{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-25))}[part=label]{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([aria-busy=\"true\"])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
|
|
814
825
|
|
|
815
|
-
const styles$
|
|
826
|
+
const styles$_ = "@layer base{[part~=base]{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_margin-block: 0;--_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))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_margin-icon: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150)}: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);--_margin-block: 0;::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([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}}";
|
|
816
827
|
|
|
817
828
|
var __defProp$18 = Object.defineProperty;
|
|
818
829
|
var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
|
|
@@ -830,9 +841,9 @@ var __decorateClass$18 = (decorators, target, key, kind) => {
|
|
|
830
841
|
var __accessCheck$s = (obj, member, msg) => member.has(obj) || __typeError$s("Cannot " + msg);
|
|
831
842
|
var __privateGet$o = (obj, member, getter) => (__accessCheck$s(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
832
843
|
var __privateAdd$s = (obj, member, value) => member.has(obj) ? __typeError$s("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
833
|
-
var __privateMethod$
|
|
844
|
+
var __privateMethod$f = (obj, member, method) => (__accessCheck$s(obj, member, "access private method"), method);
|
|
834
845
|
var _internals, _OdxButton_instances, handleClick_fn;
|
|
835
|
-
let OdxButton = class extends
|
|
846
|
+
let OdxButton = class extends InteractiveElement {
|
|
836
847
|
constructor() {
|
|
837
848
|
super();
|
|
838
849
|
__privateAdd$s(this, _OdxButton_instances);
|
|
@@ -840,7 +851,7 @@ let OdxButton = class extends WithLoadingState(InteractiveElement) {
|
|
|
840
851
|
this.block = false;
|
|
841
852
|
this.type = "button";
|
|
842
853
|
if (!isServer) {
|
|
843
|
-
this.addEventListener("click", __privateMethod$
|
|
854
|
+
this.addEventListener("click", __privateMethod$f(this, _OdxButton_instances, handleClick_fn));
|
|
844
855
|
}
|
|
845
856
|
}
|
|
846
857
|
render() {
|
|
@@ -879,10 +890,11 @@ __decorateClass$18([
|
|
|
879
890
|
property({ reflect: true })
|
|
880
891
|
], OdxButton.prototype, "variant", 2);
|
|
881
892
|
OdxButton = __decorateClass$18([
|
|
882
|
-
customElement("odx-button", [BaseButtonStyles, styles$
|
|
893
|
+
customElement("odx-button", [BaseButtonStyles, styles$_])
|
|
883
894
|
], OdxButton);
|
|
884
895
|
|
|
885
896
|
const ButtonSize = {
|
|
897
|
+
XS: "xs",
|
|
886
898
|
SM: "sm",
|
|
887
899
|
MD: "md",
|
|
888
900
|
LG: "lg"
|
|
@@ -906,7 +918,7 @@ const ButtonBadgeAlign = {
|
|
|
906
918
|
END: "end"
|
|
907
919
|
};
|
|
908
920
|
|
|
909
|
-
const styles$
|
|
921
|
+
const styles$Z = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
|
|
910
922
|
|
|
911
923
|
var __defProp$17 = Object.defineProperty;
|
|
912
924
|
var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
|
|
@@ -932,10 +944,10 @@ let OdxCard = class extends CanBeDisabled(CustomElement) {
|
|
|
932
944
|
}
|
|
933
945
|
};
|
|
934
946
|
OdxCard = __decorateClass$17([
|
|
935
|
-
customElement("odx-card", [styles$
|
|
947
|
+
customElement("odx-card", [styles$Z])
|
|
936
948
|
], OdxCard);
|
|
937
949
|
|
|
938
|
-
const styles$
|
|
950
|
+
const styles$Y = "@layer base{:host{display:flex}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}}@layer variant{:host(:not([variant=\"inline\"])){flex-direction:column}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;inline-size:auto}}";
|
|
939
951
|
|
|
940
952
|
var __defProp$16 = Object.defineProperty;
|
|
941
953
|
var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
|
|
@@ -982,7 +994,7 @@ __decorateClass$16([
|
|
|
982
994
|
property({ reflect: true })
|
|
983
995
|
], OdxCheckboxGroup.prototype, "variant", 2);
|
|
984
996
|
OdxCheckboxGroup = __decorateClass$16([
|
|
985
|
-
customElement("odx-checkbox-group", [styles$
|
|
997
|
+
customElement("odx-checkbox-group", [styles$Y])
|
|
986
998
|
], OdxCheckboxGroup);
|
|
987
999
|
|
|
988
1000
|
const CheckboxGroupVariant = {
|
|
@@ -990,7 +1002,7 @@ const CheckboxGroupVariant = {
|
|
|
990
1002
|
LIST: "list"
|
|
991
1003
|
};
|
|
992
1004
|
|
|
993
|
-
const styles$
|
|
1005
|
+
const styles$X = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);transition-property:background-color,border-color,outline-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground-base)}}";
|
|
994
1006
|
|
|
995
1007
|
var __defProp$15 = Object.defineProperty;
|
|
996
1008
|
var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
|
|
@@ -1040,10 +1052,10 @@ __decorateClass$15([
|
|
|
1040
1052
|
property({ type: Boolean, reflect: true })
|
|
1041
1053
|
], OdxCheckbox.prototype, "indeterminate", 2);
|
|
1042
1054
|
OdxCheckbox = __decorateClass$15([
|
|
1043
|
-
customElement("odx-checkbox", [styles$
|
|
1055
|
+
customElement("odx-checkbox", [styles$X])
|
|
1044
1056
|
], OdxCheckbox);
|
|
1045
1057
|
|
|
1046
|
-
const styles$
|
|
1058
|
+
const styles$W = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center;line-height:inherit}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground-base)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
|
|
1047
1059
|
|
|
1048
1060
|
var __defProp$14 = Object.defineProperty;
|
|
1049
1061
|
var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
|
|
@@ -1129,7 +1141,7 @@ __decorateClass$14([
|
|
|
1129
1141
|
property({ reflect: true })
|
|
1130
1142
|
], OdxChip.prototype, "variant", 2);
|
|
1131
1143
|
OdxChip = __decorateClass$14([
|
|
1132
|
-
customElement("odx-chip", [styles$
|
|
1144
|
+
customElement("odx-chip", [styles$W])
|
|
1133
1145
|
], OdxChip);
|
|
1134
1146
|
|
|
1135
1147
|
const ChipVariant = {
|
|
@@ -1147,7 +1159,7 @@ const CircularProgressBarSize = {
|
|
|
1147
1159
|
LARGE: "large"
|
|
1148
1160
|
};
|
|
1149
1161
|
|
|
1150
|
-
const styles$
|
|
1162
|
+
const styles$V = "@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);aspect-ratio:1;display:flex;place-content:center;place-items:center;color:currentColor;block-size:100%;inline-size:100%;position:relative}:host([size=\"small\"]){--_size: var(--odx-size-300)}:host([size=\"medium\"]){--_size: var(--odx-size-400)}:host([size=\"large\"]){--_size: var(--odx-size-600)}:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}";
|
|
1151
1163
|
|
|
1152
1164
|
var __defProp$13 = Object.defineProperty;
|
|
1153
1165
|
var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
|
|
@@ -1262,7 +1274,7 @@ __decorateClass$13([
|
|
|
1262
1274
|
property({ reflect: true })
|
|
1263
1275
|
], OdxCircularProgressBar.prototype, "size", 2);
|
|
1264
1276
|
OdxCircularProgressBar = __decorateClass$13([
|
|
1265
|
-
customElement("odx-circular-progress-bar", [styles$
|
|
1277
|
+
customElement("odx-circular-progress-bar", [styles$V])
|
|
1266
1278
|
], OdxCircularProgressBar);
|
|
1267
1279
|
|
|
1268
1280
|
const DropdownPlacement = {
|
|
@@ -1270,7 +1282,7 @@ const DropdownPlacement = {
|
|
|
1270
1282
|
BOTTOM: PopoverPlacement.BOTTOM
|
|
1271
1283
|
};
|
|
1272
1284
|
|
|
1273
|
-
const styles$
|
|
1285
|
+
const styles$U = ":host{--_popover-offset: var(--odx-size-37);--_popover-color-background: var(--odx-color-background-main)}";
|
|
1274
1286
|
|
|
1275
1287
|
var __defProp$12 = Object.defineProperty;
|
|
1276
1288
|
var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
|
|
@@ -1288,7 +1300,7 @@ var __decorateClass$12 = (decorators, target, key, kind) => {
|
|
|
1288
1300
|
var __accessCheck$o = (obj, member, msg) => member.has(obj) || __typeError$o("Cannot " + msg);
|
|
1289
1301
|
var __privateGet$k = (obj, member, getter) => (__accessCheck$o(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
1290
1302
|
var __privateAdd$o = (obj, member, value) => member.has(obj) ? __typeError$o("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
1291
|
-
var __privateMethod$
|
|
1303
|
+
var __privateMethod$e = (obj, member, method) => (__accessCheck$o(obj, member, "access private method"), method);
|
|
1292
1304
|
var _OdxDropdown_instances, updateAriaAttributes_fn$2, _handleClick$5, _handleKeyboardEvent$1;
|
|
1293
1305
|
let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
|
|
1294
1306
|
constructor() {
|
|
@@ -1321,14 +1333,14 @@ let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
|
|
|
1321
1333
|
mountPopover(referenceElement) {
|
|
1322
1334
|
super.mountPopover(referenceElement);
|
|
1323
1335
|
if (this.disabled || !referenceElement) return;
|
|
1324
|
-
__privateMethod$
|
|
1336
|
+
__privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, referenceElement, this.id);
|
|
1325
1337
|
referenceElement.addEventListener("click", __privateGet$k(this, _handleClick$5));
|
|
1326
1338
|
referenceElement.addEventListener("keydown", __privateGet$k(this, _handleKeyboardEvent$1));
|
|
1327
1339
|
this.emit("mount", { detail: { referenceElement } });
|
|
1328
1340
|
}
|
|
1329
1341
|
unmountPopover(referenceElement) {
|
|
1330
1342
|
super.unmountPopover(referenceElement);
|
|
1331
|
-
__privateMethod$
|
|
1343
|
+
__privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, referenceElement, null);
|
|
1332
1344
|
referenceElement.removeEventListener("click", __privateGet$k(this, _handleClick$5));
|
|
1333
1345
|
referenceElement.removeEventListener("keydown", __privateGet$k(this, _handleKeyboardEvent$1));
|
|
1334
1346
|
this.emit("unmount", { detail: { referenceElement } });
|
|
@@ -1355,7 +1367,7 @@ let OdxDropdown = class extends CanBeDisabled(PopoverHost) {
|
|
|
1355
1367
|
willUpdate(props) {
|
|
1356
1368
|
super.willUpdate?.(props);
|
|
1357
1369
|
if (props.has("id")) {
|
|
1358
|
-
__privateMethod$
|
|
1370
|
+
__privateMethod$e(this, _OdxDropdown_instances, updateAriaAttributes_fn$2).call(this, this.referenceElement, this.id);
|
|
1359
1371
|
}
|
|
1360
1372
|
if (props.has("disabled")) {
|
|
1361
1373
|
if (this.disabled) {
|
|
@@ -1382,10 +1394,10 @@ __decorateClass$12([
|
|
|
1382
1394
|
property({ type: String, reflect: true })
|
|
1383
1395
|
], OdxDropdown.prototype, "placement", 2);
|
|
1384
1396
|
OdxDropdown = __decorateClass$12([
|
|
1385
|
-
customElement("odx-dropdown", [styles$
|
|
1397
|
+
customElement("odx-dropdown", [styles$U])
|
|
1386
1398
|
], OdxDropdown);
|
|
1387
1399
|
|
|
1388
|
-
const styles$
|
|
1400
|
+
const styles$T = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
|
|
1389
1401
|
|
|
1390
1402
|
var __defProp$11 = Object.defineProperty;
|
|
1391
1403
|
var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
|
|
@@ -1473,10 +1485,10 @@ __decorateClass$11([
|
|
|
1473
1485
|
query(".base")
|
|
1474
1486
|
], OdxCombobox.prototype, "base", 2);
|
|
1475
1487
|
OdxCombobox = __decorateClass$11([
|
|
1476
|
-
customElement("odx-combobox", [styles$
|
|
1488
|
+
customElement("odx-combobox", [styles$T])
|
|
1477
1489
|
], OdxCombobox);
|
|
1478
1490
|
|
|
1479
|
-
const styles$
|
|
1491
|
+
const styles$S = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-background-main)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
|
|
1480
1492
|
|
|
1481
1493
|
var __defProp$10 = Object.defineProperty;
|
|
1482
1494
|
var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
|
|
@@ -1498,10 +1510,10 @@ let OdxContentBox = class extends CustomElement {
|
|
|
1498
1510
|
}
|
|
1499
1511
|
};
|
|
1500
1512
|
OdxContentBox = __decorateClass$10([
|
|
1501
|
-
customElement("odx-content-box", [styles$
|
|
1513
|
+
customElement("odx-content-box", [styles$S])
|
|
1502
1514
|
], OdxContentBox);
|
|
1503
1515
|
|
|
1504
|
-
const styles$
|
|
1516
|
+
const styles$R = ":host{display:block}";
|
|
1505
1517
|
|
|
1506
1518
|
var __defProp$$ = Object.defineProperty;
|
|
1507
1519
|
var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
|
|
@@ -1555,7 +1567,7 @@ __decorateClass$$([
|
|
|
1555
1567
|
queryAssignedElements({ flatten: true })
|
|
1556
1568
|
], OdxFormField.prototype, "elements", 2);
|
|
1557
1569
|
OdxFormField = __decorateClass$$([
|
|
1558
|
-
customElement("odx-form-field", [styles$
|
|
1570
|
+
customElement("odx-form-field", [styles$R])
|
|
1559
1571
|
], OdxFormField);
|
|
1560
1572
|
|
|
1561
1573
|
var __defProp$_ = Object.defineProperty;
|
|
@@ -1729,7 +1741,7 @@ var __accessCheck$l = (obj, member, msg) => member.has(obj) || __typeError$l("Ca
|
|
|
1729
1741
|
var __privateGet$h = (obj, member, getter) => (__accessCheck$l(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
1730
1742
|
var __privateAdd$l = (obj, member, value) => member.has(obj) ? __typeError$l("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
1731
1743
|
var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$l(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
1732
|
-
var __privateMethod$
|
|
1744
|
+
var __privateMethod$d = (obj, member, method) => (__accessCheck$l(obj, member, "access private method"), method);
|
|
1733
1745
|
var _syncInterval, _OdxRelativeTime_instances, setupSyncInterval_fn;
|
|
1734
1746
|
let OdxRelativeTime = class extends BaseFormat {
|
|
1735
1747
|
constructor() {
|
|
@@ -1752,7 +1764,7 @@ let OdxRelativeTime = class extends BaseFormat {
|
|
|
1752
1764
|
willUpdate(props) {
|
|
1753
1765
|
super.willUpdate?.(props);
|
|
1754
1766
|
if (props.has("syncInterval")) {
|
|
1755
|
-
__privateMethod$
|
|
1767
|
+
__privateMethod$d(this, _OdxRelativeTime_instances, setupSyncInterval_fn).call(this);
|
|
1756
1768
|
}
|
|
1757
1769
|
}
|
|
1758
1770
|
transform(value) {
|
|
@@ -1786,7 +1798,7 @@ OdxRelativeTime = __decorateClass$W([
|
|
|
1786
1798
|
customElement("odx-relative-time")
|
|
1787
1799
|
], OdxRelativeTime);
|
|
1788
1800
|
|
|
1789
|
-
const styles$
|
|
1801
|
+
const styles$Q = "@layer base{:host{display:flex;align-items:center;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}}";
|
|
1790
1802
|
|
|
1791
1803
|
var __defProp$V = Object.defineProperty;
|
|
1792
1804
|
var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
|
|
@@ -1805,10 +1817,10 @@ let OdxHeaderActions = class extends CustomElement {
|
|
|
1805
1817
|
}
|
|
1806
1818
|
};
|
|
1807
1819
|
OdxHeaderActions = __decorateClass$V([
|
|
1808
|
-
customElement("odx-header-actions", [styles$
|
|
1820
|
+
customElement("odx-header-actions", [styles$Q])
|
|
1809
1821
|
], OdxHeaderActions);
|
|
1810
1822
|
|
|
1811
|
-
const styles$
|
|
1823
|
+
const styles$P = ":host{--_font-weight: var(--odx-typography-font-weight-semibold);display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
|
|
1812
1824
|
|
|
1813
1825
|
var __defProp$U = Object.defineProperty;
|
|
1814
1826
|
var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
|
|
@@ -1833,7 +1845,7 @@ __decorateClass$U([
|
|
|
1833
1845
|
], OdxTitle.prototype, "size", 2);
|
|
1834
1846
|
OdxTitle = __decorateClass$U([
|
|
1835
1847
|
requestUpdateOnAriaChange(["ariaLevel"]),
|
|
1836
|
-
customElement("odx-title", [styles$
|
|
1848
|
+
customElement("odx-title", [styles$P])
|
|
1837
1849
|
], OdxTitle);
|
|
1838
1850
|
|
|
1839
1851
|
const TitleSize = {
|
|
@@ -1845,7 +1857,7 @@ const TitleSize = {
|
|
|
1845
1857
|
XXL: "xxl"
|
|
1846
1858
|
};
|
|
1847
1859
|
|
|
1848
|
-
const styles$
|
|
1860
|
+
const styles$O = "@layer base{:host{display:block;position:relative}.base{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-background-main);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-150);place-items:center;z-index:1;position:relative}.background{position:absolute;inset:0;z-index:0;background-color:var(--odx-color-background-main);clip-path:inset(0 -100vmax);box-shadow:0 0 0 100vmax var(--odx-color-background-main)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}}";
|
|
1849
1861
|
|
|
1850
1862
|
var __defProp$T = Object.defineProperty;
|
|
1851
1863
|
var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
|
|
@@ -1897,10 +1909,10 @@ __decorateClass$T([
|
|
|
1897
1909
|
queryAssignedElements({ selector: OdxTitle.selector, flatten: true })
|
|
1898
1910
|
], OdxHeader.prototype, "titleElements", 2);
|
|
1899
1911
|
OdxHeader = __decorateClass$T([
|
|
1900
|
-
customElement("odx-header", [styles$
|
|
1912
|
+
customElement("odx-header", [styles$O])
|
|
1901
1913
|
], OdxHeader);
|
|
1902
1914
|
|
|
1903
|
-
const styles$
|
|
1915
|
+
const styles$N = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
|
|
1904
1916
|
|
|
1905
1917
|
var __defProp$S = Object.defineProperty;
|
|
1906
1918
|
var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
|
|
@@ -1925,7 +1937,7 @@ __decorateClass$S([
|
|
|
1925
1937
|
], OdxHeadline.prototype, "size", 2);
|
|
1926
1938
|
OdxHeadline = __decorateClass$S([
|
|
1927
1939
|
requestUpdateOnAriaChange(["ariaLevel"]),
|
|
1928
|
-
customElement("odx-headline", [styles$
|
|
1940
|
+
customElement("odx-headline", [styles$N])
|
|
1929
1941
|
], OdxHeadline);
|
|
1930
1942
|
|
|
1931
1943
|
const HeadlineSize = {
|
|
@@ -1935,7 +1947,7 @@ const HeadlineSize = {
|
|
|
1935
1947
|
XL: "xl"
|
|
1936
1948
|
};
|
|
1937
1949
|
|
|
1938
|
-
const styles$
|
|
1950
|
+
const styles$M = "@layer base{:host{--background-color: var(--odx-color-highlight-rest);--foreground-color: var(--odx-color-foreground-light)}::highlight(odx-highlight){background-color:var(--background-color);color:var(--foreground-color)}:host([subtle]){--background-color: transparent;--foreground-color: var(--odx-color-highlight-rest)}}";
|
|
1939
1951
|
|
|
1940
1952
|
var __defProp$R = Object.defineProperty;
|
|
1941
1953
|
var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
|
|
@@ -1990,9 +2002,11 @@ __decorateClass$R([
|
|
|
1990
2002
|
property({ type: Boolean })
|
|
1991
2003
|
], OdxHighlight.prototype, "disabled", 2);
|
|
1992
2004
|
OdxHighlight = __decorateClass$R([
|
|
1993
|
-
customElement("odx-highlight", [styles$
|
|
2005
|
+
customElement("odx-highlight", [styles$M])
|
|
1994
2006
|
], OdxHighlight);
|
|
1995
2007
|
|
|
2008
|
+
const styles$L = ":host{--icon-rotation: 0deg}[part=icon]{transition:inherit;transition-property:transform;transform:rotate(var(--icon-rotation))}";
|
|
2009
|
+
|
|
1996
2010
|
var __defProp$Q = Object.defineProperty;
|
|
1997
2011
|
var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
|
|
1998
2012
|
var __decorateClass$Q = (decorators, target, key, kind) => {
|
|
@@ -2018,7 +2032,7 @@ __decorateClass$Q([
|
|
|
2018
2032
|
property()
|
|
2019
2033
|
], OdxIconButton.prototype, "icon", 2);
|
|
2020
2034
|
OdxIconButton = __decorateClass$Q([
|
|
2021
|
-
customElement("odx-icon-button")
|
|
2035
|
+
customElement("odx-icon-button", [styles$L])
|
|
2022
2036
|
], OdxIconButton);
|
|
2023
2037
|
|
|
2024
2038
|
const styles$K = "@layer base{:host{display:block}}";
|
|
@@ -2038,7 +2052,7 @@ var __decorateClass$P = (decorators, target, key, kind) => {
|
|
|
2038
2052
|
};
|
|
2039
2053
|
var __accessCheck$j = (obj, member, msg) => member.has(obj) || __typeError$j("Cannot " + msg);
|
|
2040
2054
|
var __privateAdd$j = (obj, member, value) => member.has(obj) ? __typeError$j("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
2041
|
-
var __privateMethod$
|
|
2055
|
+
var __privateMethod$c = (obj, member, method) => (__accessCheck$j(obj, member, "access private method"), method);
|
|
2042
2056
|
var _OdxImage_instances, handleDimensionChange_fn;
|
|
2043
2057
|
class ResourceLoader {
|
|
2044
2058
|
async load(resource) {
|
|
@@ -2084,7 +2098,7 @@ let OdxImage = class extends CustomElement {
|
|
|
2084
2098
|
this.checkVisibility();
|
|
2085
2099
|
}
|
|
2086
2100
|
if (props.has("height") || props.has("width")) {
|
|
2087
|
-
__privateMethod$
|
|
2101
|
+
__privateMethod$c(this, _OdxImage_instances, handleDimensionChange_fn).call(this);
|
|
2088
2102
|
}
|
|
2089
2103
|
}
|
|
2090
2104
|
async load(src) {
|
|
@@ -2201,7 +2215,7 @@ const InlineMessageType = {
|
|
|
2201
2215
|
BANNER: "banner"
|
|
2202
2216
|
};
|
|
2203
2217
|
|
|
2204
|
-
const styles$I = ":host{--_color-
|
|
2218
|
+
const styles$I = "@layer base{:host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_control-size: var(--odx-size-225);display:inline-block;min-inline-size:16ch}.base{display:flex;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_control-size);border-radius:var(--odx-border-radius-controls);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color;padding-inline:var(--odx-size-50);gap:var(--odx-size-50);&:has(.input:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}&:has(.input:focus-visible){--_color-stroke: var(--odx-focus-ring-color)}}.input{background-color:var(--odx-color-transparent);outline:none;border:none;flex:1 1 auto;block-size:100%;padding:0;color:inherit;min-width:none;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-muted);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}}@layer variant{:host([block]){display:block}}";
|
|
2205
2219
|
|
|
2206
2220
|
var __defProp$N = Object.defineProperty;
|
|
2207
2221
|
var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
|
|
@@ -2219,13 +2233,19 @@ var __decorateClass$N = (decorators, target, key, kind) => {
|
|
|
2219
2233
|
var __accessCheck$i = (obj, member, msg) => member.has(obj) || __typeError$i("Cannot " + msg);
|
|
2220
2234
|
var __privateGet$f = (obj, member, getter) => (__accessCheck$i(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
2221
2235
|
var __privateAdd$i = (obj, member, value) => member.has(obj) ? __typeError$i("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
2222
|
-
var
|
|
2236
|
+
var __privateMethod$b = (obj, member, method) => (__accessCheck$i(obj, member, "access private method"), method);
|
|
2237
|
+
var _OdxInput_instances, isClearable_fn$1, _handleClear$2, _handleInput$1, _handleKeyDown$2;
|
|
2223
2238
|
let OdxInput = class extends FormControl(CustomElement) {
|
|
2224
2239
|
constructor() {
|
|
2225
2240
|
super(...arguments);
|
|
2226
|
-
this
|
|
2241
|
+
__privateAdd$i(this, _OdxInput_instances);
|
|
2242
|
+
this.block = false;
|
|
2243
|
+
this.clearable = false;
|
|
2227
2244
|
this.placeholder = "";
|
|
2228
2245
|
this.type = "text";
|
|
2246
|
+
__privateAdd$i(this, _handleClear$2, () => {
|
|
2247
|
+
this.clear();
|
|
2248
|
+
});
|
|
2229
2249
|
__privateAdd$i(this, _handleInput$1, (event) => {
|
|
2230
2250
|
this.value = event.target.value;
|
|
2231
2251
|
});
|
|
@@ -2233,20 +2253,21 @@ let OdxInput = class extends FormControl(CustomElement) {
|
|
|
2233
2253
|
const { actions } = getKeyboardEventInfo(event);
|
|
2234
2254
|
if (!actions.escape) return;
|
|
2235
2255
|
event.preventDefault();
|
|
2236
|
-
__privateGet$f(this, _handleClear$2).call(this);
|
|
2237
|
-
});
|
|
2238
|
-
__privateAdd$i(this, _handleClear$2, () => {
|
|
2239
|
-
if (!this.clearable || this.emit("clear")) return;
|
|
2240
2256
|
this.clear();
|
|
2241
2257
|
});
|
|
2242
2258
|
}
|
|
2243
2259
|
clear() {
|
|
2260
|
+
if (!__privateMethod$b(this, _OdxInput_instances, isClearable_fn$1).call(this) || this.emit("clear")) return;
|
|
2244
2261
|
this.value = "";
|
|
2262
|
+
this.focus();
|
|
2263
|
+
}
|
|
2264
|
+
focus() {
|
|
2265
|
+
this.focusableElement.focus();
|
|
2245
2266
|
}
|
|
2246
2267
|
render() {
|
|
2247
2268
|
const clearButton = when(
|
|
2248
|
-
this
|
|
2249
|
-
() => html`<odx-icon-button icon="core::
|
|
2269
|
+
__privateMethod$b(this, _OdxInput_instances, isClearable_fn$1).call(this),
|
|
2270
|
+
() => html`<odx-icon-button icon="core::close" size="sm" tabindex="-1" variant="ghost" @click=${__privateGet$f(this, _handleClear$2)}></odx-icon-button>`
|
|
2250
2271
|
);
|
|
2251
2272
|
return html`
|
|
2252
2273
|
<div class="base">
|
|
@@ -2258,6 +2279,7 @@ let OdxInput = class extends FormControl(CustomElement) {
|
|
|
2258
2279
|
?disabled=${this.disabled}
|
|
2259
2280
|
?readonly=${this.readonly}
|
|
2260
2281
|
.value=${this.value}
|
|
2282
|
+
size="1"
|
|
2261
2283
|
@keydown=${__privateGet$f(this, _handleKeyDown$2)}
|
|
2262
2284
|
@change=${forwardEvent(this)}
|
|
2263
2285
|
@input=${__privateGet$f(this, _handleInput$1)}
|
|
@@ -2269,10 +2291,20 @@ let OdxInput = class extends FormControl(CustomElement) {
|
|
|
2269
2291
|
`;
|
|
2270
2292
|
}
|
|
2271
2293
|
};
|
|
2294
|
+
_OdxInput_instances = new WeakSet();
|
|
2295
|
+
isClearable_fn$1 = function() {
|
|
2296
|
+
return this.clearable && !this.disabled && !this.readonly && !this.required && !!this.value;
|
|
2297
|
+
};
|
|
2298
|
+
_handleClear$2 = new WeakMap();
|
|
2272
2299
|
_handleInput$1 = new WeakMap();
|
|
2273
2300
|
_handleKeyDown$2 = new WeakMap();
|
|
2274
|
-
_handleClear$2 = new WeakMap();
|
|
2275
2301
|
OdxInput.formAssociated = true;
|
|
2302
|
+
__decorateClass$N([
|
|
2303
|
+
query("input")
|
|
2304
|
+
], OdxInput.prototype, "focusableElement", 2);
|
|
2305
|
+
__decorateClass$N([
|
|
2306
|
+
property({ type: Boolean, reflect: true })
|
|
2307
|
+
], OdxInput.prototype, "block", 2);
|
|
2276
2308
|
__decorateClass$N([
|
|
2277
2309
|
property({ type: Boolean })
|
|
2278
2310
|
], OdxInput.prototype, "clearable", 2);
|
|
@@ -2329,7 +2361,7 @@ OdxLineClamp = __decorateClass$M([
|
|
|
2329
2361
|
customElement("odx-line-clamp", [styles$H])
|
|
2330
2362
|
], OdxLineClamp);
|
|
2331
2363
|
|
|
2332
|
-
const styles$G = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}[part=base]{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part=label]{margin-inline-end:auto}[part=base]>*{--odx-focus-ring-offset: 0}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part=separator]{opacity:0}}@layer variant{[part=base]:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([expanded]){[part=separator]{opacity:1}[part=expand-control]
|
|
2364
|
+
const styles$G = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}[part=base]{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part=label]{margin-inline-end:auto}[part=base]>*{--odx-focus-ring-offset: 0}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part=separator]{opacity:0}}@layer variant{[part=base]:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([expanded]){[part=separator]{opacity:1}[part=expand-control]{--icon-rotation: 180deg}}}";
|
|
2333
2365
|
|
|
2334
2366
|
var __defProp$L = Object.defineProperty;
|
|
2335
2367
|
var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
|
|
@@ -2347,7 +2379,7 @@ var __decorateClass$L = (decorators, target, key, kind) => {
|
|
|
2347
2379
|
var __accessCheck$h = (obj, member, msg) => member.has(obj) || __typeError$h("Cannot " + msg);
|
|
2348
2380
|
var __privateGet$e = (obj, member, getter) => (__accessCheck$h(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
2349
2381
|
var __privateAdd$h = (obj, member, value) => member.has(obj) ? __typeError$h("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
2350
|
-
var __privateMethod$
|
|
2382
|
+
var __privateMethod$a = (obj, member, method) => (__accessCheck$h(obj, member, "access private method"), method);
|
|
2351
2383
|
var _OdxListItem_instances, updateAriaAttributes_fn$1, _handleClick$4;
|
|
2352
2384
|
let OdxListItem = class extends CanBeSelected(CanBeExpanded(InteractiveElement)) {
|
|
2353
2385
|
constructor() {
|
|
@@ -2409,7 +2441,7 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(InteractiveElement))
|
|
|
2409
2441
|
updated(props) {
|
|
2410
2442
|
super.updated?.(props);
|
|
2411
2443
|
if (props.has("disabled") || props.has("expanded")) {
|
|
2412
|
-
__privateMethod$
|
|
2444
|
+
__privateMethod$a(this, _OdxListItem_instances, updateAriaAttributes_fn$1).call(this);
|
|
2413
2445
|
}
|
|
2414
2446
|
}
|
|
2415
2447
|
};
|
|
@@ -2565,7 +2597,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
|
|
|
2565
2597
|
};
|
|
2566
2598
|
var __accessCheck$f = (obj, member, msg) => member.has(obj) || __typeError$f("Cannot " + msg);
|
|
2567
2599
|
var __privateAdd$f = (obj, member, value) => member.has(obj) ? __typeError$f("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
2568
|
-
var __privateMethod$
|
|
2600
|
+
var __privateMethod$9 = (obj, member, method) => (__accessCheck$f(obj, member, "access private method"), method);
|
|
2569
2601
|
var _OdxLoadingSpinner_instances, renderSpinner_fn, renderDots_fn;
|
|
2570
2602
|
let OdxLoadingSpinner = class extends CustomElement {
|
|
2571
2603
|
constructor() {
|
|
@@ -2574,9 +2606,9 @@ let OdxLoadingSpinner = class extends CustomElement {
|
|
|
2574
2606
|
}
|
|
2575
2607
|
render() {
|
|
2576
2608
|
if (this.variant === "dots") {
|
|
2577
|
-
return __privateMethod$
|
|
2609
|
+
return __privateMethod$9(this, _OdxLoadingSpinner_instances, renderDots_fn).call(this);
|
|
2578
2610
|
}
|
|
2579
|
-
return __privateMethod$
|
|
2611
|
+
return __privateMethod$9(this, _OdxLoadingSpinner_instances, renderSpinner_fn).call(this);
|
|
2580
2612
|
}
|
|
2581
2613
|
};
|
|
2582
2614
|
_OdxLoadingSpinner_instances = new WeakSet();
|
|
@@ -3009,7 +3041,7 @@ var __decorateClass$y = (decorators, target, key, kind) => {
|
|
|
3009
3041
|
var __accessCheck$b = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
|
|
3010
3042
|
var __privateGet$9 = (obj, member, getter) => (__accessCheck$b(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
3011
3043
|
var __privateAdd$b = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
3012
|
-
var __privateMethod$
|
|
3044
|
+
var __privateMethod$8 = (obj, member, method) => (__accessCheck$b(obj, member, "access private method"), method);
|
|
3013
3045
|
var _OdxModal_instances, handleOpenChange_fn, _handleKeyDown, _handleClick$1;
|
|
3014
3046
|
(async () => {
|
|
3015
3047
|
await 0;
|
|
@@ -3109,7 +3141,7 @@ let OdxModal = class extends CustomElement {
|
|
|
3109
3141
|
updated(props) {
|
|
3110
3142
|
super.updated?.(props);
|
|
3111
3143
|
if (props.has("open")) {
|
|
3112
|
-
__privateMethod$
|
|
3144
|
+
__privateMethod$8(this, _OdxModal_instances, handleOpenChange_fn).call(this, props.get("open"));
|
|
3113
3145
|
}
|
|
3114
3146
|
}
|
|
3115
3147
|
};
|
|
@@ -3150,7 +3182,7 @@ const ModalVariant = {
|
|
|
3150
3182
|
SIDESHEET: "sidesheet"
|
|
3151
3183
|
};
|
|
3152
3184
|
|
|
3153
|
-
const styles$v = "@layer base{:host{flex:0 0 auto}[part=base]{text-align:start;place-content:flex-start;outline-offset:0}[part=label]{margin-inline-end:auto}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0}}";
|
|
3185
|
+
const styles$v = "@layer base{:host{flex:0 0 auto}[part=base]{text-align:start;place-content:flex-start;outline-offset:0}[part=label]{margin-inline-end:auto}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0;odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}}}";
|
|
3154
3186
|
|
|
3155
3187
|
var __defProp$x = Object.defineProperty;
|
|
3156
3188
|
var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
|
|
@@ -3629,7 +3661,7 @@ var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Ca
|
|
|
3629
3661
|
var __privateGet$7 = (obj, member, getter) => (__accessCheck$9(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
3630
3662
|
var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
3631
3663
|
var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$9(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
3632
|
-
var __privateMethod$
|
|
3664
|
+
var __privateMethod$7 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
|
|
3633
3665
|
var _value, _search, _OdxSearchBar_instances, inputValue_get, _handleSearch, _handleInput, _handleClear$1, updateValue_fn;
|
|
3634
3666
|
let OdxSearchBar = class extends CustomElement {
|
|
3635
3667
|
constructor() {
|
|
@@ -3659,7 +3691,7 @@ let OdxSearchBar = class extends CustomElement {
|
|
|
3659
3691
|
}
|
|
3660
3692
|
search(value, options) {
|
|
3661
3693
|
if (__privateGet$7(this, _value) === value && options?.forceUpdate !== true) return;
|
|
3662
|
-
__privateMethod$
|
|
3694
|
+
__privateMethod$7(this, _OdxSearchBar_instances, updateValue_fn).call(this, value, options?.updateInput);
|
|
3663
3695
|
if (options?.emitEvent === false) return;
|
|
3664
3696
|
this.dispatchEvent(new SearchEvent(value, this.inputElement.value));
|
|
3665
3697
|
}
|
|
@@ -3675,6 +3707,7 @@ let OdxSearchBar = class extends CustomElement {
|
|
|
3675
3707
|
render() {
|
|
3676
3708
|
return html`
|
|
3677
3709
|
<odx-input
|
|
3710
|
+
clearable
|
|
3678
3711
|
class="input"
|
|
3679
3712
|
spellcheck="false"
|
|
3680
3713
|
autocomplete="off"
|
|
@@ -3719,7 +3752,7 @@ OdxSearchBar = __decorateClass$o([
|
|
|
3719
3752
|
customElement("odx-search-bar", [styles$m])
|
|
3720
3753
|
], OdxSearchBar);
|
|
3721
3754
|
|
|
3722
|
-
const styles$l = "@layer base{:host{
|
|
3755
|
+
const styles$l = "@layer base{:host{--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-input-control-stroke);--_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);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;align-items:center;padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;block-size:var(--_control-size);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--_padding-block);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto}.indicator{font-size:var(--odx-size-175)}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}}@layer state{:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);--_color-background: var(--odx-color-disabled-fill);--_color-stroke: var(--odx-color-disabled-stroke);.base{cursor:not-allowed}slot[name=placeholder]{color:var(---_color-foreground)}}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}}";
|
|
3723
3756
|
|
|
3724
3757
|
var __defProp$n = Object.defineProperty;
|
|
3725
3758
|
var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
|
|
@@ -3737,10 +3770,12 @@ var __decorateClass$n = (decorators, target, key, kind) => {
|
|
|
3737
3770
|
var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
|
|
3738
3771
|
var __privateGet$6 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
3739
3772
|
var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
3740
|
-
var
|
|
3773
|
+
var __privateMethod$6 = (obj, member, method) => (__accessCheck$8(obj, member, "access private method"), method);
|
|
3774
|
+
var _OdxSelect_instances, isClearable_fn, _handleSlotChange$2, _handleChipRemove, _handleClear;
|
|
3741
3775
|
let OdxSelect = class extends ListboxFormControl {
|
|
3742
3776
|
constructor() {
|
|
3743
3777
|
super();
|
|
3778
|
+
__privateAdd$8(this, _OdxSelect_instances);
|
|
3744
3779
|
this.maxVisibleSelectedOptions = 2;
|
|
3745
3780
|
__privateAdd$8(this, _handleSlotChange$2, () => {
|
|
3746
3781
|
for (const option of this.options) {
|
|
@@ -3753,9 +3788,7 @@ let OdxSelect = class extends ListboxFormControl {
|
|
|
3753
3788
|
__privateAdd$8(this, _handleClear, (event) => {
|
|
3754
3789
|
event.stopPropagation();
|
|
3755
3790
|
event.preventDefault();
|
|
3756
|
-
|
|
3757
|
-
this.toggleOption(option, false);
|
|
3758
|
-
}
|
|
3791
|
+
this.clear();
|
|
3759
3792
|
});
|
|
3760
3793
|
if (!isServer) {
|
|
3761
3794
|
this.addEventListener("change", () => {
|
|
@@ -3765,8 +3798,19 @@ let OdxSelect = class extends ListboxFormControl {
|
|
|
3765
3798
|
this.addEventListener("blur", () => this.dropdown.hidePopover());
|
|
3766
3799
|
}
|
|
3767
3800
|
}
|
|
3801
|
+
clear() {
|
|
3802
|
+
if (!__privateMethod$6(this, _OdxSelect_instances, isClearable_fn).call(this) || this.emit("clear")) return;
|
|
3803
|
+
this.updateValue(void 0);
|
|
3804
|
+
this.focus();
|
|
3805
|
+
}
|
|
3806
|
+
focus() {
|
|
3807
|
+
this.focusableElement.focus();
|
|
3808
|
+
}
|
|
3768
3809
|
render() {
|
|
3769
|
-
const
|
|
3810
|
+
const clearButton = when(
|
|
3811
|
+
!this.multiple && __privateMethod$6(this, _OdxSelect_instances, isClearable_fn).call(this),
|
|
3812
|
+
() => html`<odx-icon-button icon="core::close" size="sm" tabindex="-1" variant="ghost" @click=${__privateGet$6(this, _handleClear)}></odx-icon-button>`
|
|
3813
|
+
);
|
|
3770
3814
|
return html`
|
|
3771
3815
|
<div id="select-trigger" class="base" tabindex="0">
|
|
3772
3816
|
<div class="value" odxPreventTextOverflow>
|
|
@@ -3776,7 +3820,7 @@ let OdxSelect = class extends ListboxFormControl {
|
|
|
3776
3820
|
() => html`<slot name="placeholder">Select options</slot>`
|
|
3777
3821
|
)}
|
|
3778
3822
|
</div>
|
|
3779
|
-
${
|
|
3823
|
+
${clearButton}
|
|
3780
3824
|
<odx-icon class="indicator" name="core::chevron-down"></odx-icon>
|
|
3781
3825
|
</div>
|
|
3782
3826
|
<odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width>
|
|
@@ -3796,9 +3840,16 @@ let OdxSelect = class extends ListboxFormControl {
|
|
|
3796
3840
|
`;
|
|
3797
3841
|
}
|
|
3798
3842
|
};
|
|
3843
|
+
_OdxSelect_instances = new WeakSet();
|
|
3844
|
+
isClearable_fn = function() {
|
|
3845
|
+
return !this.disabled && !this.readonly && !this.required && !!this.value;
|
|
3846
|
+
};
|
|
3799
3847
|
_handleSlotChange$2 = new WeakMap();
|
|
3800
3848
|
_handleChipRemove = new WeakMap();
|
|
3801
3849
|
_handleClear = new WeakMap();
|
|
3850
|
+
__decorateClass$n([
|
|
3851
|
+
query(".base", true)
|
|
3852
|
+
], OdxSelect.prototype, "focusableElement", 2);
|
|
3802
3853
|
__decorateClass$n([
|
|
3803
3854
|
queryAssignedElements({ selector: '[role="option"]', flatten: true })
|
|
3804
3855
|
], OdxSelect.prototype, "options", 2);
|