@haiilo/catalyst 5.4.0 → 6.0.0

package/dist/collection/components/cat-toggle/cat-toggle.js

@@ -24,6 +24,7 @@ export class CatToggle {
     this.name = undefined;
     this.required = false;
     this.value = undefined;
+    this.resolvedValue = null;
     this.hint = undefined;
     this.labelLeft = false;
     this.nativeAttributes = undefined;
@@ -31,6 +32,9 @@ export class CatToggle {
   get id() {
     return this.identifier || this._id;
   }
+  componentWillLoad() {
+    this.updateResolved();
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -55,21 +59,13 @@ export class CatToggle {
   async doBlur() {
     this.input.blur();
   }
-  /**
-   * Programmatically simulate a click on the toggle.
-   */
-  async doClick() {
-    this.input.click();
-  }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ...this.nativeAttributes, ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
   }
-  onInput(event) {
+  onInput() {
     this.checked = this.input.checked;
-    if (!this.value || typeof this.value === 'boolean') {
-      this.value = this.checked;
-    }
-    this.catChange.emit(event);
+    this.updateResolved();
+    this.catChange.emit(this.resolvedValue);
   }
   onFocus(event) {
     this.catFocus.emit(event);
@@ -77,6 +73,9 @@ export class CatToggle {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  updateResolved() {
+    this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;
+  }
   static get is() { return "cat-toggle"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -192,7 +191,7 @@ export class CatToggle {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The name of the input"
+          "text": "The name of the input."
         },
         "attribute": "name",
         "reflect": false
@@ -216,22 +215,40 @@ export class CatToggle {
         "defaultValue": "false"
       },
       "value": {
-        "type": "any",
-        "mutable": true,
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string | undefined",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the toggle"
+          "text": "The value of the toggle."
         },
         "attribute": "value",
         "reflect": false
       },
+      "resolvedValue": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "string | boolean | null",
+          "resolved": "boolean | null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The resolved value of the toggle, based on the checked state and value."
+        },
+        "attribute": "resolved-value",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "hint": {
         "type": "string",
         "mutable": false,
@@ -302,13 +319,9 @@ export class CatToggle {
           "text": "Emitted when the checked status of the toggle is changed."
         },
         "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
-          "references": {
-            "InputEvent": {
-              "location": "global"
-            }
-          }
+          "original": "boolean | string | null",
+          "resolved": "boolean | null | string",
+          "references": {}
         }
       }, {
         "method": "catFocus",
@@ -395,22 +408,6 @@ export class CatToggle {
           "text": "Programmatically remove focus from the toggle. Use this method instead of\n`input.blur()`.",
           "tags": []
         }
-      },
-      "doClick": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically simulate a click on the toggle.",
-          "tags": []
-        }
       }
     };
   }

package/dist/collection/components/cat-toggle/cat-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\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 * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\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   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. 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.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the toggle.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.value) : this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {(this.hint || this.hasSlottedHint) && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private onInput(event: InputEvent) {\n    this.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\n    this.catChange.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,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\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 * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\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   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle.\n   */\n  @Prop() value?: string;\n\n  /**\n   * The resolved value of the toggle, based on the checked state and value.\n   */\n  @Prop({ mutable: true }) resolvedValue: string | boolean | null = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string | null>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. 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.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {(this.hint || this.hasSlottedHint) && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\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  private updateResolved() {\n    this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;\n  }\n}\n"]}

package/dist/collection/components/cat-tooltip/cat-tooltip.js

@@ -20,22 +20,21 @@ export class CatTooltip {
     key === 'Escape' && this.hideListener();
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    this.trigger = (_c = (_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements) === null || _b === void 0 ? void 0 : _b.call(slot)) === null || _c === void 0 ? void 0 : _c[0];
+    const slot = this.hostElement.shadowRoot?.querySelector('slot');
+    this.trigger = slot?.assignedElements?.()?.[0];
     if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
       this.trigger.setAttribute('aria-describedby', this.id);
     }
     if (isTouchScreen) {
       window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));
-      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('touchstart', this.touchStartListener.bind(this));
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('touchend', this.touchEndListener.bind(this));
+      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));
+      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));
     }
     else {
-      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('focusin', this.showListener.bind(this));
-      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('focusout', this.hideListener.bind(this));
-      (_h = this.trigger) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseenter', this.showListener.bind(this));
-      (_j = this.trigger) === null || _j === void 0 ? void 0 : _j.addEventListener('mouseleave', this.hideListener.bind(this));
+      this.trigger?.addEventListener('focusin', this.showListener.bind(this));
+      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));
+      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));
+      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));
     }
   }
   componentWillRender() {
@@ -43,17 +42,16 @@ export class CatTooltip {
     this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);
   }
   disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f;
     if (isTouchScreen) {
       window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.touchStartListener.bind(this));
