@haiilo/catalyst 13.0.0 → 13.0.2

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

@@ -1 +1 @@
-{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE;;GAEG;AAMH,MAAM,OAAO,YAAY;IALzB;QAMU,iBAAY,GAA8B,EAAE,CAAC;QAIrD;;;;;;WAMG;QACK,mBAAc,GAA8C,MAAM,CAAC;QAE3E;;WAEG;QACK,eAAU,GAAG,KAAK,CAAC;KA2C5B;IAnCC,uBAAuB,CAAC,iBAA4D;QAClF,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;IACJ,CAAC;IAGD,mBAAmB,CAAC,aAAsB;QACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAClC,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,aAAa,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;YAC7C,6DAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;QAC/B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;IAEO,SAAS,CAAC,QAAmC;QACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;QACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;QACxD,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n  | HTMLCatInputElement\n  | HTMLCatTextareaElement\n  | HTMLCatSelectElement\n  | HTMLCatDatepickerElement;\n\n/**\n * A form group component to group form fields and labels.\n */\n@Component({\n  tag: 'cat-form-group',\n  styleUrl: 'cat-form-group.scss',\n  shadow: true\n})\nexport class CatFormGroup {\n  private formElements: HTMLCatFormFieldElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n   * - If there are more required, the optional will be marked.<br />\n   * - If there are less required, it will mark the required.<br /><br />\n   * If a form field had \"!\", the requiredMarked of the field would not change.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * The space allocated to the input label\n   */\n  @Prop() labelSize?: string;\n\n  @Watch('requiredMarker')\n  onRequiredMarkerChanged(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n    this.formElements.forEach(\n      element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n    );\n  }\n\n  @Watch('horizontal')\n  onHorizontalChanged(newHorizontal: boolean) {\n    this.formElements.forEach(element => {\n      element.horizontal = element.horizontal ?? newHorizontal;\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ '--label-size': this.labelSize }}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(\n      this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n    ) as HTMLCatFormFieldElement[];\n    this.onRequiredMarkerChanged(this.requiredMarker);\n    this.onHorizontalChanged(this.horizontal);\n  }\n\n  private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n    const optionalFields = elements.filter(value => !value.required).length;\n    const requiredFields = elements.length - optionalFields;\n    return requiredFields >= optionalFields ? 'optional' : 'required';\n  }\n}\n"]}
+{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAUzE;;GAEG;AAMH,MAAM,OAAO,YAAY;IALzB;QAMU,iBAAY,GAA8B,EAAE,CAAC;QAIrD;;;;;;WAMG;QACK,mBAAc,GAA8C,MAAM,CAAC;QAE3E;;WAEG;QACK,eAAU,GAAG,KAAK,CAAC;KA2C5B;IAnCC,uBAAuB,CAAC,iBAA4D;QAClF,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;IACJ,CAAC;IAGD,mBAAmB,CAAC,aAAsB;QACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAClC,OAAO,CAAC,kBAAkB,GAAG,aAAa,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;YAC7C,6DAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,yEAAyE,CAAC,CAChF,CAAC;QAC/B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;IAEO,SAAS,CAAC,QAAmC;QACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;QACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;QACxD,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n  | HTMLCatInputElement\n  | HTMLCatTextareaElement\n  | HTMLCatSelectElement\n  | HTMLCatDatepickerElement\n  | HTMLCatDateElement\n  | HTMLCatTimeElement;\n\n/**\n * A form group component to group form fields and labels.\n */\n@Component({\n  tag: 'cat-form-group',\n  styleUrl: 'cat-form-group.scss',\n  shadow: true\n})\nexport class CatFormGroup {\n  private formElements: HTMLCatFormFieldElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n   * - If there are more required, the optional will be marked.<br />\n   * - If there are less required, it will mark the required.<br /><br />\n   * If a form field had \"!\", the requiredMarked of the field would not change.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * The space allocated to the input label\n   */\n  @Prop() labelSize?: string;\n\n  @Watch('requiredMarker')\n  onRequiredMarkerChanged(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n    this.formElements.forEach(\n      element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n    );\n  }\n\n  @Watch('horizontal')\n  onHorizontalChanged(newHorizontal: boolean) {\n    this.formElements.forEach(element => {\n      element.fallbackHorizontal = newHorizontal;\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ '--label-size': this.labelSize }}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(\n      this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time')\n    ) as HTMLCatFormFieldElement[];\n    this.onRequiredMarkerChanged(this.requiredMarker);\n    this.onHorizontalChanged(this.horizontal);\n  }\n\n  private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n    const optionalFields = elements.filter(value => !value.required).length;\n    const requiredFields = elements.length - optionalFields;\n    return requiredFields >= optionalFields ? 'optional' : 'required';\n  }\n}\n"]}

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

