@haiilo/catalyst 10.24.3 → 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-2764c51d.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 +18 -8
- 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-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-tag.js +19 -8
- package/dist/components/cat-tag.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +18 -8
- 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-2764c51d.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;
|
|
@@ -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 {
|
|
@@ -38,6 +38,7 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
|
|
|
38
38
|
this.errors = undefined;
|
|
39
39
|
this.errorUpdate = 0;
|
|
40
40
|
this.tagCreationChars = [' '];
|
|
41
|
+
this.addOnBlur = false;
|
|
41
42
|
}
|
|
42
43
|
get id() {
|
|
43
44
|
return this.identifier || this._id;
|
|
@@ -53,13 +54,7 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
|
|
|
53
54
|
const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
|
|
54
55
|
if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {
|
|
55
56
|
event.preventDefault();
|
|
56
|
-
|
|
57
|
-
this.value = [...(this.value ?? []), this.input.value.trim()];
|
|
58
|
-
this.catChange.emit(this.value);
|
|
59
|
-
}
|
|
60
|
-
if (this.input) {
|
|
61
|
-
this.input.value = '';
|
|
62
|
-
}
|
|
57
|
+
this.addInputValue();
|
|
63
58
|
}
|
|
64
59
|
else if (['Backspace'].includes(event.key) &&
|
|
65
60
|
this.input?.selectionStart === 0 &&
|
|
@@ -83,7 +78,7 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
|
|
|
83
78
|
}
|
|
84
79
|
}
|
|
85
80
|
render() {
|
|
86
|
-
return (h(Host, { key: '
|
|
81
|
+
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" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.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: catI18nRegistry.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": catI18nRegistry.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 }))));
|
|
87
82
|
}
|
|
88
83
|
get hasHint() {
|
|
89
84
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -103,6 +98,21 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
|
|
|
103
98
|
}
|
|
104
99
|
}
|
|
105
100
|
}
|
|
101
|
+
onBlur() {
|
|
102
|
+
if (this.addOnBlur) {
|
|
103
|
+
this.addInputValue();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
addInputValue() {
|
|
107
|
+
const inputValue = this.input?.value.trim();
|
|
108
|
+
if (inputValue && !this.value?.includes(inputValue)) {
|
|
109
|
+
this.value = [...(this.value ?? []), inputValue];
|
|
110
|
+
this.catChange.emit(this.value);
|
|
111
|
+
}
|
|
112
|
+
if (this.input) {
|
|
113
|
+
this.input.value = '';
|
|
114
|
+
}
|
|
115
|
+
}
|
|
106
116
|
clear() {
|
|
107
117
|
this.value = [];
|
|
108
118
|
this.catChange.emit(this.value);
|
|
@@ -162,6 +172,7 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
|
|
|
162
172
|
"errors": [4],
|
|
163
173
|
"errorUpdate": [8, "error-update"],
|
|
164
174
|
"tagCreationChars": [16],
|
|
175
|
+
"addOnBlur": [4, "add-on-blur"],
|
|
165
176
|
"hasSlottedLabel": [32],
|
|
166
177
|
"hasSlottedHint": [32],
|
|
167
178
|
"tags": [32],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-tag.js","mappings":"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","names":["CatTag","i18n"],"sources":["src/components/cat-tag/cat-tag.scss?tag=cat-tag&encapsulation=shadow","src/components/cat-tag/cat-tag.tsx"],"sourcesContent":["@use '_snippets/form-label';\n@use 'variables' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use 'mixins' as *;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\ninput {\n font: inherit;\n margin: 0;\n min-width: 20rem;\n padding: 0.375rem 0;\n flex: 1 1 auto;\n border: none;\n outline: none;\n background: none;\n @include cat-ellipsis;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n /* stylelint-enable property-no-vendor-prefix */\n}\n\n.input-wrapper {\n flex: 1 1 auto;\n display: flex;\n align-items: stretch;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n min-height: 2rem;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n flex-wrap: wrap;\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled):hover {\n box-shadow:\n inset 0 0 0 1px rgb(var(--border-color)),\n 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n\n &:has(.clearable:focus) {\n outline: none;\n }\n }\n\n &.input-invalid {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n /* stylelint-enable property-no-vendor-prefix */\n}\n\n.tag-pill {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.25rem 0.5rem;\n background: cat-token('color.ui.background.muted');\n border-radius: cat-border-radius('s');\n white-space: nowrap;\n min-width: 0;\n\n > span {\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1 1 0;\n }\n\n > cat-button {\n margin-right: -0.25rem;\n margin-left: -0.25rem;\n }\n}\n\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n flex: 1 1 auto;\n display: flex;\n}\n","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"],"version":3}
|
|
1
|
+
{"file":"cat-tag.js","mappings":"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","names":["CatTag","i18n"],"sources":["src/components/cat-tag/cat-tag.scss?tag=cat-tag&encapsulation=shadow","src/components/cat-tag/cat-tag.tsx"],"sourcesContent":["@use '_snippets/form-label';\n@use 'variables' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use 'mixins' as *;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\ninput {\n font: inherit;\n margin: 0;\n min-width: 20rem;\n padding: 0.375rem 0;\n flex: 1 1 auto;\n border: none;\n outline: none;\n background: none;\n @include cat-ellipsis;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n /* stylelint-enable property-no-vendor-prefix */\n}\n\n.input-wrapper {\n flex: 1 1 auto;\n display: flex;\n align-items: stretch;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n min-height: 2rem;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n flex-wrap: wrap;\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled):hover {\n box-shadow:\n inset 0 0 0 1px rgb(var(--border-color)),\n 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n\n &:has(.clearable:focus) {\n outline: none;\n }\n }\n\n &.input-invalid {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n /* stylelint-enable property-no-vendor-prefix */\n}\n\n.tag-pill {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.25rem 0.5rem;\n background: cat-token('color.ui.background.muted');\n border-radius: cat-border-radius('s');\n white-space: nowrap;\n min-width: 0;\n\n > span {\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1 1 0;\n }\n\n > cat-button {\n margin-right: -0.25rem;\n margin-left: -0.25rem;\n }\n}\n\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n flex: 1 1 auto;\n display: flex;\n}\n","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"],"version":3}
|