@haiilo/catalyst 0.11.0 → 0.14.0

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

@@ -1 +1 @@
-{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\n\nexport enum TypeIcons {\n  'success' = 'check-circle-filled',\n  'error' = 'sparkle-filled',\n  'info' = 'sparkle-filled'\n}\n\nexport const ToastPositions: { [key: string]: { gravity: 'top' | 'bottom'; position: 'left' | 'center' | 'right' } } = {\n  'top-left': {\n    gravity: 'top',\n    position: 'left'\n  },\n  'top-center': {\n    gravity: 'top',\n    position: 'center'\n  },\n  'top-right': {\n    gravity: 'top',\n    position: 'right'\n  },\n  'bottom-left': {\n    gravity: 'bottom',\n    position: 'left'\n  },\n  'bottom-center': {\n    gravity: 'bottom',\n    position: 'center'\n  },\n  'bottom-right': {\n    gravity: 'bottom',\n    position: 'right'\n  }\n};\n\nexport interface ToastPosition {\n  gravity: 'top' | 'bottom';\n  position: 'left' | 'center' | 'right';\n}\n\nexport interface ToastOptions {\n  /**\n   * HTML content of the toast\n   */\n  content: Node;\n  /**\n   * Show close button\n   */\n  close: boolean;\n  /**\n   * Toast position\n   */\n  position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /**\n   *  Type of toast\n   */\n  type: 'success' | 'info' | 'error';\n  /**\n   *  Invoked when the toast is clicked\n   */\n  onClick: () => void;\n  /**\n   * Toggle the default behavior of escaping HTML markup\n   */\n  escapeMarkup: boolean;\n}\n\nclass CatNotificationService {\n  private static DURATION = 8000;\n\n  toastHTMLTemplate(title: string, message = ' ', options?: Partial<ToastOptions>): HTMLElement {\n    const template = document.createElement('template');\n    const typeIcon = options?.type ? TypeIcons[options.type] : TypeIcons.info;\n    title = title.trim();\n    message = message.trim();\n    const hasMessage = message && message !== '';\n    const hasMessageClass = hasMessage ? 'has-message' : '';\n    template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n        <div class=\"cat-toastify-icon-wrapper ${options?.type ?? 'info'}\">\n             <cat-icon icon=\"${typeIcon}\"></cat-icon>\n        </div>\n        <div class=\"cat-toastify-title-wrapper ${hasMessageClass}\">\n            <div class=\"cat-toastify-title\">${title}</div></div>\n        ${hasMessage ? `<div class=\"cat-toastify-message\">${message}</div>` : ''}\n      </div>`;\n    return template.content.firstChild as HTMLElement;\n  }\n\n  error(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const position: ToastPosition = this.getPosition(options);\n    const toastOptions: Options = {\n      node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n      duration: CatNotificationService.DURATION,\n      close: true,\n      className: 'cat-toastify',\n      gravity: position.gravity,\n      position: position.position,\n      stopOnFocus: true\n    };\n    Toastify(toastOptions).showToast();\n  }\n\n  success(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const position: ToastPosition = this.getPosition(options);\n    const toastOptions: Options = {\n      node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n      duration: CatNotificationService.DURATION,\n      close: true,\n      className: 'cat-toastify',\n      gravity: position.gravity,\n      position: position.position,\n      stopOnFocus: true\n    };\n    Toastify(toastOptions).showToast();\n  }\n\n  info(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const position: ToastPosition = this.getPosition(options);\n    const toastOptions: Options = {\n      node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n      duration: CatNotificationService.DURATION,\n      close: true,\n      className: 'cat-toastify',\n      gravity: position.gravity,\n      position: position.position,\n      stopOnFocus: true\n    };\n    Toastify(toastOptions).showToast();\n  }\n\n  private getPosition(options?: Partial<ToastOptions>): ToastPosition {\n    const position: ToastPosition = {\n      gravity: 'bottom',\n      position: 'right'\n    };\n    if (options?.position && ToastPositions[options.position]) {\n      position.position = ToastPositions[options.position].position;\n      position.gravity = ToastPositions[options.position].gravity;\n    }\n    return position;\n  }\n}\n\nexport const NotificationsService = new CatNotificationService();\n"]}
+{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\n\nexport enum TypeIcons {\n  'success' = 'check-circle-filled',\n  'error' = 'cross-circle-filled',\n  'info' = 'danger-filled',\n  'primary' = 'star-circle-filled',\n  'secondary' = 'info-circle-filled'\n}\n\nexport const ToastPositions: { [key: string]: { gravity: 'top' | 'bottom'; position: 'left' | 'center' | 'right' } } = {\n  'top-left': {\n    gravity: 'top',\n    position: 'left'\n  },\n  'top-center': {\n    gravity: 'top',\n    position: 'center'\n  },\n  'top-right': {\n    gravity: 'top',\n    position: 'right'\n  },\n  'bottom-left': {\n    gravity: 'bottom',\n    position: 'left'\n  },\n  'bottom-center': {\n    gravity: 'bottom',\n    position: 'center'\n  },\n  'bottom-right': {\n    gravity: 'bottom',\n    position: 'right'\n  }\n};\n\nexport interface ToastPosition {\n  gravity: 'top' | 'bottom';\n  position: 'left' | 'center' | 'right';\n}\n\nexport interface ToastOptions {\n  /**\n   * HTML content of the toast\n   */\n  content: Node;\n  /**\n   * Show close button\n   */\n  close: boolean;\n  /**\n   * Toast position\n   */\n  position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /**\n   *  Type of toast\n   */\n  type: 'success' | 'info' | 'error' | 'primary' | 'secondary';\n  /**\n   *  Invoked when the toast is clicked\n   */\n  onClick: () => void;\n  /**\n   * Toggle the default behavior of escaping HTML markup\n   */\n  escapeMarkup: boolean;\n}\n\nclass CatNotificationService {\n  private static DURATION = 80000;\n\n  error(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  success(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  info(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  primary(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  secondary(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  private toastHTMLTemplate(title: string, message = ' ', options?: Partial<ToastOptions>): HTMLElement {\n    const template = document.createElement('template');\n    const typeIcon = options?.type ? TypeIcons[options.type] : TypeIcons.secondary;\n    title = title.trim();\n    message = message.trim();\n    const hasMessage = message && message !== '';\n    const hasMessageClass = hasMessage ? 'has-message' : '';\n    template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n        <div class=\"cat-toastify-icon-wrapper ${options?.type ?? 'secondary'}\">\n             <cat-icon icon=\"${typeIcon}\"></cat-icon>\n        </div>\n        <div class=\"cat-toastify-title-wrapper ${hasMessageClass}\">\n            <div class=\"cat-toastify-title\">${title}</div></div>\n        ${hasMessage ? `<div class=\"cat-toastify-message\">${message}</div>` : ''}\n      </div>`;\n    return template.content.firstChild as HTMLElement;\n  }\n\n  private getPosition(options?: Partial<ToastOptions>): ToastPosition {\n    const position: ToastPosition = {\n      gravity: 'bottom',\n      position: 'left'\n    };\n    if (options?.position && ToastPositions[options.position]) {\n      position.position = ToastPositions[options.position].position;\n      position.gravity = ToastPositions[options.position].gravity;\n    }\n    return position;\n  }\n\n  private extractOptions(title: string, message = ' ', options?: Partial<ToastOptions>): Options {\n    const position: ToastPosition = this.getPosition(options);\n    return {\n      node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n      duration: CatNotificationService.DURATION,\n      close: true,\n      className: 'cat-toastify',\n      gravity: position.gravity,\n      position: position.position,\n      stopOnFocus: true,\n      offset: {\n        x: '1.5rem',\n        y: '1.5rem'\n      }\n    };\n  }\n}\n\nexport const NotificationsService = new CatNotificationService();\n"]}

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

@@ -12,6 +12,7 @@
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
   line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
   margin: 0;
 }
 
@@ -31,6 +32,7 @@ label {
   gap: 0.5rem;
   font-size: 0.9375rem;
   line-height: 1.25rem;
+  font-weight: var(--cat-font-weight-body, 400);
   cursor: pointer;
 }
 
@@ -53,6 +55,7 @@ label {
   top: calc(50% - 0.375rem);
   left: calc(50% - 0.375rem);
   visibility: hidden;
+  pointer-events: none;
 }
 
 input {

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

@@ -65,6 +65,11 @@ export class CatRadioGroup {
     this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
     this.catChange.emit();
   }
+  onBlur(event) {
+    if (!event.relatedTarget) {
+      this.catBlur.emit(event);
+    }
+  }
   render() {
     return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel },
       h("slot", null)));
@@ -189,6 +194,25 @@ export class CatRadioGroup {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "catBlur",
+      "name": "catBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the radio group loses focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
@@ -216,6 +240,12 @@ export class CatRadioGroup {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": true,
+      "passive": false
     }]; }
 }
 //# sourceMappingURL=cat-radio-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => {\n      catRadio.name = newName;\n    });\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => {\n      catRadio.checked = catRadio.value === newValue;\n    });\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (disabled) {\n        catRadio.disabled = disabled;\n      }\n    });\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].setFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    this.value = catRadioElement?.value;\n    this.catChange.emit();\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => {\n      catRadio.name = newName;\n    });\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => {\n      catRadio.checked = catRadio.value === newValue;\n    });\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (disabled) {\n        catRadio.disabled = disabled;\n      }\n    });\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].setFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    this.value = catRadioElement?.value;\n    this.catChange.emit();\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}

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

@@ -192,6 +192,7 @@ label + p {
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
   line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
   margin: 0;
 }
 
@@ -201,6 +202,7 @@ label + p {
   gap: 0.5rem;
   font-size: 0.9375rem;
   line-height: 1.25rem;
+  font-weight: var(--cat-font-weight-body, 400);
   margin-bottom: 1rem;
 }
 
@@ -230,6 +232,7 @@ label.hidden {
   margin-left: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
   color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }
 
@@ -238,7 +241,7 @@ label.hidden {
   overflow: hidden;
   font-size: 16px;
 }
-.choices:focus {
+.choices.is-focused, .choices:focus {
   outline: none;
   box-shadow: 0 1px 4px 0 #101d3033;
 }
@@ -247,7 +250,6 @@ label.hidden {
 }
 .choices.is-open {
   overflow: visible;
-  box-shadow: 0 1px 4px 0 #101d3033;
 }
 .choices.is-disabled .choices__inner,
 .choices.is-disabled .choices__input {

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, State, Watch, Listen } from '@stencil/core';
 import Choices from 'choices.js';
 import log from 'loglevel';
 import { CatFormHint } from '../cat-form-hint/cat-form-hint';
@@ -77,7 +77,8 @@ export class CatSelect {
     (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
     const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
     const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
-    const vItemValues = [...this.value];
+    const value = this.value || [];
+    const vItemValues = [...value];
     // remove duplicate items
     (_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
     vItemsArray.forEach(vItem => {
@@ -93,6 +94,7 @@ export class CatSelect {
     });
     (_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
   }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setValueHandler(value) {
     var _a, _b;
     if (this.resetItemsOnNextValueChange) {
@@ -109,35 +111,47 @@ export class CatSelect {
     }
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     this.init();
     const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
     if (attachedInternals) {
       const root = attachedInternals.shadowRoot;
+      this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
       this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
       this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
     }
-    (_d = this.choiceInner) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.showDropdownHandler.bind(this));
-    (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.addEventListener('change', this.onChange.bind(this));
-    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('search', this.onSearch.bind(this));
-    (_g = this.choiceDropdown) === null || _g === void 0 ? void 0 : _g.addEventListener('scroll', this.onScrolledBottom.bind(this));
+    (_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
+    (_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
+    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
+    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
+    (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
+    (_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
+    (_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
     if (this.multiple) {
-      (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('choice', this.onChoice.bind(this));
+      (_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
       this.createRemoveItemButton();
     }
   }
   disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     (_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
     this.choice = undefined;
-    (_b = this.choiceInner) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.showDropdownHandler.bind(this));
-    (_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.onChange.bind(this));
-    (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('search', this.onSearch.bind(this));
-    (_e = this.choiceDropdown) === null || _e === void 0 ? void 0 : _e.removeEventListener('scroll', this.onScrolledBottom.bind(this));
+    (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
+    (_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
+    (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
+    (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
+    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
+    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
+    (_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
     if (this.multiple) {
-      (_f = this.removeElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('choice', this.onChoice.bind(this));
+      (_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.bind(this));
     }
   }
+  onBlur(event) {
+    this.catBlur.emit(event);
+  }
   render() {
     return (h(Host, null,
       (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
@@ -256,12 +270,30 @@ export class CatSelect {
     this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
     this.catChange.emit(this.value);
   }
+  showMultipleFocus() {
+    var _a, _b;
+    if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
+      (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
+    }
+  }
+  resetFocus() {
+    var _a, _b, _c;
+    if (!this.isFocused()) {
+      if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
+        (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+      }
+      (_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+  }
+  isFocused() {
+    return document.activeElement === this.hostElement;
+  }
   onChoice(event) {
     var _a;
     const customEvent = event;
-    const coice = customEvent.detail.choice;
-    if (coice.selected) {
-      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(coice.value);
+    const choice = customEvent.detail.choice;
+    if (choice.selected) {
+      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
       this.onChange();
     }
   }
@@ -293,8 +325,7 @@ export class CatSelect {
   }
   updateRemoveItemButtonVisibility() {
     var _a, _b, _c;
-    const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
-    if (items.length) {
+    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
       (_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
     }
     else {
@@ -305,7 +336,7 @@ export class CatSelect {
     var _a;
     event.stopPropagation();
     (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
-    this.updateRemoveItemButtonVisibility();
+    this.onChange();
   }
   static get is() { return "cat-select"; }
   static get encapsulation() { return "shadow"; }
@@ -563,6 +594,25 @@ export class CatSelect {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "catBlur",
+      "name": "catBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select loses focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
@@ -572,5 +622,12 @@ export class CatSelect {
       "propName": "value",
       "methodName": "setValueHandler"
     }]; }
+  static get listeners() { return [{
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
 }
 //# sourceMappingURL=cat-select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-select.js","sourceRoot":"","sources":["../../../src/components/cat-select/cat-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Item, Options } from 'choices.js';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\nconst getOptionTemplate = (data: Item): string => {\n  if (data.customProperties?.imageUrl) {\n    return `\n    <div class=\"d-flex align-items-center\">\n      <img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />\n      ${data.label}\n    </div>\n    `;\n  }\n  return `<cat-checkbox label=\"${data.label}\" checked=\"${data.selected}\"></cat-checkbox>`;\n};\n\n/**\n * A single option in the select.\n */\nexport type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProperties'>;\n\n/**\n * Select lets user choose one option from an options menu. Consider using\n * select when you have 6 or more options. Select component supports any content\n * type.\n *\n * @slot hint - Optional hint element to be displayed with the select.\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 label - The label content.\n */\n@Component({\n  tag: 'cat-select',\n  styleUrl: 'cat-select.scss',\n  shadow: true\n})\nexport class CatSelect {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-select-${nextUniqueId++}`;\n  private resetItemsOnNextValueChange = true;\n\n  private choice?: Choices;\n  private choiceInner?: Element;\n  private choiceDropdown?: Element;\n  private selectElement?: HTMLSelectElement;\n  private removeElement?: HTMLCatButtonElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * The label for the select.\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   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The available options for the input.\n   */\n  @Prop() items: CatSelectItem[] = [];\n\n  /**\n   * The value of the select.\n   */\n  @Prop({ mutable: true }) value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  /**\n   * Disable the select.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Enable multiple selection.\n   */\n  @Prop() multiple = false;\n\n  /**\n   * The placeholder for the select.\n   */\n  @Prop() placeholder = '';\n\n  /**\n   * Whether the dropdown should appear above `(top)` or below `(bottom)` the\n   * input. By default, if there is not enough space within the window the\n   * dropdown will appear above the input, otherwise below it.\n   */\n  @Prop() position: 'auto' | 'top' | 'bottom' = 'auto';\n\n  /**\n   * Enable search for the select.\n   */\n  @Prop() search = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the search is triggered.\n   */\n  @Event() catSearch!: EventEmitter;\n\n  /**\n   * Emitted when scrolled to the bottom.\n   */\n  @Event() catScrolledBottom!: EventEmitter;\n\n  @Watch('items')\n  setChoicesHandler(items: CatSelectItem[]) {\n    const isSelected = (item: CatSelectItem) => this.value?.includes(item.value);\n    const choices = items.map(item => ({ ...item, selected: isSelected(item) }));\n    this.choice?.setChoices(choices, 'value', 'label', true);\n\n    const vItems = this.choice?.getValue() || [];\n    const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]) as Item[];\n    const vItemValues = [...this.value];\n\n    // remove duplicate items\n    this.choice?.unhighlightAll();\n    vItemsArray.forEach(vItem => {\n      const index = vItemValues.indexOf(vItem.value);\n      if (index > -1) {\n        vItemValues.splice(index, 1);\n      } else {\n        vItem.choiceId = -1; // disconnect item from choice\n        this.choice?.highlightItem(vItem, false);\n      }\n    });\n    this.choice?.removeHighlightedItems(false);\n  }\n\n  @Watch('value')\n  setValueHandler(value?: any) { // eslint-disable-line @typescript-eslint/no-explicit-any\n    if (this.resetItemsOnNextValueChange) {\n      this.choice?.removeActiveItems(-1);\n    }\n    this.resetItemsOnNextValueChange = true;\n    this.choice?.setChoiceByValue(value);\n    this.multiple && this.updateRemoveItemButtonVisibility();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on select', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.init();\n    const attachedInternals: ElementInternals | undefined = this.hostElement.attachInternals?.();\n    if (attachedInternals) {\n      const root = attachedInternals.shadowRoot;\n      this.choiceInner = root?.querySelector('.choices__inner') || undefined;\n      this.choiceDropdown = root?.querySelector('.choices__list--dropdown')?.firstElementChild || undefined;\n    }\n    this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.addEventListener('change', this.onChange.bind(this));\n    this.selectElement?.addEventListener('search', this.onSearch.bind(this));\n    this.choiceDropdown?.addEventListener('scroll', this.onScrolledBottom.bind(this));\n    if (this.multiple) {\n      this.selectElement?.addEventListener('choice', this.onChoice.bind(this));\n      this.createRemoveItemButton();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.choice?.destroy();\n    this.choice = undefined;\n    this.choiceInner?.removeEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.removeEventListener('change', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('search', this.onSearch.bind(this));\n    this.choiceDropdown?.removeEventListener('scroll', this.onScrolledBottom.bind(this));\n    if (this.multiple) {\n      this.removeElement?.removeEventListener('choice', this.onChoice.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <select\n          id={this.id}\n          ref={el => (this.selectElement = el)}\n          multiple={this.multiple}\n          disabled={this.disabled}\n        ></select>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private init() {\n    const component = this; // eslint-disable-line @typescript-eslint/no-this-alias\n    const removeItemText = (value: string) => this.i18n.t('select.removeItem', { value });\n    const config = {\n      allowHTML: true,\n      removeItemButton: true,\n      duplicateItemsAllowed: false,\n      delimiter: '',\n      paste: false,\n      searchEnabled: this.search,\n      searchChoices: false,\n      position: this.position,\n      resetScrollPosition: false,\n      placeholder: !!this.placeholder,\n      placeholderValue: this.placeholder || '',\n      searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),\n      renderSelectedChoices: 'always' as 'auto' | 'always',\n      loadingText: this.i18n.t('select.loading'),\n      noResultsText: this.i18n.t('select.noResults'),\n      noChoicesText: this.i18n.t('select.noChoices'),\n      itemSelectText: this.i18n.t('select.selectItem'),\n      addItemText: (value: string) => this.i18n.t('select.addItem', { value }),\n      maxItemText: (maxItemCount: number) => this.i18n.t('select.maxItem', { maxItemCount }),\n      uniqueItemText: this.i18n.t('select.uniqueItem'),\n      customAddItemText: this.i18n.t('select.customAddItem'),\n      callbackOnInit: function () {\n        const choice = this as unknown as Choices;\n        choice.setChoices(component.items, 'value', 'label', true);\n        choice.setChoiceByValue(component.value);\n      }\n    };\n\n    const configSingle = {\n      callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n        return {\n          item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n            const template = data.customProperties?.imageUrl\n              ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />`\n              : '';\n            return strToEl(\n              `\n              <div class=\"${classNames.item} ${\n                data.highlighted ? classNames.highlightedState : classNames.itemSelectable\n              } ${data.placeholder ? classNames.placeholder : ''}\" data-item data-id=\"${data.id}\" data-value=\"${\n                data.value\n              }\" ${data.active ? 'aria-selected=\"true\"' : ''} ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n                  <span>${template}</span> ${data.label}\n                  <button type=\"button\"\n                    class=\"${classNames.button}\"\n                    aria-label=\"${removeItemText(data.label)}\"\n                    data-button>${removeItemText(data.label)}</button>\n              </div>\n              `\n            );\n          }\n        };\n      }\n    };\n\n    const configMultiple = {\n      callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n        const itemSelectText = config.itemSelectText;\n        return {\n          item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n            const template = data.customProperties?.imageUrl\n              ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem;\" />`\n              : '';\n            return strToEl(\n              `<div class=\"\n                ${classNames.item}\n                ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}\n                ${data.placeholder ? classNames.placeholder : ''}\"\n                data-item data-id=\"${data.id}\" data-value=\"${data.value}\"\n                ${data.active ? 'aria-selected=\"true\"' : ''}\n                ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n                  ${template}\n                  ${data.label}\n                  <button type=\"button\"\n                    class=\"${classNames.button}\"\n                    aria-label=\"${removeItemText(data.label)}\"\n                    data-button>${removeItemText(data.label)}</button>\n              </div>`\n            );\n          },\n          choice: function ({ classNames }: { classNames: ClassNames }, data: Item) {\n            const template = getOptionTemplate(data);\n            const className = `${String(classNames.item)} ${String(classNames.itemChoice)}\n                  ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}\n                  ${data.selected ? 'choices__item--selected' : ''}`;\n            return strToEl(\n              `<div class=\"${className}\"\n                data-select-text=\"${itemSelectText}\"\n                data-choice data-id=\"${String(data.id)}\" data-value=\"${String(data.value)}\"\n                ${data.disabled ? 'data-choice-disabled aria-disabled=\"true\"' : 'data-choice-selectable'}\n                ${data.groupId && data.groupId > 0 ? 'role=\"treeitem\"' : 'role=\"option\"'}>\n                  ${template}\n              </div>`\n            );\n          }\n        };\n      }\n    };\n\n    const settings: Partial<Options> = this.multiple\n      ? { ...config, ...configMultiple }\n      : { ...config, ...configSingle };\n    this.choice = new Choices(this.selectElement, settings);\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 onChange() {\n    this.resetItemsOnNextValueChange = false;\n    this.value = this.choice?.getValue(true);\n    this.catChange.emit(this.value);\n  }\n\n  private onChoice(event: Event) {\n    const customEvent = event as CustomEvent<{ choice: Choice }>;\n    const coice = customEvent.detail.choice;\n    if (coice.selected) {\n      this.choice?.removeActiveItemsByValue(coice.value);\n      this.onChange();\n    }\n  }\n\n  private onSearch(event: Event) {\n    const customEvent = event as CustomEvent<{ value: string }>;\n    this.catSearch.emit(customEvent.detail.value);\n  }\n\n  private onScrolledBottom() {\n    const scrolledBottom =\n      this.choiceDropdown?.scrollHeight ===\n      (this.choiceDropdown?.scrollTop || 0) + (this.choiceDropdown?.clientHeight || 0);\n    if (scrolledBottom) {\n      this.catScrolledBottom.emit();\n    }\n  }\n\n  private showDropdownHandler() {\n    !this.disabled && this.choice?.showDropdown();\n  }\n\n  private createRemoveItemButton() {\n    this.removeElement = document.createElement('cat-button') as HTMLCatButtonElement;\n    this.removeElement.icon = 'cross-circle-outlined';\n    this.removeElement.iconOnly = true;\n    this.removeElement.a11yLabel = this.i18n.t('select.removeItem');\n    this.updateRemoveItemButtonVisibility();\n    this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));\n    this.choiceInner?.appendChild(this.removeElement);\n  }\n\n  private updateRemoveItemButtonVisibility() {\n    const items = Array.from(this.choice?.getValue() as Item[]);\n    if (items.length) {\n      this.removeElement?.removeAttribute('hidden');\n    } else {\n      this.removeElement?.setAttribute('hidden', 'true');\n    }\n  }\n\n  private onRemoveItemButtonClick(event: Event) {\n    event.stopPropagation();\n    this.choice?.removeActiveItems(-1);\n    this.updateRemoveItemButtonVisibility();\n  }\n}\n"]}
+{"version":3,"file":"cat-select.js","sourceRoot":"","sources":["../../../src/components/cat-select/cat-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,OAA8C,MAAM,YAAY,CAAC;AACxE,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB,MAAM,iBAAiB,GAAG,CAAC,IAAU,EAAU,EAAE;;EAC/C,IAAI,MAAA,IAAI,CAAC,gBAAgB,0CAAE,QAAQ,EAAE;IACnC,OAAO;;8CAEmC,IAAI,CAAC,gBAAgB,CAAC,QAAQ;QACpE,IAAI,CAAC,KAAK;;KAEb,CAAC;GACH;EACD,OAAO,wBAAwB,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,QAAQ,mBAAmB,CAAC;AAC1F,CAAC,CAAC;AAOF;;;;;;;;GAQG;AAMH,MAAM,OAAO,SAAS;EALtB;IAMmB,SAAI,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;IACrC,OAAE,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;IAC7C,gCAA2B,GAAG,IAAI,CAAC;IAWlC,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAE5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,UAAK,GAAoB,EAAE,CAAC;IAOpC;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,gBAAW,GAAG,EAAE,CAAC;IAEzB;;;;OAIG;IACK,aAAQ,GAA8B,MAAM,CAAC;IAErD;;OAEG;IACK,WAAM,GAAG,KAAK,CAAC;GA6UxB;EAjTC,iBAAiB,CAAC,KAAsB;;IACtC,MAAM,UAAU,GAAG,CAAC,IAAmB,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC;IAC7E,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,iCAAM,IAAI,KAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,IAAG,CAAC,CAAC;IAC7E,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAW,CAAC;IAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;IAE/B,yBAAyB;IACzB,MAAA,IAAI,CAAC,MAAM,0CAAE,cAAc,EAAE,CAAC;IAC9B,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;MAC1B,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;MAC/C,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;QACd,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OAC9B;WAAM;QACL,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,8BAA8B;QACnD,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;OAC1C;IACH,CAAC,CAAC,CAAC;IACH,MAAA,IAAI,CAAC,MAAM,0CAAE,sBAAsB,CAAC,KAAK,CAAC,CAAC;EAC7C,CAAC;EAGD,8DAA8D;EAC9D,eAAe,CAAC,KAAW;;IACzB,IAAI,IAAI,CAAC,2BAA2B,EAAE;MACpC,MAAA,IAAI,CAAC,MAAM,0CAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;KACpC;IACD,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;IACxC,MAAA,IAAI,CAAC,MAAM,0CAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gCAAgC,EAAE,CAAC;EAC3D,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,KAAK,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACxD;EACH,CAAC;EAED,gBAAgB;;IACd,IAAI,CAAC,IAAI,EAAE,CAAC;IACZ,MAAM,iBAAiB,GAAiC,MAAA,MAAA,IAAI,CAAC,WAAW,EAAC,eAAe,kDAAI,CAAC;IAC7F,IAAI,iBAAiB,EAAE;MACrB,MAAM,IAAI,GAAG,iBAAiB,CAAC,UAAU,CAAC;MAC1C,IAAI,CAAC,cAAc,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CAAC,UAAU,CAAC,KAAI,SAAS,CAAC;MACnE,IAAI,CAAC,WAAW,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CAAC,iBAAiB,CAAC,KAAI,SAAS,CAAC;MACvE,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CAAC,0BAA0B,CAAC,0CAAE,iBAAiB,KAAI,SAAS,CAAC;KACvG;IACD,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACjF,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/E,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAClF,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MACzE,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;IACvB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IACxB,MAAA,IAAI,CAAC,cAAc,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9E,MAAA,IAAI,CAAC,WAAW,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACpF,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3F,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3F,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAClF,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5E,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5E,MAAA,IAAI,CAAC,cAAc,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC7E;EACH,CAAC;EAGD,MAAM,CAAC,KAAiB;IACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CACvC,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE;QAC1D,YAAM,IAAI,EAAC,OAAO;UACf,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK;UAClE,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;YAC3C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAC1B,CACR,CACI,CACD,CACT;MACD,cACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACf;MACT,IAAI,CAAC,WAAW,CACZ,CACR,CAAC;EACJ,CAAC;EAEO,IAAI;IACV,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,uDAAuD;IAC/E,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACtF,MAAM,MAAM,GAAG;MACb,SAAS,EAAE,IAAI;MACf,gBAAgB,EAAE,IAAI;MACtB,qBAAqB,EAAE,KAAK;MAC5B,SAAS,EAAE,EAAE;MACb,KAAK,EAAE,KAAK;MACZ,aAAa,EAAE,IAAI,CAAC,MAAM;MAC1B,aAAa,EAAE,KAAK;MACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,mBAAmB,EAAE,KAAK;MAC1B,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW;MAC/B,gBAAgB,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE;MACxC,sBAAsB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC;MAC/D,qBAAqB,EAAE,QAA6B;MACpD,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;MAC1C,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;MAC9C,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;MAC9C,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;MAChD,WAAW,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,CAAC;MACxE,WAAW,EAAE,CAAC,YAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,CAAC;MACtF,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;MAChD,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC;MACtD,cAAc,EAAE;QACd,MAAM,MAAM,GAAG,IAA0B,CAAC;QAC1C,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QAC3D,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;MAC3C,CAAC;KACF,CAAC;IAEF,MAAM,YAAY,GAAG;MACnB,yBAAyB,EAAE,CAAC,OAAqC,EAAE,EAAE;QACnE,OAAO;UACL,IAAI,EAAE,CAAC,EAAE,UAAU,EAA8B,EAAE,IAAU,EAAE,EAAE;;YAC/D,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,QAAQ;cAC9C,CAAC,CAAC,yCAAyC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,mCAAmC;cAC5G,CAAC,CAAC,EAAE,CAAC;YACP,OAAO,OAAO,CACZ;4BACc,UAAU,CAAC,IAAI,IAC3B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,cAC9D,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,wBAAwB,IAAI,CAAC,EAAE,iBAC/E,IAAI,CAAC,KACP,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;0BACjF,QAAQ,WAAW,IAAI,CAAC,KAAK;;6BAE1B,UAAU,CAAC,MAAM;kCACZ,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;kCAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;eAE7C,CACF,CAAC;UACJ,CAAC;SACF,CAAC;MACJ,CAAC;KACF,CAAC;IAEF,MAAM,cAAc,GAAG;MACrB,yBAAyB,EAAE,CAAC,OAAqC,EAAE,EAAE;QACnE,MAAM,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;QAC7C,OAAO;UACL,IAAI,EAAE,CAAC,EAAE,UAAU,EAA8B,EAAE,IAAU,EAAE,EAAE;;YAC/D,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,QAAQ;cAC9C,CAAC,CAAC,yCAAyC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,oCAAoC;cAC7G,CAAC,CAAC,EAAE,CAAC;YACP,OAAO,OAAO,CACZ;kBACI,UAAU,CAAC,IAAI;kBACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc;kBAC1E,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qCAC3B,IAAI,CAAC,EAAE,iBAAiB,IAAI,CAAC,KAAK;kBACrD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;kBACzC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;oBACzC,QAAQ;oBACR,IAAI,CAAC,KAAK;;6BAED,UAAU,CAAC,MAAM;kCACZ,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;kCAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;qBACvC,CACR,CAAC;UACJ,CAAC;UACD,MAAM,EAAE,UAAU,EAAE,UAAU,EAA8B,EAAE,IAAU;YACtE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,SAAS,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC;oBACrE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC;oBAC3E,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YACzD,OAAO,OAAO,CACZ,eAAe,SAAS;oCACF,cAAc;uCACX,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;kBACvE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,wBAAwB;kBACtF,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe;oBACpE,QAAQ;qBACP,CACR,CAAC;UACJ,CAAC;SACF,CAAC;MACJ,CAAC;KACF,CAAC;IAEF,MAAM,QAAQ,GAAqB,IAAI,CAAC,QAAQ;MAC9C,CAAC,iCAAM,MAAM,GAAK,cAAc,EAChC,CAAC,iCAAM,MAAM,GAAK,YAAY,CAAE,CAAC;IACnC,IAAI,CAAC,MAAM,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;EAC1D,CAAC;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAC/B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,CACF,CAAC;EACJ,CAAC;EAEO,QAAQ;;IACd,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;IACzC,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAEO,iBAAiB;;IACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA,EAAE;MAC/F,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;KAClD;EACH,CAAC;EAEO,UAAU;;IAChB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;MACrB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,CAAC,UAAU,CAAC,CAAA,EAAE;QAClD,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;OACpD;MACD,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAC9B;EACH,CAAC;EAEO,SAAS;IACf,OAAO,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,CAAC;EACrD,CAAC;EAEO,QAAQ,CAAC,KAAY;;IAC3B,MAAM,WAAW,GAAG,KAAwC,CAAC;IAC7D,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC;IACzC,IAAI,MAAM,CAAC,QAAQ,EAAE;MACnB,MAAA,IAAI,CAAC,MAAM,0CAAE,wBAAwB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;MACpD,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;EACH,CAAC;EAEO,QAAQ,CAAC,KAAY;IAC3B,MAAM,WAAW,GAAG,KAAuC,CAAC;IAC5D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EAChD,CAAC;EAEO,gBAAgB;;IACtB,MAAM,cAAc,GAClB,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY;MACjC,CAAC,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,KAAI,CAAC,CAAC,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,KAAI,CAAC,CAAC,CAAC;IACnF,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;EACH,CAAC;EAEO,mBAAmB;;IACzB,CAAC,IAAI,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,EAAE,CAAA,CAAC;EAChD,CAAC;EAEO,sBAAsB;;IAC5B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;IAClF,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,uBAAuB,CAAC;IAClD,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;IAChE,IAAI,CAAC,gCAAgC,EAAE,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACtF,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EACpD,CAAC;EAEO,gCAAgC;;IACtC,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAAE;MACtB,MAAA,IAAI,CAAC,aAAa,0CAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;KAC/C;SAAM;MACL,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KACpD;EACH,CAAC;EAEO,uBAAuB,CAAC,KAAY;;IAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAA,IAAI,CAAC,MAAM,0CAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch, Listen } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Item, Options } from 'choices.js';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\nconst getOptionTemplate = (data: Item): string => {\n  if (data.customProperties?.imageUrl) {\n    return `\n    <div class=\"d-flex align-items-center\">\n      <img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />\n      ${data.label}\n    </div>\n    `;\n  }\n  return `<cat-checkbox label=\"${data.label}\" checked=\"${data.selected}\"></cat-checkbox>`;\n};\n\n/**\n * A single option in the select.\n */\nexport type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProperties'>;\n\n/**\n * Select lets user choose one option from an options menu. Consider using\n * select when you have 6 or more options. Select component supports any content\n * type.\n *\n * @slot hint - Optional hint element to be displayed with the select.\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 label - The label content.\n */\n@Component({\n  tag: 'cat-select',\n  styleUrl: 'cat-select.scss',\n  shadow: true\n})\nexport class CatSelect {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-select-${nextUniqueId++}`;\n  private resetItemsOnNextValueChange = true;\n\n  private choice?: Choices;\n  private choicesElement?: HTMLElement;\n  private choiceInner?: Element;\n  private choiceDropdown?: Element;\n  private selectElement?: HTMLSelectElement;\n  private removeElement?: HTMLCatButtonElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * The label for the select.\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   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The available options for the input.\n   */\n  @Prop() items: CatSelectItem[] = [];\n\n  /**\n   * The value of the select.\n   */\n  @Prop({ mutable: true }) value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  /**\n   * Disable the select.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Enable multiple selection.\n   */\n  @Prop() multiple = false;\n\n  /**\n   * The placeholder for the select.\n   */\n  @Prop() placeholder = '';\n\n  /**\n   * Whether the dropdown should appear above `(top)` or below `(bottom)` the\n   * input. By default, if there is not enough space within the window the\n   * dropdown will appear above the input, otherwise below it.\n   */\n  @Prop() position: 'auto' | 'top' | 'bottom' = 'auto';\n\n  /**\n   * Enable search for the select.\n   */\n  @Prop() search = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the search is triggered.\n   */\n  @Event() catSearch!: EventEmitter;\n\n  /**\n   * Emitted when scrolled to the bottom.\n   */\n  @Event() catScrolledBottom!: EventEmitter;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('items')\n  setChoicesHandler(items: CatSelectItem[]) {\n    const isSelected = (item: CatSelectItem) => this.value?.includes(item.value);\n    const choices = items.map(item => ({ ...item, selected: isSelected(item) }));\n    this.choice?.setChoices(choices, 'value', 'label', true);\n\n    const vItems = this.choice?.getValue() || [];\n    const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]) as Item[];\n    const value = this.value || [];\n    const vItemValues = [...value];\n\n    // remove duplicate items\n    this.choice?.unhighlightAll();\n    vItemsArray.forEach(vItem => {\n      const index = vItemValues.indexOf(vItem.value);\n      if (index > -1) {\n        vItemValues.splice(index, 1);\n      } else {\n        vItem.choiceId = -1; // disconnect item from choice\n        this.choice?.highlightItem(vItem, false);\n      }\n    });\n    this.choice?.removeHighlightedItems(false);\n  }\n\n  @Watch('value')\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setValueHandler(value?: any) {\n    if (this.resetItemsOnNextValueChange) {\n      this.choice?.removeActiveItems(-1);\n    }\n    this.resetItemsOnNextValueChange = true;\n    this.choice?.setChoiceByValue(value);\n    this.multiple && this.updateRemoveItemButtonVisibility();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on select', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.init();\n    const attachedInternals: ElementInternals | undefined = this.hostElement.attachInternals?.();\n    if (attachedInternals) {\n      const root = attachedInternals.shadowRoot;\n      this.choicesElement = root?.querySelector('.choices') || undefined;\n      this.choiceInner = root?.querySelector('.choices__inner') || undefined;\n      this.choiceDropdown = root?.querySelector('.choices__list--dropdown')?.firstElementChild || undefined;\n    }\n    this.choicesElement?.addEventListener('click', this.resetFocus.bind(this));\n    this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));\n    this.selectElement?.addEventListener('showDropdown', this.showMultipleFocus.bind(this));\n    this.selectElement?.addEventListener('removeItem', this.resetFocus.bind(this));\n    this.selectElement?.addEventListener('change', this.onChange.bind(this));\n    this.selectElement?.addEventListener('search', this.onSearch.bind(this));\n    this.choiceDropdown?.addEventListener('scroll', this.onScrolledBottom.bind(this));\n    if (this.multiple) {\n      this.selectElement?.addEventListener('choice', this.onChoice.bind(this));\n      this.createRemoveItemButton();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.choice?.destroy();\n    this.choice = undefined;\n    this.choicesElement?.removeEventListener('click', this.resetFocus.bind(this));\n    this.choiceInner?.removeEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));\n    this.selectElement?.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));\n    this.selectElement?.removeEventListener('removeItem', this.resetFocus.bind(this));\n    this.selectElement?.removeEventListener('change', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('search', this.onSearch.bind(this));\n    this.choiceDropdown?.removeEventListener('scroll', this.onScrolledBottom.bind(this));\n    if (this.multiple) {\n      this.removeElement?.removeEventListener('choice', this.onChoice.bind(this));\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    this.catBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <select\n          id={this.id}\n          ref={el => (this.selectElement = el)}\n          multiple={this.multiple}\n          disabled={this.disabled}\n        ></select>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private init() {\n    const component = this; // eslint-disable-line @typescript-eslint/no-this-alias\n    const removeItemText = (value: string) => this.i18n.t('select.removeItem', { value });\n    const config = {\n      allowHTML: true,\n      removeItemButton: true,\n      duplicateItemsAllowed: false,\n      delimiter: '',\n      paste: false,\n      searchEnabled: this.search,\n      searchChoices: false,\n      position: this.position,\n      resetScrollPosition: false,\n      placeholder: !!this.placeholder,\n      placeholderValue: this.placeholder || '',\n      searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),\n      renderSelectedChoices: 'always' as 'auto' | 'always',\n      loadingText: this.i18n.t('select.loading'),\n      noResultsText: this.i18n.t('select.noResults'),\n      noChoicesText: this.i18n.t('select.noChoices'),\n      itemSelectText: this.i18n.t('select.selectItem'),\n      addItemText: (value: string) => this.i18n.t('select.addItem', { value }),\n      maxItemText: (maxItemCount: number) => this.i18n.t('select.maxItem', { maxItemCount }),\n      uniqueItemText: this.i18n.t('select.uniqueItem'),\n      customAddItemText: this.i18n.t('select.customAddItem'),\n      callbackOnInit: function () {\n        const choice = this as unknown as Choices;\n        choice.setChoices(component.items, 'value', 'label', true);\n        choice.setChoiceByValue(component.value);\n      }\n    };\n\n    const configSingle = {\n      callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n        return {\n          item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n            const template = data.customProperties?.imageUrl\n              ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />`\n              : '';\n            return strToEl(\n              `\n              <div class=\"${classNames.item} ${\n                data.highlighted ? classNames.highlightedState : classNames.itemSelectable\n              } ${data.placeholder ? classNames.placeholder : ''}\" data-item data-id=\"${data.id}\" data-value=\"${\n                data.value\n              }\" ${data.active ? 'aria-selected=\"true\"' : ''} ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n                  <span>${template}</span> ${data.label}\n                  <button type=\"button\"\n                    class=\"${classNames.button}\"\n                    aria-label=\"${removeItemText(data.label)}\"\n                    data-button>${removeItemText(data.label)}</button>\n              </div>\n              `\n            );\n          }\n        };\n      }\n    };\n\n    const configMultiple = {\n      callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n        const itemSelectText = config.itemSelectText;\n        return {\n          item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n            const template = data.customProperties?.imageUrl\n              ? `<img class=\"choices-option-icon\" src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem;\" />`\n              : '';\n            return strToEl(\n              `<div class=\"\n                ${classNames.item}\n                ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}\n                ${data.placeholder ? classNames.placeholder : ''}\"\n                data-item data-id=\"${data.id}\" data-value=\"${data.value}\"\n                ${data.active ? 'aria-selected=\"true\"' : ''}\n                ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n                  ${template}\n                  ${data.label}\n                  <button type=\"button\"\n                    class=\"${classNames.button}\"\n                    aria-label=\"${removeItemText(data.label)}\"\n                    data-button>${removeItemText(data.label)}</button>\n              </div>`\n            );\n          },\n          choice: function ({ classNames }: { classNames: ClassNames }, data: Item) {\n            const template = getOptionTemplate(data);\n            const className = `${String(classNames.item)} ${String(classNames.itemChoice)}\n                  ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}\n                  ${data.selected ? 'choices__item--selected' : ''}`;\n            return strToEl(\n              `<div class=\"${className}\"\n                data-select-text=\"${itemSelectText}\"\n                data-choice data-id=\"${String(data.id)}\" data-value=\"${String(data.value)}\"\n                ${data.disabled ? 'data-choice-disabled aria-disabled=\"true\"' : 'data-choice-selectable'}\n                ${data.groupId && data.groupId > 0 ? 'role=\"treeitem\"' : 'role=\"option\"'}>\n                  ${template}\n              </div>`\n            );\n          }\n        };\n      }\n    };\n\n    const settings: Partial<Options> = this.multiple\n      ? { ...config, ...configMultiple }\n      : { ...config, ...configSingle };\n    this.choice = new Choices(this.selectElement, settings);\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 onChange() {\n    this.resetItemsOnNextValueChange = false;\n    this.value = this.choice?.getValue(true);\n    this.catChange.emit(this.value);\n  }\n\n  private showMultipleFocus() {\n    if (this.multiple && this.isFocused() && !this.choicesElement?.classList.contains('is-focused')) {\n      this.choicesElement?.classList.add('is-focused');\n    }\n  }\n\n  private resetFocus() {\n    if (!this.isFocused()) {\n      if (!this.choicesElement?.hasAttribute('tabindex')) {\n        this.choicesElement?.setAttribute('tabindex', '0');\n      }\n      this.choicesElement?.focus();\n    }\n  }\n\n  private isFocused() {\n    return document.activeElement === this.hostElement;\n  }\n\n  private onChoice(event: Event) {\n    const customEvent = event as CustomEvent<{ choice: Choice }>;\n    const choice = customEvent.detail.choice;\n    if (choice.selected) {\n      this.choice?.removeActiveItemsByValue(choice.value);\n      this.onChange();\n    }\n  }\n\n  private onSearch(event: Event) {\n    const customEvent = event as CustomEvent<{ value: string }>;\n    this.catSearch.emit(customEvent.detail.value);\n  }\n\n  private onScrolledBottom() {\n    const scrolledBottom =\n      this.choiceDropdown?.scrollHeight ===\n      (this.choiceDropdown?.scrollTop || 0) + (this.choiceDropdown?.clientHeight || 0);\n    if (scrolledBottom) {\n      this.catScrolledBottom.emit();\n    }\n  }\n\n  private showDropdownHandler() {\n    !this.disabled && this.choice?.showDropdown();\n  }\n\n  private createRemoveItemButton() {\n    this.removeElement = document.createElement('cat-button') as HTMLCatButtonElement;\n    this.removeElement.icon = 'cross-circle-outlined';\n    this.removeElement.iconOnly = true;\n    this.removeElement.a11yLabel = this.i18n.t('select.removeItem');\n    this.updateRemoveItemButtonVisibility();\n    this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));\n    this.choiceInner?.appendChild(this.removeElement);\n  }\n\n  private updateRemoveItemButtonVisibility() {\n    if (this.value?.length) {\n      this.removeElement?.removeAttribute('hidden');\n    } else {\n      this.removeElement?.setAttribute('hidden', 'true');\n    }\n  }\n\n  private onRemoveItemButtonClick(event: Event) {\n    event.stopPropagation();\n    this.choice?.removeActiveItems(-1);\n    this.onChange();\n  }\n}\n"]}

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

@@ -57,7 +57,7 @@ export class CatTab {
         "text": "The label of the tab."
       },
       "attribute": "label",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "icon": {
@@ -75,7 +75,7 @@ export class CatTab {
         "text": "The name of an icon to be displayed in the tab."
       },
       "attribute": "icon",
-      "reflect": false
+      "reflect": true
     },
     "iconOnly": {
       "type": "any",
@@ -97,7 +97,7 @@ export class CatTab {
         "text": "Hide the actual button content and only display the tab."
       },
       "attribute": "icon-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "iconRight": {
@@ -115,7 +115,7 @@ export class CatTab {
         "text": "Display the icon on the right."
       },
       "attribute": "icon-right",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "url": {
@@ -133,7 +133,7 @@ export class CatTab {
         "text": "A destination to link to, rendered in the href attribute of a link."
       },
       "attribute": "url",
-      "reflect": false
+      "reflect": true
     },
     "urlTarget": {
       "type": "string",
@@ -150,7 +150,7 @@ export class CatTab {
         "text": "Specifies where to open the linked document."
       },
       "attribute": "url-target",
-      "reflect": false
+      "reflect": true
     },
     "deactivated": {
       "type": "boolean",
@@ -167,7 +167,7 @@ export class CatTab {
         "text": "Specifies that the tab should be deactivated."
       },
       "attribute": "deactivated",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;EALnB;IAQE;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAOnB;;OAEG;IACK,aAAQ,GAAyB,KAAK,CAAC;IAE/C;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;IAY1B;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;GAqB7B;EAdC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;EACH,CAAC;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop() deactivated = false;\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() tabClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.tabClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}
+{"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;EALnB;IAQE;;OAEG;IACsB,UAAK,GAAG,EAAE,CAAC;IAOpC;;OAEG;IACsB,aAAQ,GAAyB,KAAK,CAAC;IAEhE;;OAEG;IACsB,cAAS,GAAG,KAAK,CAAC;IAY3C;;OAEG;IACsB,gBAAW,GAAG,KAAK,CAAC;GAqB9C;EAdC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;EACH,CAAC;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop({ reflect: true }) label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop({ reflect: true }) iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop({ reflect: true }) url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop({ reflect: true }) urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop({ reflect: true }) deactivated = false;\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() tabClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.tabClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}