@haiilo/catalyst 0.8.6 → 0.10.1

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

@@ -34,6 +34,10 @@ label {
   cursor: pointer;
 }
 
+.label-left {
+  flex-direction: row-reverse;
+}
+
 .radio {
   display: flex;
   position: relative;
@@ -71,6 +75,9 @@ input:focus-visible {
   outline-offset: 1px;
 }
 
+.label {
+  flex: 1 1 auto;
+}
 .is-hidden .label {
   position: absolute !important;
   width: 1px !important;

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

@@ -34,6 +34,10 @@ export class CatRadio {
      * Whether the radio is required.
      */
     this.required = false;
+    /**
+     * Whether the label should appear to the left of the radio component.
+     */
+    this.labelLeft = false;
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -52,7 +56,7 @@ export class CatRadio {
   }
   render() {
     return (h(Host, null,
-      h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } },
+      h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' },
         h("span", { class: "radio" },
           h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
           h("span", { class: "circle" })),
@@ -64,6 +68,7 @@ export class CatRadio {
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onChange(event) {
+    this.checked = true;
     this.value = this.input.value;
     this.catChange.emit(event);
   }
@@ -84,7 +89,7 @@ export class CatRadio {
   static get properties() { return {
     "checked": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -222,6 +227,24 @@ export class CatRadio {
       },
       "attribute": "hint",
       "reflect": false
+    },
+    "labelLeft": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the label should appear to the left of the radio component."
+      },
+      "attribute": "label-left",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,OAAE,GAAG,aAAa,EAAE,YAAY,EAAE,CAAC;IAK3C,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;IACK,YAAO,GAAG,KAAK,CAAC;IAExB;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAO5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;GA+F1B;EApEC,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,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACvD;EACH,CAAC;EAED;;;;;KAKG;EAEH,KAAK,CAAC,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;QAC7F,YAAM,KAAK,EAAC,OAAO;UACjB,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B;UACF,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACvB;QACP,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAC9D,CACD;MACP,IAAI,CAAC,WAAW,CACZ,CACR,CAAC;EACJ,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,CAAC,KAAY;IAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\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-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly id = `cat-radio-${++nextUniqueId}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Sets focus on the radio. Use this method instead of `radio.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.id} class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled }}>\n          <span class=\"radio\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onChange(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}
+{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\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-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly id = `cat-radio-${++nextUniqueId}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Sets focus on the radio. Use this method instead of `radio.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onChange(event: Event) {\n    this.checked = true;\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}

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

@@ -0,0 +1,179 @@
+import { Component, h, Prop, Element, Listen, Watch } from '@stencil/core';
+export class CatRadioGroup {
+  constructor() {
+    this.catRadioGroup = [];
+    /**
+     * Whether this radio group is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Whether the label of the radios should appear to the left of them.
+     */
+    this.labelLeft = false;
+  }
+  onNameChanged(newName) {
+    this.catRadioGroup.forEach(catRadio => {
+      catRadio.name = newName;
+    });
+  }
+  onDisabledChanged(disabled) {
+    this.catRadioGroup.forEach(catRadio => {
+      if (disabled) {
+        catRadio.disabled = disabled;
+      }
+    });
+  }
+  onLabelLeftChanged(labelLeft) {
+    this.catRadioGroup.forEach(catRadio => {
+      if (labelLeft) {
+        catRadio.labelLeft = labelLeft;
+      }
+    });
+  }
+  componentDidLoad() {
+    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
+    this.onNameChanged(this.name);
+    this.onDisabledChanged(this.disabled);
+    this.onLabelLeftChanged(this.labelLeft);
+    this.updateTabIndex();
+  }
+  onKeydown(event) {
+    var _a, _b;
+    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
+      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);
+      const activeElement = document.activeElement;
+      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);
+      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
+      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+      targetElements[targetIdx].setFocus();
+      (_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
+      this.updateTabIndex();
+      event.preventDefault();
+    }
+  }
+  onInput(event) {
+    const catRadioElement = this.catRadioGroup.find(value => value === event.target);
+    if (catRadioElement && catRadioElement.checked) {
+      const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);
+      catRadioElements.forEach(value => (value.checked = false));
+      this.updateTabIndex();
+    }
+  }
+  render() {
+    return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel },
+      h("slot", null)));
+  }
+  updateTabIndex() {
+    var _a, _b;
+    if (this.catRadioGroup.length) {
+      this.catRadioGroup.forEach(value => { var _a, _b; return (_b = (_a = value.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1'); });
+      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);
+      (_b = (_a = this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+    }
+  }
+  static get is() { return "cat-radio-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-radio-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-radio-group.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of the radio group component."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether this radio group is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "a11yLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds an accessible label for the radio group that\nit is only shown in assistive technologies, like screen readers."
+      },
+      "attribute": "a11y-label",
+      "reflect": false
+    },
+    "labelLeft": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the label of the radios should appear to the left of them."
+      },
+      "attribute": "label-left",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "name",
+      "methodName": "onNameChanged"
+    }, {
+      "propName": "disabled",
+      "methodName": "onDisabledChanged"
+    }, {
+      "propName": "labelLeft",
+      "methodName": "onLabelLeftChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "input",
+      "method": "onInput",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+//# sourceMappingURL=cat-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO3E,MAAM,OAAO,aAAa;EAL1B;IAMU,kBAAa,GAA0B,EAAE,CAAC;IASlD;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAQzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;GA6E3B;EA1EC,aAAa,CAAC,OAAgB;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACpC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;IAC1B,CAAC,CAAC,CAAC;EACL,CAAC;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACpC,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC;OAC9B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAGD,kBAAkB,CAAC,SAAkB;IACnC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACpC,IAAI,SAAS,EAAE;QACb,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;OAChC;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IAChF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAGD,SAAS,CAAC,KAAoB;;IAC5B,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MACxG,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;MACjF,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAoC,CAAC;MACpE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;MACvF,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAC3E,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;MAC9G,cAAc,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC;MACrC,MAAA,MAAA,cAAc,CAAC,SAAS,CAAC,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;MACtE,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;EACH,CAAC;EAGD,OAAO,CAAC,KAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;IACjF,IAAI,eAAe,IAAI,eAAe,CAAC,OAAO,EAAE;MAC9C,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,eAAe,CAAC,CAAC;MACvF,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;MAC3D,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,SAAS;MAC/C,eAAa,CACT,CACP,CAAC;EACJ,CAAC;EAEO,cAAc;;IACpB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,eAAC,OAAA,MAAA,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC,CAAC;MAC9G,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MAC/E,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,0CACzE,aAAa,CAAC,OAAO,CAAC,0CACtB,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;KACnC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Listen, Watch } from '@stencil/core';\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   * 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  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => {\n      catRadio.name = newName;\n    });\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.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n    this.updateTabIndex();\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    if (catRadioElement && catRadioElement.checked) {\n      const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);\n      catRadioElements.forEach(value => (value.checked = false));\n      this.updateTabIndex();\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.js

@@ -74,6 +74,11 @@ export class CatSelect {
       return;
     this.setChoices(choices, 'value', 'label', true);
   }
+  setValueHandler(value) {
+    if (this.multiple)
+      return;
+    this.setValue(value || []);
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -81,29 +86,36 @@ 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;
     this.init();
-    this.choiceInner = ((_c = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a).shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || 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('addItem', this.onChange.bind(this));
-    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('removeItem', this.onChange.bind(this));
-    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('search', this.onSearch.bind(this));
+    const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
+    if (attachedInternals) {
+      this.choiceInner = ((_c = attachedInternals.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || undefined;
+      this.choiceDropdown =
+        ((_e = (_d = attachedInternals.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.choices__list--dropdown')) === null || _e === void 0 ? void 0 : _e.firstElementChild) || undefined;
+    }
+    (_f = this.choiceInner) === null || _f === void 0 ? void 0 : _f.addEventListener('click', this.showDropdownHandler.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('addItem', this.onChange.bind(this));
+    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.onChange.bind(this));
+    (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('search', this.onSearch.bind(this));
+    (_k = this.choiceDropdown) === null || _k === void 0 ? void 0 : _k.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));
+      (_l = this.selectElement) === null || _l === void 0 ? void 0 : _l.addEventListener('choice', this.onChoice.bind(this));
       this.createRemoveItemButton();
     }
   }
   disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     (_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('addItem', this.onChange.bind(this));
     (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('removeItem', this.onChange.bind(this));
     (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('search', this.onSearch.bind(this));
+    (_f = this.choiceDropdown) === null || _f === void 0 ? void 0 : _f.removeEventListener('scroll', this.onScrolledBottom.bind(this));
     if (this.multiple) {
-      (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('choice', this.onChoice.bind(this));
-      (_g = this.removeElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
+      (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('choice', this.onChoice.bind(this));
+      (_h = this.removeElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
     }
   }
   /**
@@ -156,6 +168,7 @@ export class CatSelect {
   }
   init() {
     const value = this.value || [];
+    const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
     const config = {
       allowHTML: true,
       items: Array.isArray(value) ? value : [value],
@@ -191,6 +204,10 @@ export class CatSelect {
             return strToEl(`
               <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable} ${data.placeholder ? classNames.placeholder : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
                   <span>${template}</span> ${data.label}
+                  <button type="button"
+                    class="${classNames.button}"
+                    aria-label="${removeItemText(data.label)}"
+                    data-button>${removeItemText(data.label)}</button>
               </div>
               `);
           }
@@ -215,6 +232,10 @@ export class CatSelect {
                 ${data.disabled ? 'aria-disabled="true"' : ''}>
                   ${template}
                   ${data.label}
+                  <button type="button"
+                    class="${classNames.button}"
+                    aria-label="${removeItemText(data.label)}"
+                    data-button>${removeItemText(data.label)}</button>
               </div>`);
           },
           choice: function ({ classNames }, data) {
@@ -254,6 +275,14 @@ export class CatSelect {
     const customEvent = event;
     this.catSearch.emit(customEvent.detail.value);
   }
+  onScrolledBottom() {
+    var _a, _b, _c;
+    const scrolledBottom = ((_a = this.choiceDropdown) === null || _a === void 0 ? void 0 : _a.scrollHeight) ===
+      (((_b = this.choiceDropdown) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0) + (((_c = this.choiceDropdown) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
+    if (scrolledBottom) {
+      this.catScrolledBottom.emit();
+    }
+  }
   onChoice(event) {
     var _a, _b;
     const customEvent = event;
@@ -541,6 +570,21 @@ export class CatSelect {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "catScrolledBottom",
+      "name": "catScrolledBottom",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when scrolled to the bottom."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "setValue": {
@@ -645,6 +689,9 @@ export class CatSelect {
   static get watchers() { return [{
       "propName": "choices",
       "methodName": "setChoicesHandler"
+    }, {
+      "propName": "value",
+      "methodName": "setValueHandler"
     }]; }
 }
 //# 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, Method, Prop, Watch, State } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Group, Item, Options } from 'choices.js';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\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 * 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\n  private choice?: Choices;\n  private choiceInner?: 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() choices: Choice[] = [];\n\n  /**\n   * The pre-selected items for the input.\n   */\n  @Prop({ mutable: true }) value?: string | string[] | Choice | Choice[];\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() noSearch = 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  @Watch('choices')\n  setChoicesHandler(choices: Choice[]) {\n    if (!choices?.length) return;\n\n    this.setChoices(choices, 'value', 'label', true);\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    this.choiceInner = this.hostElement.attachInternals?.().shadowRoot?.querySelector('.choices__inner') || undefined;\n    this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.addEventListener('addItem', this.onChange.bind(this));\n    this.selectElement?.addEventListener('removeItem', this.onChange.bind(this));\n    this.selectElement?.addEventListener('search', this.onSearch.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('addItem', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('removeItem', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('search', this.onSearch.bind(this));\n    if (this.multiple) {\n      this.selectElement?.removeEventListener('choice', this.onChoice.bind(this));\n      this.removeElement?.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));\n    }\n  }\n\n  /**\n   * Set value of input based on an array of objects or strings. This behaves\n   * exactly the same as passing items via the items option but can be called\n   * after initialisation.\n   */\n  @Method()\n  async setValue(args: Array<string> | Array<Item>) {\n    this.choice?.setValue(args);\n\n    return this;\n  }\n\n  /**\n   * Set choices of select input via an array of objects (or function that\n   * returns array of object or promise of it), a value field name and a label\n   * field name.\n   */\n  @Method()\n  async setChoices(choices: Array<Choice> | Array<Group>, value?: string, label?: string, replaceChoices?: boolean) {\n    this.choice?.setChoices(choices, value, label, replaceChoices);\n\n    return this;\n  }\n\n  /**\n   * Clear all choices from select.\n   */\n  @Method()\n  async clearChoices() {\n    this.choice?.clearChoices();\n\n    return this;\n  }\n\n  /**\n   * Clear input of any user inputted text.\n   */\n  @Method()\n  async clearInput() {\n    this.choice?.clearInput();\n\n    return this;\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 value = this.value || [];\n    const config = {\n      allowHTML: true,\n      items: Array.isArray(value) ? value : ([value] as string[] | Choice[]),\n      removeItemButton: true,\n      duplicateItemsAllowed: false,\n      delimiter: '',\n      paste: false,\n      searchEnabled: !this.noSearch,\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    };\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              </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              </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    this.choice.setChoices(this.choices);\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.value = this.choice?.getValue();\n    this.catChange.emit(this.choice?.getValue());\n    if (this.multiple) {\n      this.updateRemoveItemButtonVisibility();\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 onChoice(event: Event) {\n    const customEvent = event as CustomEvent<{ choice: Choice }>;\n    const items = Array.from(this.choice?.getValue() as Item[]);\n    const item = items.find(value => value.choiceId === customEvent.detail.choice.id);\n    if (item) {\n      this.choice?._removeItem(item);\n    }\n  }\n\n  private showDropdownHandler() {\n    if (!this.disabled) {\n      this.choice?.showDropdown();\n    }\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 if (!items.length) {\n      this.removeElement?.setAttribute('hidden', 'true');\n    }\n  }\n\n  private onRemoveItemButtonClick(event: Event) {\n    event.stopPropagation();\n    this.choice?.removeActiveItems(-1);\n  }\n}\n"]}
+{"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, Method, Prop, Watch, State } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Group, Item, Options } from 'choices.js';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\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 * 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\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() choices: Choice[] = [];\n\n  /**\n   * The pre-selected items for the input.\n   */\n  @Prop({ mutable: true }) value?: string | string[] | Choice | Choice[];\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() noSearch = 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('choices')\n  setChoicesHandler(choices: Choice[]) {\n    if (!choices?.length) return;\n\n    this.setChoices(choices, 'value', 'label', true);\n  }\n\n  @Watch('value')\n  setValueHandler(value?: string[] | Choice[]) {\n    if (this.multiple) return;\n\n    this.setValue(value || []);\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      this.choiceInner = attachedInternals.shadowRoot?.querySelector('.choices__inner') || undefined;\n      this.choiceDropdown =\n        attachedInternals.shadowRoot?.querySelector('.choices__list--dropdown')?.firstElementChild || undefined;\n    }\n    this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.addEventListener('addItem', this.onChange.bind(this));\n    this.selectElement?.addEventListener('removeItem', 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('addItem', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('removeItem', 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.selectElement?.removeEventListener('choice', this.onChoice.bind(this));\n      this.removeElement?.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));\n    }\n  }\n\n  /**\n   * Set value of input based on an array of objects or strings. This behaves\n   * exactly the same as passing items via the items option but can be called\n   * after initialisation.\n   */\n  @Method()\n  async setValue(args: Array<string> | Array<Item>) {\n    this.choice?.setValue(args);\n\n    return this;\n  }\n\n  /**\n   * Set choices of select input via an array of objects (or function that\n   * returns array of object or promise of it), a value field name and a label\n   * field name.\n   */\n  @Method()\n  async setChoices(choices: Array<Choice> | Array<Group>, value?: string, label?: string, replaceChoices?: boolean) {\n    this.choice?.setChoices(choices, value, label, replaceChoices);\n\n    return this;\n  }\n\n  /**\n   * Clear all choices from select.\n   */\n  @Method()\n  async clearChoices() {\n    this.choice?.clearChoices();\n\n    return this;\n  }\n\n  /**\n   * Clear input of any user inputted text.\n   */\n  @Method()\n  async clearInput() {\n    this.choice?.clearInput();\n\n    return this;\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 value = this.value || [];\n    const removeItemText = (value: string) => this.i18n.t('select.removeItem', { value });\n    const config = {\n      allowHTML: true,\n      items: Array.isArray(value) ? value : ([value] as string[] | Choice[]),\n      removeItemButton: true,\n      duplicateItemsAllowed: false,\n      delimiter: '',\n      paste: false,\n      searchEnabled: !this.noSearch,\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    };\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    this.choice.setChoices(this.choices);\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.value = this.choice?.getValue();\n    this.catChange.emit(this.choice?.getValue());\n    if (this.multiple) {\n      this.updateRemoveItemButtonVisibility();\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: boolean =\n      this.choiceDropdown?.scrollHeight ===\n      (this.choiceDropdown?.scrollTop || 0) + (this.choiceDropdown?.clientHeight || 0);\n\n    if (scrolledBottom) {\n      this.catScrolledBottom.emit();\n    }\n  }\n\n  private onChoice(event: Event) {\n    const customEvent = event as CustomEvent<{ choice: Choice }>;\n    const items = Array.from(this.choice?.getValue() as Item[]);\n    const item = items.find(value => value.choiceId === customEvent.detail.choice.id);\n    if (item) {\n      this.choice?._removeItem(item);\n    }\n  }\n\n  private showDropdownHandler() {\n    if (!this.disabled) {\n      this.choice?.showDropdown();\n    }\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 if (!items.length) {\n      this.removeElement?.setAttribute('hidden', 'true');\n    }\n  }\n\n  private onRemoveItemButtonClick(event: Event) {\n    event.stopPropagation();\n    this.choice?.removeActiveItems(-1);\n  }\n}\n"]}

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

@@ -40,6 +40,10 @@ label {
   cursor: pointer;
 }
 
+.label-left {
+  flex-direction: row-reverse;
+}
+
 input {
   position: absolute !important;
   width: 1px !important;