@haiilo/catalyst 6.5.0 → 6.5.2
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/catalyst/catalyst.css +0 -21
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/{p-d303131e.entry.js → p-877627af.entry.js} +2 -2
- package/dist/catalyst/p-877627af.entry.js.map +1 -0
- package/dist/catalyst/scss/index.scss +3 -1
- package/dist/cjs/cat-alert_26.cjs.entry.js +55 -34
- package/dist/cjs/cat-alert_26.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +19 -11
- package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +113 -28
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/scss/index.scss +3 -1
- package/dist/components/cat-radio-group.js +19 -11
- package/dist/components/cat-radio-group.js.map +1 -1
- package/dist/components/cat-tabs.js +41 -27
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/esm/cat-alert_26.entry.js +55 -34
- package/dist/esm/cat-alert_26.entry.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +3 -0
- package/dist/types/components/cat-tabs/cat-tabs.d.ts +23 -4
- package/dist/types/components.d.ts +18 -0
- package/package.json +2 -2
- package/dist/catalyst/p-d303131e.entry.js.map +0 -1
package/dist/cjs/catalyst.cjs.js
CHANGED
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["cat-alert_26.cjs",[[1,"cat-select-demo"],[1,"cat-datepicker",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[1],"min":[1],"mode":[1],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"step":[2],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"min":["onMinChanged"],"max":["onMinChanged"]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[
|
|
20
|
+
return index.bootstrapLazy([["cat-alert_26.cjs",[[1,"cat-select-demo"],[1,"cat-datepicker",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[1],"min":[1],"mode":[1],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"step":[2],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"min":["onMinChanged"],"max":["onMinChanged"]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[513,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"setActive":[64],"setActiveIndex":[64]},[[0,"keydown","onKeydown"]],{"activeTab":["onActiveTabChange"]}],[1,"cat-alert",{"color":[513],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-textarea",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"disabled":[4],"hint":[1],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-button-group",{"a11yLabel":[1,"a11y-label"]}],[1,"cat-card"],[1,"cat-datepicker-inline",{"disabled":[4],"max":[1],"min":[1],"mode":[1],"readonly":[4],"step":[2],"value":[1025],"nativePickerAttributes":[16]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"]}],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"labelSize":[1,"label-size"]},null,{"requiredMarker":["onRequiredMarkerChanged"],"horizontal":["onHorizontalChanged"]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"focus","onFocus"],[2,"blur","onBlur"]],{"name":["onNameChanged"],"value":["onValueChanged"],"disabled":["onDisabledChanged"],"labelLeft":["onLabelLeftChanged"]}],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516],"nativeAttributes":[16]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"],"hasSlottedContent":[32]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"connector":[32],"state":[32],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]],{"connector":["onConnectorChanged"],"value":["onValueChanged"],"errors":["onErrorsChanged"],"state":["onStateChanged"]}],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]},null,{"src":["onSrcChanged"]}],[1,"cat-checkbox",{"checked":[1028],"indeterminate":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"nativeAttributes":[16],"nativeContentAttributes":[16],"buttonGroupPosition":[1,"button-group-position"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]],{"iconOnly":["onIconOnlyChanged"]}],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"iconSrc":[1,"icon-src"],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ const index = require('./index-329a3380.js');
|
|
|
6
6
|
|
|
7
7
|
const defineCustomElements = (win, options) => {
|
|
8
8
|
if (typeof window === 'undefined') return undefined;
|
|
9
|
-
return index.bootstrapLazy([["cat-alert_26.cjs",[[1,"cat-select-demo"],[1,"cat-datepicker",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[1],"min":[1],"mode":[1],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"step":[2],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"min":["onMinChanged"],"max":["onMinChanged"]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[
|
|
9
|
+
return index.bootstrapLazy([["cat-alert_26.cjs",[[1,"cat-select-demo"],[1,"cat-datepicker",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[1],"min":[1],"mode":[1],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"step":[2],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"min":["onMinChanged"],"max":["onMinChanged"]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[513,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"setActive":[64],"setActiveIndex":[64]},[[0,"keydown","onKeydown"]],{"activeTab":["onActiveTabChange"]}],[1,"cat-alert",{"color":[513],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-textarea",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"disabled":[4],"hint":[1],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-button-group",{"a11yLabel":[1,"a11y-label"]}],[1,"cat-card"],[1,"cat-datepicker-inline",{"disabled":[4],"max":[1],"min":[1],"mode":[1],"readonly":[4],"step":[2],"value":[1025],"nativePickerAttributes":[16]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"]}],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"labelSize":[1,"label-size"]},null,{"requiredMarker":["onRequiredMarkerChanged"],"horizontal":["onHorizontalChanged"]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"focus","onFocus"],[2,"blur","onBlur"]],{"name":["onNameChanged"],"value":["onValueChanged"],"disabled":["onDisabledChanged"],"labelLeft":["onLabelLeftChanged"]}],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516],"nativeAttributes":[16]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"],"hasSlottedContent":[32]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"connector":[32],"state":[32],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]],{"connector":["onConnectorChanged"],"value":["onValueChanged"],"errors":["onErrorsChanged"],"state":["onStateChanged"]}],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]},null,{"src":["onSrcChanged"]}],[1,"cat-checkbox",{"checked":[1028],"indeterminate":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"nativeAttributes":[16],"nativeContentAttributes":[16],"buttonGroupPosition":[1,"button-group-position"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]],{"iconOnly":["onIconOnlyChanged"]}],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"iconSrc":[1,"icon-src"],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -19,21 +19,22 @@ export class CatRadioGroup {
|
|
|
19
19
|
this.updateTabIndex();
|
|
20
20
|
}
|
|
21
21
|
onDisabledChanged(disabled) {
|
|
22
|
-
this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));
|
|
22
|
+
this.catRadioGroup.forEach(catRadio => (catRadio.disabled = catRadio.disabled || disabled));
|
|
23
23
|
}
|
|
24
24
|
onLabelLeftChanged(labelLeft) {
|
|
25
|
-
this.catRadioGroup.forEach(catRadio =>
|
|
26
|
-
if (labelLeft) {
|
|
27
|
-
catRadio.labelLeft = labelLeft;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
25
|
+
this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));
|
|
30
26
|
}
|
|
31
27
|
componentDidLoad() {
|
|
32
|
-
this.
|
|
33
|
-
this.
|
|
34
|
-
this.
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
this.init();
|
|
29
|
+
this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init());
|
|
30
|
+
this.mutationObserver?.observe(this.hostElement, {
|
|
31
|
+
childList: true,
|
|
32
|
+
attributes: true,
|
|
33
|
+
subtree: true
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
disconnectedCallback() {
|
|
37
|
+
this.mutationObserver?.disconnect();
|
|
37
38
|
}
|
|
38
39
|
onKeydown(event) {
|
|
39
40
|
if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
|
|
@@ -68,6 +69,13 @@ export class CatRadioGroup {
|
|
|
68
69
|
render() {
|
|
69
70
|
return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
|
|
70
71
|
}
|
|
72
|
+
init() {
|
|
73
|
+
this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
|
|
74
|
+
this.onNameChanged(this.name);
|
|
75
|
+
this.onValueChanged(this.value);
|
|
76
|
+
this.onDisabledChanged(this.disabled);
|
|
77
|
+
this.onLabelLeftChanged(this.labelLeft);
|
|
78
|
+
}
|
|
71
79
|
updateTabIndex() {
|
|
72
80
|
if (this.catRadioGroup.length) {
|
|
73
81
|
this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhG;;GAEG;AAMH,MAAM,OAAO,aAAa;;IAChB,kBAAa,GAA0B,EAAE,CAAC;;;
|
|
1
|
+
{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The name of the radio group component.\n */\n @Prop() name?: string;\n\n /**\n * The value of the radio group.\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * Whether this radio group is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /**\n * Whether the label of the radios should appear to the left of them.\n */\n @Prop() labelLeft = false;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<boolean | string>;\n\n /**\n * Emitted when the radio group received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the radio group loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.disabled = catRadio.disabled || disabled));\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));\n }\n\n componentDidLoad(): void {\n this.init();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const radio = this.catRadioGroup.find(radio => radio === event.target);\n if (radio?.localName === 'cat-radio') {\n this.value = radio?.checked ? radio?.value : undefined;\n this.catChange.emit(this.value);\n }\n }\n\n @Listen('focus', { capture: true })\n onFocus(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private init() {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
2
|
/**
|
|
3
3
|
* Tabs are used to display multiple panels to be contained within a single
|
|
4
4
|
* window, using tabs as a navigational element.
|
|
@@ -7,21 +7,12 @@ import { h, Host } from "@stencil/core";
|
|
|
7
7
|
*/
|
|
8
8
|
export class CatTabs {
|
|
9
9
|
constructor() {
|
|
10
|
-
this.buttons = [];
|
|
11
10
|
this.tabs = [];
|
|
12
|
-
this.activeTabId = undefined;
|
|
13
11
|
this.activeTab = '';
|
|
14
12
|
this.tabsAlign = 'left';
|
|
15
13
|
}
|
|
16
|
-
onActiveTabIdChanged(newActiveTab) {
|
|
17
|
-
const activeTab = this.tabs.find(value => value.id === newActiveTab);
|
|
18
|
-
activeTab?.click();
|
|
19
|
-
}
|
|
20
14
|
componentWillLoad() {
|
|
21
15
|
this.syncTabs();
|
|
22
|
-
if (this.tabs.length) {
|
|
23
|
-
this.activeTabId = this.activeTab;
|
|
24
|
-
}
|
|
25
16
|
}
|
|
26
17
|
componentDidLoad() {
|
|
27
18
|
this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
|
|
@@ -34,9 +25,14 @@ export class CatTabs {
|
|
|
34
25
|
disconnectedCallback() {
|
|
35
26
|
this.mutationObserver?.disconnect();
|
|
36
27
|
}
|
|
28
|
+
onActiveTabChange(id) {
|
|
29
|
+
const index = this.tabs.findIndex(tab => tab.id === id);
|
|
30
|
+
this.catChange.emit({ id, index });
|
|
31
|
+
}
|
|
37
32
|
onKeydown(event) {
|
|
38
33
|
if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
|
|
39
|
-
const
|
|
34
|
+
const elements = this.hostElement.shadowRoot?.querySelectorAll('cat-button[role="tab"]');
|
|
35
|
+
const targetElements = Array.from(elements || []).filter(button => !button.disabled);
|
|
40
36
|
const activeElement = this.hostElement.shadowRoot?.activeElement;
|
|
41
37
|
const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
|
|
42
38
|
const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
|
|
@@ -45,25 +41,41 @@ export class CatTabs {
|
|
|
45
41
|
event.preventDefault();
|
|
46
42
|
}
|
|
47
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* Activates the tab with the given id.
|
|
46
|
+
*
|
|
47
|
+
* @param id The tab id.
|
|
48
|
+
*/
|
|
49
|
+
async setActive(id) {
|
|
50
|
+
this.activate(this.tabs.find(tab => tab.id === id));
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Activates the tab with the given index.
|
|
54
|
+
*
|
|
55
|
+
* @param index The tab index.
|
|
56
|
+
*/
|
|
57
|
+
async setActiveIndex(index) {
|
|
58
|
+
this.activate(this.tabs[index]);
|
|
59
|
+
}
|
|
48
60
|
render() {
|
|
49
61
|
return (h(Host, null, this.tabs.map((tab) => {
|
|
50
|
-
return (h("cat-button", {
|
|
62
|
+
return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
|
|
51
63
|
'cat-tab': true,
|
|
52
|
-
'cat-tab-active':
|
|
53
|
-
}, active:
|
|
64
|
+
'cat-tab-active': tab.id === this.activeTab
|
|
65
|
+
}, active: tab.id === this.activeTab, color: tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.activate(tab), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
|
|
54
66
|
})));
|
|
55
67
|
}
|
|
56
|
-
updateButtonsRef(button) {
|
|
57
|
-
const indexOf = this.buttons.indexOf(button);
|
|
58
|
-
if (indexOf >= 0) {
|
|
59
|
-
this.buttons[indexOf] = button;
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
this.buttons.push(button);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
68
|
syncTabs() {
|
|
66
69
|
this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
|
|
70
|
+
this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
|
|
71
|
+
}
|
|
72
|
+
canActivate(tab) {
|
|
73
|
+
return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
|
|
74
|
+
}
|
|
75
|
+
activate(tab) {
|
|
76
|
+
if (this.canActivate(tab)) {
|
|
77
|
+
this.activeTab = tab.id;
|
|
78
|
+
}
|
|
67
79
|
}
|
|
68
80
|
static get is() { return "cat-tabs"; }
|
|
69
81
|
static get encapsulation() { return "shadow"; }
|
|
@@ -94,7 +106,7 @@ export class CatTabs {
|
|
|
94
106
|
"text": "The ID of the active tab."
|
|
95
107
|
},
|
|
96
108
|
"attribute": "active-tab",
|
|
97
|
-
"reflect":
|
|
109
|
+
"reflect": true,
|
|
98
110
|
"defaultValue": "''"
|
|
99
111
|
},
|
|
100
112
|
"tabsAlign": {
|
|
@@ -119,15 +131,88 @@ export class CatTabs {
|
|
|
119
131
|
}
|
|
120
132
|
static get states() {
|
|
121
133
|
return {
|
|
122
|
-
"tabs": {}
|
|
123
|
-
|
|
134
|
+
"tabs": {}
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
static get events() {
|
|
138
|
+
return [{
|
|
139
|
+
"method": "catChange",
|
|
140
|
+
"name": "catChange",
|
|
141
|
+
"bubbles": true,
|
|
142
|
+
"cancelable": true,
|
|
143
|
+
"composed": true,
|
|
144
|
+
"docs": {
|
|
145
|
+
"tags": [],
|
|
146
|
+
"text": "Emitted when active tab is changed."
|
|
147
|
+
},
|
|
148
|
+
"complexType": {
|
|
149
|
+
"original": "{ id: string; index: number }",
|
|
150
|
+
"resolved": "{ id: string; index: number; }",
|
|
151
|
+
"references": {}
|
|
152
|
+
}
|
|
153
|
+
}];
|
|
154
|
+
}
|
|
155
|
+
static get methods() {
|
|
156
|
+
return {
|
|
157
|
+
"setActive": {
|
|
158
|
+
"complexType": {
|
|
159
|
+
"signature": "(id: string) => Promise<void>",
|
|
160
|
+
"parameters": [{
|
|
161
|
+
"tags": [{
|
|
162
|
+
"name": "param",
|
|
163
|
+
"text": "id The tab id."
|
|
164
|
+
}],
|
|
165
|
+
"text": "The tab id."
|
|
166
|
+
}],
|
|
167
|
+
"references": {
|
|
168
|
+
"Promise": {
|
|
169
|
+
"location": "global",
|
|
170
|
+
"id": "global::Promise"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
"return": "Promise<void>"
|
|
174
|
+
},
|
|
175
|
+
"docs": {
|
|
176
|
+
"text": "Activates the tab with the given id.",
|
|
177
|
+
"tags": [{
|
|
178
|
+
"name": "param",
|
|
179
|
+
"text": "id The tab id."
|
|
180
|
+
}]
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"setActiveIndex": {
|
|
184
|
+
"complexType": {
|
|
185
|
+
"signature": "(index: number) => Promise<void>",
|
|
186
|
+
"parameters": [{
|
|
187
|
+
"tags": [{
|
|
188
|
+
"name": "param",
|
|
189
|
+
"text": "index The tab index."
|
|
190
|
+
}],
|
|
191
|
+
"text": "The tab index."
|
|
192
|
+
}],
|
|
193
|
+
"references": {
|
|
194
|
+
"Promise": {
|
|
195
|
+
"location": "global",
|
|
196
|
+
"id": "global::Promise"
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
"return": "Promise<void>"
|
|
200
|
+
},
|
|
201
|
+
"docs": {
|
|
202
|
+
"text": "Activates the tab with the given index.",
|
|
203
|
+
"tags": [{
|
|
204
|
+
"name": "param",
|
|
205
|
+
"text": "index The tab index."
|
|
206
|
+
}]
|
|
207
|
+
}
|
|
208
|
+
}
|
|
124
209
|
};
|
|
125
210
|
}
|
|
126
211
|
static get elementRef() { return "hostElement"; }
|
|
127
212
|
static get watchers() {
|
|
128
213
|
return [{
|
|
129
|
-
"propName": "
|
|
130
|
-
"methodName": "
|
|
214
|
+
"propName": "activeTab",
|
|
215
|
+
"methodName": "onActiveTabChange"
|
|
131
216
|
}];
|
|
132
217
|
}
|
|
133
218
|
static get listeners() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: true\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements || []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number }>;\n\n render() {\n return (\n <Host>\n {this.tabs.map((tab: HTMLCatTabElement) => {\n return (\n <cat-button\n buttonId={tab.id}\n role=\"tab\"\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab\n }}\n active={tab.id === this.activeTab}\n color={tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.activate(tab)}\n nativeAttributes={{ ...tab.nativeAttributes }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n </Host>\n );\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;\n }\n\n private canActivate(tab?: HTMLCatTabElement): tab is HTMLCatTabElement {\n return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n }\n}\n"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
// -- Reset
|
|
2
2
|
@import '~sanitize.css/sanitize.css';
|
|
3
|
-
|
|
3
|
+
// had to be removed because transition events are not firing any more
|
|
4
|
+
// could be re-introduce with a transition-duration of 1ms
|
|
5
|
+
// @import '~sanitize.css/reduce-motion.css';
|
|
4
6
|
|
|
5
7
|
// -- Vendor
|
|
6
8
|
@import '~toastify-js/src/toastify.css';
|
|
@@ -25,21 +25,22 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatRadioGroup ext
|
|
|
25
25
|
this.updateTabIndex();
|
|
26
26
|
}
|
|
27
27
|
onDisabledChanged(disabled) {
|
|
28
|
-
this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));
|
|
28
|
+
this.catRadioGroup.forEach(catRadio => (catRadio.disabled = catRadio.disabled || disabled));
|
|
29
29
|
}
|
|
30
30
|
onLabelLeftChanged(labelLeft) {
|
|
31
|
-
this.catRadioGroup.forEach(catRadio =>
|
|
32
|
-
if (labelLeft) {
|
|
33
|
-
catRadio.labelLeft = labelLeft;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
31
|
+
this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));
|
|
36
32
|
}
|
|
37
33
|
componentDidLoad() {
|
|
38
|
-
this.
|
|
39
|
-
this.
|
|
40
|
-
this.
|
|
41
|
-
|
|
42
|
-
|
|
34
|
+
this.init();
|
|
35
|
+
this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init());
|
|
36
|
+
this.mutationObserver?.observe(this.hostElement, {
|
|
37
|
+
childList: true,
|
|
38
|
+
attributes: true,
|
|
39
|
+
subtree: true
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
disconnectedCallback() {
|
|
43
|
+
this.mutationObserver?.disconnect();
|
|
43
44
|
}
|
|
44
45
|
onKeydown(event) {
|
|
45
46
|
if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
|
|
@@ -74,6 +75,13 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatRadioGroup ext
|
|
|
74
75
|
render() {
|
|
75
76
|
return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
|
|
76
77
|
}
|
|
78
|
+
init() {
|
|
79
|
+
this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
|
|
80
|
+
this.onNameChanged(this.name);
|
|
81
|
+
this.onValueChanged(this.value);
|
|
82
|
+
this.onDisabledChanged(this.disabled);
|
|
83
|
+
this.onLabelLeftChanged(this.labelLeft);
|
|
84
|
+
}
|
|
77
85
|
updateTabIndex() {
|
|
78
86
|
if (this.catRadioGroup.length) {
|
|
79
87
|
this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-radio-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mDAAmD;;MCU/DA,eAAa;;;;;;;;IAChB,kBAAa,GAA0B,EAAE,CAAC;;;
|
|
1
|
+
{"file":"cat-radio-group.js","mappings":"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","names":["CatRadioGroup"],"sources":["src/components/cat-radio-group/cat-radio-group.scss?tag=cat-radio-group&encapsulation=shadow","src/components/cat-radio-group/cat-radio-group.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The name of the radio group component.\n */\n @Prop() name?: string;\n\n /**\n * The value of the radio group.\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * Whether this radio group is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /**\n * Whether the label of the radios should appear to the left of them.\n */\n @Prop() labelLeft = false;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<boolean | string>;\n\n /**\n * Emitted when the radio group received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the radio group loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.disabled = catRadio.disabled || disabled));\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));\n }\n\n componentDidLoad(): void {\n this.init();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const radio = this.catRadioGroup.find(radio => radio === event.target);\n if (radio?.localName === 'cat-radio') {\n this.value = radio?.checked ? radio?.value : undefined;\n this.catChange.emit(this.value);\n }\n }\n\n @Listen('focus', { capture: true })\n onFocus(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private init() {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"],"version":3}
|