@haiilo/catalyst 4.1.2 → 5.0.0

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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAY,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAGxE,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,QAAG,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC;IAU5C,oBAAe,GAAG,KAAK,CAAC;IAIjC;;OAEG;IACK,mBAAc,GAA2E,UAAU,CAAC;IAO5G;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;IAE1B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAYzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;IAO1B;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IA0C5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;IAEtB;;OAEG;IACK,SAAI,GAAc,MAAM,CAAC;IAiBjC;;;;OAIG;IACK,gBAAW,GAAqB,CAAC,CAAC;GAkM3C;EAjVC,IAAY,EAAE;IACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;EACrC,CAAC;EAmKD,mBAAmB;IACjB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,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,IAAI,CAAC,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACtD;EACH,CAAC;EAED;;;;;;KAMG;EAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;EACpB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,OAAO;IACX,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;EAClB,CAAC;EAGD,kBAAkB,CAAC,KAAqC;IACtD,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;MAC9B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACrC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,KAAK,KAAK,IAAI;UAChB,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,KAAK,IAAI,SAAS,CAAC;KACxB;EACH,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI;MACF,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CACvC,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE;QAC1D,YAAM,IAAI,EAAC,OAAO;UACf,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK;UAClE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;YAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBACrB,CACR;UACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC9D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;YAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBACrB,CACR,CACI,CACD,CACT;MACD,WACE,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,aAAa,EAAE,IAAI,CAAC,KAAK;UACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;UAC/B,eAAe,EAAE,IAAI,CAAC,OAAO;SAC9B,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;QAEhC,IAAI,CAAC,UAAU,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR;QACA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY;QACpG,WAAK,KAAK,EAAC,qBAAqB;UAC9B,6BACM,IAAI,CAAC,gBAAgB,IACzB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;cACL,eAAe,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;aAClD,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,IAAI,EACf,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,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,IAC5D;UACR,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,CACjD,kBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,uBAAuB,eAClB,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,GAClB,CACf,CACG;QACL,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,CAC/C,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,CACpE;QACA,IAAI,CAAC,OAAO,IAAI,CACf,gBAAU,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,GAAG,GAAY,CAChG;QACA,IAAI,CAAC,UAAU,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,CACG;MACL,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CACjE,CACR,CAAC;EACJ,CAAC;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;EACzB,CAAC;EAGO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE;MACxC,OAAO,IAAI,CAAC,oBAAoB,KAAK,QAAQ,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;MAChG,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3G;EACH,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;IACzB,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;MAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;KAClC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { buildHintSection, ErrorMap } from '../cat-form-hint/cat-form-hint-utils';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\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 * @part label - The label content.\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  shadow: true\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;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() errorMap?: ErrorMap;\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   * 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 is disabled.\n   */\n  @Prop() disabled = 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 date, time and 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 date, time and 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 | number;\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 on change with the given delay in milliseconds.\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   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\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  componentWillRender(): void {\n    this.watchErrorsHandler(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on input', this);\n    }\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    this.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   * Programmatically simulate a click on the input.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  @Watch('errors')\n  watchErrorsHandler(value?: boolean | string[] | ErrorMap) {\n    if (this.errorUpdate === false) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? value.map(error => ({ [error]: undefined }))\n        : value === true\n        ? {}\n        : value || undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && this.requiredMarker.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            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\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 && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              {...this.nativeAttributes}\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\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.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.hint?.length ? this.id + '-hint' : undefined}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {!this.invalid && this.icon && this.iconRight && (\n            <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n          )}\n          {this.invalid && (\n            <cat-icon icon=\"alert-circle-outlined\" 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        {buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)}\n      </Host>\n    );\n  }\n\n  private get invalid() {\n    return !!this.errorMap;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private onInput(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n    if (typeof this.errorUpdate === 'number') {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n    }\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 (this.errorUpdate !== false) {\n      this.errorMap = this.errorMapSrc;\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\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';\n\nlet nextUniqueId = 0;\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 * @part label - The label content.\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  shadow: true\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;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\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 is disabled.\n   */\n  @Prop() disabled = 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 date, time and 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 date, time and 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 | number;\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 on change with the given delay in milliseconds.\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   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\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  componentWillRender(): void {\n    this.watchErrorsHandler(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on input', this);\n    }\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    this.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   * Programmatically simulate a click on the input.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  @Watch('errors')\n  watchErrorsHandler(value?: boolean | string[] | ErrorMap) {\n    if (this.errorUpdate === false) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n        ? {}\n        : value || undefined;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal\n        }}\n      >\n        <div\n          class={{\n            hidden: this.labelHidden,\n            'label-container': true\n          }}\n        >\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id}>\n              <span class=\"label-wrapper\" part=\"label\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                {!this.required && this.requiredMarker.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              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div\n            class={{\n              'input-wrapper': true,\n              'input-round': this.round,\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 && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n            <div class=\"input-inner-wrapper\">\n              <input\n                {...this.nativeAttributes}\n                ref={el => (this.input = el as HTMLInputElement)}\n                id={this.id}\n                class={{\n                  'has-clearable': this.clearable && !this.disabled\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.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.hint?.length ? this.id + '-hint' : undefined}\n              ></input>\n              {this.clearable && !this.disabled && this.value && (\n                <cat-button\n                  class=\"clearable\"\n                  icon=\"cross-circle-outlined\"\n                  icon-only=\"true\"\n                  size=\"s\"\n                  variant=\"text\"\n                  a11y-label={i18n.t('input.clear')}\n                  onClick={this.clear.bind(this)}\n                ></cat-button>\n              )}\n            </div>\n            {!this.invalid && this.icon && this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n            )}\n            {this.invalid && (\n              <cat-icon icon=\"alert-circle-outlined\" 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          {(this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (\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 invalid() {\n    return !!this.errorMap;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private onInput(event: InputEvent) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n    if (typeof this.errorUpdate === 'number') {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n    }\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 (this.errorUpdate !== false) {\n      this.errorMap = this.errorMapSrc;\n    }\n  }\n}\n"]}

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

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=input-type.js.map
+//# sourceMappingURL=input-type.js.map

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

@@ -1,17 +1,12 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 /**
  * Labels are used to provide a short description of an input or form element.
  */
 export class CatLabel {
   constructor() {
-    /**
-     * Whether the label need a marker to shown if the input is required or optional.
-     */
     this.requiredMarker = 'optional';
-    /**
-     * A value is required or must be check for the form to be submittable.
-     */
+    this.for = undefined;
     this.required = false;
   }
   onClick() {
@@ -22,17 +17,7 @@ export class CatLabel {
     }
   }
   render() {
-    return (h(Host, null,
-      h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) },
-        h("slot", null),
-        !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" },
-          "(",
-          i18n.t('input.optional'),
-          ")")),
-        this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" },
-          "(",
-          i18n.t('input.required'),
-          ")")))));
+    return (h(Host, null, h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, h("slot", null), !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")))));
   }
   findShadowTarget(id) {
     var _a;
@@ -49,67 +34,73 @@ export class CatLabel {
   }
   static get is() { return "cat-label"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-label.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-label.css"]
-  }; }
-  static get properties() { return {
-    "requiredMarker": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
-        "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the label need a marker to shown if the input is required or optional."
-      },
-      "attribute": "required-marker",
-      "reflect": false,
-      "defaultValue": "'optional'"
-    },
-    "for": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The unique identifier for a referenced input."
-      },
-      "attribute": "for",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-label.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "requiredMarker": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+          "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the label need a marker to shown if the input is required or optional."
+        },
+        "attribute": "required-marker",
+        "reflect": false,
+        "defaultValue": "'optional'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A value is required or must be check for the form to be submittable."
+      "for": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The unique identifier for a referenced input."
+        },
+        "attribute": "for",
+        "reflect": false
       },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A value is required or must be check for the form to be submittable."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }
 CatLabel.SHADOW_TARGETS = [
   'CAT-INPUT',
@@ -119,4 +110,4 @@ CatLabel.SHADOW_TARGETS = [
   'CAT-RADIO',
   'CAT-SELECT'
 ];
-//# sourceMappingURL=cat-label.js.map
+//# sourceMappingURL=cat-label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-label.js","sourceRoot":"","sources":["../../../src/components/cat-label/cat-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;GAEG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAeE;;OAEG;IACK,mBAAc,GAA2E,UAAU,CAAC;IAO5G;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;GAyC1B;EAvCC,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,4DAA4D;MAC5D,MAAA,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACxD,eAAa;QACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR;QACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC9D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR,CACK,CACH,CACR,CAAC;EACJ,CAAC;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA9DuB,uBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACZ,CAAA","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Labels are used to provide a short description of an input or form element.\n */\n@Component({\n  tag: 'cat-label',\n  styleUrl: 'cat-label.scss',\n  shadow: true\n})\nexport class CatLabel {\n  private static readonly SHADOW_TARGETS = [\n    'CAT-INPUT',\n    'CAT-TEXTAREA',\n    'CAT-CHECKBOX',\n    'CAT-TOGGLE',\n    'CAT-RADIO',\n    'CAT-SELECT'\n  ];\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   * The unique identifier for a referenced input.\n   */\n  @Prop() for?: string;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  onClick() {\n    if (this.for) {\n      // focus target that is possibly hidden inside a shadow root\n      (document.getElementById(this.for) || this.findShadowTarget(this.for))?.focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n          <slot></slot>\n          {!this.required && this.requiredMarker.startsWith('optional') && (\n            <span class=\"input-optional\" aria-hidden=\"true\">\n              ({i18n.t('input.optional')})\n            </span>\n          )}\n          {this.required && this.requiredMarker.startsWith('required') && (\n            <span class=\"input-optional\" aria-hidden=\"true\">\n              ({i18n.t('input.required')})\n            </span>\n          )}\n        </label>\n      </Host>\n    );\n  }\n\n  private findShadowTarget(id: string): HTMLElement | null {\n    for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n      const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n      for (let i = 0; i < elems.length; i++) {\n        const target = elems[i].shadowRoot?.getElementById(id);\n        if (target) {\n          return target;\n        }\n      }\n    }\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"cat-label.js","sourceRoot":"","sources":["../../../src/components/cat-label/cat-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;0BAa8E,UAAU;;oBAUxF,KAAK;;EAExB,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,4DAA4D;MAC5D,MAAA,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACxD,eAAa;QACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC/D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR;QACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAC9D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;;UAC3C,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;cACrB,CACR,CACK,CACH,CACR,CAAC;EACJ,CAAC;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA9DuB,uBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACb,CAAC","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Labels are used to provide a short description of an input or form element.\n */\n@Component({\n  tag: 'cat-label',\n  styleUrl: 'cat-label.scss',\n  shadow: true\n})\nexport class CatLabel {\n  private static readonly SHADOW_TARGETS = [\n    'CAT-INPUT',\n    'CAT-TEXTAREA',\n    'CAT-CHECKBOX',\n    'CAT-TOGGLE',\n    'CAT-RADIO',\n    'CAT-SELECT'\n  ];\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   * The unique identifier for a referenced input.\n   */\n  @Prop() for?: string;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  onClick() {\n    if (this.for) {\n      // focus target that is possibly hidden inside a shadow root\n      (document.getElementById(this.for) || this.findShadowTarget(this.for))?.focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n          <slot></slot>\n          {!this.required && this.requiredMarker.startsWith('optional') && (\n            <span class=\"input-optional\" aria-hidden=\"true\">\n              ({i18n.t('input.optional')})\n            </span>\n          )}\n          {this.required && this.requiredMarker.startsWith('required') && (\n            <span class=\"input-optional\" aria-hidden=\"true\">\n              ({i18n.t('input.required')})\n            </span>\n          )}\n        </label>\n      </Host>\n    );\n  }\n\n  private findShadowTarget(id: string): HTMLElement | null {\n    for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n      const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n      for (let i = 0; i < elems.length; i++) {\n        const target = elems[i].shadowRoot?.getElementById(id);\n        if (target) {\n          return target;\n        }\n      }\n    }\n    return null;\n  }\n}\n"]}

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

@@ -74,4 +74,4 @@ export class CatNotificationService {
 }
 CatNotificationService.duration = 3000;
 export const catNotificationService = CatNotificationService.getInstance();
-//# sourceMappingURL=cat-notification.js.map
+//# sourceMappingURL=cat-notification.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n  toast?: {\n    showToast: () => void;\n    hideToast: () => void;\n  };\n}\n\nexport interface ToastOptions {\n  /** The appearance mode of the notification. (Default: `dark`) */\n  mode: 'dark' | 'light';\n  /** An optional icon to appear in the notification. */\n  icon: string;\n  /** The placement of the notification on screen. (Default: `bottom-left`) */\n  placement: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /** Enables auto-closing of the notification. (Default: `true`) */\n  autoClose: boolean;\n  /** The duration in ms for the notification to be visible on screen. (Default: `3000`) */\n  duration: number;\n  /** An optional label for an action button. */\n  action: string;\n  /** Enable markup escape and sanitise HTML input. (Default: true) */\n  escapeMarkup: boolean;\n  /** Callback executed when the action button is clicked. Receives a reference to the notification as first argument. */\n  onAction: (toast: ToastRef) => void;\n  /** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */\n  onClick: (toast: ToastRef) => void;\n  /** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\n  onDismiss: (toast: ToastRef) => void;\n}\n\nexport class CatNotificationService {\n  private static instance: CatNotificationService;\n  private static duration = 3000;\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatNotificationService {\n    if (!CatNotificationService.instance) {\n      CatNotificationService.instance = new CatNotificationService();\n    }\n    return CatNotificationService.instance;\n  }\n\n  show(content: string | Node, options?: Partial<ToastOptions>): () => void {\n    const ref: ToastRef = {};\n    const toastContent = this.getNode(content, ref, options);\n    const toastOptions = this.getOptions(toastContent, ref, options);\n    const toast = Toastify(toastOptions);\n    ref.toast = toast;\n    toast.showToast();\n    return () => toast.hideToast();\n  }\n\n  private getNode(content: string | Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n    const template = document.createElement('template');\n    template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n      ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n      <div class=\"cat-toastify-content\">\n        <div class=\"cat-toastify-inner\"></div>\n        ${\n          options?.action\n            ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n            : ''\n        }\n      </div>\n      ${\n        options?.autoClose === false\n          ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"cross-outlined\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n              'notification.dismiss'\n            )}\"></cat-button>`\n          : ''\n      }\n    </div>`;\n\n    const node = template.content.firstElementChild as HTMLElement;\n    node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n    node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n    const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n    if (inner) {\n      if (typeof content !== 'string') {\n        inner.replaceChildren(content);\n      } else if (options?.escapeMarkup === false) {\n        inner.innerHTML = content;\n      } else {\n        inner.innerText = content;\n      }\n    }\n\n    return node;\n  }\n\n  private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n    const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [\n      Options['gravity'],\n      Options['position']\n    ];\n    const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n    return {\n      gravity,\n      position,\n      node,\n      duration,\n      close: false,\n      className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n      stopOnFocus: true,\n      onClick: () => options?.onClick?.(ref),\n      callback: () => options?.onDismiss?.(ref),\n      offset: {\n        x: '1rem',\n        y: '1rem'\n      }\n    };\n  }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}
+{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n  toast?: {\n    showToast: () => void;\n    hideToast: () => void;\n  };\n}\n\nexport interface ToastOptions {\n  /** The appearance mode of the notification. (Default: `dark`) */\n  mode: 'dark' | 'light';\n  /** An optional icon to appear in the notification. */\n  icon: string;\n  /** The placement of the notification on screen. (Default: `bottom-left`) */\n  placement: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /** Enables auto-closing of the notification. (Default: `true`) */\n  autoClose: boolean;\n  /** The duration in ms for the notification to be visible on screen. (Default: `3000`) */\n  duration: number;\n  /** An optional label for an action button. */\n  action: string;\n  /** Enable markup escape and sanitise HTML input. (Default: true) */\n  escapeMarkup: boolean;\n  /** Callback executed when the action button is clicked. Receives a reference to the notification as first argument. */\n  onAction: (toast: ToastRef) => void;\n  /** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */\n  onClick: (toast: ToastRef) => void;\n  /** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\n  onDismiss: (toast: ToastRef) => void;\n}\n\nexport class CatNotificationService {\n  private static instance: CatNotificationService;\n  private static duration = 3000;\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatNotificationService {\n    if (!CatNotificationService.instance) {\n      CatNotificationService.instance = new CatNotificationService();\n    }\n    return CatNotificationService.instance;\n  }\n\n  show(content: string | Node, options?: Partial<ToastOptions>): () => void {\n    const ref: ToastRef = {};\n    const toastContent = this.getNode(content, ref, options);\n    const toastOptions = this.getOptions(toastContent, ref, options);\n    const toast = Toastify(toastOptions);\n    ref.toast = toast;\n    toast.showToast();\n    return () => toast.hideToast();\n  }\n\n  private getNode(content: string | Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n    const template = document.createElement('template');\n    template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n      ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n      <div class=\"cat-toastify-content\">\n        <div class=\"cat-toastify-inner\"></div>\n        ${\n          options?.action\n            ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n            : ''\n        }\n      </div>\n      ${\n        options?.autoClose === false\n          ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"cross-outlined\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n              'notification.dismiss'\n            )}\"></cat-button>`\n          : ''\n      }\n    </div>`;\n\n    const node = template.content.firstElementChild as HTMLElement;\n    node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n    node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n    const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n    if (inner) {\n      if (typeof content !== 'string') {\n        inner.replaceChildren(content);\n      } else if (options?.escapeMarkup === false) {\n        inner.innerHTML = content;\n      } else {\n        inner.innerText = content;\n      }\n    }\n\n    return node;\n  }\n\n  private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n    const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [\n      Options['gravity'],\n      Options['position']\n    ];\n    const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n    return {\n      gravity,\n      position,\n      node,\n      duration,\n      close: false,\n      className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n      stopOnFocus: true,\n      onClick: () => options?.onClick?.(ref),\n      callback: () => options?.onDismiss?.(ref),\n      offset: {\n        x: '1rem',\n        y: '1rem'\n      }\n    };\n  }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}