@odx/foundation 1.0.0-beta.266 → 1.0.0-beta.267
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/CHANGELOG.md +18 -0
- package/dist/active-descendants-controller.js +308 -0
- package/dist/{lib/behaviors/listbox-control.d.ts → components/abstract/listbox-control-element.d.ts} +8 -13
- package/dist/components/checkbox/checkbox.d.ts +0 -2
- package/dist/components/checkbox-group/checkbox-group.d.ts +3 -0
- package/dist/components/main.d.ts +1 -0
- package/dist/components/option/option.d.ts +2 -2
- package/dist/components/radio-group/radio-group.d.ts +11 -2
- package/dist/components/select/select.d.ts +2 -2
- package/dist/components/slider/slider-marks.d.ts +0 -1
- package/dist/components/slider/slider.d.ts +2 -2
- package/dist/components/tab-bar/tab-bar.d.ts +3 -3
- package/dist/components/toggle-button-group/toggle-button-group.d.ts +7 -3
- package/dist/components.js +352 -128
- package/dist/dom.js +86 -0
- package/dist/main.d.ts +0 -2
- package/dist/main.js +19 -495
- package/dist/styles.css +1 -1
- package/dist/utils.js +3 -85
- package/dist/vendor.js +7 -7
- package/package.json +2 -2
- package/dist/lib/behaviors/radio-group-control.d.ts +0 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
## 1.0.0-beta.267
|
|
2
|
+
|
|
3
|
+
### Minor Changes
|
|
4
|
+
|
|
5
|
+
- Remove HTML `part` attribute if not needed to reduce shadow DOM complexity
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- Disable native touch interaction feedback on elements which have an `:active` state
|
|
10
|
+
- Fix nested control spacing issue
|
|
11
|
+
- Fix tabindex issue when `odx-checkbox-group` and `odx-radio-group` become enabled
|
|
12
|
+
- Fix remove event not firing on `odx-chip` component
|
|
13
|
+
|
|
14
|
+
### Misc
|
|
15
|
+
|
|
16
|
+
- Cleanup component templates and styles to reduce shadow DOM complexity
|
|
17
|
+
|
|
18
|
+
|
|
1
19
|
## 1.0.0-beta.266
|
|
2
20
|
|
|
3
21
|
### Major Changes
|
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
+
import { dedupeMixin, toAriaBooleanAttribute, detectKeyboardFocus, interactionResponse, keyboardFocusDirective, getKeyInfo, booleanAttributeDirective } from '@odx/foundation/utils';
|
|
3
|
+
import { property, state } from 'lit/decorators.js';
|
|
4
|
+
import { LitElement, unsafeCSS, html } from 'lit';
|
|
5
|
+
|
|
6
|
+
const CanBeDisabled = dedupeMixin((superClass) => {
|
|
7
|
+
class CanBeDisabledMixin extends superClass {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments);
|
|
10
|
+
this.disabled = false;
|
|
11
|
+
this.focusDisabled = false;
|
|
12
|
+
}
|
|
13
|
+
#initialTabIndex;
|
|
14
|
+
get focusTarget() {
|
|
15
|
+
return this;
|
|
16
|
+
}
|
|
17
|
+
firstUpdated(props) {
|
|
18
|
+
super.firstUpdated(props);
|
|
19
|
+
this.#initialTabIndex = this.focusTarget.hasAttribute("tabindex") ? this.focusTarget.tabIndex : void 0;
|
|
20
|
+
}
|
|
21
|
+
willUpdate(props) {
|
|
22
|
+
super.willUpdate(props);
|
|
23
|
+
if (props.has("disabled")) {
|
|
24
|
+
this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
updated(props) {
|
|
28
|
+
super.updated(props);
|
|
29
|
+
if (props.has("disabled") || props.has("focusDisabled")) {
|
|
30
|
+
this.#updateTabIndex();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
#updateTabIndex() {
|
|
34
|
+
if (!this.focusTarget) return;
|
|
35
|
+
if (!this.focusDisabled) {
|
|
36
|
+
this.focusTarget.tabIndex = this.disabled ? -1 : this.#initialTabIndex ?? 0;
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
if (this.#initialTabIndex == null) {
|
|
40
|
+
this.focusTarget.tabIndex = -1;
|
|
41
|
+
} else {
|
|
42
|
+
this.focusTarget.removeAttribute("tabindex");
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
__decorateClass([
|
|
47
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
48
|
+
], CanBeDisabledMixin.prototype, "disabled", 2);
|
|
49
|
+
__decorateClass([
|
|
50
|
+
property({ type: Boolean, useDefault: true, attribute: "focus-disabled" })
|
|
51
|
+
], CanBeDisabledMixin.prototype, "focusDisabled", 2);
|
|
52
|
+
return CanBeDisabledMixin;
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
const FormAssociated = dedupeMixin((superClass) => {
|
|
56
|
+
class FormAssociatedBehavior extends CanBeDisabled(superClass) {
|
|
57
|
+
constructor() {
|
|
58
|
+
super(...arguments);
|
|
59
|
+
this.name = "";
|
|
60
|
+
this.value = "";
|
|
61
|
+
this.readonly = false;
|
|
62
|
+
this.required = false;
|
|
63
|
+
this.invalid = false;
|
|
64
|
+
}
|
|
65
|
+
static {
|
|
66
|
+
this.formAssociated = true;
|
|
67
|
+
}
|
|
68
|
+
get form() {
|
|
69
|
+
return this.internals.form;
|
|
70
|
+
}
|
|
71
|
+
get validity() {
|
|
72
|
+
return this.internals.validity;
|
|
73
|
+
}
|
|
74
|
+
get validationMessage() {
|
|
75
|
+
return this.internals.validationMessage;
|
|
76
|
+
}
|
|
77
|
+
get willValidate() {
|
|
78
|
+
return this.internals.willValidate;
|
|
79
|
+
}
|
|
80
|
+
clear() {
|
|
81
|
+
this.value = "";
|
|
82
|
+
}
|
|
83
|
+
checkValidity() {
|
|
84
|
+
return this.internals.checkValidity();
|
|
85
|
+
}
|
|
86
|
+
reportValidity() {
|
|
87
|
+
this.internals.reportValidity();
|
|
88
|
+
}
|
|
89
|
+
setValidity(flags, target = this) {
|
|
90
|
+
if (!flags) {
|
|
91
|
+
this.internals.setValidity({});
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
const errorKey = Object.keys(flags).find((key) => flags?.[key] === true);
|
|
95
|
+
this.internals.setValidity(flags, errorKey ?? "unknown error", target);
|
|
96
|
+
}
|
|
97
|
+
toFormValue() {
|
|
98
|
+
return this.value ? String(this.value) : null;
|
|
99
|
+
}
|
|
100
|
+
willUpdate(props) {
|
|
101
|
+
super.willUpdate(props);
|
|
102
|
+
if (props.has("required")) {
|
|
103
|
+
this.ariaRequired = toAriaBooleanAttribute(this.required);
|
|
104
|
+
}
|
|
105
|
+
if (props.has("readonly")) {
|
|
106
|
+
this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
updated(props) {
|
|
110
|
+
super.updated(props);
|
|
111
|
+
if (props.has("value")) {
|
|
112
|
+
this.internals.setFormValue(this.toFormValue());
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
__decorateClass([
|
|
117
|
+
property()
|
|
118
|
+
], FormAssociatedBehavior.prototype, "name", 2);
|
|
119
|
+
__decorateClass([
|
|
120
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
121
|
+
], FormAssociatedBehavior.prototype, "readonly", 2);
|
|
122
|
+
__decorateClass([
|
|
123
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
124
|
+
], FormAssociatedBehavior.prototype, "required", 2);
|
|
125
|
+
__decorateClass([
|
|
126
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
127
|
+
], FormAssociatedBehavior.prototype, "invalid", 2);
|
|
128
|
+
return FormAssociatedBehavior;
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
const styles = "@layer reset{html{box-sizing:border-box}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}:where(h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}input:-webkit-autofill{&,&:hover,&:focus,&:active{border-radius:var(--odx-border-radius-sm);box-shadow:inset 0 0 1em 1em var(--odx-color-background-transparent-selected);font-weight:inherit;-webkit-text-fill-color:var(--odx-color-foreground-rest);background-clip:text;transition:background-color 5000s ease-in-out!important}}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-shrink{flex:none}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-layout-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-motion-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-control);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}@media(hover:hover)and (pointer:fine){&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}}}odx-title,[class*=odx-title],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),\"Noto Sans\",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-layout-lg))}.odx-content :is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}[data-odx-control]:has([data-odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[data-odx-button]:has(odx-icon:only-child){min-width:auto}}@layer variant,state;@layer overrides{.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}}@layer odx.base{.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg)}}";
|
|
132
|
+
|
|
133
|
+
function customElement(tagName, ...styles2) {
|
|
134
|
+
return (target) => {
|
|
135
|
+
const mergedStyles = [CustomElement.styles, target.styles ?? [], ...styles2.map(unsafeCSS)].flat();
|
|
136
|
+
target.tagName = tagName;
|
|
137
|
+
target.styles = Array.from(new Set(mergedStyles));
|
|
138
|
+
target.load = () => {
|
|
139
|
+
if (customElements.get(tagName)) return;
|
|
140
|
+
customElements.define(tagName, target);
|
|
141
|
+
target.initializer?.();
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
class CustomElement extends LitElement {
|
|
146
|
+
constructor() {
|
|
147
|
+
super();
|
|
148
|
+
this.hasContent = false;
|
|
149
|
+
this.slotsWithContent = /* @__PURE__ */ new Set();
|
|
150
|
+
this.#handleSlotChange = () => {
|
|
151
|
+
this.slotsWithContent = new Set(Array.from(this.querySelectorAll(":scope > [slot]")).map((element) => element.slot));
|
|
152
|
+
this.hasContent = Array.from(this.childNodes).some((node) => {
|
|
153
|
+
return node instanceof HTMLElement && !node.slot || node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== "";
|
|
154
|
+
});
|
|
155
|
+
};
|
|
156
|
+
this.internals = this.attachInternals();
|
|
157
|
+
}
|
|
158
|
+
static {
|
|
159
|
+
this.styles = unsafeCSS(styles);
|
|
160
|
+
}
|
|
161
|
+
static {
|
|
162
|
+
this.observeSlots = false;
|
|
163
|
+
}
|
|
164
|
+
connectedCallback() {
|
|
165
|
+
super.connectedCallback();
|
|
166
|
+
const { observeSlots } = this.constructor;
|
|
167
|
+
if (observeSlots) {
|
|
168
|
+
this.#handleSlotChange();
|
|
169
|
+
this.renderRoot.addEventListener("slotchange", this.#handleSlotChange);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
emit(event, eventInit) {
|
|
173
|
+
if (typeof event === "string") {
|
|
174
|
+
return !this.dispatchEvent(new CustomEvent(event, { bubbles: false, composed: false, cancelable: true, ...eventInit }));
|
|
175
|
+
}
|
|
176
|
+
return !this.dispatchEvent(event);
|
|
177
|
+
}
|
|
178
|
+
/** @internal */
|
|
179
|
+
whenSlotted(slotName, content = (slot) => slot) {
|
|
180
|
+
if (slotName === void 0) {
|
|
181
|
+
return this.hasContent ? content(html`<slot></slot>`) : html`<slot hidden></slot>`;
|
|
182
|
+
}
|
|
183
|
+
if (this.slotsWithContent.has(slotName)) {
|
|
184
|
+
return content(html`<slot name="${slotName}"></slot>`);
|
|
185
|
+
}
|
|
186
|
+
return html`<slot name="${slotName}" hidden></slot>`;
|
|
187
|
+
}
|
|
188
|
+
render() {
|
|
189
|
+
return html`<slot></slot>`;
|
|
190
|
+
}
|
|
191
|
+
#handleSlotChange;
|
|
192
|
+
}
|
|
193
|
+
__decorateClass([
|
|
194
|
+
state()
|
|
195
|
+
], CustomElement.prototype, "hasContent", 2);
|
|
196
|
+
__decorateClass([
|
|
197
|
+
state({
|
|
198
|
+
hasChanged: (a, b) => {
|
|
199
|
+
if (!(a && b)) return true;
|
|
200
|
+
return a.size === b.size && [...a].every((value) => b.has(value));
|
|
201
|
+
}
|
|
202
|
+
})
|
|
203
|
+
], CustomElement.prototype, "slotsWithContent", 2);
|
|
204
|
+
async function loadCustomElements(loader) {
|
|
205
|
+
const entries = await loader();
|
|
206
|
+
for (const entry of entries) {
|
|
207
|
+
if (typeof entry !== "function" || !("load" in entry) || typeof entry.load !== "function") continue;
|
|
208
|
+
entry.load?.();
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
const activeDirective = booleanAttributeDirective({
|
|
213
|
+
name: "data-odx-active",
|
|
214
|
+
onUpdate: (host) => host instanceof LitElement && host.requestUpdate()
|
|
215
|
+
});
|
|
216
|
+
function activeDescendantsControllerOptions(options) {
|
|
217
|
+
return {
|
|
218
|
+
getItems: () => [],
|
|
219
|
+
...options
|
|
220
|
+
};
|
|
221
|
+
}
|
|
222
|
+
class ActiveDescendantsController {
|
|
223
|
+
#host;
|
|
224
|
+
#options;
|
|
225
|
+
#enabled = false;
|
|
226
|
+
#items = [];
|
|
227
|
+
#activeIndex = -1;
|
|
228
|
+
static {
|
|
229
|
+
detectKeyboardFocus();
|
|
230
|
+
}
|
|
231
|
+
get activeIndex() {
|
|
232
|
+
return this.#activeIndex;
|
|
233
|
+
}
|
|
234
|
+
get activeItem() {
|
|
235
|
+
return this.#items[this.#activeIndex];
|
|
236
|
+
}
|
|
237
|
+
constructor(host, options = {}) {
|
|
238
|
+
this.#host = host;
|
|
239
|
+
this.#options = activeDescendantsControllerOptions(options);
|
|
240
|
+
host.addController(this);
|
|
241
|
+
}
|
|
242
|
+
async hostUpdated() {
|
|
243
|
+
await interactionResponse();
|
|
244
|
+
if (keyboardFocusDirective.applied(this.#host)) {
|
|
245
|
+
this.enable();
|
|
246
|
+
} else {
|
|
247
|
+
this.disable();
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
enable() {
|
|
251
|
+
if (this.#enabled) return;
|
|
252
|
+
this.#enabled = true;
|
|
253
|
+
this.#host.addEventListener("keydown", this.#handleKeyDown);
|
|
254
|
+
this.#items = this.#options.getItems().filter((item) => item.isConnected);
|
|
255
|
+
this.update(this.#activeIndex);
|
|
256
|
+
}
|
|
257
|
+
disable() {
|
|
258
|
+
if (!this.#enabled) return;
|
|
259
|
+
this.#enabled = false;
|
|
260
|
+
this.#host.removeEventListener("keydown", this.#handleKeyDown);
|
|
261
|
+
this.update();
|
|
262
|
+
}
|
|
263
|
+
previous() {
|
|
264
|
+
const index = this.#items.findLastIndex((item, index2) => this.#activeIndex > index2 && item.canActivate());
|
|
265
|
+
this.update(index);
|
|
266
|
+
}
|
|
267
|
+
next() {
|
|
268
|
+
const index = this.#items.findIndex((item, index2) => this.#activeIndex < index2 && item.canActivate());
|
|
269
|
+
this.update(index);
|
|
270
|
+
}
|
|
271
|
+
first() {
|
|
272
|
+
this.update(this.#items.findIndex((item) => item.canActivate()));
|
|
273
|
+
}
|
|
274
|
+
last() {
|
|
275
|
+
this.update(this.#items.findLastIndex((item) => item.canActivate()));
|
|
276
|
+
}
|
|
277
|
+
update(index, force = false) {
|
|
278
|
+
const activeIndex = index ?? this.#activeIndex;
|
|
279
|
+
const activeItem = this.#items[activeIndex];
|
|
280
|
+
const previousActiveItem = this.#items[this.#activeIndex];
|
|
281
|
+
if (!(force || activeItem?.canActivate())) return;
|
|
282
|
+
previousActiveItem?.deactivate();
|
|
283
|
+
this.#activeIndex = activeIndex;
|
|
284
|
+
this.#host.ariaActiveDescendantElement = activeItem ?? null;
|
|
285
|
+
if (keyboardFocusDirective.applied(this.#host)) {
|
|
286
|
+
activeItem?.activate();
|
|
287
|
+
} else {
|
|
288
|
+
activeItem?.deactivate();
|
|
289
|
+
}
|
|
290
|
+
this.#options.onChange?.(previousActiveItem, activeItem, previousActiveItem == null && Boolean(activeItem));
|
|
291
|
+
}
|
|
292
|
+
#handleKeyDown = (event) => {
|
|
293
|
+
const key = getKeyInfo(event);
|
|
294
|
+
if (!(key.up || key.down || key.start || key.end)) return;
|
|
295
|
+
event.preventDefault();
|
|
296
|
+
if (key.down) {
|
|
297
|
+
this.next();
|
|
298
|
+
} else if (key.up) {
|
|
299
|
+
this.previous();
|
|
300
|
+
} else if (key.start) {
|
|
301
|
+
this.first();
|
|
302
|
+
} else if (key.end) {
|
|
303
|
+
this.last();
|
|
304
|
+
}
|
|
305
|
+
};
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
export { ActiveDescendantsController as A, CustomElement as C, FormAssociated as F, CanBeDisabled as a, activeDirective as b, customElement as c, loadCustomElements as l };
|
package/dist/{lib/behaviors/listbox-control.d.ts → components/abstract/listbox-control-element.d.ts}
RENAMED
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import { ValuesOf } from '../../utils/main.js';
|
|
2
1
|
import { PropertyValues } from 'lit';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
export type OptionType = ValuesOf<typeof OptionType>;
|
|
8
|
-
export declare const OptionType: {
|
|
9
|
-
readonly CHECKBOX: "checkbox";
|
|
10
|
-
};
|
|
2
|
+
import { CanBeDisabled } from '../../lib/behaviors/can-be-disabled.js';
|
|
3
|
+
import { FormAssociated } from '../../lib/behaviors/form-associated.js';
|
|
4
|
+
import { ActiveDescendant, ActiveDescendantsController } from '../../lib/controllers/active-descendants-controller.js';
|
|
5
|
+
import { CustomElement } from '../../lib/custom-element.js';
|
|
11
6
|
export interface OptionControl extends ActiveDescendant, CanBeDisabled {
|
|
12
7
|
label: string;
|
|
13
|
-
type?:
|
|
8
|
+
type?: 'checkbox';
|
|
14
9
|
readonly: boolean;
|
|
15
10
|
selected: boolean;
|
|
16
11
|
value: string;
|
|
17
12
|
}
|
|
18
|
-
declare const
|
|
19
|
-
export declare class
|
|
13
|
+
declare const ListboxControlElement_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
|
|
14
|
+
export declare class ListboxControlElement<Option extends OptionControl = OptionControl> extends ListboxControlElement_base {
|
|
20
15
|
#private;
|
|
21
16
|
protected readonly activeDescendants: ActiveDescendantsController<Option>;
|
|
22
17
|
protected options: Option[];
|
|
@@ -34,4 +29,4 @@ export declare class ListboxControl<Option extends OptionControl = OptionControl
|
|
|
34
29
|
protected willUpdate(props: PropertyValues<this>): void;
|
|
35
30
|
}
|
|
36
31
|
export {};
|
|
37
|
-
//# sourceMappingURL=listbox-control.d.ts.map
|
|
32
|
+
//# sourceMappingURL=listbox-control-element.d.ts.map
|
|
@@ -24,13 +24,11 @@ export declare const CheckboxSize: Pick<{
|
|
|
24
24
|
}, "SM" | "MD">;
|
|
25
25
|
declare const OdxCheckbox_base: import('../../utils/main.js').Constructor<CheckboxControl> & typeof CustomElement;
|
|
26
26
|
export declare class OdxCheckbox extends OdxCheckbox_base {
|
|
27
|
-
#private;
|
|
28
27
|
static observeSlots: boolean;
|
|
29
28
|
indicatorPlacement: CheckboxIndicatorPlacement;
|
|
30
29
|
size: CheckboxSize;
|
|
31
30
|
protected render(): TemplateResult;
|
|
32
31
|
protected renderIndicator(icon?: OdxIconName): TemplateResult;
|
|
33
|
-
protected firstUpdated(props: PropertyValues<this>): void;
|
|
34
32
|
protected willUpdate(props: PropertyValues<this>): void;
|
|
35
33
|
protected updated(props: PropertyValues<this>): void;
|
|
36
34
|
}
|
|
@@ -12,7 +12,10 @@ export declare const CheckboxGroupLayout: {
|
|
|
12
12
|
readonly HORIZONTAL: "horizontal";
|
|
13
13
|
};
|
|
14
14
|
export declare class OdxCheckboxGroup extends CheckboxGroupControl {
|
|
15
|
+
static shadowRootOptions: ShadowRootInit;
|
|
15
16
|
layout: CheckboxGroupLayout;
|
|
17
|
+
constructor();
|
|
18
|
+
connectedCallback(): void;
|
|
16
19
|
protected render(): TemplateResult;
|
|
17
20
|
}
|
|
18
21
|
//# sourceMappingURL=checkbox-group.d.ts.map
|
|
@@ -2,6 +2,7 @@ export * from './abstract/button-control-element.js';
|
|
|
2
2
|
export * from './abstract/control-element.js';
|
|
3
3
|
export * from './abstract/dialog-element.js';
|
|
4
4
|
export * from './abstract/link-control-element.js';
|
|
5
|
+
export * from './abstract/listbox-control-element.js';
|
|
5
6
|
export * from './accordion/accordion.js';
|
|
6
7
|
export * from './accordion-item/accordion-item.js';
|
|
7
8
|
export * from './accordion-panel/accordion-panel.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { OptionControl, OptionType } from '../../main.js';
|
|
2
1
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
2
|
import { ControlElement } from '../abstract/control-element.js';
|
|
3
|
+
import { OptionControl } from '../abstract/listbox-control-element.js';
|
|
4
4
|
declare global {
|
|
5
5
|
interface HTMLElementTagNameMap {
|
|
6
6
|
'odx-option': OdxOption;
|
|
@@ -13,7 +13,7 @@ export declare class OdxOption extends ControlElement implements OptionControl {
|
|
|
13
13
|
get label(): string;
|
|
14
14
|
readonly: boolean;
|
|
15
15
|
selected: boolean;
|
|
16
|
-
type?:
|
|
16
|
+
type?: 'checkbox';
|
|
17
17
|
value: string;
|
|
18
18
|
connectedCallback(): void;
|
|
19
19
|
canActivate(): boolean;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { CustomElement,
|
|
1
|
+
import { CheckboxControl, CustomElement, FormAssociated } from '../../main.js';
|
|
2
2
|
import { ValuesOf } from '../../utils/main.js';
|
|
3
|
+
import { PropertyValues } from 'lit';
|
|
3
4
|
declare global {
|
|
4
5
|
interface HTMLElementTagNameMap {
|
|
5
6
|
'odx-radio-group': OdxRadioGroup;
|
|
@@ -10,9 +11,17 @@ export declare const RadioGroupLayout: {
|
|
|
10
11
|
readonly VERTICAL: "vertical";
|
|
11
12
|
readonly HORIZONTAL: "horizontal";
|
|
12
13
|
};
|
|
13
|
-
declare const OdxRadioGroup_base: import('../../utils/main.js').Constructor<
|
|
14
|
+
declare const OdxRadioGroup_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
|
|
14
15
|
export declare class OdxRadioGroup extends OdxRadioGroup_base {
|
|
16
|
+
#private;
|
|
17
|
+
static shadowRootOptions: ShadowRootInit;
|
|
15
18
|
layout?: RadioGroupLayout;
|
|
19
|
+
value: string;
|
|
20
|
+
get selectedIndex(): number;
|
|
21
|
+
constructor();
|
|
22
|
+
connectedCallback(): void;
|
|
23
|
+
getControls(): CheckboxControl[];
|
|
24
|
+
protected updated(props: PropertyValues<this>): void;
|
|
16
25
|
}
|
|
17
26
|
export {};
|
|
18
27
|
//# sourceMappingURL=radio-group.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ListboxControl } from '../../main.js';
|
|
2
1
|
import { IsLocalized } from '../../i18n/main.js';
|
|
3
2
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
|
+
import { ListboxControlElement } from '../abstract/listbox-control-element.js';
|
|
4
4
|
import { OdxDropdown } from '../dropdown/dropdown.js';
|
|
5
5
|
import { OdxOption } from '../option/option.js';
|
|
6
6
|
declare global {
|
|
@@ -8,7 +8,7 @@ declare global {
|
|
|
8
8
|
'odx-select': OdxSelect;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
-
declare const OdxSelect_base: import('../../utils/main.js').Constructor<IsLocalized> & typeof
|
|
11
|
+
declare const OdxSelect_base: import('../../utils/main.js').Constructor<IsLocalized> & typeof ListboxControlElement<OdxOption>;
|
|
12
12
|
export declare class OdxSelect extends OdxSelect_base {
|
|
13
13
|
#private;
|
|
14
14
|
static shadowRootOptions: ShadowRootInit;
|
|
@@ -11,6 +11,5 @@ export declare class OdxSliderMarks extends CustomElement {
|
|
|
11
11
|
showLabels: boolean;
|
|
12
12
|
connectedCallback(): void;
|
|
13
13
|
protected render(): TemplateResult;
|
|
14
|
-
protected renderMark(value: number, last?: boolean): TemplateResult;
|
|
15
14
|
}
|
|
16
15
|
//# sourceMappingURL=slider-marks.d.ts.map
|
|
@@ -13,8 +13,8 @@ export * from './slider-marks.js';
|
|
|
13
13
|
export declare class OdxSlider extends CustomElement {
|
|
14
14
|
#private;
|
|
15
15
|
protected dragController: DragController<OdxSliderHandle>;
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
private baseElement;
|
|
17
|
+
private context;
|
|
18
18
|
set step(value: number);
|
|
19
19
|
get step(): number;
|
|
20
20
|
set minRange(value: number);
|
|
@@ -16,9 +16,9 @@ export declare const TabBarAlignment: Pick<{
|
|
|
16
16
|
}, "START" | "END">;
|
|
17
17
|
export declare class OdxTabBar extends CustomElement {
|
|
18
18
|
#private;
|
|
19
|
-
private
|
|
20
|
-
private
|
|
21
|
-
private
|
|
19
|
+
private baseElement?;
|
|
20
|
+
private indicatorElement?;
|
|
21
|
+
private scrollContainer?;
|
|
22
22
|
alignment: TabBarAlignment;
|
|
23
23
|
autoSelect: boolean;
|
|
24
24
|
controlled: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CustomElement,
|
|
1
|
+
import { CustomElement, FormAssociated } from '../../main.js';
|
|
2
2
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
import { ControlSize } from '../abstract/control-element.js';
|
|
4
4
|
import { OdxToggleButton, ToggleButtonVariant } from '../toggle-button/toggle-button.js';
|
|
@@ -7,13 +7,17 @@ declare global {
|
|
|
7
7
|
'odx-toggle-button-group': OdxToggleButtonGroup;
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
declare const OdxToggleButtonGroup_base: import('../../utils/main.js').Constructor<
|
|
10
|
+
declare const OdxToggleButtonGroup_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
|
|
11
11
|
export declare class OdxToggleButtonGroup extends OdxToggleButtonGroup_base {
|
|
12
12
|
#private;
|
|
13
|
+
static shadowRootOptions: ShadowRootInit;
|
|
13
14
|
size: ControlSize;
|
|
14
15
|
variant?: ToggleButtonVariant;
|
|
16
|
+
value: string;
|
|
17
|
+
get selectedIndex(): number;
|
|
15
18
|
constructor();
|
|
16
|
-
|
|
19
|
+
connectedCallback(): void;
|
|
20
|
+
getControls(): OdxToggleButton[];
|
|
17
21
|
protected render(): TemplateResult | string;
|
|
18
22
|
protected updated(props: PropertyValues<this>): void;
|
|
19
23
|
}
|