@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n  private isOpen: boolean | null = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Do not close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Allow overflow when dropdown is open.\n   */\n  @Prop() overflow = false;\n\n  /**\n   * Emitted when the dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // we need to delay the initialization of the trigger until first\n    // interaction because the element might still be hidden (and thus not\n    // tabbable) if contained in another Stencil web component\n    if (!this.trigger) {\n      this.initTrigger();\n      this.toggle();\n    }\n\n    // hide dropdown on button clicks inside the dropdown content\n    const path = event.composedPath();\n    if (\n      !this.noAutoClose &&\n      // check if click was inside of the dropdown content\n      path.includes(this.content) &&\n      // check if click was not on a trigger for a sub-dropdown\n      (event.target as Element)?.slot !== 'trigger' &&\n      // check if click was not an element marked with data-dropdown-no-close\n      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  async toggle(): Promise<void> {\n    this.isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   */\n  async open(): Promise<void> {\n    if (this.isOpen === null || this.isOpen) {\n      return; // busy or open\n    }\n\n    this.isOpen = null;\n    this.content.style.display = 'block';\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.catOpen.emit();\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event =>\n              !this.noAutoClose &&\n              // check if click was outside of the dropdown content\n              !event.composedPath().includes(this.content) &&\n              // check if click was not on an element marked with data-dropdown-no-close\n              !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n            onPostDeactivate: () => this.close()\n          });\n      this.trap.activate();\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(): Promise<void> {\n    if (!this.isOpen) {\n      return; // busy or closed\n    }\n\n    this.isOpen = null;\n    this.content.classList.remove('show');\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.trap?.deactivate();\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad(): void {\n    this.keyListener = event => {\n      if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n        const activeElement = firstTabbable(document.activeElement);\n        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n        const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n        targetElements[targetIdx].focus();\n        event.preventDefault();\n      }\n    };\n    document.addEventListener('keydown', this.keyListener);\n  }\n\n  disconnectedCallback(): void {\n    if (this.keyListener) {\n      document.removeEventListener('keydown', this.keyListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    this.trigger.setAttribute('aria-haspopup', 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', () => this.toggle());\n    autoUpdate(this.trigger, this.content, () => this.update());\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    const elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : elem?.querySelector('[data-trigger]') ?? undefined;\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update() {\n    if (this.trigger) {\n      computePosition(this.trigger, this.content, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatDropdown.OFFSET),\n          flip(),\n          size({\n            padding: CatDropdown.OFFSET,\n            apply({ availableWidth, availableHeight, elements }) {\n              Object.assign(elements.floating.style, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`\n              });\n            }\n          })\n        ]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n\n  private hasAttribute(elem: EventTarget, attr: string) {\n    return elem instanceof HTMLElement && elem.hasAttribute(attr);\n  }\n}\n"]}
+{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n  private isOpen: boolean | null = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Do not close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Allow overflow when dropdown is open.\n   */\n  @Prop() overflow = false;\n\n  /**\n   * Emitted when the dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // we need to delay the initialization of the trigger until first\n    // interaction because the element might still be hidden (and thus not\n    // tabbable) if contained in another Stencil web component\n    if (!this.trigger) {\n      this.initTrigger();\n      this.toggle();\n    }\n\n    // hide dropdown on button clicks inside the dropdown content\n    const path = event.composedPath();\n    if (\n      !this.noAutoClose &&\n      // check if click was inside of the dropdown content\n      path.includes(this.content) &&\n      // check if click was not on a trigger for a sub-dropdown\n      (event.target as Element)?.slot !== 'trigger' &&\n      // check if click was not an element marked with data-dropdown-no-close\n      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  async toggle(): Promise<void> {\n    this.isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   */\n  async open(): Promise<void> {\n    if (this.isOpen === null || this.isOpen) {\n      return; // busy or open\n    }\n\n    this.isOpen = null;\n    this.content.style.display = 'block';\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.catOpen.emit();\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event =>\n              !this.noAutoClose &&\n              // check if click was outside of the dropdown content\n              !event.composedPath().includes(this.content) &&\n              // check if click was not on an element marked with data-dropdown-no-close\n              !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n            onPostDeactivate: () => this.close()\n          });\n      this.trap.activate();\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(): Promise<void> {\n    if (!this.isOpen) {\n      return; // busy or closed\n    }\n\n    this.isOpen = null;\n    this.content.classList.remove('show');\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.trap?.deactivate();\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad(): void {\n    this.keyListener = event => {\n      if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n        const activeElement = firstTabbable(document.activeElement);\n        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n        const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n        targetElements[targetIdx].focus();\n        event.preventDefault();\n      }\n    };\n    document.addEventListener('keydown', this.keyListener);\n  }\n\n  disconnectedCallback(): void {\n    if (this.keyListener) {\n      document.removeEventListener('keydown', this.keyListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    this.trigger.setAttribute('aria-haspopup', 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', () => this.toggle());\n    autoUpdate(this.trigger, this.content, () => this.update());\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    const elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : elem?.querySelector('[data-trigger]') ?? undefined;\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update() {\n    if (this.trigger) {\n      computePosition(this.trigger, this.content, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatDropdown.OFFSET),\n          flip(),\n          size({\n            padding: CatDropdown.OFFSET,\n            apply({ availableWidth, availableHeight, elements }) {\n              Object.assign(elements.floating.style, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`\n              });\n            }\n          })\n        ]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n\n  private hasAttribute(elem: EventTarget, attr: string) {\n    return elem instanceof HTMLElement && elem.hasAttribute(attr);\n  }\n}\n"]}

package/dist/collection/components/cat-dropdown/cat-dropdown.spec.js

@@ -1,15 +1,15 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { CatDropdown } from "./cat-dropdown";
 describe('cat-dropdown', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [CatDropdown],
-      html: `<cat-dropdown>
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [CatDropdown],
+            html: `<cat-dropdown>
         <button slot="trigger"></button>
         <nav slot="content"></nav>
       </cat-dropdown>`
-    });
-    expect(page.root).toEqualHtml(`
+        });
+        expect(page.root).toEqualHtml(`
      <cat-dropdown>
         <mock:shadow-root>
          <slot name="trigger"></slot>
@@ -21,6 +21,6 @@ describe('cat-dropdown', () => {
        <nav slot="content"></nav>
       </cat-dropdown>
     `);
-  });
+    });
 });
 //# sourceMappingURL=cat-dropdown.spec.js.map

