@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.ec3ffc2

package/dist/components/six-textarea.js.map

@@ -1 +1 @@
-{"file":"six-textarea.js","mappings":"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","names":["SixTextarea"],"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  inputId = `textarea-${++id}`;\n  labelId = `textarea-label-${id}`;\n  helpTextId = `textarea-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n  textarea: HTMLTextAreaElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\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  /** The textarea's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,\n   * `minlength`, and `maxlength` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize: string;\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck: boolean;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\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  /**\n   * Emitted whenever the value changes. Access the new value via event.target.value.\n   * six-textarea-value-change will emit whenever the value changes.\n   * So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,\n   * but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter\n   * or leaves the textarea field after entering some data.\n   * */\n\n  @Event({ eventName: 'six-textarea-value-change' }) sixValueChange: 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    if (this.textarea) {\n      this.setTextareaHeight();\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) {\n      return;\n    }\n    this.textarea.value = this.value;\n    this.invalid = !this.textarea.checkValidity();\n    this.sixValueChange.emit();\n  }\n\n  /** default value the textarea will be reverted to when reset is executed */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleInput = this.handleInput.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value || '';\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n    this.resizeObserver.observe(this.textarea);\n    this.eventListeners.add(this.textarea, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.textarea.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.unobserve(this.textarea);\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.textarea.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.textarea.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.textarea.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.textarea.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    this.textarea.setRangeText(replacement, start, end, selectMode);\n\n    if (this.value !== this.textarea.value) {\n      this.value = this.textarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.textarea.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.textarea.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.textarea.setCustomValidity(message);\n    this.invalid = !this.textarea.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.textarea.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.sixChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.textarea.value;\n    this.setTextareaHeight();\n    this.sixInput.emit();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  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  setTextareaHeight() {\n    if (this.resize === 'auto') {\n      this.textarea.style.height = 'auto';\n      this.textarea.style.height = this.textarea.scrollHeight + 'px';\n    } else {\n      this.textarea.style.height = undefined;\n    }\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\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.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\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.value?.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.textarea = 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.value}\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            onInvalid={this.handleInvalid}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-textarea.js","mappings":"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","names":["SixTextarea"],"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/**\n * @prop --height: The textarea height.\n */\n:host {\n  --height: 100%;\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  height: calc(var(--height) - 2 * var(--six-border-width));\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"],"version":3}

package/dist/components/six-tile.d.ts

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

package/dist/components/six-tile.js

@@ -1,137 +1,135 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as hasSlot } from './slot.js';
+import { h as hasSlot, g as getSlot } from './slot.js';
 import { d as defineCustomElement$4 } from './six-icon2.js';
 import { d as defineCustomElement$3 } from './six-icon-button2.js';
 import { d as defineCustomElement$2 } from './six-tooltip2.js';
 