@@ -577,6 +577,11 @@ button.cat-link-danger:focus-visible {
 .select-horizontal .label-wrapper {
   flex-direction: column;
 }
+.input-horizontal .label-container,
+.textarea-horizontal .label-container,
+.select-horizontal .label-container {
+  flex-shrink: 0;
+}
 .input-horizontal label,
 .textarea-horizontal label,
 .select-horizontal label {

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

@@ -28,10 +28,6 @@ export class CatInput {
          * Whether the label need a marker to shown if the input is required or optional.
          */
         this.requiredMarker = 'optional';
-        /**
-         * Whether the label is on top or left.
-         */
-        this.horizontal = false;
         /**
          * Whether the input should show a clear button.
          */
@@ -138,19 +134,19 @@ export class CatInput {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("div", { key: '2d1470e5fcbc444187c35b52a977ae919f5441f5', class: {
+        return (h("div", { key: 'ddd30568bc606187f29713b289ca98304d869ddc', class: {
                 'input-field': true,
-                'input-horizontal': this.horizontal
-            } }, h("div", { key: 'f78abacd75b12bccab406da85e6d77866e271dae', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '5985d170af91fc174a28fa102f2a7e33475aaa93', htmlFor: this.id, part: "label" }, h("span", { key: '49c82004f681bd34acae7b3f7aef95278a975cb3', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '3c2b12e5bf2af34487569f346b48123d9d633618', name: "label" })) || this.label, h("div", { key: 'a0a12f7f406845bf49efcee8e3afc0dbcb20ec66', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'c3076888f346793dcd35b40efbe023e1b77a13af', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'a55f8332f32fe7b42062ef726ea6148c6cec72a1', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: 'a7178393a4e61a6fa1a7548caeb2622561156499', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '5be7d2b3f4630cbc98ff2f2370e58c3e02158e82', class: "input-container" }, h("div", { key: 'ffe47bed961517990aea7115fd48090cea7973f7', class: "input-outer-wrapper" }, h("div", { key: '8054a1dead8ec0f04ec09c42afa64304e1eeab73', class: {
+                'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
+            } }, h("div", { key: 'bcb68ff5f8fab8ec812ec383f31f9cc797668d31', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '22d12b04e4f7f28062bae55facbfd331242d9de0', htmlFor: this.id, part: "label" }, h("span", { key: 'e63fbff9d2158a279c43865338ae2de1f9aba035', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'efb5f9574f6d6f8c74980f3bdf12fddb9de20e56', name: "label" })) || this.label, h("div", { key: 'a31ca238ee5d5dfcaaccbbfe01ea2252f91c88a7', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '3ac66d41ca7d8ec135552d741090836e8aa49fbd', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '7c272ea28b73743254095670842e6d34d639da59', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '6197d7494ad6fc6f35105bcb250b893491f79940', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '524ac9cb87a9b131ae4859aa849e088f251999a6', class: "input-container" }, h("div", { key: '93d11e5954b6b89056316ec764fcffea2761b166', class: "input-outer-wrapper" }, h("div", { key: '08de200566625c6c7e50f7d7608a5d8d37a970ec', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '679c04bcdf71a18281c57d8b894bb2d09db04c61', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '9676f80f87886585bd1e66dc36d79f73d8dcbc1d', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '63d68df805f010fd43cabbb2a926b15d38cbac02', class: "input-inner-wrapper" }, h("input", { key: 'c647bb48d0ce78bfdd32738293d48a6fd0decebd', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '1921d39b042c6b60748487bdb028011b00ee854b', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '90dfdb8df272a8827238ca1ab62533cfeaed10b3', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '7aea0b58c95e9810f8eba6318254bf535020f9b7', class: "input-inner-wrapper" }, h("input", { key: 'd141269ed21c9ce76d2357c0f657779a0826e706', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'b55760f57d4e2a614ffb52e603a909002953023a', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '09fb349df1ab00b7260a290bc3aa2fc7fae6ba55', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '5afe2fb200dee5e83b0502db4dddb4609d2ff8c5', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '4aa4fbef3cd5c6de7819ebaf8b7fd9df86a33656', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: 'ead450e2a1aad0bd0ae939610bdd25555d487955', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '54b5f3a403ef48046f4a2ce077195e256e68cfaf', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: '60f90528fa403d432bd930819961f41adbdffd64', name: "addon" })), this.hasHint && (h(CatFormHint, { key: 'de40c1cc2308e00089a6515d95faa3252ec2ec49', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '3ee9ccf204a398a6c5d8076425ece0a286417f75', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'b6ca03467af3e3d85e3c92916ce24d58cc27a4ba', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '269ec9cd5d09ca5b52bfe31ff5d2eff78458065e', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '2a1fd4d65098c47cbf76a3ed9bb0ce2a10aac98b', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '04fc1241b6955660ebe7c89a360de76363965888', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: 'ff4775e4702ada09db771375b8334562027671f2', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'ed13a76f3044e8b6404d8459be754ec83b122216', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '5d04ffdc5dcd4af5be879046cd97acec939456c3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -254,19 +250,40 @@ export class CatInput {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Whether the label is on top or left."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
+            },
+            "fallbackHorizontal": {
+                "type": "boolean",
+                "attribute": "fallback-horizontal",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "If the horizontal value is not provided, this fallback value is used. Can be set by form-group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             },
             "autoComplete": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\nimport { formatDate, formatTime } from 'cleave-zen';\n\nlet nextUniqueId = 0;\n\ntype TimeUnit = 'h' | 'm' | 's';\ntype TimeFormatType = '12' | '24';\ntype DateUnit = 'Y' | 'y' | 'm' | 'd';\n\nexport interface FormatTimeMaskOptions {\n  timePattern?: TimeUnit[];\n  timeFormat?: TimeFormatType;\n}\n\nexport interface FormatDateMaskOptions {\n  delimiter?: string;\n  datePattern?: DateUnit[];\n  dateMin?: string;\n  dateMax?: string;\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part input - The native input element.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatInput {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() hasSlottedCounter = false;\n\n  @State() isPasswordShown = false;\n\n  @State() errorMap?: ErrorMap | true;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input should show a password toggle button for password inputs.\n   */\n  @Prop() togglePassword = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the input in a loading state with a spinner.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\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 maximum value for numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = 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   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * A unique identifier for the underlying native element that is used for\n   * testing purposes. The attribute is added as `data-test` attribute and acts\n   * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n   */\n  @Prop() testId?: string;\n\n  /**\n   * Activates cleave-zen time mask on input\n   */\n  @Prop() timeMaskOptions?: FormatTimeMaskOptions;\n\n  /**\n   * Activates cleave-zen date mask on input\n   */\n  @Prop() dateMaskOptions?: FormatDateMaskOptions;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.internals.setFormValue(this.value ?? null);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    // hack to make datepicker inputs focusable. The datepicker hides the input\n    // element and dynamically creates a sibling. We need to find the new input\n    // element and focus it instead.\n    const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n    input?.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n    this.catChange.emit(this.value);\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal\n        }}\n      >\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                  {(this.maxLength || this.hasSlottedCounter) && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.hasSlottedCounter ? (\n                        <slot name=\"counter\"></slot>\n                      ) : (\n                        `${this.value?.length ?? 0}/${this.maxLength}`\n                      )}\n                    </div>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div class=\"input-outer-wrapper\">\n            <div\n              class={{\n                'input-wrapper': true,\n                'input-round': this.round,\n                'input-readonly': this.readonly,\n                'input-disabled': this.disabled,\n                'input-invalid': this.invalid\n              }}\n              onClick={() => this.input.focus()}\n            >\n              {this.textPrefix && (\n                <span class=\"text-prefix\" part=\"prefix\">\n                  {this.textPrefix}\n                </span>\n              )}\n              {this.icon && !this.iconRight && (\n                <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n              )}\n              <div class=\"input-inner-wrapper\">\n                <input\n                  data-test={this.testId}\n                  {...this.nativeAttributes}\n                  part=\"input\"\n                  ref={el => (this.input = el as HTMLInputElement)}\n                  id={this.id}\n                  class={{\n                    'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n                    'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\n                  }}\n                  autocomplete={this.autoComplete}\n                  disabled={this.disabled}\n                  max={this.max}\n                  maxlength={this.maxLength}\n                  min={this.min}\n                  minlength={this.minLength}\n                  name={this.name}\n                  placeholder={this.placeholder}\n                  readonly={this.readonly}\n                  required={this.required}\n                  type={this.isPasswordShown ? 'text' : this.type}\n                  value={this.value}\n                  onInput={this.onInput.bind(this)}\n                  onFocus={this.onFocus.bind(this)}\n                  onBlur={this.onBlur.bind(this)}\n                  aria-invalid={this.invalid ? 'true' : undefined}\n                  aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n                ></input>\n                {this.clearable && !this.disabled && !this.readonly && this.value && (\n                  <cat-button\n                    class=\"clearable\"\n                    icon=\"$cat:input-close\"\n                    icon-only=\"true\"\n                    size=\"s\"\n                    variant=\"text\"\n                    a11y-label={i18n.t('input.clear')}\n                    onClick={this.clear.bind(this)}\n                    data-dropdown-no-close\n                  ></cat-button>\n                )}\n                {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n                  <cat-button\n                    class=\"toggle-password\"\n                    icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n                    icon-only=\"true\"\n                    size=\"s\"\n                    variant=\"text\"\n                    a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n                    onClick={this.doTogglePassword.bind(this)}\n                  ></cat-button>\n                )}\n              </div>\n              {this.loading && <cat-spinner size=\"m\" class=\"icon-loading\"></cat-spinner>}\n              {!this.invalid && this.icon && this.iconRight && (\n                <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n              )}\n              {this.invalid && (\n                <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n              )}\n              {this.textSuffix && (\n                <span class=\"text-suffix\" part=\"suffix\">\n                  {this.textSuffix}\n                </span>\n              )}\n            </div>\n            <slot name=\"addon\"></slot>\n          </div>\n          {this.hasHint && (\n            <CatFormHint\n              id={this.id}\n              hint={this.hint}\n              slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n              errorMap={this.errorMap}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    let formattedValue = this.input.value;\n    if (this.timeMaskOptions) {\n      formattedValue = formatTime(this.input.value, this.timeMaskOptions);\n      this.input.value = formattedValue;\n    }\n    if (this.dateMaskOptions) {\n      formattedValue = formatDate(this.input.value, this.dateMaskOptions);\n      this.input.value = formattedValue;\n    }\n    this.value = formattedValue;\n    this.internals.setFormValue(this.input.value);\n    this.catChange.emit(this.value);\n    this.showErrorsIfTimeout();\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    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private doTogglePassword() {\n    this.isPasswordShown = !this.isPasswordShown;\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private findSiblingInput(node: Node | null): HTMLInputElement | undefined {\n    if (node instanceof HTMLInputElement) {\n      return node;\n    } else if (node?.nextSibling) {\n      return this.findSiblingInput(node.nextSibling);\n    }\n    return undefined;\n  }\n}\n"]}
+{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxH,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAY,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEpD,IAAI,YAAY,GAAG,CAAC,CAAC;AAkBrB;;;;;;;;;;;;GAYG;AASH,MAAM,OAAO,QAAQ;IARrB;QASmB,QAAG,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC;QAU5C,oBAAe,GAAG,KAAK,CAAC;QAExB,mBAAc,GAAG,KAAK,CAAC;QAEvB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,oBAAe,GAAG,KAAK,CAAC;QAMjC;;WAEG;QACK,mBAAc,GAA4E,UAAU,CAAC;QAkB7G;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QAE1B;;WAEG;QACK,mBAAc,GAAG,KAAK,CAAC;QAE/B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAYxB;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QAO1B;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;QAEnB;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QA0C5B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACK,SAAI,GAAc,MAAM,CAAC;QAiBjC;;;;WAIG;QACK,gBAAW,GAAqB,CAAC,CAAC;KAmT3C;IA/dC,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;IACrC,CAAC;IAiND,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;IACtD,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACxE,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChF,CAAC;IAED;;;;;;OAMG;IAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;QAClC,2EAA2E;QAC3E,2EAA2E;QAC3E,gCAAgC;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACxG,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAGD,eAAe,CAAC,QAAwC,EAAE,SAAmB,EAAE,SAAkB,IAAI;QACnG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;gBACxC,CAAC,CAAE,QAAqB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjF,CAAC,CAAC,QAAQ,IAAI,SAAS,CAAC;YAC1B,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,mBAAmB,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QACnF,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,kBAAkB,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,IAAI,KAAK;aACxE;YAED,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,IAC9D,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CACvC,8DAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAC,OAAO;gBACnC,6DAAM,KAAK,EAAC,eAAe;oBACxB,CAAC,IAAI,CAAC,eAAe,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK;oBACnE,4DAAK,KAAK,EAAC,gBAAgB;wBACxB,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,UAAU,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/E,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;4BAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;gCACrB,CACR;wBACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/D,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;4BAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;gCACrB,CACR;wBACA,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAC7C,4DAAK,KAAK,EAAC,uBAAuB,iBAAa,MAAM,IAClD,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACxB,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC7B,CAAC,CAAC,CAAC,CACF,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAC/C,CACG,CACP,CACG,CACD,CACD,CACT,CACG;YACN,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,4DACE,KAAK,EAAE;4BACL,eAAe,EAAE,IAAI;4BACrB,aAAa,EAAE,IAAI,CAAC,KAAK;4BACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;4BAC/B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;4BAC/B,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;wBAEhC,IAAI,CAAC,UAAU,IAAI,CAClB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR;wBACA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAC/B,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAa,CACnG;wBACD,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,2EACa,IAAI,CAAC,MAAM,KAClB,IAAI,CAAC,gBAAgB,EACzB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;oCACL,eAAe,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;oCACnF,qBAAqB,EAAE,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;iCAC/F,EACD,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,kBAChB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,sBAC7B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GACvD;4BACR,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,CACnE,mEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,kBAAkB,eACb,MAAM,EAChB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,gBACF,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mCAElB,CACf;4BACA,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,CACxE,mEACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,0BAA0B,eAC1E,MAAM,EAChB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,gBACF,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,EACtF,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC7B,CACf,CACG;wBACL,IAAI,CAAC,OAAO,IAAI,oEAAa,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,cAAc,GAAe;wBACzE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,CAC/C,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAa,CACnG;wBACA,IAAI,CAAC,OAAO,IAAI,CACf,iEAAU,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,GAAG,GAAY,CAC3F;wBACA,IAAI,CAAC,UAAU,IAAI,CAClB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,CACG;oBACN,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACL,IAAI,CAAC,OAAO,IAAI,CACf,EAAC,WAAW,qDACV,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EAC7D,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CACG,CACF,CACP,CAAC;IACJ,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,CAAC;IAC9D,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IAC7E,CAAC;IAEO,OAAO;QACb,IAAI,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACtC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACpE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;QACpC,CAAC;QACD,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACpE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;QACpC,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC;QAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,OAAO,CAAC,KAAiB;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,MAAM,CAAC,KAAiB;QAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;IAC/C,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;IACnC,CAAC;IAGO,mBAAmB;QACzB,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACzD,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,oBAAoB,KAAK,QAAQ,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAChG,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,WAAW,CAAC,CAAC;YACpF,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,mBAAmB;QACzB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC;QACtG,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,IAAiB;QACxC,IAAI,IAAI,YAAY,gBAAgB,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC;QACd,CAAC;aAAM,IAAI,IAAI,EAAE,WAAW,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACjD,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\nimport { formatDate, formatTime } from 'cleave-zen';\n\nlet nextUniqueId = 0;\n\ntype TimeUnit = 'h' | 'm' | 's';\ntype TimeFormatType = '12' | '24';\ntype DateUnit = 'Y' | 'y' | 'm' | 'd';\n\nexport interface FormatTimeMaskOptions {\n  timePattern?: TimeUnit[];\n  timeFormat?: TimeFormatType;\n}\n\nexport interface FormatDateMaskOptions {\n  delimiter?: string;\n  datePattern?: DateUnit[];\n  dateMin?: string;\n  dateMax?: string;\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part input - The native input element.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatInput {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() hasSlottedCounter = false;\n\n  @State() isPasswordShown = false;\n\n  @State() errorMap?: ErrorMap | true;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal?: boolean;\n\n  /**\n   * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n   * @internal\n   */\n  @Prop() fallbackHorizontal?: boolean;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input should show a password toggle button for password inputs.\n   */\n  @Prop() togglePassword = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the input in a loading state with a spinner.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\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 maximum value for numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = 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   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * A unique identifier for the underlying native element that is used for\n   * testing purposes. The attribute is added as `data-test` attribute and acts\n   * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n   */\n  @Prop() testId?: string;\n\n  /**\n   * Activates cleave-zen time mask on input\n   */\n  @Prop() timeMaskOptions?: FormatTimeMaskOptions;\n\n  /**\n   * Activates cleave-zen date mask on input\n   */\n  @Prop() dateMaskOptions?: FormatDateMaskOptions;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.internals.setFormValue(this.value ?? null);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    // hack to make datepicker inputs focusable. The datepicker hides the input\n    // element and dynamically creates a sibling. We need to find the new input\n    // element and focus it instead.\n    const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n    input?.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n    this.catChange.emit(this.value);\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false\n        }}\n      >\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                  {(this.maxLength || this.hasSlottedCounter) && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.hasSlottedCounter ? (\n                        <slot name=\"counter\"></slot>\n                      ) : (\n                        `${this.value?.length ?? 0}/${this.maxLength}`\n                      )}\n                    </div>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div class=\"input-outer-wrapper\">\n            <div\n              class={{\n                'input-wrapper': true,\n                'input-round': this.round,\n                'input-readonly': this.readonly,\n                'input-disabled': this.disabled,\n                'input-invalid': this.invalid\n              }}\n              onClick={() => this.input.focus()}\n            >\n              {this.textPrefix && (\n                <span class=\"text-prefix\" part=\"prefix\">\n                  {this.textPrefix}\n                </span>\n              )}\n              {this.icon && !this.iconRight && (\n                <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n              )}\n              <div class=\"input-inner-wrapper\">\n                <input\n                  data-test={this.testId}\n                  {...this.nativeAttributes}\n                  part=\"input\"\n                  ref={el => (this.input = el as HTMLInputElement)}\n                  id={this.id}\n                  class={{\n                    'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n                    'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\n                  }}\n                  autocomplete={this.autoComplete}\n                  disabled={this.disabled}\n                  max={this.max}\n                  maxlength={this.maxLength}\n                  min={this.min}\n                  minlength={this.minLength}\n                  name={this.name}\n                  placeholder={this.placeholder}\n                  readonly={this.readonly}\n                  required={this.required}\n                  type={this.isPasswordShown ? 'text' : this.type}\n                  value={this.value}\n                  onInput={this.onInput.bind(this)}\n                  onFocus={this.onFocus.bind(this)}\n                  onBlur={this.onBlur.bind(this)}\n                  aria-invalid={this.invalid ? 'true' : undefined}\n                  aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n                ></input>\n                {this.clearable && !this.disabled && !this.readonly && this.value && (\n                  <cat-button\n                    class=\"clearable\"\n                    icon=\"$cat:input-close\"\n                    icon-only=\"true\"\n                    size=\"s\"\n                    variant=\"text\"\n                    a11y-label={i18n.t('input.clear')}\n                    onClick={this.clear.bind(this)}\n                    data-dropdown-no-close\n                  ></cat-button>\n                )}\n                {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n                  <cat-button\n                    class=\"toggle-password\"\n                    icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n                    icon-only=\"true\"\n                    size=\"s\"\n                    variant=\"text\"\n                    a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n                    onClick={this.doTogglePassword.bind(this)}\n                  ></cat-button>\n                )}\n              </div>\n              {this.loading && <cat-spinner size=\"m\" class=\"icon-loading\"></cat-spinner>}\n              {!this.invalid && this.icon && this.iconRight && (\n                <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n              )}\n              {this.invalid && (\n                <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n              )}\n              {this.textSuffix && (\n                <span class=\"text-suffix\" part=\"suffix\">\n                  {this.textSuffix}\n                </span>\n              )}\n            </div>\n            <slot name=\"addon\"></slot>\n          </div>\n          {this.hasHint && (\n            <CatFormHint\n              id={this.id}\n              hint={this.hint}\n              slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n              errorMap={this.errorMap}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    let formattedValue = this.input.value;\n    if (this.timeMaskOptions) {\n      formattedValue = formatTime(this.input.value, this.timeMaskOptions);\n      this.input.value = formattedValue;\n    }\n    if (this.dateMaskOptions) {\n      formattedValue = formatDate(this.input.value, this.dateMaskOptions);\n      this.input.value = formattedValue;\n    }\n    this.value = formattedValue;\n    this.internals.setFormValue(this.input.value);\n    this.catChange.emit(this.value);\n    this.showErrorsIfTimeout();\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    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private doTogglePassword() {\n    this.isPasswordShown = !this.isPasswordShown;\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private findSiblingInput(node: Node | null): HTMLInputElement | undefined {\n    if (node instanceof HTMLInputElement) {\n      return node;\n    } else if (node?.nextSibling) {\n      return this.findSiblingInput(node.nextSibling);\n    }\n    return undefined;\n  }\n}\n"]}

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

@@ -577,6 +577,11 @@ button.cat-link-danger:focus-visible {
 .select-horizontal .label-wrapper {
   flex-direction: column;
 }
+.input-horizontal .label-container,
+.textarea-horizontal .label-container,
+.select-horizontal .label-container {
+  flex-shrink: 0;
+}
 .input-horizontal label,
 .textarea-horizontal label,
 .select-horizontal label {

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

@@ -42,10 +42,6 @@ export class CatSelect {
          * Whether the label need a marker to shown if the select is required or optional.
          */
         this.requiredMarker = 'optional';
-        /**
-         * Whether the label is on top or left.
-         */
-        this.horizontal = false;
         /**
          * Enable multiple selection.
          */
@@ -353,18 +349,18 @@ export class CatSelect {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'c26f4f1d90648ae5bdc7d15f6c112adafb2e4f78' }, h("div", { key: '15d47938edbc1226d59bc8f921178424dccf7999', class: {
+        return (h(Host, { key: '26022563ab88a3584535797b754b7570bf3b0ffb' }, h("div", { key: '30e3e1146a9e2bd53b60142ce7d565f52721f50b', class: {
                 'select-field': true,
-                'select-horizontal': this.horizontal,
+                'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
                 'select-multiple': this.multiple
-            } }, h("div", { key: '3ac28917d6f6ea995142803bbc74f381c540775d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'f0a54b4dd57db2771b216408313fb289eedd27a2', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '024573bca075cd84d08349af763d96ed9b53c8c4', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '8e7d2ef38e100add967d3c369cda2cccf7c3f334', name: "label" })) || this.label, h("div", { key: 'b9abce3cd81828a3e9dadf6d3c9fc551043cc927', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '3d55ace4e034fcc81c56c887649846ff330d25c4', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'ca265e7b81572037f80e78c167622680ae7ba74e', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '2941249432c643a7aca2887edb76c9503a93fdca', class: "select-container" }, h("div", { key: 'eaeccdc2e8305a9937bf5c646ae03798bda777ff', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '6f17f7a17ab914a3430e5dccc84fe6fcd1b22166', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: '603019e3284146af3556483b4a590b226f6281d3', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b32f7093c998f3b9e33471a421f009251dfba91c', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: 'eceec9df59454df362376ab4984b56c646c58a96', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '79f2b4e2bbaae0df29f13ca7b3c0a08d3b119b5b', name: "label" })) || this.label, h("div", { key: 'b715203cb490813f5968794780cc7b471ef46ddf', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'e3b6242d4db7efe62863b74ecaa939525db2352f', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '874922172fa58538c312c2068cbe3ef528deea6f', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '0f40b72819c7a4128af2d983c75f1f618d50dcf4', class: "select-container" }, h("div", { key: '15d154a43a203ed531076e1bc3843354de9df8ec', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'bb93b1a8eac29220805d402b2404f34d415b118d', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '364215d3ab64ccaf43edfefa6bc1b9bbb4cbd176', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '1350abe2789adba0e65931358e2637a4a6be2b8f' }), this.invalid && (h("cat-icon", { key: 'af9025ce007880906410bc6047ebbb7dab7e5f8c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '703737039954b5b57bcc96dafbb210ef1cc38b3c', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '54bd05a2e7b16b3ee3af8bf4bc3a1cc6eeb55c55' }), this.invalid && (h("cat-icon", { key: '3160286e240c29181a2468124207ca61f273ef08', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '253cd4626cd0c2503f2f6d832656d091b1b1db83', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'f5403e4f52632c7e69c781d3b5f2fe5dd476d086', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'f72b057e941d0a8abc535314e83339a59c09416b', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '2a9a17d9a9e2e931e15296c504735c6d77ba2a9f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'af6c9b9152eff975198123219f19b840feddac92', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '542d227a84df195890635f5bbd2f7ca92c06b1d5', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '5f09b1dc7319b4bcffaf11d5de844c1bd775ce3a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '17870f81f4514ff338dab7e3c5269e2e9e0ad153', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '203fd9329f77bafdc89cd05330a861c84230ea3b', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'dbdb7de9daf6ff390e09f49fbd6875dc33493e05', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
@@ -743,19 +739,40 @@ export class CatSelect {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Whether the label is on top or left."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
+            },
+            "fallbackHorizontal": {
+                "type": "boolean",
+                "attribute": "fallback-horizontal",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "If the horizontal value is not provided, this fallback value is used. Can be set by form-group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             },
             "multiple": {
                 "type": "boolean",