package/dist/collection/components/cat-dropdown/cat-dropdown.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-dropdown.spec.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE;;;sBAGU;KACjB,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatDropdown } from './cat-dropdown';\n\ndescribe('cat-dropdown', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatDropdown],\n      html: `<cat-dropdown>\n        <button slot=\"trigger\"></button>\n        <nav slot=\"content\"></nav>\n      </cat-dropdown>`\n    });\n    expect(page.root).toEqualHtml(`\n     <cat-dropdown>\n        <mock:shadow-root>\n         <slot name=\"trigger\"></slot>\n         <div class=\"content overflow-auto\" id=\"cat-dropdown-0\">\n           <slot name=\"content\"></slot>\n         </div>\n       </mock:shadow-root>\n       <button slot=\"trigger\"></button>\n       <nav slot=\"content\"></nav>\n      </cat-dropdown>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-dropdown.spec.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;sBAGU;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatDropdown } from './cat-dropdown';\n\ndescribe('cat-dropdown', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatDropdown],\n      html: `<cat-dropdown>\n        <button slot=\"trigger\"></button>\n        <nav slot=\"content\"></nav>\n      </cat-dropdown>`\n    });\n    expect(page.root).toEqualHtml(`\n     <cat-dropdown>\n        <mock:shadow-root>\n         <slot name=\"trigger\"></slot>\n         <div class=\"content overflow-auto\" id=\"cat-dropdown-0\">\n           <slot name=\"content\"></slot>\n         </div>\n       </mock:shadow-root>\n       <button slot=\"trigger\"></button>\n       <nav slot=\"content\"></nav>\n      </cat-dropdown>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cat-form-group/cat-form-group.e2e.js

@@ -1,10 +1,10 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('cat-form-group', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<cat-form-group></cat-form-group>');
-    const element = await page.find('cat-form-group');
-    expect(element).toHaveClass('hydrated');
-  });
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<cat-form-group></cat-form-group>');
+        const element = await page.find('cat-form-group');
+        expect(element).toHaveClass('hydrated');
+    });
 });
 //# sourceMappingURL=cat-form-group.e2e.js.map