-      (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchend', this.touchEndListener.bind(this));
+      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));
+      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));
     }
     else {
-      (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseenter', this.showListener.bind(this));
-      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseleave', this.hideListener.bind(this));
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusin', this.showListener.bind(this));
-      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.removeEventListener('focusout', this.hideListener.bind(this));
+      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));
+      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));
+      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));
+      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));
     }
   }
   render() {
@@ -89,8 +87,7 @@ export class CatTooltip {
   hideListener() {
     window.clearTimeout(this.showTimeout);
     this.hideTimeout = window.setTimeout(() => {
-      var _a;
-      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
+      this.tooltip?.classList.remove('tooltip-show');
       this.hideTooltip();
     }, this.hideDelay);
   }
@@ -107,15 +104,13 @@ export class CatTooltip {
     }
   }
   windowTouchStartListener() {
-    var _a;
-    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
+    this.tooltip?.classList.remove('tooltip-show');
   }
   showTooltip() {
-    var _a;
     if (this.trigger && this.tooltip) {
       this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
     }
-    !this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
+    !this.hidden && this.tooltip?.classList.add('tooltip-show');
   }
   hideTooltip() {
     if (this.cleanupFloatingUi) {

package/dist/collection/components/cat-tooltip/cat-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\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 hidden = false;\n  private cleanupFloatingUi?: () => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedContent = 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: Placement = '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')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\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.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          aria-hidden={this.hidden}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.hidden,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\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: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\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.showTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n      this.hideTooltip();\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n      this.hideTooltip();\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\n  }\n\n  private hideTooltip() {\n    if (this.cleanupFloatingUi) {\n      this.cleanupFloatingUi();\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\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 hidden = false;\n  private cleanupFloatingUi?: () => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedContent = 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: Placement = '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')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\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.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          aria-hidden={this.hidden}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.hidden,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\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: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\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.showTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n      this.hideTooltip();\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n      this.hideTooltip();\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    if (this.trigger && this.tooltip) {\n      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\n  }\n\n  private hideTooltip() {\n    if (this.cleanupFloatingUi) {\n      this.cleanupFloatingUi();\n    }\n  }\n}\n"]}

package/dist/collection/index.cdn.js

@@ -23,6 +23,12 @@
 
     catIconRegistry.addIcons(ci);
     catI18nRegistry.set({
+      'datepicker.year': 'Year',
+      'datepicker.month': 'Month',
+      'datepicker.hour': 'Hour',
+      'datepicker.minute': 'Minute',
+      'datepicker.scroll': 'Scroll to increment',
+      'datepicker.toggle': 'Click to toggle',
       'dialog.close': 'Close',
       'input.clear': 'Clear',
       'input.optional': 'Optional',

package/dist/collection/scss/index.scss

@@ -4,6 +4,8 @@
 
 // -- Vendor
 @import '~toastify-js/src/toastify.css';
+@import '~flatpickr/dist/flatpickr.css';
+@import 'vendor/flatpickr';
 
 // -- Fonts
 @import 'fonts/fonts-mixins';

package/dist/collection/scss/vendor/_flatpickr.scss

@@ -0,0 +1,314 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+/* stylelint-disable selector-class-pattern */
+
+.flatpickr-calendar {
+  @include cat-body(s);
+  @include cat-elevation(4);
+  border-radius: cat-border-radius('m');
+  border: 1px solid cat-token('color.ui.border.default');
+  background: cat-token('color.ui.background.surface');
+  padding: 1rem;
+
+  &.animate {
+    transform: translateY(-1rem);
+    opacity: 0;
+    transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),
+      opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15);
+  }
+
+  &::before,
+  &::after {
+    display: none;
+  }
+
+  &.open {
+    z-index: $cat-dropdown-z-index;
+    width: auto !important;
+    margin-top: 0.75rem;
+    margin-left: -0.75rem;
+
+    &.animate {
+      opacity: 1;
+      transform: translateY(0);
+      transition: transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1),
+        opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1);
+    }
+  }
+}
+
+.flatpickr-months {
+  gap: 0.25rem;
+}
+
+.flatpickr-months .flatpickr-month {
+  height: auto;
+}
+
+.flatpickr-current-month {
+  @include cat-head(4);
+  height: 100%;
+  padding: 0;
+  display: flex;
+  position: static;
+  width: auto;
+  gap: 0.25rem;
+
+  .flatpickr-monthDropdown-months {
+    padding: 0 0.25rem;
+    flex: 1;
+    margin: unset;
+    font-weight: inherit;
+    border-radius: cat-border-radius('m');
+
+    &:hover,
+    &:focus-within {
+      background-color: cat-token('color.theme.primary.bg', 0.05);
+    }
+  }
+
+  input.cur-year {
+    padding: 0;
+    font-weight: inherit;
+    line-height: 2.25rem;
+  }
+
+  .numInputWrapper {
+    width: 7ch;
+  }
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  position: static;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  color: cat-token('color.ui.font.muted');
+
+  &:hover {
+    color: cat-token('color.ui.font.body');
+  }
+}
+
+.flatpickr-weekdays {
+  height: 2rem;
+}
+
+.flatpickr-weekwrapper {
+  .flatpickr-weekday {
+    height: 2rem;
+  }
+
+  .flatpickr-weeks {
+    box-shadow: none;
+    width: 2rem;
+    padding: 0 0.5rem 0 0;
+  }
+
+  span.flatpickr-day,
+  span.flatpickr-day:hover {
+    @include cat-body(xs, $weight: 700);
+    color: cat-token('color.ui.font.muted');
+    text-align: right;
+    line-height: 2.25rem;
+  }
+}
+
+.flatpickr-days {
+  width: 15.75rem !important;
+}
+
+.dayContainer {
+  width: 15.75rem;
+  min-width: 15.75rem;
+  max-width: 15.75rem;
+}
+
+.flatpickr-day {
+  color: cat-token('color.ui.font.body');
+  height: 2.25rem;
+  line-height: 2.25rem;
+  // max-width: unset;
+  border: 0;
+  border-radius: cat-border-radius('m');
+
+  &:hover {
+    background-color: cat-token('color.ui.background.muted');
+    font-weight: 700;
+  }
+
+  &.today {
+    color: cat-token('color.theme.primary.text');
+    box-shadow: inset 0 0 0 2px cat-token('color.theme.primary.text');
+
+    &:hover,
+    &:focus {
+      background-color: cat-token('color.ui.background.muted');
+      color: cat-token('color.theme.primary.text');
+    }
+  }
+
+  &.selected,
+  &.startRange,
+  &.endRange {
+    &,
+    &:hover,
+    &:focus,
+    &.inRange,
+    &.nextMonthDay,
+    &.prevMonthDay {
+      font-weight: 700;
+      background-color: cat-token('color.theme.primary.bg') !important;
+      color: cat-token('color.theme.primary.fill') !important;
+    }
+  }
+
+  &.inRange,
+  &.prevMonthDay.inRange,
+  &.nextMonthDay.inRange,
+  &.today.inRange,
+  &.prevMonthDay.today.inRange,
+  &.nextMonthDay.today.inRange,
+  &:hover,
+  &.prevMonthDay:hover,
+  &.nextMonthDay:hover,
+  &:focus,
+  &.prevMonthDay:focus,
+  &.nextMonthDay:focus {
+    background-color: cat-token('color.theme.primary.bg', 0.1);
+  }
+
+  &.selected.startRange,
+  &.startRange.startRange,
+  &.endRange.startRange {
+    border-top-left-radius: cat-border-radius('m');
+    border-bottom-left-radius: cat-border-radius('m');
+  }
+
+  &.selected.endRange,
+  &.startRange.endRange,
+  &.endRange.endRange {
+    border-top-right-radius: cat-border-radius('m');
+    border-bottom-right-radius: cat-border-radius('m');
+  }
+}
+
+.numInputWrapper {
+  padding: 0 1rem 0 0.5rem;
+  border-radius: cat-border-radius('m');
+
+  &:hover,
+  &:focus-within {
+    background-color: cat-token('color.theme.primary.bg', 0.05);
+  }
+
+  span {
+    border: none;
+    background: transparent;
+    width: 1rem;
+    padding: 0;
+    color: cat-token('color.ui.font.muted');
+
+    &.arrowUp::after {
+      content: '\2191';
+      align-items: flex-end;
+    }
+
+    &.arrowDown::after {
+      content: '\2193';
+      align-items: flex-start;
+    }
+
+    &::after {
+      @include cat-body(xs, $weight: 700);
+      position: static;
+      border: 0 !important;
+      font-size: 10px;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+    }
+
+    &:hover {
+      color: cat-token('color.ui.font.body');
+      background: transparent;
+    }
+  }
+}
+
+.flatpickr-time .numInputWrapper {
+  height: 2.25rem;
+}
+
+.flatpickr-calendar.hasTime .flatpickr-time {
+  height: 2.25rem;
+  line-height: 2.25rem;
+  max-height: 2.25rem;
+  border-top: none;
+  min-width: 12rem;
+}
+
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  margin: 0 0.25rem;
+  @include cat-head(4, 400);
+  line-height: 2.25rem;
+}
+
+.flatpickr-time .flatpickr-am-pm {
+  width: 25%;
+  padding: 0 0.5rem;
+
+  &:hover,
+  &:focus {
+    border-radius: cat-border-radius('m');
+    background-color: cat-token('color.theme.primary.bg', 0.05);
+  }
+}
+
+.flatpickr-time {
+  input {
+    background: transparent !important;
+    @include cat-head(4, 400);
+    line-height: 2.25rem;
+
+    &.flatpickr-hour {
+      font-weight: inherit;
+    }
+  }
+}
+
+.flatpickr-day.inRange:not(.today),
+.flatpickr-day.week.selected {
+  box-shadow: none;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.week.selected {
+  &:nth-child(7n + 1) {
+    border-top-left-radius: cat-border-radius('m');
+    border-bottom-left-radius: cat-border-radius('m');
+  }
+
+  &:nth-child(7n + 7) {
+    border-top-right-radius: cat-border-radius('m');
+    border-bottom-right-radius: cat-border-radius('m');
+  }
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: none;
+}
+
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: cat-border-radius('m');
+}