@haiilo/catalyst 10.24.2 → 10.25.0
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 +11 -0
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/{p-a18011a6.entry.js → p-6475f57c.entry.js} +2 -2
- package/dist/catalyst/p-6475f57c.entry.js.map +1 -0
- package/dist/catalyst/scss/core/_notification.scss +12 -0
- package/dist/cjs/cat-alert_30.cjs.entry.js +20 -10
- package/dist/cjs/cat-alert_30.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-dropdown/cat-dropdown.js +2 -2
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-tag/cat-tag.js +36 -8
- package/dist/collection/components/cat-tag/cat-tag.js.map +1 -1
- package/dist/collection/scss/core/_notification.scss +12 -0
- package/dist/components/cat-dropdown2.js +2 -2
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-tag.js +19 -8
- package/dist/components/cat-tag.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +20 -10
- package/dist/esm/cat-alert_30.entry.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-tag/cat-tag.d.ts +6 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +2 -2
- package/dist/catalyst/p-a18011a6.entry.js.map +0 -1
package/dist/cjs/catalyst.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["cat-alert_30.cjs",[[0,"cat-select-demo"],[1,"cat-date",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"min":["onMinChanged"],"max":["onMaxChanged"]}],[1,"cat-time",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"step":[2],"hasSlottedLabel":[32],"hasSlottedHint":[32],"selectionTime":[32],"isAm":[32],"valueChangedBySelection":[32],"select":[64],"doFocus":[64],"doBlur":[64],"clear":[64]},[[0,"catOpen","onOpen"]],{"min":["onMinChanged"],"max":["onMaxChanged"],"value":["onValueChanged"]}],[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],"attachToElement":[4,"attach-to-element"],"position":[1],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"mode":["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":[1537,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"setActive":[64],"setActiveIndex":[64]},[[0,"keydown","onKeydown"]],{"activeTab":["onActiveTabChange"]}],[1,"cat-tag",{"requiredMarker":[1,"required-marker"],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"nativeAttributes":[16],"value":[1040],"clearable":[4],"errors":[4],"errorUpdate":[8,"error-update"],"tagCreationChars":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"tags":[32],"errorMap":[32]},[[0,"keydown","onKeyDown"]],{"errors":["onErrorsChanged"]}],[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":[8],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1032],"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],"error":[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"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"],"open":[32]},[[8,"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],"doFocus":[64],"doBlur":[64],"clear":[64],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]],{"connector":["onConnectorChanged"],"value":["onValueChanged"],"errors":["onErrorsChanged"],"state":["onStateChanged"]}],[1,"cat-date-inline",{"noClear":[4,"no-clear"],"identifier":[1],"hint":[4],"noToday":[4,"no-today"],"weeks":[4],"label":[1],"labelHidden":[4,"label-hidden"],"min":[1],"max":[1],"range":[4],"required":[4],"a11yLabel":[1,"a11y-label"],"requiredMarker":[1,"required-marker"],"value":[1025],"hasSlottedLabel":[32],"hasSlottedHint":[32],"viewDate":[32],"select":[64],"clear":[64],"resetView":[64],"doFocus":[64]},[[0,"keydown","onKeyDown"]]],[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"requiredMarker":[1,"required-marker"],"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-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"togglePassword":[4,"toggle-password"],"disabled":[4],"loading":[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],"isPasswordShown":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64],"mask":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"arrowNavigation":[1,"arrow-navigation"],"noResize":[4,"no-resize"],"overflow":[4],"noInitialFocus":[4,"no-initial-focus"],"noReturnFocus":[4,"no-return-focus"],"toggle":[64],"open":[64],"close":[64]},[[0,"catClick","clickHandler"]]],[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],"hasSlottedContent":[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);
|
|
22
|
+
return index.bootstrapLazy([["cat-alert_30.cjs",[[0,"cat-select-demo"],[1,"cat-date",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"min":["onMinChanged"],"max":["onMaxChanged"]}],[1,"cat-time",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"step":[2],"hasSlottedLabel":[32],"hasSlottedHint":[32],"selectionTime":[32],"isAm":[32],"valueChangedBySelection":[32],"select":[64],"doFocus":[64],"doBlur":[64],"clear":[64]},[[0,"catOpen","onOpen"]],{"min":["onMinChanged"],"max":["onMaxChanged"],"value":["onValueChanged"]}],[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],"attachToElement":[4,"attach-to-element"],"position":[1],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"mode":["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":[1537,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"setActive":[64],"setActiveIndex":[64]},[[0,"keydown","onKeydown"]],{"activeTab":["onActiveTabChange"]}],[1,"cat-tag",{"requiredMarker":[1,"required-marker"],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"nativeAttributes":[16],"value":[1040],"clearable":[4],"errors":[4],"errorUpdate":[8,"error-update"],"tagCreationChars":[16],"addOnBlur":[4,"add-on-blur"],"hasSlottedLabel":[32],"hasSlottedHint":[32],"tags":[32],"errorMap":[32]},[[0,"keydown","onKeyDown"]],{"errors":["onErrorsChanged"]}],[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":[8],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1032],"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],"error":[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"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"],"open":[32]},[[8,"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],"doFocus":[64],"doBlur":[64],"clear":[64],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]],{"connector":["onConnectorChanged"],"value":["onValueChanged"],"errors":["onErrorsChanged"],"state":["onStateChanged"]}],[1,"cat-date-inline",{"noClear":[4,"no-clear"],"identifier":[1],"hint":[4],"noToday":[4,"no-today"],"weeks":[4],"label":[1],"labelHidden":[4,"label-hidden"],"min":[1],"max":[1],"range":[4],"required":[4],"a11yLabel":[1,"a11y-label"],"requiredMarker":[1,"required-marker"],"value":[1025],"hasSlottedLabel":[32],"hasSlottedHint":[32],"viewDate":[32],"select":[64],"clear":[64],"resetView":[64],"doFocus":[64]},[[0,"keydown","onKeyDown"]]],[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"requiredMarker":[1,"required-marker"],"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-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"togglePassword":[4,"toggle-password"],"disabled":[4],"loading":[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],"isPasswordShown":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64],"mask":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"arrowNavigation":[1,"arrow-navigation"],"noResize":[4,"no-resize"],"overflow":[4],"noInitialFocus":[4,"no-initial-focus"],"noReturnFocus":[4,"no-return-focus"],"toggle":[64],"open":[64],"close":[64]},[[0,"catClick","clickHandler"]]],[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],"hasSlottedContent":[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);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["cat-alert_30.cjs",[[0,"cat-select-demo"],[1,"cat-date",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"min":["onMinChanged"],"max":["onMaxChanged"]}],[1,"cat-time",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"step":[2],"hasSlottedLabel":[32],"hasSlottedHint":[32],"selectionTime":[32],"isAm":[32],"valueChangedBySelection":[32],"select":[64],"doFocus":[64],"doBlur":[64],"clear":[64]},[[0,"catOpen","onOpen"]],{"min":["onMinChanged"],"max":["onMaxChanged"],"value":["onValueChanged"]}],[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],"attachToElement":[4,"attach-to-element"],"position":[1],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"mode":["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":[1537,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"setActive":[64],"setActiveIndex":[64]},[[0,"keydown","onKeydown"]],{"activeTab":["onActiveTabChange"]}],[1,"cat-tag",{"requiredMarker":[1,"required-marker"],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"nativeAttributes":[16],"value":[1040],"clearable":[4],"errors":[4],"errorUpdate":[8,"error-update"],"tagCreationChars":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"tags":[32],"errorMap":[32]},[[0,"keydown","onKeyDown"]],{"errors":["onErrorsChanged"]}],[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":[8],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1032],"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],"error":[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"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"],"open":[32]},[[8,"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],"doFocus":[64],"doBlur":[64],"clear":[64],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]],{"connector":["onConnectorChanged"],"value":["onValueChanged"],"errors":["onErrorsChanged"],"state":["onStateChanged"]}],[1,"cat-date-inline",{"noClear":[4,"no-clear"],"identifier":[1],"hint":[4],"noToday":[4,"no-today"],"weeks":[4],"label":[1],"labelHidden":[4,"label-hidden"],"min":[1],"max":[1],"range":[4],"required":[4],"a11yLabel":[1,"a11y-label"],"requiredMarker":[1,"required-marker"],"value":[1025],"hasSlottedLabel":[32],"hasSlottedHint":[32],"viewDate":[32],"select":[64],"clear":[64],"resetView":[64],"doFocus":[64]},[[0,"keydown","onKeyDown"]]],[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"requiredMarker":[1,"required-marker"],"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-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"togglePassword":[4,"toggle-password"],"disabled":[4],"loading":[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],"isPasswordShown":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64],"mask":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"arrowNavigation":[1,"arrow-navigation"],"noResize":[4,"no-resize"],"overflow":[4],"noInitialFocus":[4,"no-initial-focus"],"noReturnFocus":[4,"no-return-focus"],"toggle":[64],"open":[64],"close":[64]},[[0,"catClick","clickHandler"]]],[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],"hasSlottedContent":[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);
|
|
11
|
+
return index.bootstrapLazy([["cat-alert_30.cjs",[[0,"cat-select-demo"],[1,"cat-date",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"doFocus":[64],"doBlur":[64],"clear":[64]},null,{"min":["onMinChanged"],"max":["onMaxChanged"]}],[1,"cat-time",{"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],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"placement":[1],"step":[2],"hasSlottedLabel":[32],"hasSlottedHint":[32],"selectionTime":[32],"isAm":[32],"valueChangedBySelection":[32],"select":[64],"doFocus":[64],"doBlur":[64],"clear":[64]},[[0,"catOpen","onOpen"]],{"min":["onMinChanged"],"max":["onMaxChanged"],"value":["onValueChanged"]}],[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],"attachToElement":[4,"attach-to-element"],"position":[1],"value":[1025],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"nativePickerAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]},null,{"value":["onValueChanged"],"disabled":["onDisabledChanged"],"readonly":["onDisabledChanged"],"mode":["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":[1537,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"setActive":[64],"setActiveIndex":[64]},[[0,"keydown","onKeydown"]],{"activeTab":["onActiveTabChange"]}],[1,"cat-tag",{"requiredMarker":[1,"required-marker"],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"nativeAttributes":[16],"value":[1040],"clearable":[4],"errors":[4],"errorUpdate":[8,"error-update"],"tagCreationChars":[16],"addOnBlur":[4,"add-on-blur"],"hasSlottedLabel":[32],"hasSlottedHint":[32],"tags":[32],"errorMap":[32]},[[0,"keydown","onKeyDown"]],{"errors":["onErrorsChanged"]}],[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":[8],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1032],"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],"error":[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"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"],"open":[32]},[[8,"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],"doFocus":[64],"doBlur":[64],"clear":[64],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]],{"connector":["onConnectorChanged"],"value":["onValueChanged"],"errors":["onErrorsChanged"],"state":["onStateChanged"]}],[1,"cat-date-inline",{"noClear":[4,"no-clear"],"identifier":[1],"hint":[4],"noToday":[4,"no-today"],"weeks":[4],"label":[1],"labelHidden":[4,"label-hidden"],"min":[1],"max":[1],"range":[4],"required":[4],"a11yLabel":[1,"a11y-label"],"requiredMarker":[1,"required-marker"],"value":[1025],"hasSlottedLabel":[32],"hasSlottedHint":[32],"viewDate":[32],"select":[64],"clear":[64],"resetView":[64],"doFocus":[64]},[[0,"keydown","onKeyDown"]]],[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":[8],"noValue":[8,"no-value"],"resolvedValue":[1032,"resolved-value"],"hint":[1],"labelLeft":[4,"label-left"],"alignment":[1],"nativeAttributes":[16],"requiredMarker":[1,"required-marker"],"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-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"togglePassword":[4,"toggle-password"],"disabled":[4],"loading":[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],"isPasswordShown":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"clear":[64],"mask":[64]},null,{"errors":["onErrorsChanged"]}],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"arrowNavigation":[1,"arrow-navigation"],"noResize":[4,"no-resize"],"overflow":[4],"noInitialFocus":[4,"no-initial-focus"],"noReturnFocus":[4,"no-return-focus"],"toggle":[64],"open":[64],"close":[64]},[[0,"catClick","clickHandler"]]],[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],"hasSlottedContent":[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);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -110,6 +110,7 @@ export class CatDropdown {
|
|
|
110
110
|
return; // busy or closed
|
|
111
111
|
}
|
|
112
112
|
this.isOpen = null;
|
|
113
|
+
this.trap?.deactivate();
|
|
113
114
|
this.content.classList.remove('show');
|
|
114
115
|
// give CSS transition time to apply
|
|
115
116
|
setTimeout(() => {
|
|
@@ -117,12 +118,11 @@ export class CatDropdown {
|
|
|
117
118
|
this.content.classList.remove('show');
|
|
118
119
|
this.content.style.display = '';
|
|
119
120
|
this.trigger?.setAttribute('aria-expanded', 'false');
|
|
120
|
-
this.trap?.deactivate();
|
|
121
121
|
this.catClose.emit();
|
|
122
122
|
}, timeTransitionS);
|
|
123
123
|
}
|
|
124
124
|
render() {
|
|
125
|
-
return (h(Host, { key: '
|
|
125
|
+
return (h(Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
|
|
126
126
|
}
|
|
127
127
|
componentDidLoad() {
|
|
128
128
|
this.initAnchor();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private isOpen: boolean | null = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n */\n @Prop() noReturnFocus = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async open(): Promise<void> {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => (this.noInitialFocus ? false : undefined)\n });\n this.trap.activate();\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this.isOpen) {\n return; // busy or closed\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.initAnchor();\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n const elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private isOpen: boolean | null = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n */\n @Prop() noReturnFocus = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async open(): Promise<void> {\n // we need to delay the initialization of the trigger until first\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => (this.noInitialFocus ? false : undefined)\n });\n this.trap.activate();\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this.isOpen) {\n return; // busy or closed\n }\n\n this.isOpen = null;\n this.trap?.deactivate();\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n this.initAnchor();\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n const elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
@@ -31,6 +31,7 @@ export class CatTag {
|
|
|
31
31
|
this.errors = undefined;
|
|
32
32
|
this.errorUpdate = 0;
|
|
33
33
|
this.tagCreationChars = [' '];
|
|
34
|
+
this.addOnBlur = false;
|
|
34
35
|
}
|
|
35
36
|
get id() {
|
|
36
37
|
return this.identifier || this._id;
|
|
@@ -46,13 +47,7 @@ export class CatTag {
|
|
|
46
47
|
const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
|
|
47
48
|
if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {
|
|
48
49
|
event.preventDefault();
|
|
49
|
-
|
|
50
|
-
this.value = [...(this.value ?? []), this.input.value.trim()];
|
|
51
|
-
this.catChange.emit(this.value);
|
|
52
|
-
}
|
|
53
|
-
if (this.input) {
|
|
54
|
-
this.input.value = '';
|
|
55
|
-
}
|
|
50
|
+
this.addInputValue();
|
|
56
51
|
}
|
|
57
52
|
else if (['Backspace'].includes(event.key) &&
|
|
58
53
|
this.input?.selectionStart === 0 &&
|
|
@@ -76,7 +71,7 @@ export class CatTag {
|
|
|
76
71
|
}
|
|
77
72
|
}
|
|
78
73
|
render() {
|
|
79
|
-
return (h(Host, { key: '
|
|
74
|
+
return (h(Host, { key: '04de7eb41f8c5517c927a416d2d34afd092abed7' }, h("div", { key: 'a459eec9bdb227075df6d9ccfc81508ccd60467d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'f012f015e602b52ea6b57662bf8f9b3789fbc20d', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '3302bde705d78c59003650af8c85ad415997b2af', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '2f8bbb5696d92268d04b162023fdc37a27d62cde', name: "label" })) || this.label, h("div", { key: '8804dd6eaf4c8057c5318694d856d3c28d63a812', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '682da9fc4cfb49b945eaf296d63f9774df570efa', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '04197f0876dac237f865ba4f5948a444a27f2f2e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: 'b85aa4cd1520f4e477d649f9fd8300eb25fe2d3b', class: "input-inner-wrapper" }, h("input", { key: 'a4a28b1ca647e68970f1a6e3c6d852df7e43d00d', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: 'e29fdad3d4ad47db287ada8544cf71baa12add40', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: '8b443ee821d4dfbdaeec41a945c70d60760ffa42', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '5f8f1115296726c536849ec4c574e8beaa53b157', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
|
|
80
75
|
}
|
|
81
76
|
get hasHint() {
|
|
82
77
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -96,6 +91,21 @@ export class CatTag {
|
|
|
96
91
|
}
|
|
97
92
|
}
|
|
98
93
|
}
|
|
94
|
+
onBlur() {
|
|
95
|
+
if (this.addOnBlur) {
|
|
96
|
+
this.addInputValue();
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
addInputValue() {
|
|
100
|
+
const inputValue = this.input?.value.trim();
|
|
101
|
+
if (inputValue && !this.value?.includes(inputValue)) {
|
|
102
|
+
this.value = [...(this.value ?? []), inputValue];
|
|
103
|
+
this.catChange.emit(this.value);
|
|
104
|
+
}
|
|
105
|
+
if (this.input) {
|
|
106
|
+
this.input.value = '';
|
|
107
|
+
}
|
|
108
|
+
}
|
|
99
109
|
clear() {
|
|
100
110
|
this.value = [];
|
|
101
111
|
this.catChange.emit(this.value);
|
|
@@ -410,6 +420,24 @@ export class CatTag {
|
|
|
410
420
|
"text": "List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\nPasted values will also be split by those chars.\nDefaults to `[' ']`."
|
|
411
421
|
},
|
|
412
422
|
"defaultValue": "[' ']"
|
|
423
|
+
},
|
|
424
|
+
"addOnBlur": {
|
|
425
|
+
"type": "boolean",
|
|
426
|
+
"mutable": false,
|
|
427
|
+
"complexType": {
|
|
428
|
+
"original": "boolean",
|
|
429
|
+
"resolved": "boolean",
|
|
430
|
+
"references": {}
|
|
431
|
+
},
|
|
432
|
+
"required": false,
|
|
433
|
+
"optional": false,
|
|
434
|
+
"docs": {
|
|
435
|
+
"tags": [],
|
|
436
|
+
"text": "Whether new tag is added when the input is blurred."
|
|
437
|
+
},
|
|
438
|
+
"attribute": "add-on-blur",
|
|
439
|
+
"reflect": false,
|
|
440
|
+
"defaultValue": "false"
|
|
413
441
|
}
|
|
414
442
|
};
|
|
415
443
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-tag.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * An input that allows multiple values to be entered as tags.\n *\n * @part input - The native input element.\n * @part label - The native label element.\n */\n@Component({\n tag: 'cat-tag',\n styleUrl: 'cat-tag.scss',\n shadow: true\n})\nexport class CatTag {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier || this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap | true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() tags: string[] = [];\n\n @State() errorMap?: ErrorMap | true;\n\n /**\n * Whether the label need a marker to shown if the select is required or optional.\n */\n @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n /**\n * Whether the select is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The placeholder text to display within the select.\n */\n @Prop() placeholder?: string;\n\n /**\n * Optional hint text(s) to be displayed with the select.\n */\n @Prop() hint?: string | string[];\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the select.\n */\n @Prop() label = '';\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @Prop() labelHidden = false;\n\n /**\n * A value is required or must be checked for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * The value of the control.\n */\n @Prop({ mutable: true }) value?: string[];\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n */\n @Prop() errors?: boolean | string[] | ErrorMap;\n\n /**\n * Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors change with the given delay in milliseconds or immediately on blur.\n */\n @Prop() errorUpdate: boolean | number = 0;\n\n /**\n * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n * Pasted values will also be split by those chars.\n * Defaults to `[' ']`.\n */\n @Prop() tagCreationChars: string[] = [' '];\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string[]>;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent): void {\n const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n event.preventDefault();\n if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) {\n this.value = [...(this.value ?? []), this.input.value.trim()];\n this.catChange.emit(this.value);\n }\n if (this.input) {\n this.input.value = '';\n }\n } else if (\n ['Backspace'].includes(event.key) &&\n this.input?.selectionStart === 0 &&\n (this.value?.length ?? 0) > 0 &&\n isInputFocused\n ) {\n this.value = this.value?.slice(0, -1) ?? [];\n this.catChange.emit(this.value);\n }\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue || undefined;\n if (update) {\n this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n return (\n <Host>\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker?.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n {this.value?.map(value => (\n <div class=\"tag-pill\">\n <span>{value}</span>\n {!this.disabled && (\n <cat-button\n size=\"xs\"\n variant=\"text\"\n icon=\"$cat:select-clear\"\n iconOnly\n a11yLabel={i18n.t('select.deselect')}\n onClick={() => this.deselect(value)}\n tabIndex={-1}\n ></cat-button>\n )}\n </div>\n ))}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n id={`tags-${this.id}-input`}\n class=\"tags-input\"\n role=\"combobox\"\n ref={el => (this.input = el as HTMLInputElement)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n onInput={this.onInput.bind(this)}\n placeholder={this.placeholder}\n disabled={this.disabled}\n ></input>\n {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n data-dropdown-no-close\n ></cat-button>\n )}\n {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n </div>\n </div>\n {this.hasHint && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint || !!this.hasSlottedHint || this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n }\n\n private onInput() {\n const currentValue = [\n ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n ].filter(value => !!value && !this.value?.includes(value));\n if (currentValue.length > 1) {\n this.value = [...(this.value ?? []), ...currentValue];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n }\n\n private clear() {\n this.value = [];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private deselect(value: string) {\n this.value = this.value?.filter(element => element !== value);\n this.catChange.emit(this.value);\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n\n private createSplitRegex(delimiters: string[]): RegExp {\n // Escape special regex characters in the array\n const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n // Add newline characters to the list of delimiters\n escapedDelimiters.push('\\\\n', '\\\\r');\n\n // Join the escaped delimiters to create a character class\n const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n return new RegExp(regexPattern, 'g');\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-tag.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * An input that allows multiple values to be entered as tags.\n *\n * @part input - The native input element.\n * @part label - The native label element.\n */\n@Component({\n tag: 'cat-tag',\n styleUrl: 'cat-tag.scss',\n shadow: true\n})\nexport class CatTag {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier || this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap | true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() tags: string[] = [];\n\n @State() errorMap?: ErrorMap | true;\n\n /**\n * Whether the label need a marker to shown if the select is required or optional.\n */\n @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n /**\n * Whether the select is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The placeholder text to display within the select.\n */\n @Prop() placeholder?: string;\n\n /**\n * Optional hint text(s) to be displayed with the select.\n */\n @Prop() hint?: string | string[];\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the select.\n */\n @Prop() label = '';\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @Prop() labelHidden = false;\n\n /**\n * A value is required or must be checked for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * The value of the control.\n */\n @Prop({ mutable: true }) value?: string[];\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n */\n @Prop() errors?: boolean | string[] | ErrorMap;\n\n /**\n * Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors change with the given delay in milliseconds or immediately on blur.\n */\n @Prop() errorUpdate: boolean | number = 0;\n\n /**\n * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n * Pasted values will also be split by those chars.\n * Defaults to `[' ']`.\n */\n @Prop() tagCreationChars: string[] = [' '];\n\n /**\n * Whether new tag is added when the input is blurred.\n */\n @Prop() addOnBlur = false;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string[]>;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent): void {\n const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n event.preventDefault();\n this.addInputValue();\n } else if (\n ['Backspace'].includes(event.key) &&\n this.input?.selectionStart === 0 &&\n (this.value?.length ?? 0) > 0 &&\n isInputFocused\n ) {\n this.value = this.value?.slice(0, -1) ?? [];\n this.catChange.emit(this.value);\n }\n }\n\n @Watch('errors')\n onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue || undefined;\n if (update) {\n this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n return (\n <Host>\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker?.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n {this.value?.map(value => (\n <div class=\"tag-pill\">\n <span>{value}</span>\n {!this.disabled && (\n <cat-button\n size=\"xs\"\n variant=\"text\"\n icon=\"$cat:select-clear\"\n iconOnly\n a11yLabel={i18n.t('select.deselect')}\n onClick={() => this.deselect(value)}\n tabIndex={-1}\n ></cat-button>\n )}\n </div>\n ))}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n id={`tags-${this.id}-input`}\n class=\"tags-input\"\n role=\"combobox\"\n ref={el => (this.input = el as HTMLInputElement)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n onInput={this.onInput.bind(this)}\n onBlur={this.onBlur.bind(this)}\n placeholder={this.placeholder}\n disabled={this.disabled}\n ></input>\n {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n data-dropdown-no-close\n ></cat-button>\n )}\n {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n </div>\n </div>\n {this.hasHint && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint || !!this.hasSlottedHint || this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n }\n\n private onInput() {\n const currentValue = [\n ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n ].filter(value => !!value && !this.value?.includes(value));\n if (currentValue.length > 1) {\n this.value = [...(this.value ?? []), ...currentValue];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n }\n\n private onBlur() {\n if (this.addOnBlur) {\n this.addInputValue();\n }\n }\n\n private addInputValue() {\n const inputValue = this.input?.value.trim();\n if (inputValue && !this.value?.includes(inputValue)) {\n this.value = [...(this.value ?? []), inputValue];\n this.catChange.emit(this.value);\n }\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private clear() {\n this.value = [];\n this.catChange.emit(this.value);\n if (this.input) {\n this.input.value = '';\n }\n }\n\n private deselect(value: string) {\n this.value = this.value?.filter(element => element !== value);\n this.catChange.emit(this.value);\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n\n private createSplitRegex(delimiters: string[]): RegExp {\n // Escape special regex characters in the array\n const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n // Add newline characters to the list of delimiters\n escapedDelimiters.push('\\\\n', '\\\\r');\n\n // Join the escaped delimiters to create a character class\n const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n return new RegExp(regexPattern, 'g');\n }\n}\n"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
@use '../variables' as *;
|
|
2
2
|
@use '../mixins' as *;
|
|
3
3
|
|
|
4
|
+
$mobile-side-padding: 0.5rem;
|
|
5
|
+
|
|
4
6
|
.cat-toastify {
|
|
5
7
|
display: flex;
|
|
6
8
|
border-radius: cat-border-radius('l');
|
|
@@ -24,6 +26,16 @@
|
|
|
24
26
|
--cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive', $wrap: false)};
|
|
25
27
|
background: cat-token('color.ui.background.surfaceInverted');
|
|
26
28
|
}
|
|
29
|
+
|
|
30
|
+
@include until('xs') {
|
|
31
|
+
transform: translate($mobile-side-padding, -1rem) !important;
|
|
32
|
+
width: calc(100% - #{$mobile-side-padding * 2});
|
|
33
|
+
max-width: calc(100% - #{$mobile-side-padding * 2});
|
|
34
|
+
margin-left: 0;
|
|
35
|
+
margin-right: 0;
|
|
36
|
+
left: 0;
|
|
37
|
+
right: 0;
|
|
38
|
+
}
|
|
27
39
|
}
|
|
28
40
|
|
|
29
41
|
.cat-toastify-wrapper {
|
|
@@ -1053,6 +1053,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
|
|
|
1053
1053
|
return; // busy or closed
|
|
1054
1054
|
}
|
|
1055
1055
|
this.isOpen = null;
|
|
1056
|
+
this.trap?.deactivate();
|
|
1056
1057
|
this.content.classList.remove('show');
|
|
1057
1058
|
// give CSS transition time to apply
|
|
1058
1059
|
setTimeout(() => {
|
|
@@ -1060,12 +1061,11 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
|
|
|
1060
1061
|
this.content.classList.remove('show');
|
|
1061
1062
|
this.content.style.display = '';
|
|
1062
1063
|
this.trigger?.setAttribute('aria-expanded', 'false');
|
|
1063
|
-
this.trap?.deactivate();
|
|
1064
1064
|
this.catClose.emit();
|
|
1065
1065
|
}, timeTransitionS);
|
|
1066
1066
|
}
|
|
1067
1067
|
render() {
|
|
1068
|
-
return (h(Host, { key: '
|
|
1068
|
+
return (h(Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
|
|
1069
1069
|
}
|
|
1070
1070
|
componentDidLoad() {
|
|
1071
1071
|
this.initAnchor();
|