package/dist/collection/components/cat-form-group/cat-form-group.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-group.e2e.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cat-form-group', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cat-form-group></cat-form-group>');\n\n    const element = await page.find('cat-form-group');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}
+{"version":3,"file":"cat-form-group.e2e.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;QAE3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cat-form-group', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cat-form-group></cat-form-group>');\n\n    const element = await page.find('cat-form-group');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cat-form-group/cat-form-group.js

@@ -1,111 +1,111 @@
 import { h, Host } from "@stencil/core";
 export class CatFormGroup {
-  constructor() {
-    this.formElements = [];
-    this.requiredMarker = 'auto';
-    this.horizontal = false;
-    this.labelSize = undefined;
-  }
-  onRequiredMarkerChanged(newRequiredMarker) {
-    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
-    this.formElements.forEach(element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker));
-  }
-  onHorizontalChanged(newHorizontal) {
-    this.formElements.forEach(element => {
-      element.horizontal = newHorizontal;
-    });
-  }
-  render() {
-    return (h(Host, { style: { '--label-size': this.labelSize } }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
-  }
-  onSlotChange() {
-    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
-    this.onRequiredMarkerChanged(this.requiredMarker);
-    this.onHorizontalChanged(this.horizontal);
-  }
-  calculate(elements) {
-    const optionalFields = elements.filter(value => !value.required).length;
-    const requiredFields = elements.length - optionalFields;
-    return requiredFields >= optionalFields ? 'optional' : 'required';
-  }
-  static get is() { return "cat-form-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-form-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-form-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "requiredMarker": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'none' | 'required' | 'optional' | 'auto'",
-          "resolved": "\"auto\" | \"none\" | \"optional\" | \"required\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\nBy default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n- If there are more required, the optional will be marked.<br />\n- If there are less required, it will mark the required.<br /><br />\nIf a form field had \"!\", the requiredMarked of the field would not change."
-        },
-        "attribute": "required-marker",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "horizontal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label is on top or left."
-        },
-        "attribute": "horizontal",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "labelSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The space allocated to the input label"
-        },
-        "attribute": "label-size",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "requiredMarker",
-        "methodName": "onRequiredMarkerChanged"
-      }, {
-        "propName": "horizontal",
-        "methodName": "onHorizontalChanged"
-      }];
-  }
+    constructor() {
+        this.formElements = [];
+        this.requiredMarker = 'auto';
+        this.horizontal = false;
+        this.labelSize = undefined;
+    }
+    onRequiredMarkerChanged(newRequiredMarker) {
+        const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
+        this.formElements.forEach(element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker));
+    }
+    onHorizontalChanged(newHorizontal) {
+        this.formElements.forEach(element => {
+            element.horizontal = newHorizontal;
+        });
+    }
+    render() {
+        return (h(Host, { style: { '--label-size': this.labelSize } }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
+    }
+    onSlotChange() {
+        this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
+        this.onRequiredMarkerChanged(this.requiredMarker);
+        this.onHorizontalChanged(this.horizontal);
+    }
+    calculate(elements) {
+        const optionalFields = elements.filter(value => !value.required).length;
+        const requiredFields = elements.length - optionalFields;
+        return requiredFields >= optionalFields ? 'optional' : 'required';
+    }
+    static get is() { return "cat-form-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-form-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-form-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "requiredMarker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'required' | 'optional' | 'auto'",
+                    "resolved": "\"auto\" | \"none\" | \"optional\" | \"required\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\nBy default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n- If there are more required, the optional will be marked.<br />\n- If there are less required, it will mark the required.<br /><br />\nIf a form field had \"!\", the requiredMarked of the field would not change."
+                },
+                "attribute": "required-marker",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label is on top or left."
+                },
+                "attribute": "horizontal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The space allocated to the input label"
+                },
+                "attribute": "label-size",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "requiredMarker",
+                "methodName": "onRequiredMarkerChanged"
+            }, {
+                "propName": "horizontal",
+                "methodName": "onHorizontalChanged"
+            }];
+    }
 }
 //# sourceMappingURL=cat-form-group.js.map

