@haiilo/catalyst 4.1.2 → 5.0.0

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  /**\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;\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    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.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\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({ 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;\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          <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\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"]}

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

@@ -12,7 +12,13 @@
 }
 
 .tooltip {
+  --cat-font-color-head: cat-token("color.ui.font.tooltip", $wrap: false);
+  --cat-font-color-body: cat-token("color.ui.font.tooltip", $wrap: false);
   position: absolute;
+  width: max-content;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
   font-weight: 500;
@@ -24,7 +30,7 @@
   opacity: 0;
   box-shadow: rgba(0, 0, 0, 0.08) 0 1px 8px 0;
   z-index: 200;
-  max-width: 20rem;
+  max-width: min(100vw - 0.5rem, 20rem);
 }
 .tooltip-hidden {
   position: absolute !important;

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

@@ -1,44 +1,20 @@
-import { Component, h, Host, Listen, Prop } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
-import isTouchScreen from '../../utils/is-touch-screen';
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { h, Host } from '@stencil/core';
 import firstTabbable from '../../utils/first-tabbable';
+import isTouchScreen from '../../utils/is-touch-screen';
 let nextUniqueId = 0;
 export class CatTooltip {
   constructor() {
     this.id = `cat-tooltip-${nextUniqueId++}`;
     this.hidden = false;
-    /**
-     * The content of the tooltip.
-     */
+    this.hasSlottedContent = false;
     this.content = '';
-    /**
-     * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,
-     * and invisible. Corresponds with the native HTML disabled attribute.
-     */
     this.disabled = false;
-    /**
-     * The placement of the tooltip.
-     */
     this.placement = 'top';
-    /**
-     * Use round tooltip edges.
-     */
     this.round = false;
-    /**
-     * The size of the tooltip.
-     */
     this.size = 'm';
-    /**
-     * The delay time for showing tooltip in ms.
-     */
     this.showDelay = 250;
-    /**
-     * The delay time for hiding tooltip in ms.
-     */
     this.hideDelay = 0;
-    /**
-     * The duration of tap to show the tooltip.
-     */
     this.longTouchDuration = 1000;
   }
   handleKeyDown({ key }) {
@@ -66,7 +42,8 @@ export class CatTooltip {
     }
   }
   componentWillRender() {
-    this.hidden = !this.content || this.disabled;
+    this.hasSlottedContent = !!this.hostElement.querySelector('[slot="content"]');
+    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e, _f;
@@ -83,24 +60,21 @@ export class CatTooltip {
     }
   }
   render() {
-    return (h(Host, null,
-      h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" },
-        h("slot", null)),
-      h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
-          tooltip: true,
-          'tooltip-hidden': this.hidden,
-          'tooltip-round': this.round,
-          [`tooltip-${this.size}`]: Boolean(this.size)
-        } }, this.content)));
+    return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
+        tooltip: true,
+        'tooltip-hidden': this.hidden,
+        'tooltip-round': this.round,
+        [`tooltip-${this.size}`]: Boolean(this.size)
+      } }, this.hasSlottedContent ? h("slot", { name: "content" }) : this.content)));
   }
   get isTabbable() {
     return firstTabbable(this.trigger);
   }
