@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-input2.js.map

@@ -1 +1 @@
-{"file":"cat-input2.js","mappings":"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","names":["log","i18n"],"sources":["src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n  display: flex;\n  @include cat-body('m', null);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-field,\n.input-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: form-label.$cat-input-height;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n  transition: box-shadow cat-token('time.transition.s') linear;\n  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-readonly {\n    pointer-events: none;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.muted');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled):hover {\n    box-shadow:\n      inset 0 0 0 1px rgb(var(--border-color)),\n      0 0 0 1px rgb(var(--border-color));\n  }\n\n  &:focus-within {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: -1px;\n  }\n\n  &.input-invalid {\n    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:has(input:-webkit-autofill) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: cat-token('color.ui.background.inputAutofill');\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.dark');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.dark');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n  @include cat-ellipsis;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:-webkit-autofill {\n    &,\n    &:hover,\n    &:focus {\n      -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\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';\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 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  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;\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<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  componentWillRender(): void {\n    this.onErrorsChanged(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    // 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(value?: boolean | string[] | ErrorMap) {\n    if (!coerceBoolean(this.errorUpdate)) {\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      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n    }\n  }\n\n  render() {\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 && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.value?.toString().length ?? 0}/{this.maxLength}\n                    </div>\n                  )}\n                </div>\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-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                {...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\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.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            </div>\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 && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n            {this.textSuffix && (\n              <span class=\"text-suffix\" part=\"suffix\">\n                {this.textSuffix}\n              </span>\n            )}\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 !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    this.value = 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 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-input2.js","mappings":"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","names":["log","i18n"],"sources":["src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n  display: flex;\n  @include cat-body('m', null);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-field,\n.input-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: form-label.$cat-input-height;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n  transition: box-shadow cat-token('time.transition.s') linear;\n  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-readonly {\n    pointer-events: none;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.muted');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled):hover {\n    box-shadow:\n      inset 0 0 0 1px rgb(var(--border-color)),\n      0 0 0 1px rgb(var(--border-color));\n  }\n\n  &:focus-within {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: -1px;\n  }\n\n  &.input-invalid {\n    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:has(input:-webkit-autofill) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: cat-token('color.ui.background.inputAutofill');\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.dark');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.dark');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n  @include cat-ellipsis;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:-webkit-autofill {\n    &,\n    &:hover,\n    &:focus {\n      -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\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';\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 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  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;\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<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  componentWillRender(): void {\n    this.onErrorsChanged(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    // 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(value?: boolean | string[] | ErrorMap) {\n    if (!coerceBoolean(this.errorUpdate)) {\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      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n    }\n  }\n\n  render() {\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 && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.value?.toString().length ?? 0}/{this.maxLength}\n                    </div>\n                  )}\n                </div>\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-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                {...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\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.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            </div>\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 && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n            {this.textSuffix && (\n              <span class=\"text-suffix\" part=\"suffix\">\n                {this.textSuffix}\n              </span>\n            )}\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 !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    this.value = 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 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}

package/dist/components/cat-pagination.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatPagination extends Components.CatPagination, HTMLElement {}
 export const CatPagination: {
-  prototype: CatPagination;
-  new (): CatPagination;
+    prototype: CatPagination;
+    new (): CatPagination;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-pagination.js

@@ -7,114 +7,114 @@ import { d as defineCustomElement$2 } from './cat-spinner2.js';
 const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
 
 const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class CatPagination extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catChange = createEvent(this, "catChange", 7);
-    this.page = 0;
-    this.pageCount = 1;
-    this.activePadding = 1;
-    this.sidePadding = 1;
-    this.size = 'm';
-    this.variant = 'text';
-    this.round = false;
-    this.compact = false;
-    this.iconPrev = '$cat:pagination-left';
-    this.iconNext = '$cat:pagination-right';
-  }
-  render() {
-    return (h("nav", { role: "navigation" }, h("ol", { class: {
-        [`cat-pagination-${this.size}`]: Boolean(this.size)
-      } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
-  }
-  get isFirst() {
-    return this.page === 0;
-  }
-  get isLast() {
-    return this.page === this.pageCount - 1;
-  }
-  setPage(value) {
-    this.page = value;
-    this.catChange.emit(this.page);
-  }
-  get pages() {
-    if (!this.sidePadding && !this.activePadding) {
-      return [this.page];
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catChange = createEvent(this, "catChange", 7);
+        this.page = 0;
+        this.pageCount = 1;
+        this.activePadding = 1;
+        this.sidePadding = 1;
+        this.size = 'm';
+        this.variant = 'text';
+        this.round = false;
+        this.compact = false;
+        this.iconPrev = '$cat:pagination-left';
+        this.iconNext = '$cat:pagination-right';
     }
-    const result = new Set();
-    const minPage = this.page <= this.sidePadding + this.activePadding + 1;
-    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;
-    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;
-    const maxActivepage = maxPage
-      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2
-      : this.pageCount - this.sidePadding;
-    this.addSeq(result, 0, minActivepage);
-    if (!minPage && !maxPage) {
-      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);
+    render() {
+        return (h("nav", { role: "navigation" }, h("ol", { class: {
+                [`cat-pagination-${this.size}`]: Boolean(this.size)
+            } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
-    this.addSeq(result, maxActivepage, this.pageCount);
-    return [...result];
-  }
-  addSeq(set, start, end) {
-    const _start = this.clamp(start, 0, this.pageCount);
-    const _end = this.clamp(end, 0, this.pageCount);
-    Array(_end - _start)
-      .fill(0)
-      .forEach((_, i) => set.add(_start + i));
-  }
-  clamp(num, min, max) {
-    return Math.min(Math.max(num, min), max);
-  }
-  get content() {
-    if (this.compact) {
-      return (h("li", { class: "text" }, this.page + 1, "/", this.pageCount));
+    get isFirst() {
+        return this.page === 0;
     }
-    return this.pages.map((page, i) => [
-      i > 0 && this.pages[i - 1] !== page - 1 ? h("li", { class: "dots" }, "\u2026") : null,
-      h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: catI18nRegistry.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => this.setPage(page) }, page + 1))
-    ]);
-  }
-  static get style() { return catPaginationCss; }
+    get isLast() {
+        return this.page === this.pageCount - 1;
+    }
+    setPage(value) {
+        this.page = value;
+        this.catChange.emit(this.page);
+    }
+    get pages() {
+        if (!this.sidePadding && !this.activePadding) {
+            return [this.page];
+        }
+        const result = new Set();
+        const minPage = this.page <= this.sidePadding + this.activePadding + 1;
+        const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;
+        const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;
+        const maxActivepage = maxPage
+            ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2
+            : this.pageCount - this.sidePadding;
+        this.addSeq(result, 0, minActivepage);
+        if (!minPage && !maxPage) {
+            this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);
+        }
+        this.addSeq(result, maxActivepage, this.pageCount);
+        return [...result];
+    }
+    addSeq(set, start, end) {
+        const _start = this.clamp(start, 0, this.pageCount);
+        const _end = this.clamp(end, 0, this.pageCount);
+        Array(_end - _start)
+            .fill(0)
+            .forEach((_, i) => set.add(_start + i));
+    }
+    clamp(num, min, max) {
+        return Math.min(Math.max(num, min), max);
+    }
+    get content() {
+        if (this.compact) {
+            return (h("li", { class: "text" }, this.page + 1, "/", this.pageCount));
+        }
+        return this.pages.map((page, i) => [
+            i > 0 && this.pages[i - 1] !== page - 1 ? h("li", { class: "dots" }, "\u2026") : null,
+            h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: catI18nRegistry.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => this.setPage(page) }, page + 1))
+        ]);
+    }
+    static get style() { return catPaginationCss; }
 }, [1, "cat-pagination", {
-    "page": [1026],
-    "pageCount": [2, "page-count"],
-    "activePadding": [2, "active-padding"],
-    "sidePadding": [2, "side-padding"],
-    "size": [1],
-    "variant": [1],
-    "round": [4],
-    "compact": [4],
-    "iconPrev": [1, "icon-prev"],
-    "iconNext": [1, "icon-next"]
-  }]);
+        "page": [1026],
+        "pageCount": [2, "page-count"],
+        "activePadding": [2, "active-padding"],
+        "sidePadding": [2, "side-padding"],
+        "size": [1],
+        "variant": [1],
+        "round": [4],
+        "compact": [4],
+        "iconPrev": [1, "icon-prev"],
+        "iconNext": [1, "icon-next"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-pagination", "cat-button", "cat-icon", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-pagination":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatPagination$1);
-      }
-      break;
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-pagination", "cat-button", "cat-icon", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatPagination$1);
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const CatPagination = CatPagination$1;

package/dist/components/cat-pagination.js.map

@@ -1 +1 @@
-{"file":"cat-pagination.js","mappings":"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","names":["CatPagination","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nol {\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nli {\n  display: inline-flex;\n  justify-content: center;\n\n  &.dots {\n    @include cat-select(none);\n  }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n  ol {\n    gap: 0.75rem;\n  }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .cat-pagination-#{$size} {\n    li.dots,\n    li.text {\n      height: map.get($button-sizes, $size);\n      line-height: map.get($button-sizes, $size);\n      font-size: cat-body-font-size($fontSize);\n    }\n\n    li.dots {\n      width: map.get($button-sizes, $size);\n    }\n  }\n\n  :host([variant='outlined']) {\n    .cat-pagination-#{$size} {\n      gap: map.get($button-sizes, $size) * 0.25;\n    }\n  }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: true\n})\nexport class CatPagination {\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter<number>;\n\n  render() {\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => this.setPage(this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => this.setPage(this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => this.setPage(page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"],"version":3}
+{"file":"cat-pagination.js","mappings":"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","names":["CatPagination","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nol {\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nli {\n  display: inline-flex;\n  justify-content: center;\n\n  &.dots {\n    @include cat-select(none);\n  }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n  ol {\n    gap: 0.75rem;\n  }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .cat-pagination-#{$size} {\n    li.dots,\n    li.text {\n      height: map.get($button-sizes, $size);\n      line-height: map.get($button-sizes, $size);\n      font-size: cat-body-font-size($fontSize);\n    }\n\n    li.dots {\n      width: map.get($button-sizes, $size);\n    }\n  }\n\n  :host([variant='outlined']) {\n    .cat-pagination-#{$size} {\n      gap: map.get($button-sizes, $size) * 0.25;\n    }\n  }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: true\n})\nexport class CatPagination {\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter<number>;\n\n  render() {\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => this.setPage(this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => this.setPage(this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => this.setPage(page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"],"version":3}

package/dist/components/cat-radio-group.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatRadioGroup extends Components.CatRadioGroup, HTMLElement {}
 export const CatRadioGroup: {
-  prototype: CatRadioGroup;
-  new (): CatRadioGroup;
+    prototype: CatRadioGroup;
+    new (): CatRadioGroup;
 };
 /**
  * Used to define this component and all nested components recursively.