@haiilo/catalyst 12.3.3 → 12.3.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/{p-72182657.entry.js → p-2b38c9b7.entry.js} +2 -2
- package/dist/catalyst/p-2b38c9b7.entry.js.map +1 -0
- package/dist/cjs/cat-alert_30.cjs.entry.js +28 -13
- package/dist/cjs/cat-alert_30.cjs.entry.js.map +1 -1
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +6 -1
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +22 -12
- package/dist/collection/components/cat-tooltip/cat-tooltip.js.map +1 -1
- package/dist/components/cat-dropdown2.js +6 -1
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-tooltip.js +22 -12
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +28 -13
- package/dist/esm/cat-alert_30.entry.js.map +1 -1
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +1 -0
- package/dist/types/components/cat-tooltip/cat-tooltip.d.ts +3 -0
- package/package.json +2 -2
- package/dist/catalyst/p-72182657.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","__stencil_proxyCustomElement","isTouchScreen"],"sources":["src/utils/is-touch-screen.ts","src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.tooltip {\n --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n position: fixed;\n width: max-content;\n top: 0;\n left: 0;\n box-sizing: border-box;\n background-color: cat-token('color.ui.background.tooltip');\n border-radius: cat-border-radius('m');\n color: cat-token('color.ui.font.tooltip');\n transition:\n opacity cat-token('time.transition.m') linear,\n visibility cat-token('time.transition.m') linear;\n visibility: hidden;\n opacity: 0;\n box-shadow: $-box-shadow;\n z-index: cat-z-index('tooltip');\n max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n &-hidden {\n @include cat-visually-hidden;\n }\n\n &-show {\n opacity: 1;\n visibility: visible;\n }\n\n p {\n margin: 0;\n }\n}\n\n// ----- round\n\n.tooltip-round {\n border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n padding: 0.25rem 0.375rem;\n @include cat-body('xs', 500);\n\n &.tooltip-round {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n}\n\n.tooltip-m {\n padding: 0.375rem 0.5rem;\n @include cat-body('s', 500);\n\n &.tooltip-round {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n}\n\n.tooltip-l {\n padding: 0.5rem 0.75rem;\n @include cat-body('m', 500);\n\n &.tooltip-round {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n}\n","import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Placement } from '@floating-ui/utils';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\nexport type TooltipPlacement = Placement;\n\n/**\n * Tooltips display additional information when the user hovers over or\n * interacts with a trigger element. The tooltip can be customized with\n * different placements, sizes, and styles.\n */\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private static readonly SHIFT_PADDING = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private trigger?: Element;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private inactive = false;\n private cleanupFloatingUi?: () => void;\n\n private readonly boundShowListener: () => void;\n private readonly boundHideListener: () => void;\n private readonly boundWindowTouchStartListener: () => void;\n private readonly boundTouchStartListener: (event: Event) => void;\n private readonly boundTouchEndListener: () => void;\n\n constructor() {\n this.boundShowListener = this.showListener.bind(this);\n this.boundHideListener = this.hideListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n this.boundTouchStartListener = this.touchStartListener.bind(this);\n this.boundTouchEndListener = this.touchEndListener.bind(this);\n }\n\n @Element() hostElement!: HTMLElement;\n\n @State() open = false;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: TooltipPlacement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown', { target: 'window' })\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideTooltip();\n }\n\n componentDidLoad(): void {\n const slot = this.hostElement.shadowRoot?.querySelector('slot');\n this.trigger = slot?.assignedElements?.()?.[0];\n if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n this.trigger.setAttribute('aria-describedby', this.id);\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.addEventListener('focusin', this.boundShowListener);\n this.trigger?.addEventListener('focusout', this.boundHideListener);\n this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n }\n }\n\n componentWillRender(): void {\n this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n this.trigger?.removeEventListener('focusin', this.boundShowListener);\n this.trigger?.removeEventListener('focusout', this.boundHideListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot />\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n role=\"tooltip\"\n aria-hidden={!this.open}\n aria-live={this.open ? 'polite' : 'off'}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.inactive,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n <slot name=\"content\">\n {/* The paragraph is needed here to make aria-live work properly. */}\n <p>{this.content}</p>\n </slot>\n </div>\n </Host>\n );\n }\n\n private async update() {\n if (this.trigger && this.tooltip) {\n await computePosition(this.trigger, this.tooltip, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatTooltip.OFFSET),\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ padding: CatTooltip.SHIFT_PADDING })\n ]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.hideTimeout = undefined;\n if (!this.showTimeout) {\n this.showTimeout = window.setTimeout(() => {\n this.showTimeout = undefined;\n this.showTooltip();\n }, this.showDelay);\n }\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n if (!this.hideTimeout) {\n this.hideTimeout = window.setTimeout(() => {\n this.hideTimeout = undefined;\n this.hideTooltip();\n }, this.hideDelay);\n }\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n if (!this.touchTimeout) {\n this.touchTimeout = window.setTimeout(() => {\n this.touchTimeout = undefined;\n this.showTooltip();\n }, this.longTouchDuration);\n }\n }\n\n private touchEndListener() {\n window.clearTimeout(this.touchTimeout);\n this.touchTimeout = undefined;\n this.hideTooltip();\n }\n\n private windowTouchStartListener() {\n this.hideTooltip();\n }\n\n private showTooltip() {\n if (this.trigger && this.tooltip) {\n this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n if (!this.inactive) {\n this.open = true;\n this.tooltip?.classList.add('tooltip-show');\n }\n }\n\n private hideTooltip() {\n this.open = false;\n this.tooltip?.classList.remove('tooltip-show');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-tooltip.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC;;ACA9E,MAAM,aAAa,GAAG,85CAA85C;;ACKp7C,IAAI,YAAY,GAAG,CAAC;MAcPA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AAkBrB,IAAA,WAAA,GAAA;;;;AAfiB,QAAA,IAAA,CAAA,EAAE,GAAG,eAAe,YAAY,EAAE,EAAE;AAM7C,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAmBf,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE;AAEpB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,KAAK;AAE3C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAoB,GAAG;AAEnC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,GAAG;AAEvB;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAErB;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAG,IAAI;QAlD9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;QACrD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;QACrD,IAAI,CAAC,6BAA6B,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7E,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;QACjE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9D;IAgDD,aAAa,CAAC,EAAE,GAAG,EAAiB,EAAA;AAClC,QAAA,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;;IAGxC,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;AAC/D,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,gBAAgB,IAAI,GAAG,CAAC,CAAC;AAC9C,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;YAClE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC;;QAGxD,IAAI,CAAC,YAAY,EAAE;;IAGrB,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;IAGrB,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;;IAGzG,oBAAoB,GAAA;QAClB,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,WAAW,EAAE;;IAGpB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,EAAA,WAAA,EACZ,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,KAAK,EACvC,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,eAAe,EAAE,IAAI,CAAC,KAAK;AAC3B,gBAAA,CAAC,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI;AAC5C,aAAA,EAAA,EAED,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAElB,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,OAAO,CAAK,CAChB,CACH,CACD;;IAIH,YAAY,GAAA;QAClB,IAAIC,aAAa,EAAE;YACjB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC;YACzE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC;YAC1E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC;;aACjE;YACL,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC;YACjE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC;YAClE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;YACpE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;;;IAIhE,eAAe,GAAA;QACrB,IAAIA,aAAa,EAAE;YACjB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC;YAC5E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC;YAC7E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC;;aACpE;YACL,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;YACvE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;YACvE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC;YACpE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC;;;AAIjE,IAAA,MAAM,MAAM,GAAA;QAClB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAChC,MAAM,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AAChD,gBAAA,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,gBAAA,UAAU,EAAE;AACV,oBAAA,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;AACzB,oBAAA,IAAI,CAAC,EAAE,yBAAyB,EAAE,OAAO,EAAE,CAAC;oBAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,aAAa,EAAE;AAC5C;aACF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAI;AACnB,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;oBAChB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;wBAChC,IAAI,EAAE,CAAG,EAAA,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAI,EAAA,CAAA;wBAC3B,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA;AACd,qBAAA,CAAC;;AAEN,aAAC,CAAC;;;IAIE,YAAY,GAAA;AAClB,QAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;AACrC,QAAA,IAAI,CAAC,WAAW,GAAG,SAAS;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACxC,gBAAA,IAAI,CAAC,WAAW,GAAG,SAAS;gBAC5B,IAAI,CAAC,WAAW,EAAE;AACpB,aAAC,EAAE,IAAI,CAAC,SAAS,CAAC;;;IAId,YAAY,GAAA;AAClB,QAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;AACrC,QAAA,IAAI,CAAC,WAAW,GAAG,SAAS;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACxC,gBAAA,IAAI,CAAC,WAAW,GAAG,SAAS;gBAC5B,IAAI,CAAC,WAAW,EAAE;AACpB,aAAC,EAAE,IAAI,CAAC,SAAS,CAAC;;;AAId,IAAA,kBAAkB,CAAC,KAAY,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACzC,gBAAA,IAAI,CAAC,YAAY,GAAG,SAAS;gBAC7B,IAAI,CAAC,WAAW,EAAE;AACpB,aAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC;;;IAItB,gBAAgB,GAAA;AACtB,QAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;AACtC,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS;QAC7B,IAAI,CAAC,WAAW,EAAE;;IAGZ,wBAAwB,GAAA;QAC9B,IAAI,CAAC,WAAW,EAAE;;IAGZ,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAChC,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;;AAEtF,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;YAChB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;;;IAIvC,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;QACjB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC;AAC9C,QAAA,IAAI,CAAC,iBAAiB,IAAI;AAC1B,QAAA,IAAI,CAAC,iBAAiB,GAAG,SAAS;;;;;;;;;;;;;;;AAnOZF,YAAM,CAAA,MAAA,GAAG,CAAH;AACNA,YAAa,CAAA,aAAA,GAAG,CAAH;;;;;;;;;;;;;;;;;;;;","names":["CatTooltip","__stencil_proxyCustomElement","isTouchScreen"],"sources":["src/utils/is-touch-screen.ts","src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.tooltip {\n --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};\n position: fixed;\n width: max-content;\n top: 0;\n left: 0;\n box-sizing: border-box;\n background-color: cat-token('color.ui.background.tooltip');\n border-radius: cat-border-radius('m');\n color: cat-token('color.ui.font.tooltip');\n transition:\n opacity cat-token('time.transition.m') linear,\n visibility cat-token('time.transition.m') linear;\n visibility: hidden;\n opacity: 0;\n box-shadow: $-box-shadow;\n z-index: cat-z-index('tooltip');\n max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n &-hidden {\n @include cat-visually-hidden;\n }\n\n &-show {\n opacity: 1;\n visibility: visible;\n }\n\n p {\n margin: 0;\n }\n}\n\n// ----- round\n\n.tooltip-round {\n border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n padding: 0.25rem 0.375rem;\n @include cat-body('xs', 500);\n\n &.tooltip-round {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n}\n\n.tooltip-m {\n padding: 0.375rem 0.5rem;\n @include cat-body('s', 500);\n\n &.tooltip-round {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n}\n\n.tooltip-l {\n padding: 0.5rem 0.75rem;\n @include cat-body('m', 500);\n\n &.tooltip-round {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n}\n","import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Placement } from '@floating-ui/utils';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\nexport type TooltipPlacement = Placement;\n\n/**\n * Tooltips display additional information when the user hovers over or\n * interacts with a trigger element. The tooltip can be customized with\n * different placements, sizes, and styles.\n */\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private static readonly SHIFT_PADDING = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private trigger?: Element;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private inactive = false;\n private cleanupFloatingUi?: () => void;\n\n private readonly boundShowListener: () => void;\n private readonly boundHideListener: () => void;\n private readonly boundWindowTouchStartListener: () => void;\n private readonly boundTouchStartListener: (event: Event) => void;\n private readonly boundTouchEndListener: () => void;\n\n constructor() {\n this.boundShowListener = this.showListener.bind(this);\n this.boundHideListener = this.hideListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n this.boundTouchStartListener = this.touchStartListener.bind(this);\n this.boundTouchEndListener = this.touchEndListener.bind(this);\n }\n\n @Element() hostElement!: HTMLElement;\n\n @State() open = false;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: TooltipPlacement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown', { target: 'window' })\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideTooltip();\n }\n\n componentDidLoad(): void {\n const slot = this.hostElement.shadowRoot?.querySelector('slot');\n this.trigger = slot?.assignedElements?.()?.[0];\n if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n this.trigger.setAttribute('aria-describedby', this.id);\n }\n\n this.addListeners();\n }\n\n connectedCallback(): void {\n this.addListeners();\n }\n\n componentWillRender(): void {\n this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n }\n\n disconnectedCallback(): void {\n this.removeListeners();\n this.hideTooltip();\n }\n\n render() {\n return (\n <Host>\n <slot />\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n role=\"tooltip\"\n aria-hidden={!this.open}\n aria-live={this.open ? 'polite' : 'off'}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.inactive,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n <slot name=\"content\">\n {/* The paragraph is needed here to make aria-live work properly. */}\n <p>{this.content}</p>\n </slot>\n </div>\n </Host>\n );\n }\n\n private addListeners() {\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.addEventListener('focusin', this.boundShowListener);\n this.trigger?.addEventListener('focusout', this.boundHideListener);\n this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n }\n }\n\n private removeListeners() {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n this.trigger?.removeEventListener('focusin', this.boundShowListener);\n this.trigger?.removeEventListener('focusout', this.boundHideListener);\n }\n }\n\n private async update() {\n if (this.trigger && this.tooltip) {\n await computePosition(this.trigger, this.tooltip, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatTooltip.OFFSET),\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ padding: CatTooltip.SHIFT_PADDING })\n ]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.hideTimeout = undefined;\n if (!this.showTimeout) {\n this.showTimeout = window.setTimeout(() => {\n this.showTimeout = undefined;\n this.showTooltip();\n }, this.showDelay);\n }\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n if (!this.hideTimeout) {\n this.hideTimeout = window.setTimeout(() => {\n this.hideTimeout = undefined;\n this.hideTooltip();\n }, this.hideDelay);\n }\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n if (!this.touchTimeout) {\n this.touchTimeout = window.setTimeout(() => {\n this.touchTimeout = undefined;\n this.showTooltip();\n }, this.longTouchDuration);\n }\n }\n\n private touchEndListener() {\n window.clearTimeout(this.touchTimeout);\n this.touchTimeout = undefined;\n this.hideTooltip();\n }\n\n private windowTouchStartListener() {\n this.hideTooltip();\n }\n\n private showTooltip() {\n if (this.trigger && this.tooltip) {\n this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n if (!this.inactive) {\n this.open = true;\n this.tooltip?.classList.add('tooltip-show');\n }\n }\n\n private hideTooltip() {\n this.open = false;\n this.tooltip?.classList.remove('tooltip-show');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n}\n"],"version":3}
|
|
@@ -7762,6 +7762,7 @@ const CatDropdown = class {
|
|
|
7762
7762
|
}
|
|
7763
7763
|
this._isOpen = null;
|
|
7764
7764
|
this.trap?.deactivate();
|
|
7765
|
+
this.trap = undefined;
|
|
7765
7766
|
this.content.classList.remove('show');
|
|
7766
7767
|
// give CSS transition time to apply
|
|
7767
7768
|
setTimeout(() => {
|
|
@@ -7778,8 +7779,12 @@ const CatDropdown = class {
|
|
|
7778
7779
|
this.initTrigger();
|
|
7779
7780
|
}
|
|
7780
7781
|
}
|
|
7782
|
+
disconnectedCallback() {
|
|
7783
|
+
this.trap?.deactivate();
|
|
7784
|
+
this.trap = undefined;
|
|
7785
|
+
}
|
|
7781
7786
|
render() {
|
|
7782
|
-
return (h(Host, { key: '
|
|
7787
|
+
return (h(Host, { key: 'c76a5d87c676da3b2744c685f5108d390e35691b' }, h("slot", { key: 'debf796d465c97d19fdd8bfa7029ccaad0056c28', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f6780795027087c899c0a2dd8b826c9e23bc4d2b', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '2ed88e6ea720c329b01c9d935507565a6bcbd2d9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '686eacb75cd07a718aeb2cab2e41176116493d4a', name: "content" }))));
|
|
7783
7788
|
}
|
|
7784
7789
|
get contentId() {
|
|
7785
7790
|
return `cat-dropdown-${this.id}`;
|
|
@@ -12281,6 +12286,27 @@ const CatTooltip = class {
|
|
|
12281
12286
|
if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
|
|
12282
12287
|
this.trigger.setAttribute('aria-describedby', this.id);
|
|
12283
12288
|
}
|
|
12289
|
+
this.addListeners();
|
|
12290
|
+
}
|
|
12291
|
+
connectedCallback() {
|
|
12292
|
+
this.addListeners();
|
|
12293
|
+
}
|
|
12294
|
+
componentWillRender() {
|
|
12295
|
+
this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot="content"]'));
|
|
12296
|
+
}
|
|
12297
|
+
disconnectedCallback() {
|
|
12298
|
+
this.removeListeners();
|
|
12299
|
+
this.hideTooltip();
|
|
12300
|
+
}
|
|
12301
|
+
render() {
|
|
12302
|
+
return (h(Host, { key: '48ac6350d679c11d238d55442d6455fc38eb44d7' }, h("slot", { key: '2ecd767bae2429800d94707498dd0d292b0bf5b4' }), h("div", { key: 'c59512dbe2c57622f7827aa143230dc1c5046281', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
|
|
12303
|
+
tooltip: true,
|
|
12304
|
+
'tooltip-hidden': this.inactive,
|
|
12305
|
+
'tooltip-round': this.round,
|
|
12306
|
+
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
12307
|
+
} }, h("slot", { key: 'a0bdd025ca40adac969daef4a0b06b9aa8452fac', name: "content" }, h("p", { key: '83786352e3219af4e7cde38a1c8247042d44c66a' }, this.content)))));
|
|
12308
|
+
}
|
|
12309
|
+
addListeners() {
|
|
12284
12310
|
if (isTouchDevice) {
|
|
12285
12311
|
window.addEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
12286
12312
|
this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);
|
|
@@ -12293,10 +12319,7 @@ const CatTooltip = class {
|
|
|
12293
12319
|
this.trigger?.addEventListener('mouseleave', this.boundHideListener);
|
|
12294
12320
|
}
|
|
12295
12321
|
}
|
|
12296
|
-
|
|
12297
|
-
this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot="content"]'));
|
|
12298
|
-
}
|
|
12299
|
-
disconnectedCallback() {
|
|
12322
|
+
removeListeners() {
|
|
12300
12323
|
if (isTouchDevice) {
|
|
12301
12324
|
window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
12302
12325
|
this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);
|
|
@@ -12309,14 +12332,6 @@ const CatTooltip = class {
|
|
|
12309
12332
|
this.trigger?.removeEventListener('focusout', this.boundHideListener);
|
|
12310
12333
|
}
|
|
12311
12334
|
}
|
|
12312
|
-
render() {
|
|
12313
|
-
return (h(Host, { key: 'a4d508bd463b29935745236c388f31b4bc01516f' }, h("slot", { key: 'b1992e73fa0e53b58493b8253c10823d562dac05' }), h("div", { key: 'd33515016f4d31548d9628f23d778acde69be531', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
|
|
12314
|
-
tooltip: true,
|
|
12315
|
-
'tooltip-hidden': this.inactive,
|
|
12316
|
-
'tooltip-round': this.round,
|
|
12317
|
-
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
12318
|
-
} }, h("slot", { key: '58c5455be822bf8bc9476c2e5086e0299805791f', name: "content" }, h("p", { key: '56d35f4ec8846ad8928c72a269fd5ed19bf087e1' }, this.content)))));
|
|
12319
|
-
}
|
|
12320
12335
|
async update() {
|
|
12321
12336
|
if (this.trigger && this.tooltip) {
|
|
12322
12337
|
await computePosition(this.trigger, this.tooltip, {
|