@haiilo/catalyst 14.0.4 → 14.0.5
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.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/p-CFGROHMy.js.map +1 -1
- package/dist/catalyst/{p-fae91392.entry.js → p-e6dea4a9.entry.js} +4 -4
- package/dist/catalyst/{p-fae91392.entry.js.map → p-e6dea4a9.entry.js.map} +1 -1
- package/dist/cjs/cat-alert_30.cjs.entry.js +20 -12
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/catalyst.cjs.js.map +1 -1
- package/dist/cjs/index-B8-TCsLD.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cat-alert/cat-alert.js +3 -3
- package/dist/collection/components/cat-alert/cat-alert.js.map +1 -1
- package/dist/collection/components/cat-badge/cat-badge.js +1 -2
- package/dist/collection/components/cat-badge/cat-badge.js.map +1 -1
- package/dist/collection/components/cat-button/cat-button.js +0 -1
- package/dist/collection/components/cat-button/cat-button.js.map +1 -1
- package/dist/collection/components/cat-datepicker/cat-datepicker.js +6 -4
- package/dist/collection/components/cat-datepicker/cat-datepicker.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +13 -3
- package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
- package/dist/components/cat-alert.js +1 -1
- package/dist/components/cat-alert.js.map +1 -1
- package/dist/components/cat-badge.js +1 -2
- package/dist/components/cat-badge.js.map +1 -1
- package/dist/components/cat-button2.js +0 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-datepicker.js +6 -4
- package/dist/components/cat-datepicker.js.map +1 -1
- package/dist/components/cat-textarea.js +14 -5
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +20 -12
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/catalyst.js.map +1 -1
- package/dist/esm/index-CFGROHMy.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-alert/cat-alert.d.ts +1 -1
- package/dist/types/components/cat-textarea/cat-textarea.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/package.json +6 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc,EAAA;AAEd,IAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;AACzD,QAAA,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;;AAEtD;;ACRA,MAAM,WAAW,GAAG,45EAA45E;;MCYn6EA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMmB,QAAA,IAAO,CAAA,OAAA,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB;AAC/B,SAAA,CAAC;AACe,QAAA,IAAO,CAAA,OAAA,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO;AACnB,SAAA,CAAC;AAIF;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,
|
|
1
|
+
{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc,EAAA;AAEd,IAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;AACzD,QAAA,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;;AAEtD;;ACRA,MAAM,WAAW,GAAG,45EAA45E;;MCYn6EA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMmB,QAAA,IAAO,CAAA,OAAA,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB;AAC/B,SAAA,CAAC;AACe,QAAA,IAAO,CAAA,OAAA,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO;AACnB,SAAA,CAAC;AAIF;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAwE,SAAS;AAO/G;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAiBvB;IAfC,iBAAiB,GAAA;AACf,QAAA,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;AACxC,QAAA,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;IAGjE,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAC,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAa,CAAA,EAChG,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert","__stencil_proxyCustomElement"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n host: T,\n attr: string,\n value: unknown\n): void {\n if (!host.hostElement.hasAttribute(attr) && value != null) {\n host.hostElement.setAttribute(attr, String(value));\n }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n display: flex;\n gap: 0.5rem;\n padding: 1.25rem;\n border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:focus-visible) {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n}\n\n.content {\n align-self: center;\n width: 100%;\n}\n\n::slotted(:last-child) {\n margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n :host([color='#{$theme}']) {\n background-color: cat-token('color.theme.#{$theme}.bg');\n color: cat-token('color.theme.#{$theme}.fill');\n // adjust nested links\n --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --cat-link-decoration: underline;\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n tag: 'cat-alert',\n styleUrl: 'cat-alert.scss',\n shadow: true\n})\nexport class CatAlert {\n private readonly mapIcon: Map<string, string> = new Map([\n ['primary', '$cat:alert-primary'],\n ['secondary', '$cat:alert-secondary'],\n ['info', '$cat:alert-info'],\n ['success', '$cat:alert-success'],\n ['warning', '$cat:alert-warning'],\n ['danger', '$cat:alert-danger']\n ]);\n private readonly mapRole: Map<string, string> = new Map([\n ['primary', 'status'],\n ['secondary', 'status'],\n ['info', 'status'],\n ['success', 'status'],\n ['warning', 'alert'],\n ['danger', 'alert']\n ]);\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The color palette of the alert.\n */\n @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'none' = 'primary';\n\n /**\n * The name of an icon to be displayed in the alert.\n */\n @Prop() icon?: string;\n\n /**\n * Whether the icon of the alert is deactivated.\n */\n @Prop() noIcon = false;\n\n connectedCallback() {\n setAttributeDefault(this, 'tabindex', 0);\n setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n }\n\n render() {\n return (\n <Host>\n {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -43,7 +43,6 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLE
|
|
|
43
43
|
}
|
|
44
44
|
onIconOnlyChanged(value) {
|
|
45
45
|
// teardown
|
|
46
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
47
46
|
this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
|
|
48
47
|
this.mediaQueryList = undefined;
|
|
49
48
|
this.mediaQueryListener = undefined;
|
|
@@ -84,7 +83,7 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLE
|
|
|
84
83
|
}
|
|
85
84
|
}
|
|
86
85
|
render() {
|
|
87
|
-
return (h(Host, { key: '
|
|
86
|
+
return (h(Host, { key: '858aa2825c035278c43bb84b48360a8d22865c46', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (h("slot", null)), this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
|
|
88
87
|
}
|
|
89
88
|
get hostElement() { return this; }
|
|
90
89
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-badge.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,w1FAAw1F;;MCa/1FA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAYW,QAAA,IAAS,CAAA,SAAA,GAAG,IAAI;AAEzB;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAA0B,QAAQ;AAElE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAwE,SAAS;AAE/G;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAkC,GAAG;AAElE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAEtC;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAOtC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAyB,KAAK;AAE9C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;
|
|
1
|
+
{"file":"cat-badge.js","mappings":"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","names":["CatBadge","__stencil_proxyCustomElement"],"sources":["src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-sizes: (\n 'xl': 3rem,\n 'l': 2.5rem,\n 'm': 2rem,\n 's': 1.5rem,\n 'xs': 1rem\n);\n$-paddings: (\n 'xl': 0 1rem,\n 'l': 0 1rem,\n 'm': 0 0.75rem,\n 's': 0 0.5rem,\n 'xs': 0 0.25rem\n);\n\n// -----\n\n:host([hidden]) {\n display: none;\n}\n\n:host {\n display: inline-flex;\n max-width: 100%;\n vertical-align: baseline;\n align-items: center;\n justify-content: center;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n line-height: 1.5;\n flex-shrink: 0;\n\n slot {\n display: inline-block;\n @include cat-ellipsis;\n }\n}\n\n// ----- round\n\n:host([round]) {\n border-radius: 10rem;\n}\n\n// ----- theme\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);\n\n:host([variant='filled']) {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: 600;\n @include cat-font-smooth;\n}\n\n:host([variant='outlined']) {\n background-color: cat-token('color.ui.background.surface');\n color: cat-token-wrap(var(--text));\n box-shadow: $-outline;\n}\n\n@mixin theme($theme) {\n :host([color='#{$theme}']) {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n $-total-height: map.get($-sizes, $size);\n :host([size='#{$size}']) {\n height: map.get($-sizes, $size);\n min-width: map.get($-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n padding: map.get($-paddings, $size);\n gap: 0.25rem;\n }\n :host([data-icon-badge='#{$size}']) {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 's');\n@include size('l', 'm');\n@include size('xl', 'l');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n:host([pulse][variant='filled']) {\n animation: 1.5s ease 0s infinite normal none running pulse;\n}\n\n:host([pulse][variant='outlined']) {\n animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: $-pulse-0;\n }\n\n 70% {\n box-shadow: $-pulse-70;\n }\n\n 100% {\n box-shadow: $-pulse-100;\n }\n}\n\n@keyframes pulse-outlined {\n 0% {\n box-shadow: $-pulse-0, $-outline;\n }\n\n 70% {\n box-shadow: $-pulse-70, $-outline;\n }\n\n 100% {\n box-shadow: $-pulse-100, $-outline;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n */\n@Component({\n tag: 'cat-badge',\n styleUrl: 'cat-badge.scss',\n shadow: true\n})\nexport class CatBadge {\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @Element() hostElement!: HTMLElement;\n\n @State() _iconOnly = true;\n\n /**\n * The rendering style of the badge.\n */\n @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n /**\n * The color palette of the badge.\n */\n @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n\n /**\n * The size of the badge.\n */\n @Prop({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * Use round badge edges.\n */\n @Prop({ reflect: true }) round = false;\n\n /**\n * Draw attention to the badge with a subtle animation.\n */\n @Prop({ reflect: true }) pulse = false;\n\n /**\n * The name of an icon to be displayed in the button.\n */\n @Prop() icon?: 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 @Watch('iconOnly')\n onIconOnlyChanged(value: boolean | Breakpoint): void {\n // teardown\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 componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n private get isIconBadge() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n switch (this.size) {\n case 'xs':\n case 's':\n return 'xs';\n case 'l':\n case 'xl':\n return 'l';\n default:\n return 'm';\n }\n }\n\n render() {\n return (\n <Host data-icon-badge={this.isIconBadge ? this.size : null}>\n {this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n {this.isIconBadge ? (\n <cat-icon icon={this.icon} size={this.iconSize} class=\"icon-only\"></cat-icon>\n ) : (\n <slot></slot>\n )}\n {this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -80,7 +80,6 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
|
|
|
80
80
|
}
|
|
81
81
|
onIconOnlyChanged(value) {
|
|
82
82
|
// teardown
|
|
83
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
84
83
|
this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
|
|
85
84
|
this.mediaQueryList = undefined;
|
|
86
85
|
this.mediaQueryListener = undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/find-closest.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n if (element instanceof Element && element.matches(selector)) {\n return element;\n }\n\n // Search in parent element or Shadow DOM host\n const nextElement =\n element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([data-button-group='middle']),\n:host([data-button-group='last']) {\n margin-left: -1px;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition:\n color cat-token('time.transition.s') linear,\n border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear,\n box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n .cat-button-empty & {\n display: none;\n }\n}\n\n.cat-button-content-inner {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > *:not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- group button\n\n.cat-button-group {\n &-first {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-middle {\n border-radius: 0;\n }\n\n &-last {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: var(--cat-font-weight-button, 600);\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n.cat-button-link {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration-style: cat-token('font.decoration.linkButtonHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration-style: cat-token('font.decoration.linkButtonHover');\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: $gap;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem, 0.5rem);\n@include size('xl', 'l', 1.25rem, 0.75rem);\n\n// ----- tabs\n\n:host(.cat-tab),\n:host(.cat-tab-more-button) {\n &::part(button) {\n padding: 1.125rem 0.75rem;\n --cat-secondary-bg: transparent;\n --cat-primary-text: transparent;\n --cat-danger-text: transparent;\n }\n\n &::part(content) {\n &::before {\n content: attr(data-text);\n content: attr(data-text) / '';\n height: 0;\n visibility: hidden;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n font-weight: 700;\n }\n }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n text-align: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n text-align: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n justify-content: left;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n\n// ----- datepicker\n\n:host(.cat-time-format) {\n .cat-button {\n border-radius: 0;\n }\n}\n\n:host(.cat-date-toggle),\n:host(.cat-time-toggle) {\n .cat-button {\n margin-left: -1px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n\n:host(.cat-date-item),\n:host(.cat-date-toggle),\n:host(.cat-time-format),\n:host(.cat-time-toggle) {\n .cat-button {\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n }\n}\n\n:host(.cat-date-item) {\n .cat-button {\n padding: 0;\n min-width: 2rem;\n max-height: 3rem;\n aspect-ratio: 1;\n }\n}\n\n:host(.date-start:not(.date-end)) {\n .cat-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n:host(.date-end:not(.date-start)) {\n .cat-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\nimport { findClosest } from '../../utils/find-closest';\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: {\n delegatesFocus: true\n }\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 @Element() hostElement!: HTMLElement;\n\n @State() _iconOnly = true;\n\n @State() hasSlottedContent = false;\n\n /**\n * The rendering style of the button.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' | 'link' = 'outlined';\n\n /**\n * The color palette of the button.\n */\n @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = '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 * 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 * Attributes that will be added to the native HTML button content element\n */\n @Prop() nativeContentAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: 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 this.hasSlottedContent = this.hostElement.hasChildNodes();\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled || this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n } else if (this.submit) {\n const form = findClosest('form', this.hostElement);\n if (form && form instanceof HTMLFormElement) {\n // we can't provide a submitter as it is hidden in the shadow DOM\n form.requestSubmit();\n }\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 this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n if (this.url) {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <a\n data-test={this.testId}\n {...this.nativeAttributes}\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-empty': !this.hasSlottedContent,\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 [`cat-button-group-${this.buttonGroupPosition}`]: 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 </a>\n </Host>\n );\n } else {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <button\n data-test={this.testId}\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-empty': !this.hasSlottedContent,\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-button-group-${this.buttonGroupPosition}`]: 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 </Host>\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) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n <span class=\"cat-button-content-inner\">\n <slot></slot>\n </span>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : 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"],"version":3}
|
|
1
|
+
{"file":"cat-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/find-closest.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n if (element instanceof Element && element.matches(selector)) {\n return element;\n }\n\n // Search in parent element or Shadow DOM host\n const nextElement =\n element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([data-button-group='middle']),\n:host([data-button-group='last']) {\n margin-left: -1px;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition:\n color cat-token('time.transition.s') linear,\n border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear,\n box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n .cat-button-empty & {\n display: none;\n }\n}\n\n.cat-button-content-inner {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > *:not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- group button\n\n.cat-button-group {\n &-first {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-middle {\n border-radius: 0;\n }\n\n &-last {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: var(--cat-font-weight-button, 600);\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n.cat-button-link {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration-style: cat-token('font.decoration.linkButtonHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration-style: cat-token('font.decoration.linkButtonHover');\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: $gap;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem, 0.5rem);\n@include size('xl', 'l', 1.25rem, 0.75rem);\n\n// ----- tabs\n\n:host(.cat-tab),\n:host(.cat-tab-more-button) {\n &::part(button) {\n padding: 1.125rem 0.75rem;\n --cat-secondary-bg: transparent;\n --cat-primary-text: transparent;\n --cat-danger-text: transparent;\n }\n\n &::part(content) {\n &::before {\n content: attr(data-text);\n content: attr(data-text) / '';\n height: 0;\n visibility: hidden;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n font-weight: 700;\n }\n }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n text-align: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n text-align: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n justify-content: left;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n\n// ----- datepicker\n\n:host(.cat-time-format) {\n .cat-button {\n border-radius: 0;\n }\n}\n\n:host(.cat-date-toggle),\n:host(.cat-time-toggle) {\n .cat-button {\n margin-left: -1px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n\n:host(.cat-date-item),\n:host(.cat-date-toggle),\n:host(.cat-time-format),\n:host(.cat-time-toggle) {\n .cat-button {\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n }\n}\n\n:host(.cat-date-item) {\n .cat-button {\n padding: 0;\n min-width: 2rem;\n max-height: 3rem;\n aspect-ratio: 1;\n }\n}\n\n:host(.date-start:not(.date-end)) {\n .cat-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n:host(.date-end:not(.date-start)) {\n .cat-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\nimport { findClosest } from '../../utils/find-closest';\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: {\n delegatesFocus: true\n }\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 @Element() hostElement!: HTMLElement;\n\n @State() _iconOnly = true;\n\n @State() hasSlottedContent = false;\n\n /**\n * The rendering style of the button.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' | 'link' = 'outlined';\n\n /**\n * The color palette of the button.\n */\n @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = '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 * 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 * Attributes that will be added to the native HTML button content element\n */\n @Prop() nativeContentAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: 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 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 this.hasSlottedContent = this.hostElement.hasChildNodes();\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled || this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n } else if (this.submit) {\n const form = findClosest('form', this.hostElement);\n if (form && form instanceof HTMLFormElement) {\n // we can't provide a submitter as it is hidden in the shadow DOM\n form.requestSubmit();\n }\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 this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n if (this.url) {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <a\n data-test={this.testId}\n {...this.nativeAttributes}\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-empty': !this.hasSlottedContent,\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 [`cat-button-group-${this.buttonGroupPosition}`]: 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 </a>\n </Host>\n );\n } else {\n return (\n <Host data-button-group={this.buttonGroupPosition}>\n <button\n data-test={this.testId}\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-empty': !this.hasSlottedContent,\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-button-group-${this.buttonGroupPosition}`]: 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 </Host>\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) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n <span class=\"cat-button-content-inner\">\n <slot></slot>\n </span>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : 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"],"version":3}
|
|
@@ -98,7 +98,9 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
|
|
|
98
98
|
this.pickr?.destroy();
|
|
99
99
|
this.pickr = undefined;
|
|
100
100
|
setTimeout(() => {
|
|
101
|
-
|
|
101
|
+
if (this.input) {
|
|
102
|
+
this.input.disabled = this.disabled;
|
|
103
|
+
}
|
|
102
104
|
this.pickr = this.initDatepicker(this.input);
|
|
103
105
|
});
|
|
104
106
|
}
|
|
@@ -137,7 +139,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
|
|
|
137
139
|
}
|
|
138
140
|
render() {
|
|
139
141
|
return [
|
|
140
|
-
h("cat-input", { key: '
|
|
142
|
+
h("cat-input", { key: 'ef465dc2e84455154dde17a4ebd1e742a5c3cd83', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
|
|
141
143
|
e.stopPropagation();
|
|
142
144
|
this.value = e.detail || undefined;
|
|
143
145
|
}, onCatFocus: e => {
|
|
@@ -146,8 +148,8 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
|
|
|
146
148
|
}, onCatBlur: e => {
|
|
147
149
|
e.stopPropagation();
|
|
148
150
|
this.catBlur.emit(e.detail);
|
|
149
|
-
} }, this.hasSlottedLabel && (h("span", { key: '
|
|
150
|
-
h("div", { key: '
|
|
151
|
+
} }, this.hasSlottedLabel && (h("span", { key: '99fdcacd96958d6f8f991a5fa539ee10d93918cd', slot: "label" }, h("slot", { key: '361f7fcd45fe913f1187aea3886831681272198a', name: "label" }))), this.hasSlottedHint && (h("span", { key: 'd063e6c5064c6e35781965c6fdfe792adcaf45cd', slot: "hint" }, h("slot", { key: '6f0bfa21a7c8fab7520edca8daa116376dbc2d30', name: "hint" })))),
|
|
152
|
+
h("div", { key: '1806da8cb2acf11efd58d94d24b963d69ab08923', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
|
|
151
153
|
];
|
|
152
154
|
}
|
|
153
155
|
initDatepicker(input) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-datepicker.js","mappings":"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","names":["__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@import '~flatpickr/dist/flatpickr.css';\n@import 'vendor/flatpickr';\n\n:host {\n display: flex;\n}\n\n:host([hidden]) {\n display: none;\n}\n\ncat-input {\n flex: 1 1 auto;\n margin: 0;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\nimport { autoUpdate, computePosition, flip, Placement, ReferenceElement } from '@floating-ui/dom';\nimport { BaseOptions } from 'flatpickr/dist/types/options';\n\n@Component({\n tag: 'cat-datepicker',\n styleUrl: 'cat-datepicker.scss',\n shadow: true\n})\nexport class CatDatepickerFlat {\n private pickr?: flatpickr.Instance;\n private _input?: HTMLCatInputElement;\n private _calendarWrapper?: HTMLDivElement;\n private get input(): HTMLInputElement | undefined {\n return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n }\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\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?: boolean;\n\n /**\n * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n * @internal\n */\n @Prop() fallbackHorizontal?: boolean;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete = 'off';\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the input.\n */\n @Prop() label = '';\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 maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n */\n @Prop() max?: string;\n\n /**\n * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n */\n @Prop() min?: string;\n\n /**\n * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n */\n @Prop() mode: CatDatepickerMode = 'date';\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 * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * The step size to use when changing the time.\n */\n @Prop() step = 5;\n\n /**\n * Instead of body, appends the calendar to the cat-datepicker element instead\n */\n @Prop() attachToElement = false;\n\n /**\n * Where the calendar is rendered relative to the input vertically and horizontally.\n * In the format of \"[vertical] [horizontal]\". Vertical can be auto, above or below (required).\n * Horizontal can be left, center or right.\n * If @attachToElement is passed the value should be in Placement format\n */\n @Prop() position?: BaseOptions['position'] | Placement;\n\n /**\n * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n */\n @Prop({ mutable: true }) value?: string;\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 * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * Attributes that will be added to the rendered HTML datepicker element.\n */\n @Prop() nativePickerAttributes?: { [key: string]: 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 @Watch('value')\n onValueChanged(value: string) {\n if (value) {\n this.pickr?.setDate(value, false);\n if (this.mode !== 'daterange' || value.includes(' - ')) {\n this.catChange.emit(value);\n }\n } else {\n this.pickr?.clear(false);\n this.catChange.emit(undefined);\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n @Watch('mode')\n onDisabledChanged() {\n // Dynamically changing config value is not working due to a bug in the\n // library. We thus need to fully recreate the date picker after the value\n // has been updated.\n this.pickr?.destroy();\n this.pickr = undefined;\n setTimeout(() => {\n this.input ? (this.input.disabled = this.disabled) : null;\n this.pickr = this.initDatepicker(this.input);\n });\n }\n\n componentDidLoad() {\n this.pickr = this.initDatepicker(this.input);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Watch('min')\n @Watch('max')\n onMinChanged() {\n this.pickr?.set('minDate', this.min);\n this.pickr?.set('maxDate', this.max);\n if (this.value && !this.pickr?.selectedDates?.length) {\n // Dynamically changing 'minDate' or 'maxDate' does not emit a change if\n // the value is cleared due to an invalid date.\n this.pickr?.clear();\n }\n }\n\n /**\n * Programmatically move focus to the datepicker. Use this method instead of\n * `input.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._input?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the datepicker. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this._input?.doBlur();\n }\n\n render() {\n return [\n <cat-input\n ref={el => (this._input = el)}\n requiredMarker={this.requiredMarker}\n horizontal={this.horizontal ?? this.fallbackHorizontal}\n autoComplete={this.autoComplete}\n clearable={this.clearable}\n disabled={this.disabled}\n hint={this.hint}\n icon={this.icon}\n iconRight={this.iconRight}\n identifier={this.identifier}\n label={this.label}\n labelHidden={this.labelHidden}\n name={this.name}\n placeholder={this.placeholder}\n textPrefix={this.textPrefix}\n textSuffix={this.textSuffix}\n readonly={this.readonly}\n required={this.required}\n value={this.value}\n errors={this.errors}\n errorUpdate={this.errorUpdate}\n nativeAttributes={this.nativeAttributes}\n onCatChange={e => {\n e.stopPropagation();\n this.value = e.detail || undefined;\n }}\n onCatFocus={e => {\n e.stopPropagation();\n this.catFocus.emit(e.detail);\n }}\n onCatBlur={e => {\n e.stopPropagation();\n this.catBlur.emit(e.detail);\n }}\n >\n {this.hasSlottedLabel && (\n <span slot=\"label\">\n <slot name=\"label\"></slot>\n </span>\n )}\n {this.hasSlottedHint && (\n <span slot=\"hint\">\n <slot name=\"hint\"></slot>\n </span>\n )}\n </cat-input>,\n <div ref={el => (this._calendarWrapper = el)} class=\"datepicker-wrapper\"></div>\n ];\n }\n\n private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n if (!input) {\n return;\n }\n\n // avoid dropdown closing if datepicker is part of a dropdown\n const withinDropdown = !!findClosest('cat-dropdown', input);\n const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n return flatpickr(\n input,\n getConfig({\n locale: getLocale(i18n.getLocale()),\n format: getFormat(i18n.getLocale(), this.mode),\n mode: this.mode,\n min: this.min,\n max: this.max,\n step: this.step,\n disabled: this.disabled,\n readonly: this.readonly,\n appendTo: this.attachToElement ? this._calendarWrapper : undefined,\n nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n // flatpickr has open bug about incorrect positioning when appendTo is used,\n // we have to use custom logic to calculate position\n // https://github.com/flatpickr/flatpickr/issues/1619\n position: this.attachToElement\n ? (flatpickr, positionElement) => {\n this.updatePosition(flatpickr, positionElement);\n }\n : (this.position as BaseOptions['position']) || undefined,\n onReady: (_dates, _dateStr, flatpickr) => {\n autoUpdate(input, flatpickr.calendarContainer, () => this.updatePosition(flatpickr, flatpickr._input));\n },\n applyChange: value => (this.value = value)\n })\n );\n }\n\n private updatePosition(flatpickr: flatpickr.Instance, positionElement: HTMLElement | undefined): void {\n if (positionElement) {\n computePosition(positionElement as ReferenceElement, flatpickr.calendarContainer, {\n strategy: 'fixed',\n placement: (this.position as Placement) || 'bottom-start',\n middleware: [flip()]\n }).then(({ x, y, placement }) => {\n if (flatpickr.calendarContainer) {\n flatpickr.calendarContainer.dataset.placement = placement;\n Object.assign(flatpickr.calendarContainer.style, {\n left: `${x}px`,\n top: `${y}px`,\n position: 'fixed'\n });\n }\n });\n }\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-datepicker.js","mappings":"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","names":["__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@import '~flatpickr/dist/flatpickr.css';\n@import 'vendor/flatpickr';\n\n:host {\n display: flex;\n}\n\n:host([hidden]) {\n display: none;\n}\n\ncat-input {\n flex: 1 1 auto;\n margin: 0;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\nimport { autoUpdate, computePosition, flip, Placement, ReferenceElement } from '@floating-ui/dom';\nimport { BaseOptions } from 'flatpickr/dist/types/options';\n\n@Component({\n tag: 'cat-datepicker',\n styleUrl: 'cat-datepicker.scss',\n shadow: true\n})\nexport class CatDatepickerFlat {\n private pickr?: flatpickr.Instance;\n private _input?: HTMLCatInputElement;\n private _calendarWrapper?: HTMLDivElement;\n private get input(): HTMLInputElement | undefined {\n return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n }\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\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?: boolean;\n\n /**\n * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n * @internal\n */\n @Prop() fallbackHorizontal?: boolean;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete = 'off';\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the input.\n */\n @Prop() label = '';\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 maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n */\n @Prop() max?: string;\n\n /**\n * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n */\n @Prop() min?: string;\n\n /**\n * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n */\n @Prop() mode: CatDatepickerMode = 'date';\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 * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * The step size to use when changing the time.\n */\n @Prop() step = 5;\n\n /**\n * Instead of body, appends the calendar to the cat-datepicker element instead\n */\n @Prop() attachToElement = false;\n\n /**\n * Where the calendar is rendered relative to the input vertically and horizontally.\n * In the format of \"[vertical] [horizontal]\". Vertical can be auto, above or below (required).\n * Horizontal can be left, center or right.\n * If @attachToElement is passed the value should be in Placement format\n */\n @Prop() position?: BaseOptions['position'] | Placement;\n\n /**\n * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n */\n @Prop({ mutable: true }) value?: string;\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 * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * Attributes that will be added to the rendered HTML datepicker element.\n */\n @Prop() nativePickerAttributes?: { [key: string]: 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 @Watch('value')\n onValueChanged(value: string) {\n if (value) {\n this.pickr?.setDate(value, false);\n if (this.mode !== 'daterange' || value.includes(' - ')) {\n this.catChange.emit(value);\n }\n } else {\n this.pickr?.clear(false);\n this.catChange.emit(undefined);\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n @Watch('mode')\n onDisabledChanged() {\n // Dynamically changing config value is not working due to a bug in the\n // library. We thus need to fully recreate the date picker after the value\n // has been updated.\n this.pickr?.destroy();\n this.pickr = undefined;\n setTimeout(() => {\n if (this.input) {\n this.input.disabled = this.disabled;\n }\n this.pickr = this.initDatepicker(this.input);\n });\n }\n\n componentDidLoad() {\n this.pickr = this.initDatepicker(this.input);\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n @Watch('min')\n @Watch('max')\n onMinChanged() {\n this.pickr?.set('minDate', this.min);\n this.pickr?.set('maxDate', this.max);\n if (this.value && !this.pickr?.selectedDates?.length) {\n // Dynamically changing 'minDate' or 'maxDate' does not emit a change if\n // the value is cleared due to an invalid date.\n this.pickr?.clear();\n }\n }\n\n /**\n * Programmatically move focus to the datepicker. Use this method instead of\n * `input.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._input?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the datepicker. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this._input?.doBlur();\n }\n\n render() {\n return [\n <cat-input\n ref={el => (this._input = el)}\n requiredMarker={this.requiredMarker}\n horizontal={this.horizontal ?? this.fallbackHorizontal}\n autoComplete={this.autoComplete}\n clearable={this.clearable}\n disabled={this.disabled}\n hint={this.hint}\n icon={this.icon}\n iconRight={this.iconRight}\n identifier={this.identifier}\n label={this.label}\n labelHidden={this.labelHidden}\n name={this.name}\n placeholder={this.placeholder}\n textPrefix={this.textPrefix}\n textSuffix={this.textSuffix}\n readonly={this.readonly}\n required={this.required}\n value={this.value}\n errors={this.errors}\n errorUpdate={this.errorUpdate}\n nativeAttributes={this.nativeAttributes}\n onCatChange={e => {\n e.stopPropagation();\n this.value = e.detail || undefined;\n }}\n onCatFocus={e => {\n e.stopPropagation();\n this.catFocus.emit(e.detail);\n }}\n onCatBlur={e => {\n e.stopPropagation();\n this.catBlur.emit(e.detail);\n }}\n >\n {this.hasSlottedLabel && (\n <span slot=\"label\">\n <slot name=\"label\"></slot>\n </span>\n )}\n {this.hasSlottedHint && (\n <span slot=\"hint\">\n <slot name=\"hint\"></slot>\n </span>\n )}\n </cat-input>,\n <div ref={el => (this._calendarWrapper = el)} class=\"datepicker-wrapper\"></div>\n ];\n }\n\n private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n if (!input) {\n return;\n }\n\n // avoid dropdown closing if datepicker is part of a dropdown\n const withinDropdown = !!findClosest('cat-dropdown', input);\n const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n return flatpickr(\n input,\n getConfig({\n locale: getLocale(i18n.getLocale()),\n format: getFormat(i18n.getLocale(), this.mode),\n mode: this.mode,\n min: this.min,\n max: this.max,\n step: this.step,\n disabled: this.disabled,\n readonly: this.readonly,\n appendTo: this.attachToElement ? this._calendarWrapper : undefined,\n nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n // flatpickr has open bug about incorrect positioning when appendTo is used,\n // we have to use custom logic to calculate position\n // https://github.com/flatpickr/flatpickr/issues/1619\n position: this.attachToElement\n ? (flatpickr, positionElement) => {\n this.updatePosition(flatpickr, positionElement);\n }\n : (this.position as BaseOptions['position']) || undefined,\n onReady: (_dates, _dateStr, flatpickr) => {\n autoUpdate(input, flatpickr.calendarContainer, () => this.updatePosition(flatpickr, flatpickr._input));\n },\n applyChange: value => (this.value = value)\n })\n );\n }\n\n private updatePosition(flatpickr: flatpickr.Instance, positionElement: HTMLElement | undefined): void {\n if (positionElement) {\n computePosition(positionElement as ReferenceElement, flatpickr.calendarContainer, {\n strategy: 'fixed',\n placement: (this.position as Placement) || 'bottom-start',\n middleware: [flip()]\n }).then(({ x, y, placement }) => {\n if (flatpickr.calendarContainer) {\n flatpickr.calendarContainer.dataset.placement = placement;\n Object.assign(flatpickr.calendarContainer.style, {\n left: `${x}px`,\n top: `${y}px`,\n position: 'fixed'\n });\n }\n });\n }\n }\n}\n"],"version":3}
|
|
@@ -111,17 +111,24 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class CatTextarea extends
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
+
onValueChanged() {
|
|
115
|
+
// Value changed externally, update the textarea and autosize
|
|
116
|
+
if (this.textarea && this.textarea.value !== this.value) {
|
|
117
|
+
this.textarea.value = this.value ?? '';
|
|
118
|
+
n.update(this.textarea);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
114
121
|
render() {
|
|
115
122
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
116
|
-
return (h(Host, { key: '
|
|
123
|
+
return (h(Host, { key: 'f32cf170ce29c15d33255d436d86c5de165f3fa7' }, h("div", { key: 'ddd5acdb428ea636b80121a0b4ac00b45b88c5d6', class: {
|
|
117
124
|
'textarea-field': true,
|
|
118
125
|
'textarea-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
|
|
119
|
-
} }, h("div", { key: '
|
|
126
|
+
} }, h("div", { key: 'f599a15ea13d12ac884ddcf2eb4226b935a478fd', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '4a7cf51f7cb4afb8332f749e3c5e568cec0cb71f', htmlFor: this.id, part: "label" }, h("span", { key: 'b7574f66d2fd19f6553b101130a3184562eb986e', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'e3139a2019ed04318d38f7abd257b8f336c8c880', name: "label" })) || this.label, h("div", { key: 'e4aa491e03ad9c14bbada1b79aee80add61a1316', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'e01350d00dab4e8dd5663475c82f83cd85c48e3a', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '35a39a28bae9f0b82959c8c29abd6ac0a71999a7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '7f4f949701ec432f10e527ffbda7a3b0f3323838', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: 'dff9ee9594675d3751f6eeb34226fe6402f756dd', class: "textarea-container" }, h("div", { key: '8755b55cec8a71f4fc89fa537c0c047a7658b8f0', class: {
|
|
120
127
|
'textarea-wrapper': true,
|
|
121
128
|
'textarea-readonly': this.readonly,
|
|
122
129
|
'textarea-disabled': this.disabled,
|
|
123
130
|
'textarea-invalid': this.invalid
|
|
124
|
-
} }, h("textarea", { key: '
|
|
131
|
+
} }, h("textarea", { key: 'fa7e769b4c45d087d60c0bda50d53bea7f241fb1', "data-test": this.testId, ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '846187b050e1046fa59566fc3436e940024f667c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '956e1de771fd8d19dfbf1fd182713c38da824e91', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
|
|
125
132
|
}
|
|
126
133
|
get hasHint() {
|
|
127
134
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -166,7 +173,8 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class CatTextarea extends
|
|
|
166
173
|
static get formAssociated() { return true; }
|
|
167
174
|
get hostElement() { return this; }
|
|
168
175
|
static get watchers() { return {
|
|
169
|
-
"errors": ["onErrorsChanged"]
|
|
176
|
+
"errors": ["onErrorsChanged"],
|
|
177
|
+
"value": ["onValueChanged"]
|
|
170
178
|
}; }
|
|
171
179
|
static get style() { return catTextareaCss; }
|
|
172
180
|
}, [337, "cat-textarea", {
|
|
@@ -199,7 +207,8 @@ const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class CatTextarea extends
|
|
|
199
207
|
"doBlur": [64],
|
|
200
208
|
"clear": [64]
|
|
201
209
|
}, undefined, {
|
|
202
|
-
"errors": ["onErrorsChanged"]
|
|
210
|
+
"errors": ["onErrorsChanged"],
|
|
211
|
+
"value": ["onValueChanged"]
|
|
203
212
|
}]);
|
|
204
213
|
function defineCustomElement$1() {
|
|
205
214
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","__stencil_proxyCustomElement","autosize","i18n"],"sources":["../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","src/components/cat-textarea/cat-textarea.scss?tag=cat-textarea&encapsulation=shadow","src/components/cat-textarea/cat-textarea.tsx"],"sourcesContent":["var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.textarea-field,\n.textarea-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.textarea-field.textarea-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.textarea-readonly {\n pointer-events: none;\n}\n\n.textarea-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.icon-suffix {\n position: absolute;\n top: calc(0.625rem - 2px);\n right: 0.75rem;\n background: cat-token('color.ui.background.input', 0.75);\n border-radius: 100rem;\n\n .textarea-disabled & {\n background: cat-token('color.ui.background.muted', 0.75);\n }\n}\n\ntextarea {\n margin: 0;\n padding: 0.625rem 0.75rem;\n box-sizing: border-box;\n min-height: form-label.$cat-input-height;\n font: inherit;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n border: none;\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n resize: vertical;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n\n &:disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n resize: none;\n }\n\n &:not(: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 {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n }\n\n .textarea-invalid & {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n opacity: 1;\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","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport autosize from 'autosize';\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 * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part textarea - The native textarea element.\n */\n@Component({\n tag: 'cat-textarea',\n styleUrl: 'cat-textarea.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTextarea {\n private readonly _id = `cat-textarea-${nextUniqueId++}`;\n private get id() {\n return this.identifier || this._id;\n }\n\n private textarea!: HTMLTextAreaElement;\n private errorMapSrc?: ErrorMap | true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() errorMap?: ErrorMap | true;\n\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Whether the label need a marker to shown if the textarea 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?: boolean;\n\n /**\n * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n * @internal\n */\n @Prop() fallbackHorizontal?: boolean;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete?: string;\n\n /**\n * Whether the textarea is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the textarea.\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 textarea.\n */\n @Prop() label = '';\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 maximum length (number of characters) for textual values.\n */\n @Prop() maxLength?: number;\n\n /**\n * A minimum length (number of characters) for textual values.\n */\n @Prop() minLength?: number;\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 * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * Specifies the initial number of lines in the textarea.\n */\n @Prop() rows = 3;\n\n /**\n * The initial value of the control.\n */\n @Prop({ mutable: true }) value?: string;\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 * Attributes that will be added to the native HTML textarea element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n /**\n * Emitted when the textarea received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the textarea 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.internals.setFormValue(this.value ?? null);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\n }\n\n componentDidLoad(): void {\n autosize(this.textarea);\n }\n\n /**\n * Programmatically move focus to the textarea. Use this method instead of\n * `textarea.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.textarea.focus(options);\n }\n\n /**\n * Programmatically remove focus from the textarea. Use this method instead of\n * `textarea.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.textarea.blur();\n }\n\n /**\n * Clear the textarea.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\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 this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div\n class={{\n 'textarea-field': true,\n 'textarea-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={this.id} 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 {(this.maxLength || this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"textarea-container\">\n <div\n class={{\n 'textarea-wrapper': true,\n 'textarea-readonly': this.readonly,\n 'textarea-disabled': this.disabled,\n 'textarea-invalid': this.invalid\n }}\n >\n <textarea\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"textarea\"\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\n id={this.id}\n disabled={this.disabled}\n autocomplete={this.autoComplete}\n maxlength={this.maxLength}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n ></textarea>\n {this.invalid && (\n <cat-icon\n icon=\"$cat:input-error\"\n class=\"icon-suffix cat-text-danger\"\n size=\"l\"\n onClick={() => this.textarea.focus()}\n ></cat-icon>\n )}\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 </div>\n </div>\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 this.value = this.textarea.value;\n this.internals.setFormValue(this.textarea.value);\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\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 if (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\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.textarea;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","__stencil_proxyCustomElement","autosize","i18n"],"sources":["../node_modules/.pnpm/autosize@6.0.1/node_modules/autosize/dist/autosize.esm.js","src/components/cat-textarea/cat-textarea.scss?tag=cat-textarea&encapsulation=shadow","src/components/cat-textarea/cat-textarea.tsx"],"sourcesContent":["var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;\"undefined\"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&\"TEXTAREA\"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:\"\"===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener(\"autosize:destroy\",l),t.removeEventListener(\"autosize:update\",s),t.removeEventListener(\"input\",i),window.removeEventListener(\"resize\",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener(\"autosize:destroy\",l),t.addEventListener(\"autosize:update\",s),t.addEventListener(\"input\",i),window.addEventListener(\"resize\",s),t.style.overflowX=\"hidden\",t.style.wordWrap=\"break-word\",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&(\"vertical\"===n.resize?t.style.resize=\"none\":\"both\"===n.resize&&(t.style.resize=\"horizontal\"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior=\"auto\",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=\"\"),i=\"content-box\"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),\"none\"!==n.maxHeight&&i>parseFloat(n.maxHeight)?(\"hidden\"===n.overflowY&&(t.style.overflow=\"scroll\"),i=parseFloat(n.maxHeight)):\"hidden\"!==n.overflowY&&(t.style.overflow=\"hidden\"),t.style.height=i+\"px\",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event(\"autosize:resized\",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;\"hidden\"===n.overflow&&(t.style.textAlign=\"start\"===v?\"end\":\"start\"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.textarea-field,\n.textarea-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.textarea-field.textarea-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.textarea-readonly {\n pointer-events: none;\n}\n\n.textarea-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.icon-suffix {\n position: absolute;\n top: calc(0.625rem - 2px);\n right: 0.75rem;\n background: cat-token('color.ui.background.input', 0.75);\n border-radius: 100rem;\n\n .textarea-disabled & {\n background: cat-token('color.ui.background.muted', 0.75);\n }\n}\n\ntextarea {\n margin: 0;\n padding: 0.625rem 0.75rem;\n box-sizing: border-box;\n min-height: form-label.$cat-input-height;\n font: inherit;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n border: none;\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n resize: vertical;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n\n &:disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n resize: none;\n }\n\n &:not(: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 {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n }\n\n .textarea-invalid & {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n opacity: 1;\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","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport autosize from 'autosize';\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 * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part textarea - The native textarea element.\n */\n@Component({\n tag: 'cat-textarea',\n styleUrl: 'cat-textarea.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTextarea {\n private readonly _id = `cat-textarea-${nextUniqueId++}`;\n private get id() {\n return this.identifier || this._id;\n }\n\n private textarea!: HTMLTextAreaElement;\n private errorMapSrc?: ErrorMap | true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() errorMap?: ErrorMap | true;\n\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Whether the label need a marker to shown if the textarea 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?: boolean;\n\n /**\n * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n * @internal\n */\n @Prop() fallbackHorizontal?: boolean;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete?: string;\n\n /**\n * Whether the textarea is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the textarea.\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 textarea.\n */\n @Prop() label = '';\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 maximum length (number of characters) for textual values.\n */\n @Prop() maxLength?: number;\n\n /**\n * A minimum length (number of characters) for textual values.\n */\n @Prop() minLength?: number;\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 * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * Specifies the initial number of lines in the textarea.\n */\n @Prop() rows = 3;\n\n /**\n * The initial value of the control.\n */\n @Prop({ mutable: true }) value?: string;\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 * Attributes that will be added to the native HTML textarea element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n /**\n * Emitted when the textarea received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the textarea 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.internals.setFormValue(this.value ?? null);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\n }\n\n componentDidLoad(): void {\n autosize(this.textarea);\n }\n\n /**\n * Programmatically move focus to the textarea. Use this method instead of\n * `textarea.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.textarea.focus(options);\n }\n\n /**\n * Programmatically remove focus from the textarea. Use this method instead of\n * `textarea.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.textarea.blur();\n }\n\n /**\n * Clear the textarea.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\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 @Watch('value')\n onValueChanged(): void {\n // Value changed externally, update the textarea and autosize\n if (this.textarea && this.textarea.value !== this.value) {\n this.textarea.value = this.value ?? '';\n autosize.update(this.textarea);\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div\n class={{\n 'textarea-field': true,\n 'textarea-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={this.id} 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 {(this.maxLength || this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"textarea-container\">\n <div\n class={{\n 'textarea-wrapper': true,\n 'textarea-readonly': this.readonly,\n 'textarea-disabled': this.disabled,\n 'textarea-invalid': this.invalid\n }}\n >\n <textarea\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"textarea\"\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\n id={this.id}\n disabled={this.disabled}\n autocomplete={this.autoComplete}\n maxlength={this.maxLength}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n ></textarea>\n {this.invalid && (\n <cat-icon\n icon=\"$cat:input-error\"\n class=\"icon-suffix cat-text-danger\"\n size=\"l\"\n onClick={() => this.textarea.focus()}\n ></cat-icon>\n )}\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 </div>\n </div>\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 this.value = this.textarea.value;\n this.internals.setFormValue(this.textarea.value);\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\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 if (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\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.textarea;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n}\n"],"version":3}
|