package/dist/collection/components/cat-form-group/cat-form-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,uBAAuB,CAAC,iBAA4D;IAClF,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;EACJ,CAAC;EAGD,mBAAmB,CAAC,aAAsB;IACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAClC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;IACrC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;MAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;IAC/B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EAC5C,CAAC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;IACxD,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;EACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n  | HTMLCatInputElement\n  | HTMLCatTextareaElement\n  | HTMLCatSelectElement\n  | HTMLCatDatepickerElement;\n\n@Component({\n  tag: 'cat-form-group',\n  styleUrl: 'cat-form-group.scss',\n  shadow: true\n})\nexport class CatFormGroup {\n  private formElements: HTMLCatFormFieldElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n   * - If there are more required, the optional will be marked.<br />\n   * - If there are less required, it will mark the required.<br /><br />\n   * If a form field had \"!\", the requiredMarked of the field would not change.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * The space allocated to the input label\n   */\n  @Prop() labelSize?: string;\n\n  @Watch('requiredMarker')\n  onRequiredMarkerChanged(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n    this.formElements.forEach(\n      element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n    );\n  }\n\n  @Watch('horizontal')\n  onHorizontalChanged(newHorizontal: boolean) {\n    this.formElements.forEach(element => {\n      element.horizontal = newHorizontal;\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ '--label-size': this.labelSize }}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(\n      this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n    ) as HTMLCatFormFieldElement[];\n    this.onRequiredMarkerChanged(this.requiredMarker);\n    this.onHorizontalChanged(this.horizontal);\n  }\n\n  private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n    const optionalFields = elements.filter(value => !value.required).length;\n    const requiredFields = elements.length - optionalFields;\n    return requiredFields >= optionalFields ? 'optional' : 'required';\n  }\n}\n"]}
+{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;QACf,iBAAY,GAA8B,EAAE,CAAC;8BAWe,MAAM;0BAKrD,KAAK;;;IAQ1B,uBAAuB,CAAC,iBAA4D;QAClF,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;IACJ,CAAC;IAGD,mBAAmB,CAAC,aAAsB;QACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAClC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;YAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;QAC/B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;IAEO,SAAS,CAAC,QAAmC;QACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;QACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;QACxD,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n  | HTMLCatInputElement\n  | HTMLCatTextareaElement\n  | HTMLCatSelectElement\n  | HTMLCatDatepickerElement;\n\n@Component({\n  tag: 'cat-form-group',\n  styleUrl: 'cat-form-group.scss',\n  shadow: true\n})\nexport class CatFormGroup {\n  private formElements: HTMLCatFormFieldElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n   * - If there are more required, the optional will be marked.<br />\n   * - If there are less required, it will mark the required.<br /><br />\n   * If a form field had \"!\", the requiredMarked of the field would not change.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * The space allocated to the input label\n   */\n  @Prop() labelSize?: string;\n\n  @Watch('requiredMarker')\n  onRequiredMarkerChanged(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n    this.formElements.forEach(\n      element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n    );\n  }\n\n  @Watch('horizontal')\n  onHorizontalChanged(newHorizontal: boolean) {\n    this.formElements.forEach(element => {\n      element.horizontal = newHorizontal;\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ '--label-size': this.labelSize }}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(\n      this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n    ) as HTMLCatFormFieldElement[];\n    this.onRequiredMarkerChanged(this.requiredMarker);\n    this.onHorizontalChanged(this.horizontal);\n  }\n\n  private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n    const optionalFields = elements.filter(value => !value.required).length;\n    const requiredFields = elements.length - optionalFields;\n    return requiredFields >= optionalFields ? 'optional' : 'required';\n  }\n}\n"]}

