npm - @haiilo/catalyst - Versions diffs - 5.2.2 → 5.3.0 - Mend

@haiilo/catalyst 5.2.2 → 5.3.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.

Files changed (70) hide show

package/dist/cjs/catalyst.cjs.js CHANGED Viewed

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["cat-alert_24.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[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":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[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":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-card"],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"],"labelSize":[1,"label-size"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"],"hasSlottedContent":[32]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"connector":[32],"state":[32],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconSrc":[1,"icon-src"],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"nativeAttributes":[16],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[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);
+  return index.bootstrapLazy([["cat-alert_25.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[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":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[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":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[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-form-group",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"labelSize":[1,"label-size"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"],"hasSlottedContent":[32]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"connector":[32],"state":[32],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconSrc":[1,"icon-src"],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"nativeAttributes":[16],"buttonGroupPosition":[1,"button-group-position"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[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);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["cat-alert_24.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[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":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[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":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-card"],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"],"labelSize":[1,"label-size"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"],"hasSlottedContent":[32]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"connector":[32],"state":[32],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconSrc":[1,"icon-src"],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"nativeAttributes":[16],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[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);
+  return index.bootstrapLazy([["cat-alert_25.cjs",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[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":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[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":[1032],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[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-form-group",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"labelSize":[1,"label-size"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"],"hasSlottedContent":[32]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"horizontal":[4],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"errors":[4],"errorUpdate":[8,"error-update"],"nativeAttributes":[16],"connector":[32],"state":[32],"hasSlottedLabel":[32],"hasSlottedHint":[32],"errorMap":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"nativeAttributes":[16],"hasSlottedLabel":[32],"hasSlottedHint":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconSrc":[1,"icon-src"],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"nativeAttributes":[16],"buttonGroupPosition":[1,"button-group-position"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[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);
   });
 };

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -5,6 +5,7 @@
     "./components/cat-avatar/cat-avatar.js",
     "./components/cat-badge/cat-badge.js",
     "./components/cat-button/cat-button.js",
+    "./components/cat-button-group/cat-button-group.js",
     "./components/cat-card/cat-card.js",
     "./components/cat-checkbox/cat-checkbox.js",
     "./components/cat-dropdown/cat-dropdown.js",

package/dist/collection/components/cat-button/cat-button.css CHANGED Viewed

@@ -67,6 +67,24 @@
   visibility: hidden;
 }
+.cat-group-button-first {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.cat-group-button-middle {
+  border-radius: 0;
+}
+.cat-group-button-last {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.cat-group-button:hover {
+  z-index: 1;
+}
+.cat-group-button:focus-visible {
+  z-index: 2;
+}
 .cat-button-filled {
   background-color: rgb(var(--bg));
   color: rgb(var(--fill));
@@ -89,7 +107,7 @@
   --text: var(--cat-font-color-muted, 81, 92, 108);
 }
 .cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-  background-color: rgba(var(--base), 0.05);
+  background-color: rgba(var(--base), 0.1);
 }
 .cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
   background-color: rgba(var(--base), 0.1);
@@ -108,7 +126,7 @@
 }
 .cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading) {
   text-decoration: var(--cat-link-button-decoration-hover, none);
-  background-color: rgba(var(--base), 0.05);
+  background-color: rgba(var(--base), 0.1);
 }
 .cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
   text-decoration: var(--cat-link-button-decoration-hover, none);

package/dist/collection/components/cat-button/cat-button.js CHANGED Viewed

@@ -35,6 +35,7 @@ export class CatButton {
     this.a11yLabel = undefined;
     this.a11yCurrent = undefined;
     this.nativeAttributes = undefined;
+    this.buttonGroupPosition = undefined;
   }
   onIconOnlyChanged(value) {
     var _a, _b;
@@ -119,7 +120,9 @@ export class CatButton {
           'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size)
+          [`cat-button-${this.size}`]: Boolean(this.size),
+          [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
+          'cat-group-button': Boolean(this.buttonGroupPosition)
         }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.content));
     }
   }
@@ -549,6 +552,23 @@ export class CatButton {
           "tags": [],
           "text": "Attributes that will be added to the native HTML button element"
         }
+      },
+      "buttonGroupPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'first' | 'last' | 'middle'",
+          "resolved": "\"first\" | \"last\" | \"middle\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The index of a button that is used inside a cat-button-group component"
+        },
+        "attribute": "button-group-position",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/cat-button/cat-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-button.js","sourceRoot":"","sources":["../../../src/components/cat-button/cat-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n The SVG source of an icon to be displayed in the button. This takes\n * precenedence over the `icon` name.\n /\n @Prop() iconSrc?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /\n Attributes that will be added to the native HTML button element\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /\n Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /\n Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n if (this.url) {\n return (\n <a\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"suffix\"></cat-icon>\n ) : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-button.js","sourceRoot":"","sources":["../../../src/components/cat-button/cat-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n The SVG source of an icon to be displayed in the button. This takes\n * precenedence over the `icon` name.\n /\n @Prop() iconSrc?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /\n Attributes that will be added to the native HTML button element\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n The index of a button that is used inside a cat-button-group component\n /\n @Prop() buttonGroupPosition?: 'first' \| 'last' \| 'middle';\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /\n Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /\n Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n if (this.url) {\n return (\n <a\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),\n 'cat-group-button': Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"suffix\"></cat-icon>\n ) : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}

package/dist/collection/components/cat-button-group/cat-button-group.css ADDED Viewed

@@ -0,0 +1,15 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+::slotted(cat-button[variant=outlined]),
+::slotted(cat-button:not([variant])) {
+  margin-right: -1px;
+}
+::slotted(cat-button[variant=outlined]:last-child),
+::slotted(cat-button:not([variant]):last-child) {
+  margin-right: 0;
+}

package/dist/collection/components/cat-button-group/cat-button-group.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { h, Host } from '@stencil/core';
+export class CatButtonGroup {
+  constructor() {
+    this.formElements = [];
+    this.a11yLabel = undefined;
+  }
+  render() {
+    return (h(Host, { role: "group", "aria-label": this.a11yLabel }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
+  }
+  onSlotChange() {
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));
+    this.formElements.forEach((element, index) => {
+      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';
+    });
+  }
+  static get is() { return "cat-button-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-button-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-button-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adds an accessible label for the button group that\nit is only shown in assistive technologies, like screen readers."
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=cat-button-group.js.map

package/dist/collection/components/cat-button-group/cat-button-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cat-button-group.js","sourceRoot":"","sources":["../../../src/components/cat-button-group/cat-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,cAAc;;IACjB,iBAAY,GAA2B,EAAE,CAAC;;;EAUlD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,SAAS;MAC3C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;MAC3C,OAAO,CAAC,mBAAmB,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACnH,CAAC,CAAC,CAAC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cat-button-group',\n styleUrl: 'cat-button-group.scss',\n shadow: true\n})\nexport class CatButtonGroup {\n private formElements: HTMLCatButtonElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * Adds an accessible label for the button group that\n * it is only shown in assistive technologies, like screen readers.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n render() {\n return (\n <Host role=\"group\" aria-label={this.a11yLabel}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));\n\n this.formElements.forEach((element, index) => {\n element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';\n });\n }\n}\n"]}

package/dist/collection/components/cat-dropdown/cat-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, offset, size } from '@floating-ui/dom';
 import { timeTransitionS } from '@haiilo/catalyst-tokens';
 import { h, Host } from '@stencil/core';
 import * as focusTrap from 'focus-trap';
@@ -139,7 +139,19 @@ export class CatDropdown {
       computePosition(this.trigger, this.content, {
         strategy: 'fixed',
         placement: this.placement,
-        middleware: [offset(CatDropdown.OFFSET), flip()]
+        middleware: [
+          offset(CatDropdown.OFFSET),
+          flip(),
+          size({
+            padding: CatDropdown.OFFSET,
+            apply({ availableWidth, availableHeight, elements }) {
+              Object.assign(elements.floating.style, {
+                maxWidth: `${availableWidth}px`,
+                maxHeight: `${availableHeight}px`
+              });
+            }
+          })
+        ]
       }).then(({ x, y, placement }) => {
         this.content.dataset.placement = placement;
         Object.assign(this.content.style, {

package/dist/collection/components/cat-dropdown/cat-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private keyListener?: (event: KeyboardEvent) => void;\n private isOpen: boolean \| null = false;\n\n /*\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first,\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button click\n if (!this.noAutoClose && event.composedPath().includes(this.content)) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n async open(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.catOpen.emit();\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n !event.composedPath().includes(this.content) &&\n (!this.trigger \|\| !event.composedPath().includes(this.trigger)),\n onPostDeactivate: () => this.close()\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad(): void {\n this.keyListener = event => {\n if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n const activeElement = firstTabbable(document.activeElement);\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].focus();\n event.preventDefault();\n }\n };\n document.addEventListener('keydown', this.keyListener);\n }\n\n disconnectedCallback(): void {\n if (this.keyListener) {\n document.removeEventListener('keydown', this.keyListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n autoUpdate(this.trigger, this.content, () => this.update());\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update() {\n if (this.trigger) {\n computePosition(this.trigger, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip()]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n}\n"]}
1	+ {"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAa,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,YAAY,CAAC;AACxC,OAAO,EAAoB,QAAQ,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAEvD,IAAI,YAAY,GAAG,CAAC,CAAC;AAOrB,MAAM,OAAO,WAAW;;IAEL,OAAE,GAAG,YAAY,EAAE,CAAC;IAM7B,WAAM,GAAmB,KAAK,CAAC;qBAKR,cAAc;uBAKvB,KAAK;oBAKR,KAAK;;EAaxB,YAAY,CAAC,KAA8B;IACzC,kEAAkE;IAClE,sEAAsE;IACtE,0DAA0D;IAC1D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;IAED,gCAAgC;IAChC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACpE,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;EACH,CAAC;EAED;;KAEG;EACH,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;EAC3C,CAAC;EAED;;KAEG;EACH,KAAK,CAAC,IAAI;IACR,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;MACxB,OAAO,CAAC,OAAO;KAChB;IAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IACrC,oCAAoC;IACpC,UAAU,CAAC,GAAG,EAAE;;MACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;MACnC,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MACpD,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;QACnB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC;QACjD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE;UACtC,eAAe,EAAE;YACf,aAAa,EAAE,IAAI;WACpB;UACD,iBAAiB,EAAE,IAAI;UACvB,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC/B,CAAC,IAAI,CAAC,WAAW;YACjB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;UACjE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;SACrC,CAAC,CAAC;MACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;EACL,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;MACxB,OAAO,CAAC,OAAO;KAChB;IAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtC,oCAAoC;IACpC,UAAU,CAAC,GAAG,EAAE;;MACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;MACtC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;MAChC,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;MACrD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;MACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,EAAE,eAAe,CAAC,CAAC;EACtB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAE;MACzB,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QAC/D,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAChG,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7E,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;QAC9G,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;IACH,CAAC,CAAC;IACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;EACzD,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3D;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAqB,CAAC,GAAS;MACnF,WACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EACzD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC;QAE7C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACD,CACR,CAAC;EACJ,CAAC;EAED,IAAY,SAAS;IACnB,OAAO,gBAAgB,IAAI,CAAC,EAAE,EAAE,CAAC;EACnC,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACnD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IACpD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAC5D,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;EAC9D,CAAC;EAEO,WAAW;;IACjB,IAAI,OAAqC,CAAC;IAC1C,MAAM,KAAK,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,kDAAI,KAAI,EAAE,CAAC;IAC3D,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE;MAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;MAC3B,OAAO,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,cAAc,CAAC;QAC1C,CAAC,CAAE,IAAoB;QACvB,CAAC,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CAAC,gBAAgB,CAAC,mCAAI,SAAS,CAAC;KACxD;IACD,IAAI,CAAC,OAAO,EAAE;MACZ,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3C;IACD,IAAI,CAAC,OAAO,EAAE;MACZ,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;IACD,OAAO,OAAO,CAAC;EACjB,CAAC;EAEO,MAAM;IACZ,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;QAC1C,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,UAAU,EAAE;UACV,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC;UAC1B,IAAI,EAAE;UACN,IAAI,CAAC;YACH,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,EAAE;cACjD,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;gBACrC,QAAQ,EAAE,GAAG,cAAc,IAAI;gBAC/B,SAAS,EAAE,GAAG,eAAe,IAAI;eAClC,CAAC,CAAC;YACL,CAAC;WACF,CAAC;SACH;OACF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;QAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;UAChC,IAAI,EAAE,GAAG,CAAC,IAAI;UACd,GAAG,EAAE,GAAG,CAAC,IAAI;SACd,CAAC,CAAC;MACL,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7MuB,kBAAM,GAAG,CAAC,CAAC","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private keyListener?: (event: KeyboardEvent) => void;\n private isOpen: boolean \| null = false;\n\n /*\n The placement of the dropdown.\n /\n @Prop() placement: Placement = 'bottom-start';\n\n /\n Do not close the dropdown on outside clicks.\n /\n @Prop() noAutoClose = false;\n\n /\n Allow overflow when dropdown is open.\n /\n @Prop() overflow = false;\n\n /\n Emitted when the dropdown is opened.\n /\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the dropdown is closed.\n /\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first,\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button click\n if (!this.noAutoClose && event.composedPath().includes(this.content)) {\n this.close();\n }\n }\n\n /\n Toggles the dropdown.\n /\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /\n Opens the dropdown.\n /\n async open(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.catOpen.emit();\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n !event.composedPath().includes(this.content) &&\n (!this.trigger \|\| !event.composedPath().includes(this.trigger)),\n onPostDeactivate: () => this.close()\n });\n this.trap.activate();\n });\n }\n\n /\n Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad(): void {\n this.keyListener = event => {\n if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n const activeElement = firstTabbable(document.activeElement);\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].focus();\n event.preventDefault();\n }\n };\n document.addEventListener('keydown', this.keyListener);\n }\n\n disconnectedCallback(): void {\n if (this.keyListener) {\n document.removeEventListener('keydown', this.keyListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n autoUpdate(this.trigger, this.content, () => this.update());\n }\n\n private findTrigger() {\n let trigger: FocusableElement \| undefined;\n const elems = this.triggerSlot?.assignedElements?.() \|\| [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update() {\n if (this.trigger) {\n computePosition(this.trigger, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatDropdown.OFFSET),\n flip(),\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n}\n"]}

package/dist/collection/components/cat-form-group/cat-form-group.js CHANGED Viewed

@@ -3,18 +3,25 @@ export class CatFormGroup {
   constructor() {
     this.formElements = [];
     this.requiredMarker = 'auto';
+    this.horizontal = false;
     this.labelSize = undefined;
   }
   onRequiredMarker(newRequiredMarker) {
     const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
     this.formElements.forEach(element => { var _a; return !((_a = element.requiredMarker) === null || _a === void 0 ? void 0 : _a.endsWith('!')) && (element.requiredMarker = updateMarker); });
   }
+  onHorizontal(newHorizontal) {
+    this.formElements.forEach(element => {
+      element.horizontal = newHorizontal;
+    });
+  }
   render() {
     return (h(Host, { style: { '--label-size': this.labelSize } }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
   }
   onSlotChange() {
     this.formElements = Array.from(this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label'));
     this.onRequiredMarker(this.requiredMarker);
+    this.onHorizontal(this.horizontal);
   }
   calculate(elements) {
     const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');
@@ -54,6 +61,24 @@ export class CatFormGroup {
         "reflect": false,
         "defaultValue": "'auto'"
       },
+      "horizontal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the label is on top or left."
+        },
+        "attribute": "horizontal",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "labelSize": {
         "type": "string",
         "mutable": false,
@@ -78,6 +103,9 @@ export class CatFormGroup {
     return [{
         "propName": "requiredMarker",
         "methodName": "onRequiredMarker"
+      }, {
+        "propName": "horizontal",
+        "methodName": "onHorizontal"
       }];
   }
 }

package/dist/collection/components/cat-form-group/cat-form-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;;;~~EAQ1E~~,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,QAAQ,CAAC,GAAG,CAAC,CAAA,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAAA,EAAA,CAC7F,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;MAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,gDAAgD,CAAC,CACvD,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;~~EAC7C~~,CAAC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC;IAC3E,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAC1E,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,GAAG,cAAc,CAAC;IAC1D,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;EACpE,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n \| HTMLCatInputElement\n \| HTMLCatTextareaElement\n \| HTMLCatSelectElement\n \| HTMLCatLabelElement;\n\n@Component({\n tag: 'cat-form-group',\n styleUrl: 'cat-form-group.scss',\n shadow: true\n})\nexport class CatFormGroup {\n private formElements: HTMLCatFormFieldElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /*\n Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n * - If there are more required, the optional will be marked.<br />\n * - If there are less required, it will mark the required.<br /><br />\n * If a form field had \"!\", the requiredMarked of the field would not change.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'auto' = 'auto';\n\n /\n The space allocated to the input label\n */\n @Prop() labelSize?: string;\n\n @Watch('requiredMarker')\n onRequiredMarker(newRequiredMarker: 'none' \| 'required' \| 'optional' \| 'auto') {\n const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n this.formElements.forEach(\n element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n );\n }\n\n render() {\n return (\n <Host style={{ '--label-size': this.labelSize }}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(\n this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label')\n ) as HTMLCatFormFieldElement[];\n this.onRequiredMarker(this.requiredMarker);\n }\n\n private calculate(elements: HTMLCatFormFieldElement[]): 'optional' \| 'required' {\n const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');\n const optionalFields = formFields.filter(value => !value.required).length;\n const requiredFields = formFields.length - optionalFields;\n return requiredFields >= optionalFields ? 'optional' : 'required';\n }\n}\n"]}
1	+ {"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,QAAQ,CAAC,GAAG,CAAC,CAAA,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAAA,EAAA,CAC7F,CAAC;EACJ,CAAC;EAGD,YAAY,CAAC,aAAsB;IACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAClC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;IACrC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;MAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,gDAAgD,CAAC,CACvD,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACrC,CAAC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC;IAC3E,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAC1E,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,GAAG,cAAc,CAAC;IAC1D,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;EACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n \| HTMLCatInputElement\n \| HTMLCatTextareaElement\n \| HTMLCatSelectElement\n \| HTMLCatLabelElement;\n\n@Component({\n tag: 'cat-form-group',\n styleUrl: 'cat-form-group.scss',\n shadow: true\n})\nexport class CatFormGroup {\n private formElements: HTMLCatFormFieldElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /*\n Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n * - If there are more required, the optional will be marked.<br />\n * - If there are less required, it will mark the required.<br /><br />\n * If a form field had \"!\", the requiredMarked of the field would not change.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'auto' = 'auto';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n The space allocated to the input label\n */\n @Prop() labelSize?: string;\n\n @Watch('requiredMarker')\n onRequiredMarker(newRequiredMarker: 'none' \| 'required' \| 'optional' \| 'auto') {\n const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n this.formElements.forEach(\n element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n );\n }\n\n @Watch('horizontal')\n onHorizontal(newHorizontal: boolean) {\n this.formElements.forEach(element => {\n element.horizontal = newHorizontal;\n });\n }\n\n render() {\n return (\n <Host style={{ '--label-size': this.labelSize }}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(\n this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label')\n ) as HTMLCatFormFieldElement[];\n this.onRequiredMarker(this.requiredMarker);\n this.onHorizontal(this.horizontal);\n }\n\n private calculate(elements: HTMLCatFormFieldElement[]): 'optional' \| 'required' {\n const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');\n const optionalFields = formFields.filter(value => !value.required).length;\n const requiredFields = formFields.length - optionalFields;\n return requiredFields >= optionalFields ? 'optional' : 'required';\n }\n}\n"]}

package/dist/collection/components/cat-input/cat-input.css CHANGED Viewed

@@ -306,21 +306,25 @@
 }
 .input-horizontal .label-wrapper,
-.textarea-horizontal .label-wrapper {
+.textarea-horizontal .label-wrapper,
+.select-horizontal .label-wrapper {
   flex-direction: column;
 }
 .input-horizontal label,
-.textarea-horizontal label {
+.textarea-horizontal label,
+.select-horizontal label {
   min-height: 2.5rem;
   display: inline-flex;
   align-items: center;
 }
 .input-horizontal .label-metadata,
-.textarea-horizontal .label-metadata {
+.textarea-horizontal .label-metadata,
+.select-horizontal .label-metadata {
   justify-content: flex-start;
 }
 .input-horizontal .label-metadata .label-character-count,
-.textarea-horizontal .label-metadata .label-character-count {
+.textarea-horizontal .label-metadata .label-character-count,
+.select-horizontal .label-metadata .label-character-count {
   margin-left: 0;
 }

package/dist/collection/components/cat-label/cat-label.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 export class CatLabel {
   constructor() {
     this.requiredMarker = 'optional';
+    this.horizontal = false;
     this.for = undefined;
     this.required = false;
   }
@@ -66,6 +67,24 @@ export class CatLabel {
         "reflect": false,
         "defaultValue": "'optional'"
       },
+      "horizontal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the label is on top or left."
+        },
+        "attribute": "horizontal",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "for": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/cat-label/cat-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-label.js","sourceRoot":"","sources":["../../../src/components/cat-label/cat-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;0BAa8E,UAAU;;~~oBAUxF~~,KAAK;;EAExB,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,4DAA4D;MAC5D,MAAA,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACxD,eAAa;QACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR;QACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC9D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR,CACK,CACH,CACR,CAAC;EACJ,CAAC;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;EACd,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA9DuB~~,uBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACb,CAAC","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n Labels are used to provide a short description of an input or form element.\n \n @deprecated Use label attribute of form elements instead.\n /\n@Component({\n tag: 'cat-label',\n styleUrl: 'cat-label.scss',\n shadow: true\n})\nexport class CatLabel {\n private static readonly SHADOW_TARGETS = [\n 'CAT-INPUT',\n 'CAT-TEXTAREA',\n 'CAT-CHECKBOX',\n 'CAT-TOGGLE',\n 'CAT-RADIO',\n 'CAT-SELECT'\n ];\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n The unique identifier for a referenced input.\n /\n @Prop() for?: string;\n\n /\n A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n onClick() {\n if (this.for) {\n // focus target that is possibly hidden inside a shadow root\n (document.getElementById(this.for) \|\| this.findShadowTarget(this.for))?.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n <slot></slot>\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </label>\n </Host>\n );\n }\n\n private findShadowTarget(id: string): HTMLElement \| null {\n for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n for (let i = 0; i < elems.length; i++) {\n const target = elems[i].shadowRoot?.getElementById(id);\n if (target) {\n return target;\n }\n }\n }\n return null;\n }\n}\n"]}
1	+ {"version":3,"file":"cat-label.js","sourceRoot":"","sources":["../../../src/components/cat-label/cat-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;0BAa8E,UAAU;sBAKtF,KAAK;;oBAUP,KAAK;;EAExB,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,4DAA4D;MAC5D,MAAA,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACxD,eAAa;QACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR;QACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC9D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR,CACK,CACH,CACR,CAAC;EACJ,CAAC;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnEuB,uBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACb,CAAC","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n Labels are used to provide a short description of an input or form element.\n \n @deprecated Use label attribute of form elements instead.\n /\n@Component({\n tag: 'cat-label',\n styleUrl: 'cat-label.scss',\n shadow: true\n})\nexport class CatLabel {\n private static readonly SHADOW_TARGETS = [\n 'CAT-INPUT',\n 'CAT-TEXTAREA',\n 'CAT-CHECKBOX',\n 'CAT-TOGGLE',\n 'CAT-RADIO',\n 'CAT-SELECT'\n ];\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n The unique identifier for a referenced input.\n /\n @Prop() for?: string;\n\n /\n A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n onClick() {\n if (this.for) {\n // focus target that is possibly hidden inside a shadow root\n (document.getElementById(this.for) \|\| this.findShadowTarget(this.for))?.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n <slot></slot>\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </label>\n </Host>\n );\n }\n\n private findShadowTarget(id: string): HTMLElement \| null {\n for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n for (let i = 0; i < elems.length; i++) {\n const target = elems[i].shadowRoot?.getElementById(id);\n if (target) {\n return target;\n }\n }\n }\n return null;\n }\n}\n"]}