-const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-elevation-8dp)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
+const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
+const SixTileStyle0 = sixTileCss;
 
 const SixTile$1 = /*@__PURE__*/ proxyCustomElement(class SixTile extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixTileClose = createEvent(this, "six-tile-closed", 7);
-    this.sixTileSelected = createEvent(this, "six-tile-selected", 7);
-    this.handleCloseClickEvent = () => {
-      this.visible = false;
-      this.sixTileClose.emit();
-    };
-    this.handleClickEvent = () => {
-      this.sixTileSelected.emit();
-    };
-    this.label = '';
-    this.iconName = undefined;
-    this.closeable = true;
-    this.elevated = false;
-    this.disableTooltip = true;
-    this.disabled = false;
-    this.size = 'medium';
-    this.visible = true;
-    this.hasIconSlot = false;
-    this.hasLabelSlot = false;
-  }
-  /** Hides the tile */
-  async hide() {
-    this.visible = false;
-  }
-  /** Shows the tile */
-  async show() {
-    this.visible = true;
-  }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  handleSlotChange() {
-    this.hasIconSlot = hasSlot(this.host, 'icon');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-    if (this.hasIconSlot) {
-      let slot = this.host.querySelector(`[slot="icon"]`);
-      slot.addEventListener('click', this.handleClickEvent);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixTileClose = createEvent(this, "six-tile-closed", 7);
+        this.sixTileSelected = createEvent(this, "six-tile-selected", 7);
+        this.handleSlotChange = () => {
+            this.hasIconSlot = hasSlot(this.host, 'icon');
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            if (this.hasIconSlot) {
+                const slot = getSlot(this.host, 'icon');
+                slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
+            }
+            if (this.hasLabelSlot) {
+                const slot = getSlot(this.host, 'label');
+                slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
+            }
+        };
+        this.handleCloseClickEvent = () => {
+            this.visible = false;
+            this.sixTileClose.emit();
+        };
+        this.handleClickEvent = () => {
+            this.sixTileSelected.emit();
+        };
+        this.label = '';
+        this.iconName = undefined;
+        this.closeable = true;
+        this.elevated = false;
+        this.disableTooltip = true;
+        this.disabled = false;
+        this.size = 'medium';
+        this.visible = true;
+        this.hasIconSlot = false;
+        this.hasLabelSlot = false;
     }
-    if (this.hasLabelSlot) {
-      let slot = this.host.querySelector(`[slot="label"]`);
-      slot.addEventListener('click', this.handleClickEvent);
+    /** Hides the tile */
+    async hide() {
+        this.visible = false;
     }
-  }
-  render() {
-    return (h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { part: "base", class: {
-        tile: true,
-        'tile--visible': this.visible,
-        'tile--small': this.size === 'small',
-        'tile--medium': this.size === 'medium',
-        'tile--large': this.size === 'large',
-        'tile--elevated': this.elevated,
-      } }, h("div", { part: "header", class: "tile__header" }, h("six-icon-button", { class: {
-        'tile__header--hidden': !this.closeable,
-      }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { name: "icon" })), h("div", { part: "footer", class: {
-        'tile__footer--small': this.size === 'small',
-        'tile__footer--medium': this.size === 'medium',
-        'tile__footer--large': this.size === 'large',
-      } }, this.label && (h("div", { class: {
-        '.label__footer': true,
-      }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { name: "label" })))));
-  }
-  get host() { return this; }
-  static get style() { return sixTileCss; }
+    /** Shows the tile */
+    async show() {
+        this.visible = true;
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    render() {
+        return (h("six-tooltip", { key: '1f72a24651f78f933e475c7fc0cbac18d852cc76', disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { key: 'b45a460c355a9a30d7b5ebe93c63f48a49ed2fa1', part: "base", class: {
+                tile: true,
+                'tile--visible': this.visible,
+                'tile--small': this.size === 'small',
+                'tile--medium': this.size === 'medium',
+                'tile--large': this.size === 'large',
+                'tile--elevated': this.elevated,
+            } }, h("div", { key: '2667122e6e2e925005bfd910ee60b6063871b5c1', part: "header", class: "tile__header" }, h("six-icon-button", { key: 'f6f0a96a7d681881bebf254860bca29c80c814d9', class: {
+                'tile__header--hidden': !this.closeable,
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { key: '973436e543725ba0916ba42ff3cf24a8f1420ffa', part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { key: 'c2d43afacf61d8bdbfa9c082f443c6f7fc2d094d', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { key: '0cd3db9f8db8aa6241fcb84358aedbb6372b5f02', name: "icon" })), h("div", { key: 'a2e6c9642fa659248516153989e74f0ac0d99254', part: "footer", class: {
+                'tile__footer--small': this.size === 'small',
+                'tile__footer--medium': this.size === 'medium',
+                'tile__footer--large': this.size === 'large',
+            } }, this.label && (h("div", { key: 'a9838fb0e6a65053320496233e38eec9f837dfd0', class: {
+                '.label__footer': true,
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { key: '9a21ee332f6e5ebefe292138e5204fd27458442d', name: "label" })))));
+    }
+    get host() { return this; }
+    static get style() { return SixTileStyle0; }
 }, [1, "six-tile", {
-    "label": [1],
-    "iconName": [8, "icon-name"],
-    "closeable": [4],
-    "elevated": [4],
-    "disableTooltip": [4, "disable-tooltip"],
-    "disabled": [516],
-    "size": [513],
-    "visible": [32],
-    "hasIconSlot": [32],
-    "hasLabelSlot": [32],
-    "hide": [64],
-    "show": [64]
-  }]);
+        "label": [1],
+        "iconName": [1, "icon-name"],
+        "closeable": [4],
+        "elevated": [4],
+        "disableTooltip": [4, "disable-tooltip"],
+        "disabled": [516],
+        "size": [513],
+        "visible": [32],
+        "hasIconSlot": [32],
+        "hasLabelSlot": [32],
+        "hide": [64],
+        "show": [64]
+    }]);
 const closeIconSize = (size) => {
-  return {
-    small: 'xxSmall',
-    medium: 'medium',
-    large: 'medium',
-  }[size];
+    return {
+        small: 'xxSmall',
+        medium: 'medium',
+        large: 'medium',
+    }[size];
 };
 const iconSize = (size) => {
-  return {
-    small: 'xLarge',
-    medium: 'xxLarge',
-    large: 'xxxLarge',
-  }[size];
+    return {
+        small: 'xLarge',
+        medium: 'xxLarge',
+        large: 'xxxLarge',
+    }[size];
 };
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-tile", "six-icon", "six-icon-button", "six-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-tile":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixTile$1);
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "six-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-tile", "six-icon", "six-icon-button", "six-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-tile":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixTile$1);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SixTile = SixTile$1;

package/dist/components/six-tile.js.map

@@ -1 +1 @@
-{"file":"six-tile.js","mappings":"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","names":["SixTile"],"sources":["./src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","./src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-elevation-8dp);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName;\n\n  /** Flag, whether the tile is closeable. */\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  @Prop() disableTooltip: boolean = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"icon\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"label\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n  }\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"version":3}
+{"file":"six-tile.js","mappings":"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","names":["SixTile"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"version":3}

package/dist/components/six-timepicker.d.ts

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

package/dist/components/six-timepicker.js

@@ -1,4 +1,4 @@
-import { e as SixTimepicker$1, d as defineCustomElement$1 } from './six-timepicker2.js';
+import { S as SixTimepicker$1, d as defineCustomElement$1 } from './six-timepicker2.js';
 
 const SixTimepicker = SixTimepicker$1;
 const defineCustomElement = defineCustomElement$1;