npm - @haiilo/catalyst - Versions diffs - 14.5.2 → 14.6.0 - Mend

@haiilo/catalyst 14.5.2 → 14.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/components/cat-button2.js.map CHANGED Viewed

	@@ -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: cat-token('font.decoration.linkButtonHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: 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\n:host(.cat-inline) {\n display: inline;\n\n .cat-button {\n display: inline;\n padding: 0;\n }\n\n .cat-button-content {\n display: inline;\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}
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 // Disable pointer events for all direct children.\n // This allows the button to receive hover and click events even when its children (like icons or text) are hovered or clicked.\n pointer-events: none;\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-wrap(var(--outlined-bg));\n box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, cat-token-wrap(var(--outlined-bg)));\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%, cat-token-wrap(var(--outlined-bg)));\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%, cat-token-wrap(var(--outlined-bg)));\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%, cat-token-wrap(var(--outlined-bg)));\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: cat-token('font.decoration.linkButtonHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: 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 --outlined-bg: #{cat-token('color.theme.#{$theme}.bgOutlined', $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\n:host(.cat-inline) {\n display: inline;\n\n .cat-button {\n display: inline;\n padding: 0;\n }\n\n .cat-button-content {\n display: inline;\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}

package/dist/components/cat-dropdown2.js CHANGED Viewed

@@ -1287,6 +1287,8 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         return (!this.noAutoClose &&
             // check if click was outside of the dropdown content
             !event.composedPath().includes(this.content) &&
+            // check if click was on trigger - this case is handled by trigger click listener
+            !event.composedPath().includes(this.trigger) &&
             // check if click was not on an element marked with data-dropdown-no-close
             !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
     }