-  update() {
+  async update() {
     if (this.trigger && this.tooltip) {
-      computePosition(this.trigger, this.tooltip, {
+      await computePosition(this.trigger, this.tooltip, {
         placement: this.placement,
-        middleware: [offset(CatTooltip.OFFSET), flip()]
+        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
       }).then(({ x, y }) => {
         if (this.tooltip) {
           Object.assign(this.tooltip.style, {
@@ -145,170 +119,185 @@ export class CatTooltip {
   }
   static get is() { return "cat-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-tooltip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-tooltip.css"]
-  }; }
-  static get properties() { return {
-    "content": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The content of the tooltip."
-      },
-      "attribute": "content",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content of the tooltip."
+        },
+        "attribute": "content",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\nand invisible. Corresponds with the native HTML disabled attribute."
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\nand invisible. Corresponds with the native HTML disabled attribute."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Placement",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "Placement": {
-            "location": "import",
-            "path": "@floating-ui/dom"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The placement of the tooltip."
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'top'"
-    },
-    "round": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placement of the tooltip."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use round tooltip edges."
+      "round": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use round tooltip edges."
+        },
+        "attribute": "round",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "round",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'s' | 'm' | 'l'",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'s' | 'm' | 'l'",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the tooltip."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'m'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the tooltip."
+      "showDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The delay time for showing tooltip in ms."
+        },
+        "attribute": "show-delay",
+        "reflect": false,
+        "defaultValue": "250"
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "showDelay": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "hideDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The delay time for hiding tooltip in ms."
+        },
+        "attribute": "hide-delay",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The delay time for showing tooltip in ms."
-      },
-      "attribute": "show-delay",
-      "reflect": false,
-      "defaultValue": "250"
-    },
-    "hideDelay": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The delay time for hiding tooltip in ms."
-      },
-      "attribute": "hide-delay",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "longTouchDuration": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The duration of tap to show the tooltip."
-      },
-      "attribute": "long-touch-duration",
-      "reflect": false,
-      "defaultValue": "1000"
-    }
-  }; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+      "longTouchDuration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The duration of tap to show the tooltip."
+        },
+        "attribute": "long-touch-duration",
+        "reflect": false,
+        "defaultValue": "1000"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSlottedContent": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 CatTooltip.OFFSET = 4;
-//# sourceMappingURL=cat-tooltip.js.map
+CatTooltip.SHIFT_PADDING = 4;
+//# sourceMappingURL=cat-tooltip.js.map

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 { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\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 readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private hidden = 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    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\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.hidden = !this.content || this.disabled;\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        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\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.content}\n        </div>\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private update() {\n    if (this.trigger && this.tooltip) {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip()]\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.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    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\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 { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\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 triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private hidden = false;\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    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\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        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\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 get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\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.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    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,4 +1,4 @@
 export { catI18nRegistry, CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
 export { catIconRegistry, CatIconRegistry } from './components/cat-icon/cat-icon-registry';
 export { catNotificationService, CatNotificationService } from './components/cat-notification/cat-notification';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/collection/scss/fonts/_fonts-mixins.scss

@@ -1,17 +1,7 @@
-@use 'fonts.mixins.azeret' as *;
-@use 'fonts.mixins.dm' as *;
 @use 'fonts.mixins.lato' as *;
 
 @mixin cat-fonts($path) {
-  @include cat-font-dm-sans($path, 500) {
-    font-display: swap;
-  }
-
   @include cat-font-lato($path, 300, 400, 500, 700) {
     font-display: fallback;
   }
-
-  @include cat-font-azeret($path, 400) {
-    font-display: fallback;
-  }
 }

package/dist/collection/utils/breakpoints.js

@@ -9,4 +9,4 @@ export const Breakpoints = {
 export function isBreakpoint(value) {
   return typeof value === 'string' && _breakpoints.includes(value);
 }
-//# sourceMappingURL=breakpoints.js.map
+//# sourceMappingURL=breakpoints.js.map

package/dist/collection/utils/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAU,CAAC;AAI1D,MAAM,CAAC,MAAM,WAAW,GAA2C;EACjE,EAAE,EAAE,uBAAuB;EAC3B,CAAC,EAAE,uBAAuB;EAC1B,CAAC,EAAE,uBAAuB;EAC1B,CAAC,EAAE,wBAAwB;EAC3B,EAAE,EAAE,wBAAwB;CAC7B,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAc;EACzC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,YAAY,CAAC,QAAQ,CAAC,KAAmB,CAAC,CAAC;AACjF,CAAC","sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n"]}
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAU,CAAC;AAI1D,MAAM,CAAC,MAAM,WAAW,GAA2C;EACjE,EAAE,EAAE,uBAAuB;EAC3B,CAAC,EAAE,uBAAuB;EAC1B,CAAC,EAAE,uBAAuB;EAC1B,CAAC,EAAE,wBAAwB;EAC3B,EAAE,EAAE,wBAAwB;CAC7B,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAc;EACzC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,YAAY,CAAC,QAAQ,CAAC,KAAmB,CAAC,CAAC;AACjF,CAAC","sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = (typeof _breakpoints)[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n"]}

package/dist/collection/utils/coerce.js

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function coerceBoolean(value) {
+  return value != null && `${value}` !== 'false';
+}
+export function coerceNumber(value, fallbackValue = 0) {
+  return isNumberValue(value) ? Number(value) : fallbackValue;
+}
+function isNumberValue(value) {
+  return !isNaN(parseFloat(value)) && !isNaN(Number(value));
+}
+//# sourceMappingURL=coerce.js.map

package/dist/collection/utils/coerce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coerce.js","sourceRoot":"","sources":["../../src/utils/coerce.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAEvD,MAAM,UAAU,aAAa,CAAC,KAAU;EACtC,OAAO,KAAK,IAAI,IAAI,IAAI,GAAG,KAAK,EAAE,KAAK,OAAO,CAAC;AACjD,CAAC;AAID,MAAM,UAAU,YAAY,CAAC,KAAU,EAAE,aAAa,GAAG,CAAC;EACxD,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;AAC9D,CAAC;AAED,SAAS,aAAa,CAAC,KAAU;EAC/B,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,KAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACnE,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport function coerceBoolean(value: any): boolean {\n  return value != null && `${value}` !== 'false';\n}\n\nexport function coerceNumber(value: any): number;\nexport function coerceNumber<D>(value: any, fallback: D): number | D;\nexport function coerceNumber(value: any, fallbackValue = 0) {\n  return isNumberValue(value) ? Number(value) : fallbackValue;\n}\n\nfunction isNumberValue(value: any): boolean {\n  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value));\n}\n"]}

package/dist/collection/utils/first-tabbable.js

@@ -3,4 +3,4 @@ const firstTabbable = (container) => {
   return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
 };
 export default firstTabbable;
-//# sourceMappingURL=first-tabbable.js.map
+//# sourceMappingURL=first-tabbable.js.map

package/dist/collection/utils/is-touch-screen.js

@@ -1,3 +1,3 @@
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 export default isTouchDevice;
-//# sourceMappingURL=is-touch-screen.js.map
+//# sourceMappingURL=is-touch-screen.js.map