@odx/foundation 0.1.0-alpha.6 → 0.1.0-alpha.7
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/base-link-CvZZE13a.js +69 -0
- package/dist/components/checkbox/checkbox.component.d.ts +1 -1
- package/dist/components/checkbox/checkbox.component.d.ts.map +1 -1
- package/dist/components/checkbox/index.d.ts +0 -1
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.component.d.ts +14 -0
- package/dist/components/checkbox-group/checkbox-group.component.d.ts.map +1 -0
- package/dist/{elements/checkbox-group/models/checkbox-group-variant.d.ts → components/checkbox-group/checkbox-group.models.d.ts} +1 -1
- package/dist/components/checkbox-group/checkbox-group.models.d.ts.map +1 -0
- package/dist/components/checkbox-group/index.d.ts +3 -0
- package/dist/components/checkbox-group/index.d.ts.map +1 -0
- package/dist/components/main.d.ts +3 -0
- package/dist/components/main.d.ts.map +1 -1
- package/dist/components/option/option.component.d.ts +1 -1
- package/dist/components/option/option.component.d.ts.map +1 -1
- package/dist/components/radio-button/index.d.ts +2 -0
- package/dist/components/radio-button/index.d.ts.map +1 -0
- package/dist/components/radio-button/radio-button.component.d.ts +13 -0
- package/dist/components/radio-button/radio-button.component.d.ts.map +1 -0
- package/dist/components/radio-group/index.d.ts +4 -0
- package/dist/components/radio-group/index.d.ts.map +1 -0
- package/dist/components/radio-group/radio-group.component.d.ts +11 -0
- package/dist/components/radio-group/radio-group.component.d.ts.map +1 -0
- package/dist/{elements/radio-group/models/radio-group-variant.d.ts → components/radio-group/radio-group.models.d.ts} +1 -1
- package/dist/components/radio-group/radio-group.models.d.ts.map +1 -0
- package/dist/components.js +360 -308
- package/dist/elements/main.d.ts +0 -3
- package/dist/elements/main.d.ts.map +1 -1
- package/dist/elements/select/select.element.d.ts +3 -1
- package/dist/elements/select/select.element.d.ts.map +1 -1
- package/dist/elements/switch/switch.element.d.ts +1 -1
- package/dist/elements/switch/switch.element.d.ts.map +1 -1
- package/dist/elements/table/elements/table-header/table-header.element.d.ts +1 -1
- package/dist/elements/table/elements/table-header/table-header.element.d.ts.map +1 -1
- package/dist/elements/toggle-button/toggle-button.element.d.ts +1 -1
- package/dist/elements/toggle-button/toggle-button.element.d.ts.map +1 -1
- package/dist/elements.js +198 -558
- package/dist/{components/checkbox → lib/facade}/checkbox-control.d.ts +2 -2
- package/dist/lib/facade/checkbox-control.d.ts.map +1 -0
- package/dist/{elements/checkbox-group → lib/facade}/checkbox-group-control.d.ts +4 -4
- package/dist/lib/facade/checkbox-group-control.d.ts.map +1 -0
- package/dist/lib/facade/index.d.ts +6 -0
- package/dist/lib/facade/index.d.ts.map +1 -0
- package/dist/{components/option → lib/facade}/option-control.d.ts +3 -2
- package/dist/lib/facade/option-control.d.ts.map +1 -0
- package/dist/{elements/radio-group → lib/facade}/radio-group-control.d.ts +4 -4
- package/dist/lib/facade/radio-group-control.d.ts.map +1 -0
- package/dist/lib/facade/select-control.d.ts +16 -0
- package/dist/lib/facade/select-control.d.ts.map +1 -0
- package/dist/main.d.ts +1 -0
- package/dist/main.d.ts.map +1 -1
- package/dist/main.js +245 -669
- package/dist/radio-group-control-QWelHLuv.js +810 -0
- package/package.json +1 -1
- package/dist/checkbox-control-DjGOb6bn.js +0 -153
- package/dist/components/checkbox/checkbox-control.d.ts.map +0 -1
- package/dist/components/option/option-control.d.ts.map +0 -1
- package/dist/elements/checkbox-group/checkbox-group-control.d.ts.map +0 -1
- package/dist/elements/checkbox-group/checkbox-group.element.d.ts +0 -14
- package/dist/elements/checkbox-group/checkbox-group.element.d.ts.map +0 -1
- package/dist/elements/checkbox-group/index.d.ts +0 -4
- package/dist/elements/checkbox-group/index.d.ts.map +0 -1
- package/dist/elements/checkbox-group/models/checkbox-group-variant.d.ts.map +0 -1
- package/dist/elements/checkbox-group/models/index.d.ts +0 -2
- package/dist/elements/checkbox-group/models/index.d.ts.map +0 -1
- package/dist/elements/radio-button/index.d.ts +0 -2
- package/dist/elements/radio-button/index.d.ts.map +0 -1
- package/dist/elements/radio-button/radio-button.element.d.ts +0 -13
- package/dist/elements/radio-button/radio-button.element.d.ts.map +0 -1
- package/dist/elements/radio-group/index.d.ts +0 -4
- package/dist/elements/radio-group/index.d.ts.map +0 -1
- package/dist/elements/radio-group/models/index.d.ts +0 -2
- package/dist/elements/radio-group/models/index.d.ts.map +0 -1
- package/dist/elements/radio-group/models/radio-group-variant.d.ts.map +0 -1
- package/dist/elements/radio-group/radio-group-control.d.ts.map +0 -1
- package/dist/elements/radio-group/radio-group.element.d.ts +0 -13
- package/dist/elements/radio-group/radio-group.element.d.ts.map +0 -1
- package/dist/elements/select/select-control.d.ts +0 -16
- package/dist/elements/select/select-control.d.ts.map +0 -1
package/dist/components.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { CustomElement, customElement, toAriaBooleanAttribute, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, IsLocalized, parseDate,
|
|
1
|
+
import { CustomElement, customElement, toAriaBooleanAttribute, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, CheckboxControl, CheckboxGroupControl, IsLocalized, parseDate, OptionControl, SharedResizeObserver, toPx, optionalSlot, RadioGroupControl, IsTranslatable } from '@odx/foundation';
|
|
2
2
|
import { html, isServer, css, nothing } from 'lit';
|
|
3
3
|
import { property, queryAssignedElements, query } from 'lit/decorators.js';
|
|
4
4
|
import { when } from 'lit/directives/when.js';
|
|
5
|
-
import { B as BaseLink
|
|
5
|
+
import { B as BaseLink } from './base-link-CvZZE13a.js';
|
|
6
6
|
import { clamp, debounce } from 'es-toolkit';
|
|
7
|
+
export { c as RadioGroupControl } from './radio-group-control-QWelHLuv.js';
|
|
7
8
|
|
|
8
|
-
const styles$
|
|
9
|
+
const styles$r = ":host{--_background-color: var(--odx-avatar-background, var(--odx-palette-coolgray-20));--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;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(--_background-color);transition:var(--odx-transition-base);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
|
|
9
10
|
|
|
10
|
-
var __defProp$
|
|
11
|
-
var __getOwnPropDesc$
|
|
12
|
-
var __decorateClass$
|
|
13
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
11
|
+
var __defProp$s = Object.defineProperty;
|
|
12
|
+
var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
|
|
13
|
+
var __decorateClass$y = (decorators, target, key, kind) => {
|
|
14
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
|
|
14
15
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
15
16
|
if (decorator = decorators[i])
|
|
16
17
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
17
|
-
if (kind && result) __defProp$
|
|
18
|
+
if (kind && result) __defProp$s(target, key, result);
|
|
18
19
|
return result;
|
|
19
20
|
};
|
|
20
21
|
let OdxAvatarComponent = class extends CustomElement {
|
|
@@ -22,14 +23,14 @@ let OdxAvatarComponent = class extends CustomElement {
|
|
|
22
23
|
return html`<slot></slot>`;
|
|
23
24
|
}
|
|
24
25
|
};
|
|
25
|
-
__decorateClass$
|
|
26
|
+
__decorateClass$y([
|
|
26
27
|
property({ reflect: true })
|
|
27
28
|
], OdxAvatarComponent.prototype, "size", 2);
|
|
28
|
-
__decorateClass$
|
|
29
|
+
__decorateClass$y([
|
|
29
30
|
property({ reflect: true })
|
|
30
31
|
], OdxAvatarComponent.prototype, "variant", 2);
|
|
31
|
-
OdxAvatarComponent = __decorateClass$
|
|
32
|
-
customElement("odx-avatar", [styles$
|
|
32
|
+
OdxAvatarComponent = __decorateClass$y([
|
|
33
|
+
customElement("odx-avatar", [styles$r])
|
|
33
34
|
], OdxAvatarComponent);
|
|
34
35
|
|
|
35
36
|
const AvatarSize = {
|
|
@@ -43,16 +44,16 @@ const AvatarVariant = {
|
|
|
43
44
|
RECTANGLE: "rectangle"
|
|
44
45
|
};
|
|
45
46
|
|
|
46
|
-
const styles$
|
|
47
|
+
const styles$q = ":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-outline-sm);border-color:var(--odx-color-surface)}::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)}";
|
|
47
48
|
|
|
48
|
-
var __defProp$
|
|
49
|
-
var __getOwnPropDesc$
|
|
50
|
-
var __decorateClass$
|
|
51
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
49
|
+
var __defProp$r = Object.defineProperty;
|
|
50
|
+
var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
|
|
51
|
+
var __decorateClass$x = (decorators, target, key, kind) => {
|
|
52
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
|
|
52
53
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
53
54
|
if (decorator = decorators[i])
|
|
54
55
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
55
|
-
if (kind && result) __defProp$
|
|
56
|
+
if (kind && result) __defProp$r(target, key, result);
|
|
56
57
|
return result;
|
|
57
58
|
};
|
|
58
59
|
let OdxAvatarGroupComponent = class extends CustomElement {
|
|
@@ -60,26 +61,26 @@ let OdxAvatarGroupComponent = class extends CustomElement {
|
|
|
60
61
|
return html`<slot></slot>`;
|
|
61
62
|
}
|
|
62
63
|
};
|
|
63
|
-
__decorateClass$
|
|
64
|
+
__decorateClass$x([
|
|
64
65
|
property({ reflect: true })
|
|
65
66
|
], OdxAvatarGroupComponent.prototype, "size", 2);
|
|
66
|
-
__decorateClass$
|
|
67
|
+
__decorateClass$x([
|
|
67
68
|
property({ reflect: true })
|
|
68
69
|
], OdxAvatarGroupComponent.prototype, "variant", 2);
|
|
69
|
-
OdxAvatarGroupComponent = __decorateClass$
|
|
70
|
-
customElement("odx-avatar-group", [styles$
|
|
70
|
+
OdxAvatarGroupComponent = __decorateClass$x([
|
|
71
|
+
customElement("odx-avatar-group", [styles$q])
|
|
71
72
|
], OdxAvatarGroupComponent);
|
|
72
73
|
|
|
73
|
-
const styles$
|
|
74
|
+
const styles$p = ":host{--_color-fill: var(--odx-color-surface);--_color-text: var(--odx-color-text);display:inline-block;line-height:0}:host::part(content){--_font-size: var(--odx-typography-font-size-1);block-size:var(--odx-size-100);line-height:var(--odx-size-100);min-inline-size:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-fill);color:var(--_color-text);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-37);text-align:center}:host([variant=\"primary\"])::part(content){--_color-fill: var(--odx-color-primary-rest);--_color-text: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"])::part(content){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"])::part(content){--_color-fill: var(--odx-color-highlight-rest);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"])::part(content){--_color-fill: var(--odx-color-success-rest);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"warning\"])::part(content){--_color-fill: var(--odx-color-warning-rest);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"danger\"])::part(content){--_color-fill: var(--odx-color-danger-rest);--_color-text: var(--odx-color-foreground-light)}";
|
|
74
75
|
|
|
75
|
-
var __defProp$
|
|
76
|
-
var __getOwnPropDesc$
|
|
77
|
-
var __decorateClass$
|
|
78
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
76
|
+
var __defProp$q = Object.defineProperty;
|
|
77
|
+
var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
|
|
78
|
+
var __decorateClass$w = (decorators, target, key, kind) => {
|
|
79
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
|
|
79
80
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
80
81
|
if (decorator = decorators[i])
|
|
81
82
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
82
|
-
if (kind && result) __defProp$
|
|
83
|
+
if (kind && result) __defProp$q(target, key, result);
|
|
83
84
|
return result;
|
|
84
85
|
};
|
|
85
86
|
let OdxBadgeComponent = class extends CustomElement {
|
|
@@ -91,11 +92,11 @@ let OdxBadgeComponent = class extends CustomElement {
|
|
|
91
92
|
`;
|
|
92
93
|
}
|
|
93
94
|
};
|
|
94
|
-
__decorateClass$
|
|
95
|
+
__decorateClass$w([
|
|
95
96
|
property({ reflect: true })
|
|
96
97
|
], OdxBadgeComponent.prototype, "variant", 2);
|
|
97
|
-
OdxBadgeComponent = __decorateClass$
|
|
98
|
-
customElement("odx-badge", [styles$
|
|
98
|
+
OdxBadgeComponent = __decorateClass$w([
|
|
99
|
+
customElement("odx-badge", [styles$p])
|
|
99
100
|
], OdxBadgeComponent);
|
|
100
101
|
|
|
101
102
|
const BadgeVariant = {
|
|
@@ -107,16 +108,16 @@ const BadgeVariant = {
|
|
|
107
108
|
DANGER: "danger"
|
|
108
109
|
};
|
|
109
110
|
|
|
110
|
-
const styles$
|
|
111
|
+
const styles$o = ":host{display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--odx-link-color: var(--odx-link-color-hover, var(--odx-palette-blue-80))}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"])),:host([subtle]:not([subtle=\"false\"]):not(:hover)){text-decoration:none}:host([disabled])::part(anchor){--odx-link-color: var(--odx-link-color-disabled, var(--odx-palette-coolgray-40));cursor:default}";
|
|
111
112
|
|
|
112
|
-
var __defProp$
|
|
113
|
-
var __getOwnPropDesc$
|
|
114
|
-
var __decorateClass$
|
|
115
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
113
|
+
var __defProp$p = Object.defineProperty;
|
|
114
|
+
var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
|
|
115
|
+
var __decorateClass$v = (decorators, target, key, kind) => {
|
|
116
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
|
|
116
117
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
117
118
|
if (decorator = decorators[i])
|
|
118
119
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
119
|
-
if (kind && result) __defProp$
|
|
120
|
+
if (kind && result) __defProp$p(target, key, result);
|
|
120
121
|
return result;
|
|
121
122
|
};
|
|
122
123
|
let OdxLinkComponent = class extends BaseLink {
|
|
@@ -125,34 +126,34 @@ let OdxLinkComponent = class extends BaseLink {
|
|
|
125
126
|
this.subtle = false;
|
|
126
127
|
}
|
|
127
128
|
};
|
|
128
|
-
__decorateClass$
|
|
129
|
+
__decorateClass$v([
|
|
129
130
|
property({ type: Boolean, reflect: true })
|
|
130
131
|
], OdxLinkComponent.prototype, "subtle", 2);
|
|
131
|
-
OdxLinkComponent = __decorateClass$
|
|
132
|
-
customElement("odx-link", [styles$
|
|
132
|
+
OdxLinkComponent = __decorateClass$v([
|
|
133
|
+
customElement("odx-link", [styles$o])
|
|
133
134
|
], OdxLinkComponent);
|
|
134
135
|
|
|
135
|
-
const styles$
|
|
136
|
+
const styles$n = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}:host::part(separator){color:var(--odx-color-foreground-muted)}";
|
|
136
137
|
|
|
137
|
-
var __getOwnPropDesc$
|
|
138
|
-
var __typeError$
|
|
138
|
+
var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
|
|
139
|
+
var __typeError$9 = (msg) => {
|
|
139
140
|
throw TypeError(msg);
|
|
140
141
|
};
|
|
141
|
-
var __decorateClass$
|
|
142
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
142
|
+
var __decorateClass$u = (decorators, target, key, kind) => {
|
|
143
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
|
|
143
144
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
144
145
|
if (decorator = decorators[i])
|
|
145
146
|
result = (decorator(result)) || result;
|
|
146
147
|
return result;
|
|
147
148
|
};
|
|
148
|
-
var __accessCheck$
|
|
149
|
-
var __privateAdd$
|
|
150
|
-
var __privateMethod$6 = (obj, member, method) => (__accessCheck$
|
|
149
|
+
var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
|
|
150
|
+
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);
|
|
151
|
+
var __privateMethod$6 = (obj, member, method) => (__accessCheck$9(obj, member, "access private method"), method);
|
|
151
152
|
var _OdxBreadcrumbItemComponent_instances, updateVisibility_fn;
|
|
152
153
|
let OdxBreadcrumbItemComponent = class extends CustomElement {
|
|
153
154
|
constructor() {
|
|
154
155
|
super(...arguments);
|
|
155
|
-
__privateAdd$
|
|
156
|
+
__privateAdd$9(this, _OdxBreadcrumbItemComponent_instances);
|
|
156
157
|
}
|
|
157
158
|
get interactiveElement() {
|
|
158
159
|
return this.querySelector(OdxLinkComponent.selector);
|
|
@@ -178,33 +179,33 @@ updateVisibility_fn = function() {
|
|
|
178
179
|
this.interactiveElement.subtle = true;
|
|
179
180
|
this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
|
|
180
181
|
};
|
|
181
|
-
OdxBreadcrumbItemComponent = __decorateClass$
|
|
182
|
-
customElement("odx-breadcrumb-item", [styles$
|
|
182
|
+
OdxBreadcrumbItemComponent = __decorateClass$u([
|
|
183
|
+
customElement("odx-breadcrumb-item", [styles$n])
|
|
183
184
|
], OdxBreadcrumbItemComponent);
|
|
184
185
|
|
|
185
|
-
const styles$
|
|
186
|
+
const styles$m = ":host{--_breadcrumb-gap: var(--odx-size-37);display:flex;column-gap:var(--_breadcrumb-gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_breadcrumb-gap)}";
|
|
186
187
|
|
|
187
|
-
var __defProp$
|
|
188
|
-
var __getOwnPropDesc$
|
|
189
|
-
var __typeError$
|
|
188
|
+
var __defProp$o = Object.defineProperty;
|
|
189
|
+
var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
|
|
190
|
+
var __typeError$8 = (msg) => {
|
|
190
191
|
throw TypeError(msg);
|
|
191
192
|
};
|
|
192
|
-
var __decorateClass$
|
|
193
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
193
|
+
var __decorateClass$t = (decorators, target, key, kind) => {
|
|
194
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
|
|
194
195
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
195
196
|
if (decorator = decorators[i])
|
|
196
197
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
197
|
-
if (kind && result) __defProp$
|
|
198
|
+
if (kind && result) __defProp$o(target, key, result);
|
|
198
199
|
return result;
|
|
199
200
|
};
|
|
200
|
-
var __accessCheck$
|
|
201
|
-
var __privateAdd$
|
|
202
|
-
var __privateMethod$5 = (obj, member, method) => (__accessCheck$
|
|
201
|
+
var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
|
|
202
|
+
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);
|
|
203
|
+
var __privateMethod$5 = (obj, member, method) => (__accessCheck$8(obj, member, "access private method"), method);
|
|
203
204
|
var _OdxBreadcrumbComponent_instances, updateContext_fn;
|
|
204
205
|
let OdxBreadcrumbComponent = class extends CustomElement {
|
|
205
206
|
constructor() {
|
|
206
207
|
super(...arguments);
|
|
207
|
-
__privateAdd$
|
|
208
|
+
__privateAdd$8(this, _OdxBreadcrumbComponent_instances);
|
|
208
209
|
this.max = 5;
|
|
209
210
|
}
|
|
210
211
|
render() {
|
|
@@ -233,43 +234,43 @@ updateContext_fn = async function() {
|
|
|
233
234
|
item.ariaHidden = toAriaBooleanAttribute(this.max < 2 || visibleItems.length === items.length);
|
|
234
235
|
}
|
|
235
236
|
};
|
|
236
|
-
__decorateClass$
|
|
237
|
+
__decorateClass$t([
|
|
237
238
|
queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
|
|
238
239
|
], OdxBreadcrumbComponent.prototype, "items", 2);
|
|
239
|
-
__decorateClass$
|
|
240
|
+
__decorateClass$t([
|
|
240
241
|
queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
|
|
241
242
|
], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
|
|
242
|
-
__decorateClass$
|
|
243
|
+
__decorateClass$t([
|
|
243
244
|
queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
|
|
244
245
|
], OdxBreadcrumbComponent.prototype, "rootItems", 2);
|
|
245
|
-
__decorateClass$
|
|
246
|
+
__decorateClass$t([
|
|
246
247
|
property({ type: Number })
|
|
247
248
|
], OdxBreadcrumbComponent.prototype, "max", 2);
|
|
248
|
-
OdxBreadcrumbComponent = __decorateClass$
|
|
249
|
-
customElement("odx-breadcrumb", [styles$
|
|
249
|
+
OdxBreadcrumbComponent = __decorateClass$t([
|
|
250
|
+
customElement("odx-breadcrumb", [styles$m])
|
|
250
251
|
], OdxBreadcrumbComponent);
|
|
251
252
|
|
|
252
|
-
var __defProp$
|
|
253
|
-
var __getOwnPropDesc$
|
|
254
|
-
var __typeError$
|
|
253
|
+
var __defProp$n = Object.defineProperty;
|
|
254
|
+
var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
|
|
255
|
+
var __typeError$7 = (msg) => {
|
|
255
256
|
throw TypeError(msg);
|
|
256
257
|
};
|
|
257
|
-
var __decorateClass$
|
|
258
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
258
|
+
var __decorateClass$s = (decorators, target, key, kind) => {
|
|
259
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
|
|
259
260
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
260
261
|
if (decorator = decorators[i])
|
|
261
262
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
262
|
-
if (kind && result) __defProp$
|
|
263
|
+
if (kind && result) __defProp$n(target, key, result);
|
|
263
264
|
return result;
|
|
264
265
|
};
|
|
265
|
-
var __accessCheck$
|
|
266
|
-
var __privateAdd$
|
|
267
|
-
var __privateMethod$4 = (obj, member, method) => (__accessCheck$
|
|
266
|
+
var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
|
|
267
|
+
var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
268
|
+
var __privateMethod$4 = (obj, member, method) => (__accessCheck$7(obj, member, "access private method"), method);
|
|
268
269
|
var _BaseButtonComponent_instances, renderButton_fn;
|
|
269
270
|
let BaseButtonComponent = class extends BaseLink {
|
|
270
271
|
constructor() {
|
|
271
272
|
super(...arguments);
|
|
272
|
-
__privateAdd$
|
|
273
|
+
__privateAdd$7(this, _BaseButtonComponent_instances);
|
|
273
274
|
this.type = "button";
|
|
274
275
|
}
|
|
275
276
|
render() {
|
|
@@ -301,38 +302,38 @@ renderButton_fn = function() {
|
|
|
301
302
|
${this.renderContent()}
|
|
302
303
|
</button>`;
|
|
303
304
|
};
|
|
304
|
-
__decorateClass$
|
|
305
|
+
__decorateClass$s([
|
|
305
306
|
property()
|
|
306
307
|
], BaseButtonComponent.prototype, "type", 2);
|
|
307
|
-
BaseButtonComponent = __decorateClass$
|
|
308
|
+
BaseButtonComponent = __decorateClass$s([
|
|
308
309
|
requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"])
|
|
309
310
|
], BaseButtonComponent);
|
|
310
311
|
|
|
311
|
-
const styles$
|
|
312
|
+
const styles$l = ":host{--_color-border: transparent;--_color-border-hover: transparent;--_color-border-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_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-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-border);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-fill);color:var(--_color-text);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-text);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-fill: var(--_color-fill-hover);--_color-border: var(--_color-border-hover)}:host(:active)::part(anchor){--_color-fill: var(--_color-fill-pressed);--_color-border: var(--_color-border-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);--_color-border: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([variant=\"primary\"]){--_color-fill: var(--odx-color-primary-rest);--_color-fill-hover: var(--odx-color-primary-hover);--_color-fill-pressed: var(--odx-color-primary-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-fill: var(--odx-color-highlight-rest);--_color-fill-hover: var(--odx-color-highlight-hover);--_color-fill-pressed: var(--odx-color-highlight-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-fill-hover: var(--odx-experience-color-secondary-hover);--_color-fill-pressed: var(--odx-experience-color-secondary-pressed);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-fill: var(--odx-color-transparent);--_color-text: var(--odx-color-foreground);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-fill: var(--odx-color-danger-rest);--_color-fill-hover: var(--odx-color-danger-hover);--_color-fill-pressed: var(--odx-color-danger-pressed);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-fill: var(--odx-color-success-rest);--_color-fill-hover: var(--odx-color-success-hover);--_color-fill-pressed: var(--odx-color-success-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-fill: var(--odx-color-confirmation-rest);--_color-fill-hover: var(--odx-color-confirmation-hover);--_color-fill-pressed: var(--odx-color-confirmation-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){font-size:var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
|
|
312
313
|
|
|
313
|
-
var __defProp$
|
|
314
|
-
var __getOwnPropDesc$
|
|
315
|
-
var __typeError$
|
|
314
|
+
var __defProp$m = Object.defineProperty;
|
|
315
|
+
var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
|
|
316
|
+
var __typeError$6 = (msg) => {
|
|
316
317
|
throw TypeError(msg);
|
|
317
318
|
};
|
|
318
|
-
var __decorateClass$
|
|
319
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
319
|
+
var __decorateClass$r = (decorators, target, key, kind) => {
|
|
320
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
|
|
320
321
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
321
322
|
if (decorator = decorators[i])
|
|
322
323
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
323
|
-
if (kind && result) __defProp$
|
|
324
|
+
if (kind && result) __defProp$m(target, key, result);
|
|
324
325
|
return result;
|
|
325
326
|
};
|
|
326
|
-
var __accessCheck$
|
|
327
|
-
var __privateGet$
|
|
328
|
-
var __privateAdd$
|
|
329
|
-
var __privateMethod$3 = (obj, member, method) => (__accessCheck$
|
|
327
|
+
var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
|
|
328
|
+
var __privateGet$5 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), member.get(obj));
|
|
329
|
+
var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
330
|
+
var __privateMethod$3 = (obj, member, method) => (__accessCheck$6(obj, member, "access private method"), method);
|
|
330
331
|
var _internals, _OdxButtonComponent_instances, handleClick_fn;
|
|
331
332
|
let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
|
|
332
333
|
constructor() {
|
|
333
334
|
super();
|
|
334
|
-
__privateAdd$
|
|
335
|
-
__privateAdd$
|
|
335
|
+
__privateAdd$6(this, _OdxButtonComponent_instances);
|
|
336
|
+
__privateAdd$6(this, _internals, this.attachInternals());
|
|
336
337
|
if (!isServer) {
|
|
337
338
|
this.addEventListener("click", __privateMethod$3(this, _OdxButtonComponent_instances, handleClick_fn));
|
|
338
339
|
}
|
|
@@ -350,23 +351,23 @@ _internals = new WeakMap();
|
|
|
350
351
|
_OdxButtonComponent_instances = new WeakSet();
|
|
351
352
|
handleClick_fn = function(_event) {
|
|
352
353
|
if (this.type === "submit") {
|
|
353
|
-
__privateGet$
|
|
354
|
+
__privateGet$5(this, _internals).form?.requestSubmit();
|
|
354
355
|
return;
|
|
355
356
|
}
|
|
356
357
|
if (this.type === "reset") {
|
|
357
|
-
__privateGet$
|
|
358
|
+
__privateGet$5(this, _internals).form?.reset();
|
|
358
359
|
return;
|
|
359
360
|
}
|
|
360
361
|
};
|
|
361
362
|
OdxButtonComponent.formAssociated = true;
|
|
362
|
-
__decorateClass$
|
|
363
|
+
__decorateClass$r([
|
|
363
364
|
property({ reflect: true })
|
|
364
365
|
], OdxButtonComponent.prototype, "size", 2);
|
|
365
|
-
__decorateClass$
|
|
366
|
+
__decorateClass$r([
|
|
366
367
|
property({ reflect: true })
|
|
367
368
|
], OdxButtonComponent.prototype, "variant", 2);
|
|
368
|
-
OdxButtonComponent = __decorateClass$
|
|
369
|
-
customElement("odx-button", [styles$
|
|
369
|
+
OdxButtonComponent = __decorateClass$r([
|
|
370
|
+
customElement("odx-button", [styles$l])
|
|
370
371
|
], OdxButtonComponent);
|
|
371
372
|
|
|
372
373
|
const ButtonSize = {
|
|
@@ -384,16 +385,16 @@ const ButtonVariant = {
|
|
|
384
385
|
CONFIRMATION: "confirmation"
|
|
385
386
|
};
|
|
386
387
|
|
|
387
|
-
const styles$
|
|
388
|
+
const styles$k = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button):not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(:is(odx-button,odx-icon-button):focus-within){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button):first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button):first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
|
|
388
389
|
|
|
389
|
-
var __defProp$
|
|
390
|
-
var __getOwnPropDesc$
|
|
391
|
-
var __decorateClass$
|
|
392
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
390
|
+
var __defProp$l = Object.defineProperty;
|
|
391
|
+
var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
|
|
392
|
+
var __decorateClass$q = (decorators, target, key, kind) => {
|
|
393
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
|
|
393
394
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
394
395
|
if (decorator = decorators[i])
|
|
395
396
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
396
|
-
if (kind && result) __defProp$
|
|
397
|
+
if (kind && result) __defProp$l(target, key, result);
|
|
397
398
|
return result;
|
|
398
399
|
};
|
|
399
400
|
let OdxButtonGroupComponent = class extends CustomElement {
|
|
@@ -404,43 +405,42 @@ let OdxButtonGroupComponent = class extends CustomElement {
|
|
|
404
405
|
this.vertical = false;
|
|
405
406
|
}
|
|
406
407
|
};
|
|
407
|
-
__decorateClass$
|
|
408
|
+
__decorateClass$q([
|
|
408
409
|
property({ type: Boolean, reflect: true })
|
|
409
410
|
], OdxButtonGroupComponent.prototype, "block", 2);
|
|
410
|
-
__decorateClass$
|
|
411
|
+
__decorateClass$q([
|
|
411
412
|
property({ type: Boolean, reflect: true })
|
|
412
413
|
], OdxButtonGroupComponent.prototype, "connected", 2);
|
|
413
|
-
__decorateClass$
|
|
414
|
+
__decorateClass$q([
|
|
414
415
|
property({ type: Boolean, reflect: true })
|
|
415
416
|
], OdxButtonGroupComponent.prototype, "vertical", 2);
|
|
416
|
-
OdxButtonGroupComponent = __decorateClass$
|
|
417
|
-
customElement("odx-button-group", [styles$
|
|
417
|
+
OdxButtonGroupComponent = __decorateClass$q([
|
|
418
|
+
customElement("odx-button-group", [styles$k])
|
|
418
419
|
], OdxButtonGroupComponent);
|
|
419
420
|
|
|
420
|
-
const styles$
|
|
421
|
+
const styles$j = ":host{--_indicator-space: calc(var(--odx-size-25) / 2);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-fill: var(--odx-color-selection-control-fill);--_indicator-color-border: var(--odx-color-selection-control-stroke);--_indicator-color-text: var(--odx-palette-transparent);--_label-color-text: 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);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);padding:var(--_indicator-space);transition-property:outline-color}:host,:host::part(indicator),:host::part(content){transition:var(--odx-transition-reduced)}:host::part(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-fill);border:var(--odx-border-width-thin) solid var(--_indicator-color-border);border-color:var(--_indicator-color-border);color:var(--_indicator-color-text);transition-property:background-color,border-color}:host::part(label){display:inline-block}:host::part(content){color:var(--_label-color-text);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty))::part(indicator){margin-inline-end:var(--odx-size-75)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-border: var(--odx-color-selection-control-stroke-hover);--_indicator-color-fill: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host(:is([checked]:not([checked=\"false\"]),[indeterminate]:not([indeterminate=\"false\"]))){--_indicator-color-border: var(--odx-color-selection-control-stroke-selected);--_indicator-color-fill: var(--odx-color-selection-control-fill-selected);--_indicator-color-text: var(--odx-color-foreground-light)}:host([disabled]:not([disabled=\"false\"])){--_indicator-color-fill: var(--odx-color-disabled-fill);--_indicator-color-text: var(--odx-palette-transparent);--_indicator-color-border: var(--odx-selection-control-color-border-disabled);--_label-color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([disabled]:not([disabled=\"false\"]):is([checked]:not([checked=\"false\"]),[indeterminate]:not([indeterminate=\"false\"]))){--_indicator-color-fill: var(--odx-color-disabled-fill-selected);--_indicator-color-text: var(--odx-color-disabled-foreground-selected);--_indicator-color-border: var(--_indicator-color-fill)}:host([readonly]:not([readonly=\"false\"])){--_indicator-color-fill: var(--odx-color-selection-control-fill-readonly);--_indicator-color-border: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([readonly]:not([readonly=\"false\"]):is([checked]:not([checked=\"false\"]),[indeterminate]:not([indeterminate=\"false\"]))){--_indicator-color-text: var(--odx-color-foreground)}";
|
|
421
422
|
|
|
422
|
-
var __defProp$
|
|
423
|
-
var __getOwnPropDesc$
|
|
424
|
-
var __typeError$
|
|
423
|
+
var __defProp$k = Object.defineProperty;
|
|
424
|
+
var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
|
|
425
|
+
var __typeError$5 = (msg) => {
|
|
425
426
|
throw TypeError(msg);
|
|
426
427
|
};
|
|
427
|
-
var __decorateClass$
|
|
428
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
428
|
+
var __decorateClass$p = (decorators, target, key, kind) => {
|
|
429
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
|
|
429
430
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
430
431
|
if (decorator = decorators[i])
|
|
431
432
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
432
|
-
if (kind && result) __defProp$
|
|
433
|
+
if (kind && result) __defProp$k(target, key, result);
|
|
433
434
|
return result;
|
|
434
435
|
};
|
|
435
|
-
var __accessCheck$
|
|
436
|
-
var __privateAdd$
|
|
437
|
-
var __privateMethod$2 = (obj, member, method) => (__accessCheck$
|
|
436
|
+
var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
|
|
437
|
+
var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
438
|
+
var __privateMethod$2 = (obj, member, method) => (__accessCheck$5(obj, member, "access private method"), method);
|
|
438
439
|
var _OdxCheckboxComponent_instances, handleIndeterminateChange_fn;
|
|
439
|
-
const INDETERMINATE_STATE_KEY = "indeterminate";
|
|
440
440
|
let OdxCheckboxComponent = class extends CheckboxControl {
|
|
441
441
|
constructor() {
|
|
442
442
|
super(...arguments);
|
|
443
|
-
__privateAdd$
|
|
443
|
+
__privateAdd$5(this, _OdxCheckboxComponent_instances);
|
|
444
444
|
this.indeterminate = false;
|
|
445
445
|
}
|
|
446
446
|
render() {
|
|
@@ -473,21 +473,72 @@ let OdxCheckboxComponent = class extends CheckboxControl {
|
|
|
473
473
|
_OdxCheckboxComponent_instances = new WeakSet();
|
|
474
474
|
handleIndeterminateChange_fn = function() {
|
|
475
475
|
if (this.indeterminate) {
|
|
476
|
-
this.internals.states.add(INDETERMINATE_STATE_KEY);
|
|
477
476
|
this.internals.ariaChecked = "mixed";
|
|
478
|
-
} else {
|
|
479
|
-
this.internals.states.delete(INDETERMINATE_STATE_KEY);
|
|
480
477
|
}
|
|
481
478
|
};
|
|
482
|
-
__decorateClass$
|
|
479
|
+
__decorateClass$p([
|
|
483
480
|
property({ type: Boolean, reflect: true })
|
|
484
481
|
], OdxCheckboxComponent.prototype, "indeterminate", 2);
|
|
485
|
-
OdxCheckboxComponent = __decorateClass$
|
|
486
|
-
customElement("odx-checkbox", [styles$
|
|
482
|
+
OdxCheckboxComponent = __decorateClass$p([
|
|
483
|
+
customElement("odx-checkbox", [styles$j])
|
|
487
484
|
], OdxCheckboxComponent);
|
|
488
485
|
|
|
486
|
+
const styles$i = ":host{display:flex;flex-direction:column}::slotted(:is(odx-checkbox,odx-switch)){width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-sm);border-color:var(--odx-color-fill-disabled);padding:var(--odx-size-75);margin:0;width:auto;border-radius:0}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}";
|
|
487
|
+
|
|
488
|
+
var __defProp$j = Object.defineProperty;
|
|
489
|
+
var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
|
|
490
|
+
var __typeError$4 = (msg) => {
|
|
491
|
+
throw TypeError(msg);
|
|
492
|
+
};
|
|
493
|
+
var __decorateClass$o = (decorators, target, key, kind) => {
|
|
494
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
|
|
495
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
496
|
+
if (decorator = decorators[i])
|
|
497
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
498
|
+
if (kind && result) __defProp$j(target, key, result);
|
|
499
|
+
return result;
|
|
500
|
+
};
|
|
501
|
+
var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
|
|
502
|
+
var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
503
|
+
var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
504
|
+
var _handleSlotChange$3, _handleGroupControlChange;
|
|
505
|
+
let OdxCheckboxGroupComponent = class extends CheckboxGroupControl {
|
|
506
|
+
constructor() {
|
|
507
|
+
super(...arguments);
|
|
508
|
+
__privateAdd$4(this, _handleSlotChange$3, () => {
|
|
509
|
+
for (const control of this.groupControls) {
|
|
510
|
+
control.addEventListener("change", __privateGet$4(this, _handleGroupControlChange));
|
|
511
|
+
}
|
|
512
|
+
});
|
|
513
|
+
__privateAdd$4(this, _handleGroupControlChange, (event) => {
|
|
514
|
+
const { target } = event;
|
|
515
|
+
if (!this.isControl(target)) return;
|
|
516
|
+
event.stopImmediatePropagation();
|
|
517
|
+
this.updateValue(target.checked ? this.controls.map((control) => control.value) : [], true);
|
|
518
|
+
for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
|
|
519
|
+
groupControl.checked = target.checked;
|
|
520
|
+
}
|
|
521
|
+
});
|
|
522
|
+
}
|
|
523
|
+
render() {
|
|
524
|
+
return html`<slot @slotchange=${__privateGet$4(this, _handleSlotChange$3)}></slot>`;
|
|
525
|
+
}
|
|
526
|
+
};
|
|
527
|
+
_handleSlotChange$3 = new WeakMap();
|
|
528
|
+
_handleGroupControlChange = new WeakMap();
|
|
529
|
+
__decorateClass$o([
|
|
530
|
+
property({ reflect: true })
|
|
531
|
+
], OdxCheckboxGroupComponent.prototype, "variant", 2);
|
|
532
|
+
OdxCheckboxGroupComponent = __decorateClass$o([
|
|
533
|
+
customElement("odx-checkbox-group", [styles$i])
|
|
534
|
+
], OdxCheckboxGroupComponent);
|
|
535
|
+
|
|
536
|
+
const CheckboxGroupVariant = {
|
|
537
|
+
LIST: "list"
|
|
538
|
+
};
|
|
539
|
+
|
|
489
540
|
var __defProp$i = Object.defineProperty;
|
|
490
|
-
var __decorateClass$
|
|
541
|
+
var __decorateClass$n = (decorators, target, key, kind) => {
|
|
491
542
|
var result = void 0 ;
|
|
492
543
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
493
544
|
if (decorator = decorators[i])
|
|
@@ -510,14 +561,14 @@ class FormatComponent extends IsLocalized(CustomElement) {
|
|
|
510
561
|
return html`${this.fallbackValue ?? nothing}`;
|
|
511
562
|
}
|
|
512
563
|
}
|
|
513
|
-
__decorateClass$
|
|
564
|
+
__decorateClass$n([
|
|
514
565
|
property()
|
|
515
566
|
], FormatComponent.prototype, "fallbackValue");
|
|
516
567
|
|
|
517
568
|
var __defProp$h = Object.defineProperty;
|
|
518
|
-
var __getOwnPropDesc$
|
|
519
|
-
var __decorateClass$
|
|
520
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
569
|
+
var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
|
|
570
|
+
var __decorateClass$m = (decorators, target, key, kind) => {
|
|
571
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
|
|
521
572
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
522
573
|
if (decorator = decorators[i])
|
|
523
574
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -544,20 +595,20 @@ OdxFormatBytesComponent.UNIT_PREFIXES = {
|
|
|
544
595
|
bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
|
|
545
596
|
byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
|
|
546
597
|
};
|
|
547
|
-
__decorateClass$
|
|
598
|
+
__decorateClass$m([
|
|
548
599
|
property({ type: Number })
|
|
549
600
|
], OdxFormatBytesComponent.prototype, "value", 2);
|
|
550
|
-
__decorateClass$
|
|
601
|
+
__decorateClass$m([
|
|
551
602
|
property()
|
|
552
603
|
], OdxFormatBytesComponent.prototype, "unit", 2);
|
|
553
|
-
OdxFormatBytesComponent = __decorateClass$
|
|
604
|
+
OdxFormatBytesComponent = __decorateClass$m([
|
|
554
605
|
customElement("odx-format-bytes")
|
|
555
606
|
], OdxFormatBytesComponent);
|
|
556
607
|
|
|
557
608
|
var __defProp$g = Object.defineProperty;
|
|
558
|
-
var __getOwnPropDesc$
|
|
559
|
-
var __decorateClass$
|
|
560
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
609
|
+
var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
|
|
610
|
+
var __decorateClass$l = (decorators, target, key, kind) => {
|
|
611
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
|
|
561
612
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
562
613
|
if (decorator = decorators[i])
|
|
563
614
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -575,20 +626,20 @@ let OdxFormatDateComponent = class extends FormatComponent {
|
|
|
575
626
|
return this.formatDate(value, { dateStyle: this.dateStyle });
|
|
576
627
|
}
|
|
577
628
|
};
|
|
578
|
-
__decorateClass$
|
|
629
|
+
__decorateClass$l([
|
|
579
630
|
property()
|
|
580
631
|
], OdxFormatDateComponent.prototype, "value", 2);
|
|
581
|
-
__decorateClass$
|
|
632
|
+
__decorateClass$l([
|
|
582
633
|
property()
|
|
583
634
|
], OdxFormatDateComponent.prototype, "dateStyle", 2);
|
|
584
|
-
OdxFormatDateComponent = __decorateClass$
|
|
635
|
+
OdxFormatDateComponent = __decorateClass$l([
|
|
585
636
|
customElement("odx-format-date")
|
|
586
637
|
], OdxFormatDateComponent);
|
|
587
638
|
|
|
588
639
|
var __defProp$f = Object.defineProperty;
|
|
589
|
-
var __getOwnPropDesc$
|
|
590
|
-
var __decorateClass$
|
|
591
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
640
|
+
var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
|
|
641
|
+
var __decorateClass$k = (decorators, target, key, kind) => {
|
|
642
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
|
|
592
643
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
593
644
|
if (decorator = decorators[i])
|
|
594
645
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -608,44 +659,44 @@ let OdxFormatNumberComponent = class extends FormatComponent {
|
|
|
608
659
|
});
|
|
609
660
|
}
|
|
610
661
|
};
|
|
611
|
-
__decorateClass$
|
|
662
|
+
__decorateClass$k([
|
|
612
663
|
property({ type: Number })
|
|
613
664
|
], OdxFormatNumberComponent.prototype, "value", 2);
|
|
614
|
-
__decorateClass$
|
|
665
|
+
__decorateClass$k([
|
|
615
666
|
property()
|
|
616
667
|
], OdxFormatNumberComponent.prototype, "currency", 2);
|
|
617
|
-
__decorateClass$
|
|
668
|
+
__decorateClass$k([
|
|
618
669
|
property()
|
|
619
670
|
], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
|
|
620
|
-
__decorateClass$
|
|
671
|
+
__decorateClass$k([
|
|
621
672
|
property({ type: Number })
|
|
622
673
|
], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
|
|
623
|
-
__decorateClass$
|
|
674
|
+
__decorateClass$k([
|
|
624
675
|
property({ type: Number })
|
|
625
676
|
], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
|
|
626
|
-
__decorateClass$
|
|
677
|
+
__decorateClass$k([
|
|
627
678
|
property({ type: Number })
|
|
628
679
|
], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
|
|
629
|
-
__decorateClass$
|
|
680
|
+
__decorateClass$k([
|
|
630
681
|
property()
|
|
631
682
|
], OdxFormatNumberComponent.prototype, "type", 2);
|
|
632
|
-
__decorateClass$
|
|
683
|
+
__decorateClass$k([
|
|
633
684
|
property()
|
|
634
685
|
], OdxFormatNumberComponent.prototype, "unit", 2);
|
|
635
|
-
__decorateClass$
|
|
686
|
+
__decorateClass$k([
|
|
636
687
|
property()
|
|
637
688
|
], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
|
|
638
|
-
OdxFormatNumberComponent = __decorateClass$
|
|
689
|
+
OdxFormatNumberComponent = __decorateClass$k([
|
|
639
690
|
customElement("odx-format-number")
|
|
640
691
|
], OdxFormatNumberComponent);
|
|
641
692
|
|
|
642
693
|
var __defProp$e = Object.defineProperty;
|
|
643
|
-
var __getOwnPropDesc$
|
|
694
|
+
var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
|
|
644
695
|
var __typeError$3 = (msg) => {
|
|
645
696
|
throw TypeError(msg);
|
|
646
697
|
};
|
|
647
|
-
var __decorateClass$
|
|
648
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
698
|
+
var __decorateClass$j = (decorators, target, key, kind) => {
|
|
699
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
|
|
649
700
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
650
701
|
if (decorator = decorators[i])
|
|
651
702
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -694,30 +745,30 @@ setupSyncInterval_fn = function() {
|
|
|
694
745
|
if (typeof this.syncInterval !== "number") return;
|
|
695
746
|
__privateSet$1(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
|
|
696
747
|
};
|
|
697
|
-
__decorateClass$
|
|
748
|
+
__decorateClass$j([
|
|
698
749
|
property()
|
|
699
750
|
], OdxRelativeTimeComponent.prototype, "value", 2);
|
|
700
|
-
__decorateClass$
|
|
751
|
+
__decorateClass$j([
|
|
701
752
|
property()
|
|
702
753
|
], OdxRelativeTimeComponent.prototype, "format", 2);
|
|
703
|
-
__decorateClass$
|
|
754
|
+
__decorateClass$j([
|
|
704
755
|
property()
|
|
705
756
|
], OdxRelativeTimeComponent.prototype, "minUnit", 2);
|
|
706
|
-
__decorateClass$
|
|
757
|
+
__decorateClass$j([
|
|
707
758
|
property()
|
|
708
759
|
], OdxRelativeTimeComponent.prototype, "numeric", 2);
|
|
709
|
-
__decorateClass$
|
|
760
|
+
__decorateClass$j([
|
|
710
761
|
property({ type: Number })
|
|
711
762
|
], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
|
|
712
|
-
OdxRelativeTimeComponent = __decorateClass$
|
|
763
|
+
OdxRelativeTimeComponent = __decorateClass$j([
|
|
713
764
|
customElement("odx-relative-time")
|
|
714
765
|
], OdxRelativeTimeComponent);
|
|
715
766
|
|
|
716
|
-
const styles$
|
|
767
|
+
const styles$h = "::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}:host{display:flex;block-size:100%;gap:var(--odx-size-75)}";
|
|
717
768
|
|
|
718
|
-
var __getOwnPropDesc$
|
|
719
|
-
var __decorateClass$
|
|
720
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
769
|
+
var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
|
|
770
|
+
var __decorateClass$i = (decorators, target, key, kind) => {
|
|
771
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
|
|
721
772
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
722
773
|
if (decorator = decorators[i])
|
|
723
774
|
result = (decorator(result)) || result;
|
|
@@ -729,16 +780,16 @@ let OdxHeaderActionsComponent = class extends CustomElement {
|
|
|
729
780
|
this.slot = "actions";
|
|
730
781
|
}
|
|
731
782
|
};
|
|
732
|
-
OdxHeaderActionsComponent = __decorateClass$
|
|
733
|
-
customElement("odx-header-actions", [styles$
|
|
783
|
+
OdxHeaderActionsComponent = __decorateClass$i([
|
|
784
|
+
customElement("odx-header-actions", [styles$h])
|
|
734
785
|
], OdxHeaderActionsComponent);
|
|
735
786
|
|
|
736
|
-
const styles$
|
|
787
|
+
const styles$g = ":host{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,: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)}";
|
|
737
788
|
|
|
738
789
|
var __defProp$d = Object.defineProperty;
|
|
739
|
-
var __getOwnPropDesc$
|
|
740
|
-
var __decorateClass$
|
|
741
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
790
|
+
var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
|
|
791
|
+
var __decorateClass$h = (decorators, target, key, kind) => {
|
|
792
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
|
|
742
793
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
743
794
|
if (decorator = decorators[i])
|
|
744
795
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -753,12 +804,12 @@ let OdxTitleComponent = class extends CustomElement {
|
|
|
753
804
|
}
|
|
754
805
|
}
|
|
755
806
|
};
|
|
756
|
-
__decorateClass$
|
|
807
|
+
__decorateClass$h([
|
|
757
808
|
property({ reflect: true })
|
|
758
809
|
], OdxTitleComponent.prototype, "size", 2);
|
|
759
|
-
OdxTitleComponent = __decorateClass$
|
|
810
|
+
OdxTitleComponent = __decorateClass$h([
|
|
760
811
|
requestUpdateOnAriaChange(["ariaLevel"]),
|
|
761
|
-
customElement("odx-title", [styles$
|
|
812
|
+
customElement("odx-title", [styles$g])
|
|
762
813
|
], OdxTitleComponent);
|
|
763
814
|
|
|
764
815
|
const TitleSize = {
|
|
@@ -770,15 +821,15 @@ const TitleSize = {
|
|
|
770
821
|
XXL: "xxl"
|
|
771
822
|
};
|
|
772
823
|
|
|
773
|
-
const styles$
|
|
824
|
+
const styles$f = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-75);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}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}}";
|
|
774
825
|
|
|
775
826
|
var __defProp$c = Object.defineProperty;
|
|
776
|
-
var __getOwnPropDesc$
|
|
827
|
+
var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
|
|
777
828
|
var __typeError$2 = (msg) => {
|
|
778
829
|
throw TypeError(msg);
|
|
779
830
|
};
|
|
780
|
-
var __decorateClass$
|
|
781
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
831
|
+
var __decorateClass$g = (decorators, target, key, kind) => {
|
|
832
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
|
|
782
833
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
783
834
|
if (decorator = decorators[i])
|
|
784
835
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -815,19 +866,19 @@ let OdxHeaderComponent = class extends CustomElement {
|
|
|
815
866
|
}
|
|
816
867
|
};
|
|
817
868
|
_handleSlotChange$2 = new WeakMap();
|
|
818
|
-
__decorateClass$
|
|
869
|
+
__decorateClass$g([
|
|
819
870
|
queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
|
|
820
871
|
], OdxHeaderComponent.prototype, "titleElements", 2);
|
|
821
|
-
OdxHeaderComponent = __decorateClass$
|
|
822
|
-
customElement("odx-header", [styles$
|
|
872
|
+
OdxHeaderComponent = __decorateClass$g([
|
|
873
|
+
customElement("odx-header", [styles$f])
|
|
823
874
|
], OdxHeaderComponent);
|
|
824
875
|
|
|
825
|
-
const styles$
|
|
876
|
+
const styles$e = ":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)}";
|
|
826
877
|
|
|
827
878
|
var __defProp$b = Object.defineProperty;
|
|
828
|
-
var __getOwnPropDesc$
|
|
829
|
-
var __decorateClass$
|
|
830
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
879
|
+
var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
|
|
880
|
+
var __decorateClass$f = (decorators, target, key, kind) => {
|
|
881
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
|
|
831
882
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
832
883
|
if (decorator = decorators[i])
|
|
833
884
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -842,12 +893,12 @@ let OdxHeadlineComponent = class extends CustomElement {
|
|
|
842
893
|
}
|
|
843
894
|
}
|
|
844
895
|
};
|
|
845
|
-
__decorateClass$
|
|
896
|
+
__decorateClass$f([
|
|
846
897
|
property({ reflect: true })
|
|
847
898
|
], OdxHeadlineComponent.prototype, "size", 2);
|
|
848
|
-
OdxHeadlineComponent = __decorateClass$
|
|
899
|
+
OdxHeadlineComponent = __decorateClass$f([
|
|
849
900
|
requestUpdateOnAriaChange(["ariaLevel"]),
|
|
850
|
-
customElement("odx-headline", [styles$
|
|
901
|
+
customElement("odx-headline", [styles$e])
|
|
851
902
|
], OdxHeadlineComponent);
|
|
852
903
|
|
|
853
904
|
const HeadlineSize = {
|
|
@@ -858,9 +909,9 @@ const HeadlineSize = {
|
|
|
858
909
|
};
|
|
859
910
|
|
|
860
911
|
var __defProp$a = Object.defineProperty;
|
|
861
|
-
var __getOwnPropDesc$
|
|
862
|
-
var __decorateClass$
|
|
863
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
912
|
+
var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
|
|
913
|
+
var __decorateClass$e = (decorators, target, key, kind) => {
|
|
914
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
|
|
864
915
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
865
916
|
if (decorator = decorators[i])
|
|
866
917
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -875,18 +926,18 @@ let OdxIconButtonComponent = class extends OdxButtonComponent {
|
|
|
875
926
|
`;
|
|
876
927
|
}
|
|
877
928
|
};
|
|
878
|
-
__decorateClass$
|
|
929
|
+
__decorateClass$e([
|
|
879
930
|
property()
|
|
880
931
|
], OdxIconButtonComponent.prototype, "icon", 2);
|
|
881
|
-
OdxIconButtonComponent = __decorateClass$
|
|
932
|
+
OdxIconButtonComponent = __decorateClass$e([
|
|
882
933
|
customElement("odx-icon-button")
|
|
883
934
|
], OdxIconButtonComponent);
|
|
884
935
|
|
|
885
|
-
const styles$
|
|
936
|
+
const styles$d = "@keyframes loading-indicator-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-indicator-animation{0%,75%,to{transform:scale(.667);opacity:.5}50%{transform:scale(1);opacity:1;background-color:currentColor}}:host{--_animation-timing-function: cubic-bezier(.96, .21, .41, .76);--_animation-duration: 1.25s;--_animation-delay: 0s;--_size: var(--odx-size-75);--_space: var(--odx-size-37);display:flex;place-content:center;place-items:center;color:currentColor;gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-indicator-entry-animation .25s linear both}:host::part(dot){background-color:currentColor;border-radius:50%;block-size:var(--_size);flex:0 0 var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards}:host::part(last){--_animation-delay: 0s}:host::part(middle){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}:host::part(first){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}";
|
|
886
937
|
|
|
887
|
-
var __getOwnPropDesc$
|
|
888
|
-
var __decorateClass$
|
|
889
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
938
|
+
var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
|
|
939
|
+
var __decorateClass$d = (decorators, target, key, kind) => {
|
|
940
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
|
|
890
941
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
891
942
|
if (decorator = decorators[i])
|
|
892
943
|
result = (decorator(result)) || result;
|
|
@@ -901,16 +952,16 @@ let OdxLoadingIndicatorComponent = class extends CustomElement {
|
|
|
901
952
|
`;
|
|
902
953
|
}
|
|
903
954
|
};
|
|
904
|
-
OdxLoadingIndicatorComponent = __decorateClass$
|
|
905
|
-
customElement("odx-loading-indicator", [styles$
|
|
955
|
+
OdxLoadingIndicatorComponent = __decorateClass$d([
|
|
956
|
+
customElement("odx-loading-indicator", [styles$d])
|
|
906
957
|
], OdxLoadingIndicatorComponent);
|
|
907
958
|
|
|
908
|
-
const styles$
|
|
959
|
+
const styles$c = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
|
|
909
960
|
|
|
910
961
|
var __defProp$9 = Object.defineProperty;
|
|
911
|
-
var __getOwnPropDesc$
|
|
912
|
-
var __decorateClass$
|
|
913
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
962
|
+
var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
|
|
963
|
+
var __decorateClass$c = (decorators, target, key, kind) => {
|
|
964
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
|
|
914
965
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
915
966
|
if (decorator = decorators[i])
|
|
916
967
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -930,14 +981,14 @@ let OdxLogoComponent = class extends CustomElement {
|
|
|
930
981
|
this.translate = false;
|
|
931
982
|
}
|
|
932
983
|
};
|
|
933
|
-
__decorateClass$
|
|
984
|
+
__decorateClass$c([
|
|
934
985
|
property({ reflect: true })
|
|
935
986
|
], OdxLogoComponent.prototype, "size", 2);
|
|
936
|
-
__decorateClass$
|
|
987
|
+
__decorateClass$c([
|
|
937
988
|
property({ type: Boolean, reflect: true })
|
|
938
989
|
], OdxLogoComponent.prototype, "compact", 2);
|
|
939
|
-
OdxLogoComponent = __decorateClass$
|
|
940
|
-
customElement("odx-logo", [styles$
|
|
990
|
+
OdxLogoComponent = __decorateClass$c([
|
|
991
|
+
customElement("odx-logo", [styles$c])
|
|
941
992
|
], OdxLogoComponent);
|
|
942
993
|
|
|
943
994
|
const LogoSize = {
|
|
@@ -948,12 +999,12 @@ const LogoSize = {
|
|
|
948
999
|
XL: "xl"
|
|
949
1000
|
};
|
|
950
1001
|
|
|
951
|
-
const styles$
|
|
1002
|
+
const styles$b = ":host{--_color-fill: var(--odx-color-transparent);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed);--_color-fill-selected: var(--odx-color-selected);--_color-fill-selected-hover: var(--odx-color-selected-hover);--_color-text: inherit;--_icon-size: var(--odx-size-125);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-4);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;border:none;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--_padding-inline);font-size:var(--_text-size);line-height:var(--_line-height);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover){--_color-fill: var(--_color-fill-hover)}:host([selected]:not([selected=\"false\"])){--_color-fill: var(--_color-fill-selected)}:host([selected]:not([selected=\"false\"]):hover){--_color-fill: var(--_color-fill-selected-hover)}:host([selected]:not([selected=\"false\"]):active),:host(:active){--_color-fill: var(--_color-fill-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([size=\"lg\"]){--_icon-size: var(--odx-size-200);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-size-100);--_padding-block: var(--odx-size-50);--_padding-inline: var(--odx-size-50)}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}::slotted(*){flex:0 0 auto}::slotted(odx-icon){--size: var(--_icon-size)}::slotted(odx-avatar){--_size: var(--_icon-size)}::slotted([slot=\"end\"]){margin-inline-start:auto}";
|
|
952
1003
|
|
|
953
1004
|
var __defProp$8 = Object.defineProperty;
|
|
954
|
-
var __getOwnPropDesc$
|
|
955
|
-
var __decorateClass$
|
|
956
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
1005
|
+
var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
|
|
1006
|
+
var __decorateClass$b = (decorators, target, key, kind) => {
|
|
1007
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
|
|
957
1008
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
958
1009
|
if (decorator = decorators[i])
|
|
959
1010
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
@@ -966,14 +1017,14 @@ let OdxNavigationItemComponent = class extends BaseButtonComponent {
|
|
|
966
1017
|
this.selected = false;
|
|
967
1018
|
}
|
|
968
1019
|
};
|
|
969
|
-
__decorateClass$
|
|
1020
|
+
__decorateClass$b([
|
|
970
1021
|
property({ reflect: true })
|
|
971
1022
|
], OdxNavigationItemComponent.prototype, "size", 2);
|
|
972
|
-
__decorateClass$
|
|
1023
|
+
__decorateClass$b([
|
|
973
1024
|
property({ type: Boolean, reflect: true })
|
|
974
1025
|
], OdxNavigationItemComponent.prototype, "selected", 2);
|
|
975
|
-
OdxNavigationItemComponent = __decorateClass$
|
|
976
|
-
customElement("odx-navigation-item", [styles$
|
|
1026
|
+
OdxNavigationItemComponent = __decorateClass$b([
|
|
1027
|
+
customElement("odx-navigation-item", [styles$b])
|
|
977
1028
|
], OdxNavigationItemComponent);
|
|
978
1029
|
|
|
979
1030
|
const NavigationItemSize = {
|
|
@@ -981,106 +1032,45 @@ const NavigationItemSize = {
|
|
|
981
1032
|
LG: "lg"
|
|
982
1033
|
};
|
|
983
1034
|
|
|
984
|
-
|
|
985
|
-
var __decorateClass$9 = (decorators, target, key, kind) => {
|
|
986
|
-
var result = void 0 ;
|
|
987
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
988
|
-
if (decorator = decorators[i])
|
|
989
|
-
result = (decorator(target, key, result) ) || result;
|
|
990
|
-
if (result) __defProp$7(target, key, result);
|
|
991
|
-
return result;
|
|
992
|
-
};
|
|
993
|
-
class OptionControl extends CanBeDisabled(CustomElement) {
|
|
994
|
-
constructor() {
|
|
995
|
-
super();
|
|
996
|
-
this.selected = false;
|
|
997
|
-
this.value = "";
|
|
998
|
-
this.#handleClick = () => {
|
|
999
|
-
this.toggle(void 0, true);
|
|
1000
|
-
};
|
|
1001
|
-
this.#handleKeyboardEvent = (event) => {
|
|
1002
|
-
const { actions } = getKeyboardEventInfo(event);
|
|
1003
|
-
if (!actions.enter && !actions.space) return;
|
|
1004
|
-
event.preventDefault();
|
|
1005
|
-
if (event.type === "keydown") return;
|
|
1006
|
-
this.toggle(void 0, true);
|
|
1007
|
-
};
|
|
1008
|
-
if (!isServer) {
|
|
1009
|
-
this.addEventListener("click", this.#handleClick);
|
|
1010
|
-
this.addEventListener("keydown", this.#handleKeyboardEvent);
|
|
1011
|
-
this.addEventListener("keyup", this.#handleKeyboardEvent);
|
|
1012
|
-
}
|
|
1013
|
-
}
|
|
1014
|
-
getTextLabel() {
|
|
1015
|
-
return this.textContent?.trim() ?? "";
|
|
1016
|
-
}
|
|
1017
|
-
toggle(state, emitEvent = false) {
|
|
1018
|
-
const currentState = this.selected;
|
|
1019
|
-
const newState = state ?? !currentState;
|
|
1020
|
-
if (this.disabled || newState === currentState) return;
|
|
1021
|
-
this.selected = newState;
|
|
1022
|
-
if (!emitEvent || !this.emit("change")) return;
|
|
1023
|
-
this.selected = currentState;
|
|
1024
|
-
}
|
|
1025
|
-
connectedCallback() {
|
|
1026
|
-
super.connectedCallback?.();
|
|
1027
|
-
this.role ||= "option";
|
|
1028
|
-
}
|
|
1029
|
-
willUpdate(changes) {
|
|
1030
|
-
super.willUpdate?.(changes);
|
|
1031
|
-
if (changes.has("selected")) {
|
|
1032
|
-
this.ariaSelected = toAriaBooleanAttribute(this.selected);
|
|
1033
|
-
}
|
|
1034
|
-
}
|
|
1035
|
-
#handleClick;
|
|
1036
|
-
#handleKeyboardEvent;
|
|
1037
|
-
}
|
|
1038
|
-
__decorateClass$9([
|
|
1039
|
-
property({ type: Boolean })
|
|
1040
|
-
], OptionControl.prototype, "selected");
|
|
1041
|
-
__decorateClass$9([
|
|
1042
|
-
property()
|
|
1043
|
-
], OptionControl.prototype, "value");
|
|
1044
|
-
|
|
1045
|
-
const styles$8 = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: var(--odx-color-foreground);display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-fill);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-text)}odx-checkbox{margin:0}:host(:hover){--_color-fill: var(--odx-color-transparent-hover)}:host(:active){--_color-fill: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-fill: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-fill: var(--odx-color-selected-hover)}:host([disabled]:not([disabled=\"false\"])){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][disabled]:not([disabled=\"false\"])){--_color-fill: var(--odx-color-disabled-fill-selected);--_color-text: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}slot[name=_checkbox]::slotted(odx-checkbox){margin:0;pointer-events:none}";
|
|
1035
|
+
const styles$a = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: var(--odx-color-foreground);display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-fill);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-text)}odx-checkbox{margin:0}:host(:hover){--_color-fill: var(--odx-color-transparent-hover)}:host(:active){--_color-fill: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-fill: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-fill: var(--odx-color-selected-hover)}:host([disabled]:not([disabled=\"false\"])){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][disabled]:not([disabled=\"false\"])){--_color-fill: var(--odx-color-disabled-fill-selected);--_color-text: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}slot[name=_checkbox]::slotted(odx-checkbox){margin:0;pointer-events:none}";
|
|
1046
1036
|
|
|
1047
|
-
var __defProp$
|
|
1048
|
-
var __getOwnPropDesc$
|
|
1049
|
-
var __decorateClass$
|
|
1050
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
1037
|
+
var __defProp$7 = Object.defineProperty;
|
|
1038
|
+
var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
|
|
1039
|
+
var __decorateClass$a = (decorators, target, key, kind) => {
|
|
1040
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
|
|
1051
1041
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
1052
1042
|
if (decorator = decorators[i])
|
|
1053
1043
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
1054
|
-
if (kind && result) __defProp$
|
|
1044
|
+
if (kind && result) __defProp$7(target, key, result);
|
|
1055
1045
|
return result;
|
|
1056
1046
|
};
|
|
1057
1047
|
let OdxOptionComponent = class extends OptionControl {
|
|
1058
1048
|
render() {
|
|
1059
1049
|
return html`
|
|
1060
|
-
${when(this.type === "checkbox", () => html`<odx-checkbox .checked=${this.selected} inert></odx-checkbox>`)}
|
|
1050
|
+
${when(this.type === "checkbox", () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`)}
|
|
1061
1051
|
<slot name="start"></slot>
|
|
1062
1052
|
<slot></slot>
|
|
1063
1053
|
<slot name="end"></slot>
|
|
1064
1054
|
`;
|
|
1065
1055
|
}
|
|
1066
1056
|
};
|
|
1067
|
-
__decorateClass$
|
|
1057
|
+
__decorateClass$a([
|
|
1068
1058
|
property({ reflect: true })
|
|
1069
1059
|
], OdxOptionComponent.prototype, "type", 2);
|
|
1070
|
-
OdxOptionComponent = __decorateClass$
|
|
1071
|
-
customElement("odx-option", [styles$
|
|
1060
|
+
OdxOptionComponent = __decorateClass$a([
|
|
1061
|
+
customElement("odx-option", [styles$a])
|
|
1072
1062
|
], OdxOptionComponent);
|
|
1073
1063
|
|
|
1074
|
-
const styles$
|
|
1064
|
+
const styles$9 = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100%;grid-template-columns:100%;grid-template-rows:repeat(minmax(0,auto),2) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
|
|
1075
1065
|
|
|
1076
|
-
var __defProp$
|
|
1077
|
-
var __getOwnPropDesc$
|
|
1078
|
-
var __decorateClass$
|
|
1079
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
1066
|
+
var __defProp$6 = Object.defineProperty;
|
|
1067
|
+
var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
|
|
1068
|
+
var __decorateClass$9 = (decorators, target, key, kind) => {
|
|
1069
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
|
|
1080
1070
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
1081
1071
|
if (decorator = decorators[i])
|
|
1082
1072
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
1083
|
-
if (kind && result) __defProp$
|
|
1073
|
+
if (kind && result) __defProp$6(target, key, result);
|
|
1084
1074
|
return result;
|
|
1085
1075
|
};
|
|
1086
1076
|
let OdxPageComponent = class extends CustomElement {
|
|
@@ -1104,20 +1094,20 @@ let OdxPageComponent = class extends CustomElement {
|
|
|
1104
1094
|
`;
|
|
1105
1095
|
}
|
|
1106
1096
|
};
|
|
1107
|
-
__decorateClass$
|
|
1097
|
+
__decorateClass$9([
|
|
1108
1098
|
query(".header", true)
|
|
1109
1099
|
], OdxPageComponent.prototype, "headerElement", 2);
|
|
1110
|
-
__decorateClass$
|
|
1100
|
+
__decorateClass$9([
|
|
1111
1101
|
query(".subheader", true)
|
|
1112
1102
|
], OdxPageComponent.prototype, "subheaderElement", 2);
|
|
1113
|
-
__decorateClass$
|
|
1103
|
+
__decorateClass$9([
|
|
1114
1104
|
property({ reflect: true })
|
|
1115
1105
|
], OdxPageComponent.prototype, "alignment", 2);
|
|
1116
|
-
__decorateClass$
|
|
1106
|
+
__decorateClass$9([
|
|
1117
1107
|
property({ reflect: true })
|
|
1118
1108
|
], OdxPageComponent.prototype, "layout", 2);
|
|
1119
|
-
OdxPageComponent = __decorateClass$
|
|
1120
|
-
customElement("odx-page", [styles$
|
|
1109
|
+
OdxPageComponent = __decorateClass$9([
|
|
1110
|
+
customElement("odx-page", [styles$9])
|
|
1121
1111
|
], OdxPageComponent);
|
|
1122
1112
|
|
|
1123
1113
|
const PageAlignment = {
|
|
@@ -1128,11 +1118,11 @@ const PageLayout = {
|
|
|
1128
1118
|
WIDE: "wide"
|
|
1129
1119
|
};
|
|
1130
1120
|
|
|
1131
|
-
const styles$
|
|
1121
|
+
const styles$8 = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0,auto) minmax(0px,100%);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header\" \"navigation content\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation{background-color:var(--odx-color-fill-main);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{--_size: calc(100dvh - var(--scroll-margin-block-start));grid-area:navigation;inset-block-start:var(--scroll-margin-block-start);inset-block-end:0;max-block-size:var(--_size);max-inline-size:10rem;overflow:auto;padding-inline-end:var(--odx-size-75)}";
|
|
1132
1122
|
|
|
1133
|
-
var __getOwnPropDesc$
|
|
1134
|
-
var __decorateClass$
|
|
1135
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$
|
|
1123
|
+
var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
|
|
1124
|
+
var __decorateClass$8 = (decorators, target, key, kind) => {
|
|
1125
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
|
|
1136
1126
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
1137
1127
|
if (decorator = decorators[i])
|
|
1138
1128
|
result = (decorator(result)) || result;
|
|
@@ -1149,10 +1139,72 @@ let OdxPageLayoutComponent = class extends CustomElement {
|
|
|
1149
1139
|
`;
|
|
1150
1140
|
}
|
|
1151
1141
|
};
|
|
1152
|
-
OdxPageLayoutComponent = __decorateClass$
|
|
1153
|
-
customElement("odx-page-layout", [styles$
|
|
1142
|
+
OdxPageLayoutComponent = __decorateClass$8([
|
|
1143
|
+
customElement("odx-page-layout", [styles$8])
|
|
1154
1144
|
], OdxPageLayoutComponent);
|
|
1155
1145
|
|
|
1146
|
+
const styles$7 = ":host{--_indicator-space: calc(var(--odx-size-25) / 2);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-fill: var(--odx-color-selection-control-fill);--_indicator-color-border: var(--odx-color-selection-control-stroke);--_indicator-border-width: var(--odx-border-width-thin);--_label-color-text: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);padding:var(--_indicator-space);transition-property:outline-color}:host,:host::part(indicator),:host::part(content){transition:var(--odx-transition-reduced)}:host::part(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-circle);background-color:var(--_indicator-color-fill);border:var(--odx-border-width-thin) solid var(--_indicator-color-border);border-color:var(--_indicator-color-border);border-width:var(--_indicator-border-width);transition-property:background-color,border,outline;outline:var(--odx-border-width-thick) solid var(--odx-palette-transparent);outline-offset:calc(-1 * var(--odx-border-width-thick))}:host::part(label){display:inline-block}:host::part(content){color:var(--_label-color-text);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty))::part(indicator){margin-inline-end:var(--odx-size-75)}:host(:empty)::part(content){display:none}:host(:hover){--_indicator-color-border: var(--odx-color-selection-control-stroke-hover);--_indicator-color-fill: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-color-focus)}:host([checked]:not([checked=\"false\"])){--_indicator-color-border: var(--odx-color-selection-control-fill-selected);--_indicator-color-fill: var(--odx-color-background-main);--_indicator-color-text: var(--odx-color-foreground-light);--_indicator-border-width: var(--odx-border-width-thickest)}:host([disabled]:not([disabled=\"false\"])){--_indicator-color-fill: var(--odx-color-disabled-fill);--_indicator-color-text: var(--odx-palette-transparent);--_indicator-color-border: var(--odx-color-disabled-fill);--_label-color-text: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([disabled]:not([disabled=\"false\"])[checked]:not([checked=\"false\"])){--_indicator-color-border: var(--odx-color-disabled-fill-selected)}:host([readonly]:not([readonly=\"false\"])){--_indicator-color-fill: var(--odx-color-selection-control-fill-readonly);--_indicator-color-border: var(--odx-color-background-main);cursor:default}:host([readonly]:not([readonly=\"false\"])[checked]:not([checked=\"false\"])){--_indicator-color-fill: var(--odx-color-selection-control-fill-selected);--_indicator-border-width: var(--odx-size-50);[part=indicator]{outline-color:var(--odx-color-selection-control-fill-selected)}}";
|
|
1147
|
+
|
|
1148
|
+
var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
|
|
1149
|
+
var __decorateClass$7 = (decorators, target, key, kind) => {
|
|
1150
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
|
|
1151
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
1152
|
+
if (decorator = decorators[i])
|
|
1153
|
+
result = (decorator(result)) || result;
|
|
1154
|
+
return result;
|
|
1155
|
+
};
|
|
1156
|
+
let OdxRadioButtonComponent = class extends CheckboxControl {
|
|
1157
|
+
connectedCallback() {
|
|
1158
|
+
super.connectedCallback?.();
|
|
1159
|
+
this.internals.role = "radio";
|
|
1160
|
+
}
|
|
1161
|
+
render() {
|
|
1162
|
+
return html`
|
|
1163
|
+
<div part="indicator" role="presentation">
|
|
1164
|
+
</div>
|
|
1165
|
+
<div part="content">
|
|
1166
|
+
<div part="label">
|
|
1167
|
+
<slot></slot>
|
|
1168
|
+
</div>
|
|
1169
|
+
<div part="description">
|
|
1170
|
+
<slot name="description"></slot>
|
|
1171
|
+
</div>
|
|
1172
|
+
</div>
|
|
1173
|
+
`;
|
|
1174
|
+
}
|
|
1175
|
+
toggle(state, emitEvent = false) {
|
|
1176
|
+
super.toggle(state ?? true, emitEvent);
|
|
1177
|
+
}
|
|
1178
|
+
};
|
|
1179
|
+
OdxRadioButtonComponent = __decorateClass$7([
|
|
1180
|
+
customElement("odx-radio-button", [styles$7])
|
|
1181
|
+
], OdxRadioButtonComponent);
|
|
1182
|
+
|
|
1183
|
+
const styles$6 = ":host{display:flex;flex-direction:column}::slotted(:is(odx-radio-button,odx-switch)){border-block-end:0;border-color:transparent;width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto;border-radius:0;outline-offset:0}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,odx-switch):last-of-type){border-block-end:none}";
|
|
1184
|
+
|
|
1185
|
+
var __defProp$5 = Object.defineProperty;
|
|
1186
|
+
var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
|
|
1187
|
+
var __decorateClass$6 = (decorators, target, key, kind) => {
|
|
1188
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
|
|
1189
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
1190
|
+
if (decorator = decorators[i])
|
|
1191
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
1192
|
+
if (kind && result) __defProp$5(target, key, result);
|
|
1193
|
+
return result;
|
|
1194
|
+
};
|
|
1195
|
+
let OdxRadioGroupComponent = class extends RadioGroupControl {
|
|
1196
|
+
};
|
|
1197
|
+
__decorateClass$6([
|
|
1198
|
+
property({ reflect: true })
|
|
1199
|
+
], OdxRadioGroupComponent.prototype, "variant", 2);
|
|
1200
|
+
OdxRadioGroupComponent = __decorateClass$6([
|
|
1201
|
+
customElement("odx-radio-group", [styles$6])
|
|
1202
|
+
], OdxRadioGroupComponent);
|
|
1203
|
+
|
|
1204
|
+
const RadioGroupVariant = {
|
|
1205
|
+
LIST: "list"
|
|
1206
|
+
};
|
|
1207
|
+
|
|
1156
1208
|
const styles$5 = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default)}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
|
|
1157
1209
|
|
|
1158
1210
|
var __defProp$4 = Object.defineProperty;
|
|
@@ -1493,4 +1545,4 @@ OdxVisuallyHiddenComponent = __decorateClass([
|
|
|
1493
1545
|
customElement("odx-visually-hidden", [styles])
|
|
1494
1546
|
], OdxVisuallyHiddenComponent);
|
|
1495
1547
|
|
|
1496
|
-
export { AvatarSize, AvatarVariant, BadgeVariant, BaseButtonComponent, BaseLink, ButtonSize, ButtonVariant,
|
|
1548
|
+
export { AvatarSize, AvatarVariant, BadgeVariant, BaseButtonComponent, BaseLink, ButtonSize, ButtonVariant, CheckboxGroupVariant, HeadlineSize, LogoSize, NavigationItemSize, OdxAvatarComponent, OdxAvatarGroupComponent, OdxBadgeComponent, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonComponent, OdxButtonGroupComponent, OdxCheckboxComponent, OdxCheckboxGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxNavigationItemComponent, OdxOptionComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRadioButtonComponent, OdxRadioGroupComponent, OdxRailNavigationComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, RadioGroupVariant, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };
|