@six-group/ui-library 0.0.0-insider.bc75fdf → 0.0.0-insider.c4e8588

package/dist/ui-library/{p-4435ff73.entry.js.map → p-021f6da9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixRangeCss","id","SixRange","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleInput","nativeInput","update","parseFloat","value","requestAnimationFrame","sixChange","emit","handleBlur","hasFocus","hasTooltip","sixBlur","_a","resizeObserver","unobserve","handleFocus","sixFocus","observe","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasLabelSlot","hasErrorTextSlot","handleTouchStart","setFocus","toString","handleLabelChange","handleValueChange","connectedCallback","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","ResizeObserver","disconnectedCallback","removeEventListener","removeAll","options","focus","removeFocus","blur","syncTooltip","min","max","tooltip","output","percent","Math","inputWidth","offsetWidth","tooltipWidth","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","navigator","userAgent","toLowerCase","indexOf","updateValue","Number","_b","parsedValue","isNaN","getDefaultValue","calculateColorRunnableTrack","ceil","background","render","h","FormControl","label","helpText","size","errorText","errorTextCount","disabled","required","displayError","invalid","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["sixRangeCss","id","SixRange","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleInput","nativeInput","update","parseFloat","value","requestAnimationFrame","sixChange","emit","handleBlur","hasFocus","hasTooltip","sixBlur","_a","resizeObserver","unobserve","handleFocus","sixFocus","observe","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasLabelSlot","hasErrorTextSlot","handleTouchStart","setFocus","toString","handleLabelChange","handleValueChange","connectedCallback","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","ResizeObserver","disconnectedCallback","removeEventListener","removeAll","options","focus","removeFocus","blur","syncTooltip","min","max","tooltip","output","percent","Math","inputWidth","offsetWidth","tooltipWidth","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","navigator","userAgent","toLowerCase","indexOf","updateValue","Number","_b","parsedValue","isNaN","getDefaultValue","calculateColorRunnableTrack","ceil","background","render","h","FormControl","label","helpText","size","errorText","errorTextCount","disabled","required","displayError","invalid","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-0274c52c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,g as o}from"./p-ca63a6fa.js";import{F as i}from"./p-67496e8c.js";import{h as a}from"./p-0cebf1d2.js";import{E as s}from"./p-8bfb4bfc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change",7);this.sixInput=e(this,"six-textarea-input",7);this.sixFocus=e(this,"six-textarea-focus",7);this.sixBlur=e(this,"six-textarea-blur",7);this.inputId=`textarea-${++n}`;this.labelId=`textarea-label-${n}`;this.helpTextId=`textarea-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.handleChange=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.sixChange.emit()}};this.handleInput=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleSlotChange=()=>{this.hasLabelSlot=a(this.host,"label");this.hasHelpTextSlot=a(this.host,"help-text");this.hasErrorTextSlot=a(this.host,"error-text")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.size="medium";this.name="";this.value="";this.helpText="";this.placeholder=undefined;this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.inputmode=undefined}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){this.setTextareaHeight()}handleValueChange(){this.value=this.getValue();if(this.nativeTextarea!=null){if(this.nativeTextarea.value!==this.value){this.nativeTextarea.value=this.value}}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-textarea-input","input",this.host);this.eventListeners.forward("six-textarea-change","change",this.host);this.eventListeners.forward("six-textarea-focus","focus",this.host);this.eventListeners.forward("six-textarea-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();if(this.nativeTextarea!=null){this.resizeObserver.observe(this.nativeTextarea)}}disconnectedCallback(){var t;if(this.nativeTextarea!=null){this.resizeObserver.unobserve(this.nativeTextarea)}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;(e=this.nativeTextarea)===null||e===void 0?void 0:e.focus(t)}async removeFocus(){var t;(t=this.nativeTextarea)===null||t===void 0?void 0:t.blur()}async select(){var t;return(t=this.nativeTextarea)===null||t===void 0?void 0:t.select()}async setSelectionRange(t,e,r="none"){var o;return(o=this.nativeTextarea)===null||o===void 0?void 0:o.setSelectionRange(t,e,r)}async setRangeText(t,e,r,o="preserve"){if(this.nativeTextarea==null)return;this.nativeTextarea.setRangeText(t,e,r,o);if(this.getValue()!==this.nativeTextarea.value){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}setTextareaHeight(){if(this.nativeTextarea==null)return;if(this.resize==="auto"){this.nativeTextarea.style.height="auto";this.nativeTextarea.style.height=this.nativeTextarea.scrollHeight+"px"}else{this.nativeTextarea.style.height=undefined}}getValue(){var t;return((t=this.value)!==null&&t!==void 0?t:"").toString()}render(){return r(i,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":this.getValue().length===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{part:"textarea",ref:t=>this.nativeTextarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.getValue(),autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_textarea};
+//# sourceMappingURL=p-0274c52c.entry.js.map

package/dist/ui-library/{p-a457fee8.entry.js.map → p-0274c52c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixTextareaCss","id","SixTextarea","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","resizeObserver","ResizeObserver","setTextareaHeight","handleChange","nativeTextarea","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","hasErrorTextSlot","handleLabelChange","handleRowsChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","removeEventListener","removeAll","setFocus","options","focus","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","resize","style","height","scrollHeight","undefined","toString","render","h","FormControl","label","helpText","errorText","errorTextCount","size","disabled","required","displayError","invalid","part","class","textarea","length","ref","el","name","placeholder","readOnly","readonly","rows","minLength","minlength","maxLength","maxlength","autoCapitalize","autocapitalize","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","inputMode","inputmode","onChange","onInput","onFocus","onBlur"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private eventListeners = new EventListeners();\n  private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-textarea-input', 'input', this.host);\n    this.eventListeners.forward('six-textarea-change', 'change', this.host);\n    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.observe(this.nativeTextarea);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) return;\n\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private setTextareaHeight() {\n    if (this.nativeTextarea == null) return;\n\n    if (this.resize === 'auto') {\n      this.nativeTextarea.style.height = 'auto';\n      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n    } else {\n      (this.nativeTextarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["sixTextareaCss","id","SixTextarea","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","resizeObserver","ResizeObserver","setTextareaHeight","handleChange","nativeTextarea","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","hasErrorTextSlot","handleLabelChange","handleRowsChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","removeEventListener","removeAll","setFocus","options","focus","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","resize","style","height","scrollHeight","undefined","toString","render","h","FormControl","label","helpText","errorText","errorTextCount","size","disabled","required","displayError","invalid","part","class","textarea","length","ref","el","name","placeholder","readOnly","readonly","rows","minLength","minlength","maxLength","maxlength","autoCapitalize","autocapitalize","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","inputMode","inputmode","onChange","onInput","onFocus","onBlur"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private eventListeners = new EventListeners();\n  private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-textarea-input', 'input', this.host);\n    this.eventListeners.forward('six-textarea-change', 'change', this.host);\n    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.observe(this.nativeTextarea);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) return;\n\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private setTextareaHeight() {\n    if (this.nativeTextarea == null) return;\n\n    if (this.resize === 'auto') {\n      this.nativeTextarea.style.height = 'auto';\n      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n    } else {\n      (this.nativeTextarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-5654e4c7.js → p-06ba4450.js}

@@ -1,2 +1,2 @@
 const o=new WeakMap;function n(n){if(n==null)return;const e=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageDown","PageUp"];const s=o=>{if(e.includes(o.key)){n.classList.add("focus-visible")}};const i=()=>n.classList.remove("focus-visible");o.set(n,{is:s,isNot:i});n.addEventListener("keydown",s);n.addEventListener("keyup",s);n.addEventListener("mousedown",i);n.addEventListener("mousedown",i)}function e(n){if(n==null)return;const e=o.get(n);if(!e){return}const{is:s,isNot:i}=e;n.classList.remove("focus-visible");n.removeEventListener("keydown",s);n.removeEventListener("keyup",s);n.removeEventListener("mousedown",i);n.removeEventListener("mousedown",i)}const s={observe:n,unobserve:e};export{s as f};
-//# sourceMappingURL=p-5654e4c7.js.map
+//# sourceMappingURL=p-06ba4450.js.map

package/dist/ui-library/{p-9b354f5d.entry.js → p-0cb135aa.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i}from"./p-6153045b.js";const t=".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";const n={403:{en:"Access Denied",de:"Kein Zugriff"},404:{en:"Not Found",de:"Seite nicht gefunden"},500:{en:"Ooops!",de:"Ups!"}};const r={403:{en:["You don’t have permission to access this page. ","Please contact an administrator or click the SIX logo on top left."],de:["Sie haben keine Zugriffsberechtigung auf diese Seite.","Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links."]},404:{en:["We have not found the page you requested.","Please click the SIX logo on top left."],de:["Wir haben die angeforderte Seite nicht gefunden.","Bitte klicken Sie auf das SIX-Logo oben links."]},500:{en:["Sorry, we messed up! We try to fix this.","Please click the SIX logo on top left."],de:["Sorry, das war unser Fehler! Wir versuchen das zu beheben.","Bitte klicken Sie auf das SIX-Logo oben links."]}};const s=class{constructor(i){e(this,i);this.errorCode=undefined;this.language="en";this.customTitle=undefined;this.customDescription=undefined;this.customIcon=undefined}getIconName(){if(this.customIcon!=null){return this.customIcon}if(this.errorCode==null){return}if(this.errorCode===403){return"lock"}if(this.errorCode===404){return"find-in-page"}if(this.errorCode===500){return"sentiment-dissatisfied"}}getErrorTitle(){if(this.customTitle!=null){return this.customTitle}if(this.errorCode==null){return}return n[this.errorCode][this.language]}getErrorDescription(){var e;if(this.errorCode==null&&this.customDescription==null){return}const t=(e=this.getDescriptions())!==null&&e!==void 0?e:[];return t.map((e=>i("div",null,e)))}getDescriptions(){if(this.customDescription!==undefined){return this.customDescription}if(this.errorCode==null){return}return r[this.errorCode][this.language]}render(){return i("div",{part:"container"},i("div",{class:"six-error-page__icon-container",part:"icon-container"},i("six-picto",{size:"4xl",class:"six-error-page__icon",part:"icon"},this.getIconName())),i("div",{class:"six-error-page__title",part:"title"},this.getErrorTitle()),i("div",{class:"six-error-page__description",part:"description"},this.getErrorDescription()))}};s.style=t;export{s as six_error_page};
-//# sourceMappingURL=p-9b354f5d.entry.js.map
+import{r as e,h as i}from"./p-ca63a6fa.js";const t=".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";const n={403:{en:"Access Denied",de:"Kein Zugriff"},404:{en:"Not Found",de:"Seite nicht gefunden"},500:{en:"Ooops!",de:"Ups!"}};const r={403:{en:["You don’t have permission to access this page. ","Please contact an administrator or click the SIX logo on top left."],de:["Sie haben keine Zugriffsberechtigung auf diese Seite.","Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links."]},404:{en:["We have not found the page you requested.","Please click the SIX logo on top left."],de:["Wir haben die angeforderte Seite nicht gefunden.","Bitte klicken Sie auf das SIX-Logo oben links."]},500:{en:["Sorry, we messed up! We try to fix this.","Please click the SIX logo on top left."],de:["Sorry, das war unser Fehler! Wir versuchen das zu beheben.","Bitte klicken Sie auf das SIX-Logo oben links."]}};const s=class{constructor(i){e(this,i);this.errorCode=undefined;this.language="en";this.customTitle=undefined;this.customDescription=undefined;this.customIcon=undefined}getIconName(){if(this.customIcon!=null){return this.customIcon}if(this.errorCode==null){return}if(this.errorCode===403){return"lock"}if(this.errorCode===404){return"find-in-page"}if(this.errorCode===500){return"sentiment-dissatisfied"}}getErrorTitle(){if(this.customTitle!=null){return this.customTitle}if(this.errorCode==null){return}return n[this.errorCode][this.language]}getErrorDescription(){var e;if(this.errorCode==null&&this.customDescription==null){return}const t=(e=this.getDescriptions())!==null&&e!==void 0?e:[];return t.map((e=>i("div",null,e)))}getDescriptions(){if(this.customDescription!==undefined){return this.customDescription}if(this.errorCode==null){return}return r[this.errorCode][this.language]}render(){return i("div",{part:"container"},i("div",{class:"six-error-page__icon-container",part:"icon-container"},i("six-picto",{size:"4xl",class:"six-error-page__icon",part:"icon"},this.getIconName())),i("div",{class:"six-error-page__title",part:"title"},this.getErrorTitle()),i("div",{class:"six-error-page__description",part:"description"},this.getErrorDescription()))}};s.style=t;export{s as six_error_page};
+//# sourceMappingURL=p-0cb135aa.entry.js.map

package/dist/ui-library/p-0cebf1d2.js

@@ -0,0 +1,2 @@
+function n(n){const r=n!=null?n.assignedNodes({flatten:true}):[];let t="";[...r].map((n=>{if(n.nodeType===Node.TEXT_NODE){t+=n.textContent}}));return t}function r(n,r){if(r!=null&&r!==""){return n.querySelector(`[slot="${r}"]`)!==null}return Array.from(n.childNodes).some((n=>{var r;if(n.nodeType===n.TEXT_NODE&&((r=n.textContent)===null||r===void 0?void 0:r.trim())!==""){return true}if(n.nodeType===n.ELEMENT_NODE){const r=n;if(!r.hasAttribute("slot")){return true}}return false}))}function t(n,r){if(n==null)return null;return n.querySelector(`[slot="${r}"]`)}export{n as a,t as g,r as h};
+//# sourceMappingURL=p-0cebf1d2.js.map

package/dist/ui-library/p-0cebf1d2.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTextContent","slot","nodes","assignedNodes","flatten","text","map","node","nodeType","Node","TEXT_NODE","textContent","hasSlot","el","name","querySelector","Array","from","childNodes","some","_a","trim","ELEMENT_NODE","hasAttribute","getSlot","element","slotName"],"sources":["src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot?: HTMLSlotElement): string {\n  const nodes = slot != null ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string): boolean {\n  // Look for a named slot\n  if (name != null && name !== '') {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function getSlot(element: ParentNode | null | undefined, slotName: string): HTMLElement | null {\n  if (element == null) return null;\n  return element.querySelector(`[slot=\"${slotName}\"]`);\n}\n"],"mappings":"SAIgBA,EAAeC,GAC7B,MAAMC,EAAQD,GAAQ,KAAOA,EAAKE,cAAc,CAAEC,QAAS,OAAU,GACrE,IAAIC,EAAO,GAEX,IAAIH,GAAOI,KAAKC,IACd,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,CACpCL,GAAQE,EAAKI,W,KAIjB,OAAON,CACT,C,SAMgBO,EAAQC,EAAiBC,GAEvC,GAAIA,GAAQ,MAAQA,IAAS,GAAI,CAC/B,OAAOD,EAAGE,cAAc,UAAUD,SAAc,I,CAIlD,OAAOE,MAAMC,KAAKJ,EAAGK,YAAYC,MAAMZ,I,MACrC,GAAIA,EAAKC,WAAaD,EAAKG,aAAaU,EAAAb,EAAKI,eAAW,MAAAS,SAAA,SAAAA,EAAEC,UAAW,GAAI,CACvE,OAAO,I,CAGT,GAAId,EAAKC,WAAaD,EAAKe,aAAc,CACvC,MAAMT,EAAKN,EACX,IAAKM,EAAGU,aAAa,QAAS,CAC5B,OAAO,I,EAIX,OAAO,KAAK,GAEhB,C,SAEgBC,EAAQC,EAAwCC,GAC9D,GAAID,GAAW,KAAM,OAAO,KAC5B,OAAOA,EAAQV,cAAc,UAAUW,MACzC,Q"}

package/dist/ui-library/p-1431a2a8.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as o,g as r}from"./p-ca63a6fa.js";import{F as s}from"./p-67496e8c.js";import{h as e}from"./p-0cebf1d2.js";import{E as n}from"./p-8bfb4bfc.js";import{s as l}from"./p-842b492e.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}';const u={large:"medium",medium:"small",small:"xSmall"};let p=0;const h=class{constructor(o){i(this,o);this.sixChange=t(this,"six-input-change",7);this.sixClear=t(this,"six-input-clear",7);this.sixInput=t(this,"six-input-input",7);this.sixFocus=t(this,"six-input-focus",7);this.sixBlur=t(this,"six-input-blur",7);this.inputId=`input-${++p}`;this.labelId=`input-label-${p}`;this.helpTextId=`input-help-text-${p}`;this.errorTextId=`input-error-text-${p}`;this.eventListeners=new n;this.handleChange=i=>{i.stopPropagation();if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixChange.emit()}};this.handleInput=i=>{i.stopPropagation();if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClearClick=i=>{this.value="";this.sixClear.emit();this.sixInput.emit();this.sixChange.emit();if(this.nativeInput!=null){this.nativeInput.focus()}i.stopPropagation()};this.handleKeyDown=i=>{const t=i.metaKey||i.ctrlKey||i.shiftKey||i.altKey;if(i.key==="Enter"&&!t){setTimeout((()=>{if(!i.defaultPrevented&&!i.isComposing){l(this.host)}}))}};this.handlePasswordToggle=()=>{this.isPasswordVisible=!this.isPasswordVisible};this.handleSlotChange=()=>{this.hasHelpTextSlot=e(this.host,"help-text");this.hasLabelSlot=e(this.host,"label");this.hasErrorSlot=e(this.host,"error-text")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.isPasswordVisible=false;this.type="text";this.size="medium";this.name="";this.value="";this.pill=false;this.helpText="";this.placeholder=undefined;this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.pattern=undefined;this.dropdownSearch=false;this.required=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.clearable=false;this.togglePassword=false;this.inputmode=undefined;this.line=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.value=this.getValue();if(this.nativeInput!=null&&this.nativeInput.value!==this.value){this.nativeInput.value=this.value}}connectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-input-input","input",this.host);this.eventListeners.forward("six-input-change","change",this.host);this.eventListeners.forward("six-input-focus","focus",this.host);this.eventListeners.forward("six-input-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(i){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}async select(){var i;return(i=this.nativeInput)===null||i===void 0?void 0:i.select()}async setSelectionRange(i,t,o="none"){var r;return(r=this.nativeInput)===null||r===void 0?void 0:r.setSelectionRange(i,t,o)}async setRangeText(i,t,o,r="preserve"){if(this.nativeInput==null){return}this.nativeInput.setRangeText(i,t,o,r);if(this.getValue()!==this.nativeInput.value){this.value=this.nativeInput.value;this.sixChange.emit();this.sixInput.emit()}}getValue(){var i;return((i=this.value)!==null&&i!==void 0?i:"").toString()}render(){return o(s,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},o("div",{part:"base",class:{input:true,"input--small":this.size==="small","input--medium":this.size==="medium","input--large":this.size==="large","input--line":this.line,"input--pill":this.pill,"input--disabled":this.disabled,"input--dropdown-search":this.dropdownSearch,"input--focused":this.hasFocus,"input--empty":this.getValue().length===0,"input--invalid":this.invalid}},o("span",{part:"prefix",class:"input__prefix"},o("slot",{name:"prefix"})),o("input",{part:"input",ref:i=>this.nativeInput=i,id:this.inputId,size:1,class:{input__control:true,input__control__prefix:e(this.host,"prefix")},type:this.type==="password"&&this.isPasswordVisible?"text":this.type,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,minLength:this.minlength,maxLength:this.maxlength,min:this.min,max:this.max,step:this.step,value:this.getValue(),autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,pattern:this.pattern,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,"aria-describedby":this.helpTextId,"aria-invalid":this.invalid?"true":"false",onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,"data-testid":"input-control"}),this.clearable&&o("button",{part:"clear-button",class:"input__clear",type:"button",onClick:this.handleClearClick,tabindex:"-1","data-testid":"input-clear-button"},o("slot",{name:"clear-icon"},o("six-icon",{size:u[this.size]},"clear"))),this.togglePassword&&o("button",{part:"password-toggle-button",class:"input__password-toggle",type:"button",onClick:this.handlePasswordToggle,tabindex:"-1"},this.isPasswordVisible?o("slot",{name:"show-password-icon"},o("six-icon",{size:u[this.size]},"visibility_off")):o("slot",{name:"hide-password-icon"},o("six-icon",{size:u[this.size]},"visibility"))),o("span",{part:"suffix",class:"input__suffix"},o("slot",{name:"suffix"}))))}get host(){return r(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],value:["handleValueChange"]}}};h.style=a;export{h as six_input};
+//# sourceMappingURL=p-1431a2a8.entry.js.map

package/dist/ui-library/p-1431a2a8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleChange","event","stopPropagation","nativeInput","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleClearClick","sixClear","focus","handleKeyDown","hasModifier","metaKey","ctrlKey","shiftKey","altKey","key","setTimeout","defaultPrevented","isComposing","submitForm","host","handlePasswordToggle","isPasswordVisible","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","hasErrorSlot","handleLabelChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","disconnectedCallback","removeEventListener","removeAll","setFocus","options","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","toString","render","h","FormControl","label","helpText","errorText","errorTextCount","hasErrorTextSlot","size","disabled","required","displayError","invalid","part","class","input","line","pill","dropdownSearch","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","onKeyDown","clearable","onClick","tabindex","togglePassword"],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.input {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &:hover:not(.input--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .input__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &:hover.input--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search.input--focused {\n    border-color: var(--six-input-border-color);\n  }\n\n  &.input--focused:not(.input--disabled) {\n    background-color: var(--six-input-background-color-focus);\n\n    border-bottom-color: var(--six-input-border-color-focus);\n    box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-focus);\n      box-shadow: var(--six-input-focus-shadow);\n    }\n\n    .input__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.input--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .input__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n\n  &.input--invalid:not(.input--disabled):not(.input--focused) {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.input__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  min-width: 0;\n  color: var(--six-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--six-color-primary-500);\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-ms-reveal {\n    display: none;\n  }\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  cursor: default;\n\n  ::slotted(six-icon) {\n    color: var(--six-input-icon-color);\n  }\n}\n\n.input {\n  &.input--disabled {\n    ::slotted(six-icon) {\n      cursor: not-allowed;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n  height: var(--six-height-small);\n\n  .input__control {\n    height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-small);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-small);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-small);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-small);\n  }\n}\n\n.input--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n  height: var(--six-height-medium);\n\n  .input__control {\n    height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-medium);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-medium);\n  }\n}\n\n.input--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n  height: var(--six-height-large);\n\n  .input__control {\n    height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-large);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-large);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-large);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n  &.input--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.input--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.input--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  border: none;\n  background: none;\n  padding: 0;\n  transition: var(--six-transition-fast) color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.input--empty .input__clear {\n  visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\n};\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n */\n\n@Component({\n  tag: 'six-input',\n  styleUrl: 'six-input.scss',\n  shadow: true,\n})\nexport class SixInput {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n  @State() isPasswordVisible = false;\n\n  /** The input's type. */\n  @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Set to true to draw a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to make the input readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** The input's minimum value. */\n  @Prop({ reflect: true }) min?: number;\n\n  /** The input's maximum value. */\n  @Prop({ reflect: true }) max?: number;\n\n  /** The input's step attribute. */\n  @Prop({ reflect: true }) step?: number;\n\n  /** A pattern to validate input against. */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /**\n   * Internal: Styles the input for the dropdown filter search.\n   */\n  @Prop() dropdownSearch = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The input's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set to true to add a password toggle button for password inputs. */\n  @Prop() togglePassword = false;\n\n  /** The input's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n      this.nativeInput.value = this.value;\n    }\n  }\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value.  */\n  @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-input-input', 'input', this.host);\n    this.eventListeners.forward('six-input-change', 'change', this.host);\n    this.eventListeners.forward('six-input-focus', 'focus', this.host);\n    this.eventListeners.forward('six-input-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeInput?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeInput.value) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    this.value = '';\n    this.sixClear.emit();\n    this.sixInput.emit();\n    this.sixChange.emit();\n    if (this.nativeInput != null) {\n      this.nativeInput.focus();\n    }\n    event.stopPropagation();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          submitForm(this.host);\n        }\n      });\n    }\n  };\n\n  private handlePasswordToggle = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            input: true,\n\n            // Sizes\n            'input--small': this.size === 'small',\n            'input--medium': this.size === 'medium',\n            'input--large': this.size === 'large',\n\n            // States\n            'input--line': this.line,\n            'input--pill': this.pill,\n            'input--disabled': this.disabled,\n            'input--dropdown-search': this.dropdownSearch,\n            'input--focused': this.hasFocus,\n            'input--empty': this.getValue().length === 0,\n            'input--invalid': this.invalid,\n          }}\n        >\n          <span part=\"prefix\" class=\"input__prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            size={1} // needed for firefox to overrule the default of 20\n            class={{\n              input__control: true,\n              input__control__prefix: hasSlot(this.host, 'prefix'),\n            }}\n            type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            pattern={this.pattern}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            onKeyDown={this.handleKeyDown}\n            data-testid=\"input-control\"\n          />\n\n          {this.clearable && (\n            <button\n              part=\"clear-button\"\n              class=\"input__clear\"\n              type=\"button\"\n              onClick={this.handleClearClick}\n              tabindex=\"-1\"\n              data-testid=\"input-clear-button\"\n            >\n              <slot name=\"clear-icon\">\n                <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n              </slot>\n            </button>\n          )}\n\n          {this.togglePassword && (\n            <button\n              part=\"password-toggle-button\"\n              class=\"input__password-toggle\"\n              type=\"button\"\n              onClick={this.handlePasswordToggle}\n              tabindex=\"-1\"\n            >\n              {this.isPasswordVisible ? (\n                <slot name=\"show-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n                </slot>\n              ) : (\n                <slot name=\"hide-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n                </slot>\n              )}\n            </button>\n          )}\n\n          <span part=\"suffix\" class=\"input__suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-1aa28025.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o}from"./p-ca63a6fa.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.menu-divider{border-top:solid var(--six-border-width) var(--six-menu-divider-color);margin-top:var(--six-spacing-xx-small);margin-bottom:var(--six-spacing-xx-small)}";const s=class{constructor(o){r(this,o)}render(){return o("div",{part:"base",class:"menu-divider",role:"separator","aria-hidden":"true"})}};s.style=i;export{s as six_menu_divider};
+//# sourceMappingURL=p-1aa28025.entry.js.map

package/dist/ui-library/p-1aa28025.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixMenuDividerCss","SixMenuDivider","render","h","part","class","role"],"sources":["src/components/six-menu-divider/six-menu-divider.scss?tag=six-menu-divider&encapsulation=shadow","src/components/six-menu-divider/six-menu-divider.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-divider {\n  border-top: solid var(--six-border-width) var(--six-menu-divider-color);\n  margin-top: var(--six-spacing-xx-small);\n  margin-bottom: var(--six-spacing-xx-small);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-divider',\n  styleUrl: 'six-menu-divider.scss',\n  shadow: true,\n})\nexport class SixMenuDivider {\n  render() {\n    return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,sS,MCgBbC,EAAc,M,yBACzB,MAAAC,GACE,OAAOC,EAAA,OAAKC,KAAK,OAAOC,MAAM,eAAeC,KAAK,YAAW,cAAa,Q"}

package/dist/ui-library/p-1b135e1c.entry.js

@@ -0,0 +1,2 @@
+import{r,h as i}from"./p-ca63a6fa.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";const e=class{constructor(i){r(this,i);this.six=false}renderSIXLogo(){return i("span",{class:"six-spinner","aria-busy":"true","aria-live":"polite"},i("div",{class:"six-spinner__container"},i("svg",{viewBox:"0 0 40 40",part:"svg"},i("path",{fill:"none",stroke:"#de3919","stroke-width":"5","stroke-linecap":"round",d:"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42"}))))}renderSimple(){return i("span",{part:"base",class:"spinner","aria-busy":"true","aria-live":"polite"})}render(){return this.six?this.renderSIXLogo():this.renderSimple()}};e.style=s;export{e as six_spinner};
+//# sourceMappingURL=p-1b135e1c.entry.js.map

package/dist/ui-library/{p-7e3ad38a.entry.js.map → p-1b135e1c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixSpinnerCss","SixSpinner","renderSIXLogo","h","class","viewBox","fill","stroke","d","renderSimple","part","render","this","six"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAgB,4vC,MCeTC,EAAU,M,kCAEP,K,CAEN,aAAAC,GACN,OACEC,EAAA,QAAMC,MAAM,cAAa,YAAW,OAAM,YAAW,UACnDD,EAAA,OAAKC,MAAM,0BACTD,EAAA,OAAKE,QAAQ,aACXF,EAAA,QACEG,KAAK,OACLC,OAAO,UAAS,eACH,IAAG,iBACD,QACfC,EAAE,wH,CAQN,YAAAC,GACN,OAAON,EAAA,QAAMO,KAAK,OAAON,MAAM,UAAS,YAAW,OAAM,YAAW,U,CAGtE,MAAAO,GACE,OAAOC,KAAKC,IAAMD,KAAKV,gBAAkBU,KAAKH,c"}
+{"version":3,"names":["sixSpinnerCss","SixSpinner","renderSIXLogo","h","class","viewBox","part","fill","stroke","d","renderSimple","render","this","six"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\" part=\"svg\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAgB,+vC,MCgBTC,EAAU,M,kCAEP,K,CAEN,aAAAC,GACN,OACEC,EAAA,QAAMC,MAAM,cAAa,YAAW,OAAM,YAAW,UACnDD,EAAA,OAAKC,MAAM,0BACTD,EAAA,OAAKE,QAAQ,YAAYC,KAAK,OAC5BH,EAAA,QACEI,KAAK,OACLC,OAAO,UAAS,eACH,IAAG,iBACD,QACfC,EAAE,wH,CAQN,YAAAC,GACN,OAAOP,EAAA,QAAMG,KAAK,OAAOF,MAAM,UAAS,YAAW,OAAM,YAAW,U,CAGtE,MAAAO,GACE,OAAOC,KAAKC,IAAMD,KAAKV,gBAAkBU,KAAKF,c"}

package/dist/ui-library/{p-ac099e6b.entry.js → p-1be990f9.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as r,H as n,g as i}from"./p-6153045b.js";const a=":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";const e=class{constructor(r){t(this,r);this.padded=true}render(){return r(n,null,r("div",{part:"left-margin",class:"left-margin"}),r("div",{part:"content",class:{content:true,"content--padded":this.padded}},r("slot",null)),r("div",{part:"right-margin",class:"right-margin"}))}get host(){return i(this)}};e.style=a;export{e as six_main_container};
-//# sourceMappingURL=p-ac099e6b.entry.js.map
+import{r as t,h as r,H as n,g as a}from"./p-ca63a6fa.js";const i=":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";const e=class{constructor(r){t(this,r);this.padded=true}render(){return r(n,null,r("div",{part:"left-margin",class:"left-margin"}),r("div",{part:"content",class:{content:true,"content--padded":this.padded}},r("slot",null)),r("div",{part:"right-margin",class:"right-margin"}))}get host(){return a(this)}};e.style=i;export{e as six_main_container};
+//# sourceMappingURL=p-1be990f9.entry.js.map

package/dist/ui-library/{p-ac099e6b.entry.js.map → p-1be990f9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixMainContainerCss","SixMainContainer","render","h","Host","part","class","content","this","padded"],"sources":["src/components/six-main-container/six-main-container.scss?tag=six-main-container&encapsulation=shadow","src/components/six-main-container/six-main-container.tsx"],"sourcesContent":["$margin-default-width: 10rem;\n$content-default-width: 60rem;\n$content-min-width: 48rem;\n$content-max-width: 100rem;\n\n:host {\n  display: flex;\n  flex-wrap: nowrap;\n  min-width: fit-content;\n}\n\n.left-margin,\n.right-margin {\n  flex: 1 6 $margin-default-width;\n  min-width: var(--six-spacing-xxx-large);\n}\n\n.content {\n  flex: 6 1 $content-default-width;\n  min-width: $content-min-width;\n  max-width: $content-max-width;\n  &--padded {\n    padding: var(--six-spacing-xxx-large) 0;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The main container's content.\n *\n * @part left-margin  - The component's left margin area.\n * @part content      - The component's content area.\n * @part right-margin - The component's right margin area.\n */\n\n@Component({\n  tag: 'six-main-container',\n  styleUrl: 'six-main-container.scss',\n  shadow: true,\n})\nexport class SixMainContainer {\n  @Element() host!: HTMLSixMainContainerElement;\n\n  /** Set to false to remove top and bottom padding.  */\n  @Prop() padded = true;\n\n  render() {\n    return (\n      <Host>\n        <div part=\"left-margin\" class=\"left-margin\" />\n        <div part=\"content\" class={{ content: true, 'content--padded': this.padded }}>\n          <slot />\n        </div>\n        <div part=\"right-margin\" class=\"right-margin\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,+P,MCkBfC,EAAgB,M,qCAIV,I,CAEjB,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,KAAK,cAAcC,MAAM,gBAC9BH,EAAA,OAAKE,KAAK,UAAUC,MAAO,CAAEC,QAAS,KAAM,kBAAmBC,KAAKC,SAClEN,EAAA,cAEFA,EAAA,OAAKE,KAAK,eAAeC,MAAM,iB"}
+{"version":3,"names":["sixMainContainerCss","SixMainContainer","render","h","Host","part","class","content","this","padded"],"sources":["src/components/six-main-container/six-main-container.scss?tag=six-main-container&encapsulation=shadow","src/components/six-main-container/six-main-container.tsx"],"sourcesContent":["$margin-default-width: 10rem;\n$content-default-width: 60rem;\n$content-min-width: 48rem;\n$content-max-width: 100rem;\n\n:host {\n  display: flex;\n  flex-wrap: nowrap;\n  min-width: fit-content;\n}\n\n.left-margin,\n.right-margin {\n  flex: 1 6 $margin-default-width;\n  min-width: var(--six-spacing-xxx-large);\n}\n\n.content {\n  flex: 6 1 $content-default-width;\n  min-width: $content-min-width;\n  max-width: $content-max-width;\n  &--padded {\n    padding: var(--six-spacing-xxx-large) 0;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The main container's content.\n *\n * @part left-margin  - The component's left margin area.\n * @part content      - The component's content area.\n * @part right-margin - The component's right margin area.\n */\n\n@Component({\n  tag: 'six-main-container',\n  styleUrl: 'six-main-container.scss',\n  shadow: true,\n})\nexport class SixMainContainer {\n  @Element() host!: HTMLSixMainContainerElement;\n\n  /** Set to false to remove top and bottom padding.  */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  render() {\n    return (\n      <Host>\n        <div part=\"left-margin\" class=\"left-margin\" />\n        <div part=\"content\" class={{ content: true, 'content--padded': this.padded }}>\n          <slot />\n        </div>\n        <div part=\"right-margin\" class=\"right-margin\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,+P,MCkBfC,EAAgB,M,qCAKV,I,CAEjB,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,KAAK,cAAcC,MAAM,gBAC9BH,EAAA,OAAKE,KAAK,UAAUC,MAAO,CAAEC,QAAS,KAAM,kBAAmBC,KAAKC,SAClEN,EAAA,cAEFA,EAAA,OAAKE,KAAK,eAAeC,MAAM,iB"}

package/dist/ui-library/p-2008636b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as a,H as s,g as o}from"./p-ca63a6fa.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";let e=0;const l=class{constructor(a){t(this,a);this.sixClose=i(this,"six-tab-close",7);this.componentId=`tab-${++e}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var i;(i=this.tab)===null||i===void 0?void 0:i.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const i=this.host.closest("six-tab-group");const o=(t=i===null||i===void 0?void 0:i.placement)!==null&&t!==void 0?t:"top";return a(s,{id:this.host.id||this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":o==="top","tab--bottom":o==="bottom","tab--left":o==="left","tab--right":o==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),a("div",{class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":o==="top","tab__indicator--bottom":o==="bottom","tab__indicator--left":o==="left","tab__indicator--right":o==="right"}}))}get host(){return o(this)}};l.style=r;export{l as six_tab};
+//# sourceMappingURL=p-2008636b.entry.js.map

package/dist/ui-library/{p-22c9b8c3.entry.js.map → p-2008636b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: flex;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n  position: absolute;\n  &.tab__indicator--active {\n    background-color: var(--six-tab-border-color-active);\n  }\n}\n\n// TOP\n.tab--top {\n  margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n  width: 100%;\n  bottom: 0;\n  height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n  margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n  width: 100%;\n  top: 0;\n  height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n  margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n  height: 100%;\n  right: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n  margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,krDCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0Cf,KAAKgB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAQ,MAARA,SAAQ,SAARA,EAAUG,aAAS,MAAAX,SAAA,EAAAA,EAAI,MACzC,OAEEY,EAACC,EAAI,CAACtB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7BkB,EAAA,OACEE,KAAK,OACLC,IAAMC,GAAQvB,KAAKQ,IAAMe,EACzBC,MAAO,CACLhB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAelB,KAAKyB,OACpB,gBAAiBzB,KAAK0B,SACtB,gBAAiB1B,KAAK2B,UAExBC,KAAK,MAAK,gBACK5B,KAAK2B,SAAW,OAAS,QAAO,gBAChC3B,KAAKyB,OAAS,OAAS,QACtCI,SAAU7B,KAAK2B,WAAa3B,KAAKyB,OAAS,KAAO,KAEjDN,EAAA,aACCnB,KAAK0B,UACJP,EAAA,mBACEW,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAASjC,KAAKG,iBACd+B,UAAW,EAAC,cACA,UAIlBf,EAAA,OACEK,MAAO,CACLW,eAAgB,KAChB,yBAA0BnC,KAAKyB,OAG/B,sBAAuBP,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W"}
+{"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: flex;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n  position: absolute;\n  &.tab__indicator--active {\n    background-color: var(--six-tab-border-color-active);\n  }\n}\n\n// TOP\n.tab--top {\n  margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n  width: 100%;\n  bottom: 0;\n  height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n  margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n  width: 100%;\n  top: 0;\n  height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n  margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n  height: 100%;\n  right: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n  margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,qrDCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0Cf,KAAKgB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAQ,MAARA,SAAQ,SAARA,EAAUG,aAAS,MAAAX,SAAA,EAAAA,EAAI,MACzC,OAEEY,EAACC,EAAI,CAACtB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7BkB,EAAA,OACEE,KAAK,OACLC,IAAMC,GAAQvB,KAAKQ,IAAMe,EACzBC,MAAO,CACLhB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAelB,KAAKyB,OACpB,gBAAiBzB,KAAK0B,SACtB,gBAAiB1B,KAAK2B,UAExBC,KAAK,MAAK,gBACK5B,KAAK2B,SAAW,OAAS,QAAO,gBAChC3B,KAAKyB,OAAS,OAAS,QACtCI,SAAU7B,KAAK2B,WAAa3B,KAAKyB,OAAS,KAAO,KAEjDN,EAAA,aACCnB,KAAK0B,UACJP,EAAA,mBACEW,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAASjC,KAAKG,iBACd+B,UAAW,EAAC,cACA,UAIlBf,EAAA,OACEK,MAAO,CACLW,eAAgB,KAChB,yBAA0BnC,KAAKyB,OAG/B,sBAAuBP,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W"}

package/dist/ui-library/p-2132da0a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i}from"./p-ca63a6fa.js";import{f as o}from"./p-06ba4450.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const s=class{constructor(i){t(this,i);this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}};this.name=undefined;this.size="medium";this.label=undefined;this.disabled=false;this.html=undefined}componentDidLoad(){if(this.button!=null){o.observe(this.button)}}disconnectedCallback(){if(this.button!=null){o.unobserve(this.button)}}render(){const t=this.html&&i("span",{innerHTML:this.html});return i("div",{onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},i("button",{ref:t=>this.button=t,part:"base",disabled:this.disabled,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:"button","aria-label":this.label},i("six-icon",{"aria-hidden":"true",size:this.size},this.name),i("slot",null),t))}};s.style=n;export{s as six_icon_button};
+//# sourceMappingURL=p-2132da0a.entry.js.map

package/dist/ui-library/{p-3f1a5ecb.entry.js.map → p-2132da0a.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,21C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}
+{"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,81C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}