package/dist/collection/components/cat-form-group/cat-form-group.spec.js

@@ -1,18 +1,18 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { CatFormGroup } from "./cat-form-group";
 describe('cat-form-group', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [CatFormGroup],
-      html: `<cat-form-group></cat-form-group>`
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [CatFormGroup],
+            html: `<cat-form-group></cat-form-group>`
+        });
+        expect(page.root).toEqualHtml(`
       <cat-form-group>
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
       </cat-form-group>
     `);
-  });
+    });
 });
 //# sourceMappingURL=cat-form-group.spec.js.map

package/dist/collection/components/cat-form-group/cat-form-group.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-group.spec.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;MAC1B,IAAI,EAAE,mCAAmC;KAC1C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatFormGroup } from './cat-form-group';\n\ndescribe('cat-form-group', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatFormGroup],\n      html: `<cat-form-group></cat-form-group>`\n    });\n    expect(page.root).toEqualHtml(`\n      <cat-form-group>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cat-form-group>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-form-group.spec.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,mCAAmC;SAC1C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatFormGroup } from './cat-form-group';\n\ndescribe('cat-form-group', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatFormGroup],\n      html: `<cat-form-group></cat-form-group>`\n    });\n    expect(page.root).toEqualHtml(`\n      <cat-form-group>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cat-form-group>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cat-form-hint/cat-form-hint.js

@@ -7,14 +7,14 @@ import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
  * @return a JSX.Element
  */
 export const CatFormHint = props => {
-  const { id, hint, slottedHint, errorMap } = props;
-  const errors = Object.entries(errorMap || {});
-  return (h("div", { "aria-live": "polite", id: id + '-hint', class: "hint-section" }, errors.length
-    ? errors.map(([key, params]) => (h("p", { class: (props.class ?? '') + ' input-hint cat-text-danger' }, i18n.t(`error.${key}`, params))))
-    : [
-      hint &&
-        (Array.isArray(hint) ? (hint.map(item => h("p", { class: (props.class ?? '') + ' input-hint' }, item))) : (h("p", { class: (props.class ?? '') + ' input-hint' }, hint))),
-      slottedHint
-    ]));
+    const { id, hint, slottedHint, errorMap } = props;
+    const errors = Object.entries(errorMap || {});
+    return (h("div", { "aria-live": "polite", id: id + '-hint', class: "hint-section" }, errors.length
+        ? errors.map(([key, params]) => (h("p", { class: (props.class ?? '') + ' input-hint cat-text-danger' }, i18n.t(`error.${key}`, params))))
+        : [
+            hint &&
+                (Array.isArray(hint) ? (hint.map(item => h("p", { class: (props.class ?? '') + ' input-hint' }, item))) : (h("p", { class: (props.class ?? '') + ' input-hint' }, hint))),
+            slottedHint
+        ]));
 };
 //# sourceMappingURL=cat-form-hint.js.map

package/dist/collection/components/cat-form-hint/cat-form-hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-hint.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAmBxE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;EACxE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,OAAO,CACL,wBAAe,QAAQ,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IAC3D,MAAM,CAAC,MAAM;IACZ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC5B,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,6BAA6B,IAAG,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAC;IACJ,CAAC,CAAC;MACE,IAAI;QACF,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACrB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAAC,CAC5E,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;MACJ,WAAW;KACZ,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/**\n * Properties of CatFormHint.\n *\n * @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n */\ninterface CatFormHintProps {\n  id: string;\n  hint?: string | string[];\n  slottedHint?: HTMLSlotElement;\n  class?: string;\n  errorMap?: ErrorMap;\n}\n\n/**\n * CatFormHint is a functional component that represents the hint area of form elements.\n *\n * @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n  const { id, hint, slottedHint, errorMap } = props;\n  const errors = Object.entries(errorMap || {});\n  return (\n    <div aria-live=\"polite\" id={id + '-hint'} class=\"hint-section\">\n      {errors.length\n        ? errors.map(([key, params]) => (\n            <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n          ))\n        : [\n            hint &&\n              (Array.isArray(hint) ? (\n                hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n              ) : (\n                <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n              )),\n            slottedHint\n          ]}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"cat-form-hint.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAmBxE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;IACxE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;IAC9C,OAAO,CACL,wBAAe,QAAQ,EAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IAC3D,MAAM,CAAC,MAAM;QACZ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC5B,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,6BAA6B,IAAG,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAC;QACJ,CAAC,CAAC;YACE,IAAI;gBACF,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACrB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAAC,CAC5E,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;YACJ,WAAW;SACZ,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/**\n * Properties of CatFormHint.\n *\n * @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n */\ninterface CatFormHintProps {\n  id: string;\n  hint?: string | string[];\n  slottedHint?: HTMLSlotElement;\n  class?: string;\n  errorMap?: ErrorMap;\n}\n\n/**\n * CatFormHint is a functional component that represents the hint area of form elements.\n *\n * @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n  const { id, hint, slottedHint, errorMap } = props;\n  const errors = Object.entries(errorMap || {});\n  return (\n    <div aria-live=\"polite\" id={id + '-hint'} class=\"hint-section\">\n      {errors.length\n        ? errors.map(([key, params]) => (\n            <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n          ))\n        : [\n            hint &&\n              (Array.isArray(hint) ? (\n                hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n              ) : (\n                <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n              )),\n            slottedHint\n          ]}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/cat-form-hint/cat-form-hint.spec.js

@@ -2,14 +2,14 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { CatFormHint } from "./cat-form-hint";
 describe('CatFormHint', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [],
-      template: () => h(CatFormHint, { id: "host-id" })
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [],
+            template: () => h(CatFormHint, { id: "host-id" })
+        });
+        expect(page.root).toEqualHtml(`
      <div class="hint-section" id="host-id-hint" aria-live="polite"></div>
     `);
-  });
+    });
 });
 //# sourceMappingURL=cat-form-hint.spec.js.map

package/dist/collection/components/cat-form-hint/cat-form-hint.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-hint.spec.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,EAAE;MACd,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAC,WAAW,IAAC,EAAE,EAAC,SAAS,GAAe;KACzD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;KAE7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { CatFormHint } from './cat-form-hint';\n\ndescribe('CatFormHint', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [],\n      template: () => <CatFormHint id=\"host-id\"></CatFormHint>\n    });\n    expect(page.root).toEqualHtml(`\n     <div class=\"hint-section\" id=\"host-id-hint\" aria-live=\"polite\"></div>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-form-hint.spec.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,EAAE;YACd,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAC,WAAW,IAAC,EAAE,EAAC,SAAS,GAAe;SACzD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;KAE7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { CatFormHint } from './cat-form-hint';\n\ndescribe('CatFormHint', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [],\n      template: () => <CatFormHint id=\"host-id\"></CatFormHint>\n    });\n    expect(page.root).toEqualHtml(`\n     <div class=\"hint-section\" id=\"host-id-hint\" aria-live=\"polite\"></div>\n    `);\n  });\n});\n"]}