@scania/tegel 0.0.4 → 0.0.5

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

@@ -1 +1 @@
-{"file":"sdds-textarea.js","mappings":"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","names":[],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea","./src/components/textarea/textarea.tsx"],"sourcesContent":["@import './textarea-vars.scss';\n\n@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .sdds-textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n}\n\n.sdds-textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n\n  &.no-min-width {\n    min-width: unset;\n  }\n}\n\n.sdds-textarea-container {\n  .sdds-textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.sdds-textarea-container:not(.sdds-textarea-disabled) {\n  .sdds-textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.sdds-textarea-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.sdds-textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.sdds-textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.sdds-textarea-container {\n  &.sdds-textarea-label-inside {\n    .sdds-textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .sdds-textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.sdds-textarea-focus {\n    &.sdds-textarea-label-inside {\n      .sdds-textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .sdds-textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.sdds-textarea-data {\n    &.sdds-textarea-label-inside {\n      .sdds-textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.sdds-textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .sdds-textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.sdds-textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .sdds-textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.sdds-textarea-success {\n  .sdds-textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.sdds-textarea-error {\n  .sdds-textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .sdds-textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .sdds-textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.sdds-textarea-disabled {\n  .sdds-textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .sdds-textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.sdds-textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.sdds-textarea-readonly {\n  pointer-events: none;\n\n  .sdds-textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .sdds-textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .sdds-textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        sdds-textarea-container\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}\n        ${this.focusInput ? 'sdds-textarea-focus' : ''}\n        ${this.disabled ? 'sdds-textarea-disabled' : ''}\n        ${this.readOnly ? 'sdds-textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'sdds-textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && (\n          <span class={'sdds-textarea-label'}>{this.label}</span>\n        )}\n        <div class=\"sdds-textarea-wrapper\">\n          <textarea\n            class={'sdds-textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"sdds-textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"sdds-textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"sdds-textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'sdds-textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'sdds-textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"sdds-textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-textarea.js","mappings":"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","names":[],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n}\n\n.textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n\n  &.no-min-width {\n    min-width: unset;\n  }\n}\n\n.textarea-container {\n  .textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.textarea-container:not(.textarea-disabled) {\n  .textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.textarea-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.textarea-container {\n  &.textarea-label-inside {\n    .textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.textarea-focus {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.textarea-data {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.textarea-success {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.textarea-error {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.textarea-disabled {\n  .textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.textarea-readonly {\n  pointer-events: none;\n\n  .textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        textarea-container\n        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}\n        ${this.focusInput ? 'textarea-focus' : ''}\n        ${this.disabled ? 'textarea-disabled' : ''}\n        ${this.readOnly ? 'textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && <span class={'textarea-label'}>{this.label}</span>}\n        <div class=\"textarea-wrapper\">\n          <textarea\n            class={'textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-textfield.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const textfieldCss = ":root,.sdds-mode-light{--sdds-textfield-background-primary:var(--sdds-grey-50);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-color:var(--sdds-grey-868);--sdds-textfield-placeholder:var(--sdds-grey-500);--sdds-textfield-background-disabled-primary:var(--sdds-grey-50);--sdds-textfield-background-disabled-secondary:var(--sdds-white);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-color-disabled:var(--sdds-grey-400);--sdds-textfield-placeholder-disabled:var(--sdds-grey-400);--sdds-textfield-label-disabled:var(--sdds-grey-400);--sdds-textfield-ps-color-disabled:var(--sdds-grey-400);--sdds-textfield-label-color:var(--sdds-grey-958);--sdds-textfield-label-inside-color:var(--sdds-grey-700);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-500);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-700);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-700);--sdds-textfield-textcounter-divider:var(--sdds-grey-500);--sdds-textfield-ps-color:var(--sdds-grey-600);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-800);--sdds-textfield-border-bottom-success:var(--sdds-grey-958);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-958);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-958)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-mode-dark{--sdds-textfield-background-primary:var(--sdds-grey-900);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-secondary:var(--sdds-grey-868);--sdds-textfield-color:var(--sdds-grey-200);--sdds-textfield-placeholder:var(--sdds-grey-600);--sdds-textfield-ps-color-disabled:var(--sdds-grey-700);--sdds-textfield-color-disabled:var(--sdds-grey-800);--sdds-textfield-background-disabled-primary:var(--sdds-grey-900);--sdds-textfield-background-disabled-secondary:var(--sdds-grey-868);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-placeholder-disabled:var(--sdds-grey-800);--sdds-textfield-label-disabled:var(--sdds-grey-700);--sdds-textfield-label-color:var(--sdds-grey-100);--sdds-textfield-label-inside-color:var(--sdds-grey-400);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-700);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-600);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-600);--sdds-textfield-textcounter-divider:var(--sdds-grey-700);--sdds-textfield-ps-color:var(--sdds-grey-100);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-400);--sdds-textfield-border-bottom-success:var(--sdds-grey-50);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-100);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-50)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-textfield-input{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-textfield-input::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-md{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-md::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-md:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-md:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-md:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-md:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-sm{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-sm::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-sm:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-sm:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-sm:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-sm:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.sdds-textfield-container:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.sdds-form-textfield-md .sdds-textfield-container{height:48px}.sdds-form-textfield-sm .sdds-textfield-container{height:40px}.sdds-textfield-input-container{position:relative;width:100%}.sdds-textfield-label-outside>*{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.sdds-textfield-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.sdds-form-textfield{display:block;min-width:208px}.sdds-form-textfield-nomin{min-width:auto}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input~.sdds-textfield-label-inside{top:20px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-textfield-bar{position:absolute;width:100%}.sdds-textfield-bar::before,.sdds-textfield-bar::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.sdds-form-textfield-md .sdds-textfield-bar::before,.sdds-form-textfield-md .sdds-textfield-bar::after{top:46px}.sdds-form-textfield-sm .sdds-textfield-bar::before,.sdds-form-textfield-sm .sdds-textfield-bar::after{top:40px}.sdds-textfield-bar::before{left:50%}.sdds-textfield-bar::after{right:50%}.sdds-textfield-focus .sdds-textfield-bar::before,.sdds-textfield-focus .sdds-textfield-bar::after{width:50%}.sdds-textfield-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.sdds-textfield-helper .sdds-textfield-textcounter{margin-left:auto}.sdds-form-textfield-disabled .sdds-textfield-container{border-bottom-color:transparent}.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix>*,.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix>*{color:var(--sdds-textfield-ps-color-disabled)}.sdds-form-textfield-disabled .sdds-textfield-label-outside>*{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-icon__readonly{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.sdds-textfield-icon__readonly-label{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.sdds-form-textfield-readonly{pointer-events:none}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly{display:block}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover~.sdds-textfield-icon__readonly-label{display:block}.sdds-form-textfield-readonly .sdds-textfield-input{padding-right:54px;background-color:transparent}.sdds-form-textfield-success .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.sdds-form-textfield-error .sdds-textfield-helper{color:var(--sdds-textfield-helper-error)}.sdds-form-textfield-error .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.sdds-form-textfield-error .sdds-textfield-bar::before,.sdds-form-textfield-error .sdds-textfield-bar::after{background:var(--sdds-textfield-bar-error)}.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon){color:var(--sdds-textfield-icon-error)}.sdds-textfield-helper-error-state{display:flex;gap:8px;flex-wrap:nowrap}.sdds-textfield-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.sdds-textfield-textcounter .sdds-textfield-textcounter-divider{color:var(--sdds-textfield-textcounter-divider)}.sdds-textfield-slot-wrap-prefix{align-self:center}.sdds-textfield-slot-wrap-prefix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}.sdds-textfield-slot-wrap-suffix{align-self:center}.sdds-textfield-slot-wrap-suffix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}slot[name=sdds-prefix]::slotted(sdds-icon),slot[name=sdds-suffix]::slotted(sdds-icon){font-size:24px;line-height:0}slot[name=sdds-prefix]::slotted(*){padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix]::slotted(*)~.sdds-textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix]::slotted(*){padding-right:var(--sdds-spacing-element-20)}";
+const textfieldCss = ".textfield-input-lg.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.form-textfield-error slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,.form-textfield-error slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{color:var(--sdds-textfield-icon-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{font-size:24px;line-height:0}slot[name=sdds-prefix].sc-sdds-textfield-s>*{padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix].sc-sdds-textfield-s~.textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix].sc-sdds-textfield-s>*{padding-right:var(--sdds-spacing-element-20)}";
 
 const Textfield = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -49,31 +49,20 @@ const Textfield = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     var _a;
-    let className = ' sdds-textfield-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
-    }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
-    }
     return (h("div", { class: `
-        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
-        ${this.focusInput && !this.disabled
-        ? 'sdds-form-textfield sdds-textfield-focus'
-        : ' sdds-form-textfield'}
-        ${this.value ? 'sdds-textfield-data' : ''}
+        ${this.noMinWidth ? 'form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}
+        ${this.value ? 'textfield-data' : ''}
         ${this.labelPosition === 'inside' && this.size !== 'sm'
-        ? 'sdds-textfield-container-label-inside'
+        ? 'textfield-container-label-inside'
         : ''}
-        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
-        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.disabled ? 'form-textfield-disabled' : ''}
+        ${this.readOnly ? 'form-textfield-readonly' : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
-        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-textfield-${this.state}`
-        : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ${this.size === 'md' ? 'form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "textfield-container" }, h("div", { class: `textfield-slot-wrap-prefix textfield-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `textfield-input textfield-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
         }
@@ -81,10 +70,10 @@ const Textfield = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("span", { class: "sdds-textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "textfield-label-inside" }, this.label))), h("div", { class: "textfield-bar" }), h("div", { class: `textfield-slot-wrap-suffix textfield-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "textfield-helper" }, this.state === 'error' && (h("div", { class: "textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), this.maxLength)))));
   }
   static get style() { return textfieldCss; }
-}, [4, "sdds-textfield", {
+}, [6, "sdds-textfield", {
     "type": [513],
     "labelPosition": [1, "label-position"],
     "label": [1],

package/dist/components/sdds-textfield.js.map

@@ -1 +1 @@
-{"file":"sdds-textfield.js","mappings":"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","names":[],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield","./src/components/textfield/textfield.tsx"],"sourcesContent":["@import './textfield-vars.scss';\n\n@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textfield-color);\n  background-color: var(--sdds-textfield-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textfield-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--sdds-textfield-background-disabled);\n    color: var(--sdds-textfield-color-disabled);\n\n    &::placeholder {\n      color: var(--sdds-textfield-placeholder-disabled);\n    }\n\n    ~ .sdds-textfield-label-inside {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Sizes\n.sdds-textfield-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-textfield-input-md {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-textfield-input-sm {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-textfield-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-textfield-background);\n  border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n  }\n\n  .sdds-form-textfield-md & {\n    height: 48px;\n  }\n\n  .sdds-form-textfield-sm & {\n    height: 40px;\n  }\n}\n\n.sdds-textfield-input-container {\n  position: relative;\n  width: 100%;\n}\n\n//Textfield label\n\n/* slot[name=\"sdds-label\"]::slotted(*) {\n  @include type-style(\"detail-05\");\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n} */\n\n//Textfield label\n.sdds-textfield-label-outside > * {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n}\n\n.sdds-textfield-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-textfield-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-textfield {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-textfield.sdds-textfield-container-label-inside {\n  .sdds-textfield-input {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .sdds-textfield-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-textfield-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-textfield-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.sdds-textfield-focus,\n  &.sdds-textfield-data {\n    .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-textfield-input-md ~ .sdds-textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-textfield-input ~ .sdds-textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//Textfield bottom bar when in focus\n.sdds-textfield-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-textfield-bar);\n    transition: 0.35s ease all;\n\n    .sdds-form-textfield-md & {\n      top: 46px;\n    }\n\n    .sdds-form-textfield-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .sdds-textfield-focus &::before,\n  .sdds-textfield-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.sdds-textfield-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n\n  & .sdds-textfield-textcounter {\n    margin-left: auto;\n  }\n\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.sdds-form-textfield-disabled {\n  .sdds-textfield-container {\n    border-bottom-color: transparent;\n  }\n\n  .sdds-textfield-slot-wrap-prefix,\n  .sdds-textfield-slot-wrap-suffix {\n    > * {\n      color: var(--sdds-textfield-ps-color-disabled);\n    }\n  }\n\n  .sdds-textfield-label-outside {\n    > * {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Read only state\n\n.sdds-textfield-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textfield-icon-read-only-label-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n    background-color: var(--sdds-textfield-icon-read-only-label-background);\n  }\n}\n\n.sdds-form-textfield-readonly {\n  pointer-events: none;\n\n  .sdds-textfield-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .sdds-textfield-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n}\n\n//Success state\n.sdds-form-textfield-success {\n  .sdds-textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-success);\n  }\n}\n\n//Error State\n.sdds-form-textfield-error {\n  .sdds-textfield-helper {\n    color: var(--sdds-textfield-helper-error);\n  }\n\n  .sdds-textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-error);\n  }\n\n  .sdds-textfield-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-textfield-bar-error);\n    }\n  }\n\n  slot[name='sdds-prefix']::slotted(sdds-icon),\n  slot[name='sdds-suffix']::slotted(sdds-icon) {\n    color: var(--sdds-textfield-icon-error);\n  }\n}\n\n// .sdds-textfield-textcounter {\n.sdds-textfield-helper-error-state {\n  display: flex;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n.sdds-textfield-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textfield-textcounter);\n  float: right;\n\n  & .sdds-textfield-textcounter-divider {\n    // @include type-style('detail-05');\n    color: var(--sdds-textfield-textcounter-divider);\n  }\n}\n\n/* slot[name=\"sdds-prefix\"]::slotted(*),\nslot[name=\"sdds-suffix\"]::slotted(*) {\n  @include type-style(\"detail-02\");\n  align-self: center;\n  color: var(--sdds-textfield-ps-color);\n} */\n\n.sdds-textfield-slot-wrap-prefix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-left: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.sdds-textfield-error {\n    sdds-icon,\n    .sdds-icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n.sdds-textfield-slot-wrap-suffix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-right: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.sdds-textfield-error {\n    sdds-icon,\n    .sdds-icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n//TODO: When new icons are avaliable have a look at this one\nslot[name='sdds-prefix']::slotted(sdds-icon),\nslot[name='sdds-suffix']::slotted(sdds-icon) {\n  font-size: 24px; //FIXME: When new icons is avaliable it should be 16x16\n  line-height: 0;\n}\n\n//Text gerenerated infront of the input field\nslot[name='sdds-prefix']::slotted(*) {\n  padding-left: var(--sdds-spacing-element-20);\n\n  & ~ .sdds-textfield-input {\n    padding-left: var(--sdds-spacing-element-12);\n  }\n}\n\n//Text generated after the input field\nslot[name='sdds-suffix']::slotted(*) {\n  padding-right: var(--sdds-spacing-element-20);\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    let className = ' sdds-textfield-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}\n        ${\n          this.focusInput && !this.disabled\n            ? 'sdds-form-textfield sdds-textfield-focus'\n            : ' sdds-form-textfield'\n        }\n        ${this.value ? 'sdds-textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'sdds-textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}\n        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-textfield-${this.state}`\n            : ''\n        }\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"sdds-textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"sdds-textfield-container\">\n          <div class={`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`}>\n            <slot name=\"sdds-prefix\" />\n          </div>\n\n          <div class=\"sdds-textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"sdds-textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"sdds-textfield-bar\"></div>\n\n          <div class={`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`}>\n            <slot name=\"sdds-suffix\" />\n          </div>\n          <span class=\"sdds-textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"sdds-textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"sdds-textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"sdds-textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"sdds-textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"sdds-textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-textfield.js","mappings":"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","names":[],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n  all: unset;\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textfield-color);\n  background-color: var(--sdds-textfield-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textfield-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--sdds-textfield-background-disabled);\n    color: var(--sdds-textfield-color-disabled);\n\n    &::placeholder {\n      color: var(--sdds-textfield-placeholder-disabled);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Sizes\n.textfield-input-lg {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.textfield-input-md {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.textfield-input-sm {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.textfield-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-textfield-background);\n  border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n  }\n\n  .form-textfield-md & {\n    height: 48px;\n  }\n\n  .form-textfield-sm & {\n    height: 40px;\n  }\n}\n\n.textfield-input-container {\n  position: relative;\n  width: 100%;\n}\n\n//Textfield label\n\n/* slot[name=\"sdds-label\"]::slotted(*) {\n  @include type-style(\"detail-05\");\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n} */\n\n//Textfield label\n.textfield-label-outside > * {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n}\n\n.textfield-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-textfield-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.form-textfield {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.form-textfield.textfield-container-label-inside {\n  .textfield-input-lg {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .textfield-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.textfield-focus,\n  &.textfield-data {\n    .textfield-input-sm ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-md ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-lg ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//Textfield bottom bar when in focus\n.textfield-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-textfield-bar);\n    transition: 0.35s ease all;\n\n    .form-textfield-md & {\n      top: 46px;\n    }\n\n    .form-textfield-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .textfield-focus &::before,\n  .textfield-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.textfield-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n\n  & .textfield-textcounter {\n    margin-left: auto;\n  }\n\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.form-textfield-disabled {\n  .textfield-container {\n    border-bottom-color: transparent;\n  }\n\n  .textfield-slot-wrap-prefix,\n  .textfield-slot-wrap-suffix {\n    > * {\n      color: var(--sdds-textfield-ps-color-disabled);\n    }\n  }\n\n  .textfield-label-outside {\n    > * {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Read only state\n\n.textfield-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textfield-icon-read-only-label-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n    background-color: var(--sdds-textfield-icon-read-only-label-background);\n  }\n}\n\n.form-textfield-readonly {\n  pointer-events: none;\n\n  .textfield-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textfield-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n}\n\n//Success state\n.form-textfield-success {\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-success);\n  }\n}\n\n//Error State\n.form-textfield-error {\n  .textfield-helper {\n    color: var(--sdds-textfield-helper-error);\n  }\n\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-error);\n  }\n\n  .textfield-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-textfield-bar-error);\n    }\n  }\n\n  slot[name='sdds-prefix']::slotted(sdds-icon),\n  slot[name='sdds-suffix']::slotted(sdds-icon) {\n    color: var(--sdds-textfield-icon-error);\n  }\n}\n\n// .textfield-textcounter {\n.textfield-helper-error-state {\n  display: flex;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n.textfield-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textfield-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    // @include type-style('detail-05');\n    color: var(--sdds-textfield-textcounter-divider);\n  }\n}\n\n/* slot[name=\"sdds-prefix\"]::slotted(*),\nslot[name=\"sdds-suffix\"]::slotted(*) {\n  @include type-style(\"detail-02\");\n  align-self: center;\n  color: var(--sdds-textfield-ps-color);\n} */\n\n.textfield-slot-wrap-prefix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-left: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.textfield-error {\n    sdds-icon,\n    .icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n.textfield-slot-wrap-suffix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-right: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.textfield-error {\n    sdds-icon,\n    .icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n//TODO: When new icons are avaliable have a look at this one\nslot[name='sdds-prefix']::slotted(sdds-icon),\nslot[name='sdds-suffix']::slotted(sdds-icon) {\n  font-size: 24px; //FIXME: When new icons is avaliable it should be 16x16\n  line-height: 0;\n}\n\n//Text gerenerated infront of the input field\nslot[name='sdds-prefix']::slotted(*) {\n  padding-left: var(--sdds-spacing-element-20);\n\n  & ~ .textfield-input {\n    padding-left: var(--sdds-spacing-element-12);\n  }\n}\n\n//Text generated after the input field\nslot[name='sdds-suffix']::slotted(*) {\n  padding-right: var(--sdds-spacing-element-20);\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n        ${this.value ? 'textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'form-textfield-disabled' : ''}\n        ${this.readOnly ? 'form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n          <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n            <slot name=\"prefix\" />\n          </div>\n\n          <div class=\"textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={`textfield-input textfield-input-${this.size}`}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"textfield-bar\"></div>\n\n          <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n            <slot name=\"suffix\" />\n          </div>\n          <span class=\"textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-toggle.js

@@ -31,7 +31,7 @@ const SddsToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
   }
   render() {
-    return (h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", null))));
+    return (h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
   }
   get host() { return this; }
   static get style() { return sddsToggleCss; }

package/dist/components/sdds-toggle.js.map

@@ -1 +1 @@
-{"file":"sdds-toggle.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnHA,YAAU;;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACD,iCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxE,eAAa,CACP,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsToggle"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-toggle.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnHA,YAAU;;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACD,iCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsToggle"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/table-body-cell.js

@@ -23,7 +23,7 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.whiteBackground = false;
     this.tableId = '';
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -36,14 +36,14 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   // Listen to headKey from data-table-header-element
-  headCellHoverEventListener(event) {
+  internalSddsHoverListener(event) {
     const [receivedID, receivedKeyValue] = event.detail;
     if (this.tableId === receivedID) {
       this.activeSorting = this.cellKey === receivedKeyValue;
     }
   }
-  // Listen to textAlignEvent from data-table-header-element
-  textAlignEventListener(event) {
+  // Listen to internalSddsTextAlign from data-table-header-element
+  internalSddsTextAlignListener(event) {
     const [receivedID, receivedKey, receivedTextAlign] = event.detail;
     if (this.tableId === receivedID) {
       if (this.cellKey === receivedKey) {
@@ -83,7 +83,7 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "noMinWidth": [32],
     "whiteBackground": [32],
     "tableId": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "headCellHoverEvent", "headCellHoverEventListener"], [16, "textAlignEvent", "textAlignEventListener"]]]);
+  }, [[16, "internalSddsPropChange", "internalSddsPropChangeListener"], [16, "internalSddsHover", "internalSddsHoverListener"], [16, "internalSddsTextAlign", "internalSddsTextAlignListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/table-body-cell.js.map

@@ -1 +1 @@
-{"file":"table-body-cell.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,o0BAAo0B;;ACG71B,MAAM,kBAAkB,GAAsC;EAC5D,kBAAkB;EAClB,eAAe;EACf,YAAY;CACb,CAAC;MAMW,aAAa;;;;;;;0BAQ2B,KAAK;;yBAItB,KAAK;4BAEF,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAO7B,8BAA8B,CAAC,KAA0C;IACvE,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;;EAID,0BAA0B,CAAC,KAAuB;IAChD,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAEpD,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC;KACxD;GACF;;EAID,sBAAsB,CAAC,KAAuB;IAC5C,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAElE,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;QAChC,IAAI,CAAC,cAAc,GAAG,iBAAiB,CAAC;OACzC;KACF;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,8BAA8B,EAAE,IAAI,CAAC,aAAa;QAClD,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,mCAAmC,EAAE,IAAI,CAAC,cAAc;OACzD,EACD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,IAExC,IAAI,CAAC,SAAS,EACf,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('headCellHoverEvent', { target: 'body' })\n  headCellHoverEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to textAlignEvent from data-table-header-element\n  @Listen('textAlignEvent', { target: 'body' })\n  textAlignEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"table-body-cell.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,o0BAAo0B;;ACG71B,MAAM,kBAAkB,GAA2C;EACjE,kBAAkB;EAClB,eAAe;EACf,YAAY;CACb,CAAC;MAMW,aAAa;;;;;;;0BAQ2B,KAAK;;yBAItB,KAAK;4BAEF,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAO7B,8BAA8B,CAAC,KAA+C;IAC5E,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;;EAID,yBAAyB,CAAC,KAAuB;IAC/C,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAEpD,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC;KACxD;GACF;;EAID,6BAA6B,CAAC,KAAuB;IACnD,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAElE,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;QAChC,IAAI,CAAC,cAAc,GAAG,iBAAiB,CAAC;OACzC;KACF;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,8BAA8B,EAAE,IAAI,CAAC,aAAa;QAClD,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,mCAAmC,EAAE,IAAI,CAAC,cAAc;OACzD,EACD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,IAExC,IAAI,CAAC,SAAS,EACf,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('internalSddsPropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('internalSddsHover', { target: 'body' })\n  internalSddsHoverListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to internalSddsTextAlign from data-table-header-element\n  @Listen('internalSddsTextAlign', { target: 'body' })\n  internalSddsTextAlignListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/table-body-row.js

@@ -13,8 +13,8 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.bodyRowToTable = createEvent(this, "bodyRowToTable", 7);
-    this.runPaginationEvent = createEvent(this, "runPaginationEvent", 7);
+    this.internalSddsRowChange = createEvent(this, "internalSddsRowChange", 7);
+    this.internalSddsPagination = createEvent(this, "internalSddsPagination", 7);
     this.enableMultiselect = false;
     this.bodyCheckBoxStatus = false;
     this.mainCheckBoxStatus = false;
@@ -33,7 +33,7 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     else {
       row.classList.remove('sdds-table__row--selected');
     }
-    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);
+    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
   }
   bodyCheckBoxStatusUpdater(status) {
     this.mainCheckBoxStatus = status;
@@ -45,9 +45,9 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     else {
       row.classList.remove('sdds-table__row--selected');
     }
-    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);
+    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -64,7 +64,7 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.bodyCheckBoxStatusUpdater(event.detail[1]);
     }
   }
-  updateBodyCheckboxesEventListener(event) {
+  internalSddsCheckboxChangeListener(event) {
     const [receivedID, receivedBodyCheckboxStatus] = event.detail;
     if (this.tableId === receivedID) {
       this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);
@@ -80,7 +80,7 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   componentDidLoad() {
-    this.runPaginationEvent.emit(this.tableId);
+    this.internalSddsPagination.emit(this.tableId);
   }
   render() {
     return (h(Host, { class: {
@@ -102,7 +102,7 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "noMinWidth": [32],
     "modeVariant": [32],
     "tableId": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "mainCheckboxSelectedEvent", "headCheckboxListener"], [16, "updateBodyCheckboxesEvent", "updateBodyCheckboxesEventListener"]]]);
+  }, [[16, "internalSddsTablePropChange", "internalSddsPropChangeListener"], [16, "internalSddsMainCheckboxSelect", "headCheckboxListener"], [16, "internalSddsCheckboxChange", "internalSddsCheckboxChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/table-body-row.js.map

@@ -1 +1 @@
-{"file":"table-body-row.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  /** Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'bodyRowToTable',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  bodyRowToTable: EventEmitter<boolean>;\n\n  /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'runPaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  runPaginationEvent: EventEmitter<string>;\n\n  @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('updateBodyCheckboxesEvent', { target: 'body' })\n  updateBodyCheckboxesEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.runPaginationEvent.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"table-body-row.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  /** @internal Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'internalSddsRowChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsRowChange: EventEmitter<boolean>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsMainCheckboxSelect', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('internalSddsCheckboxChange', { target: 'body' })\n  internalSddsCheckboxChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}