@six-group/ui-library 0.0.0-insider.f058d60 → 0.0.0-insider.f272114

package/dist/ui-library/p-5d6b7353.entry.js.map

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

package/dist/ui-library/p-72254eef.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as i,H as r,g as s}from"./p-6153045b.js";import{P as e}from"./p-0fdb185d.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:absolute;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}';let n=0;const p=class{constructor(i){t(this,i);this.sixShow=o(this,"six-tooltip-show",7);this.sixAfterShow=o(this,"six-tooltip-after-show",7);this.sixHide=o(this,"six-tooltip-hide",7);this.sixAfterHide=o(this,"six-tooltip-after-hide",7);this.componentId=`tooltip-${++n}`;this.isVisible=false;this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{const t=this.target;const o=this.getTarget();if(o!==t){if(t!=null){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",this.componentId)}};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus"}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){if(this.tooltipPositioner==null)return;this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner);this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover!=null){this.popover.destroy()}this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)}async show(){var t;if(this.isVisible||this.disabled){return}const o=this.sixShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;(t=this.popover)===null||t===void 0?void 0:t.show()}async hide(){var t;if(!this.isVisible||this.disabled){return}const o=this.sixHide.emit();if(o.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;(t=this.popover)===null||t===void 0?void 0:t.hide()}getTarget(){const t=[...this.host.children].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(t==null){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){if(this.popover==null)return;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.sixAfterHide.emit(),onAfterShow:()=>this.sixAfterShow.emit()})}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{onSlotchange:this.handleSlotChange}),i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content"},this.content))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=a;export{p as six_tooltip};
-//# sourceMappingURL=p-72254eef.entry.js.map

package/dist/ui-library/p-72254eef.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixTooltipCss","id","SixTooltip","this","componentId","isVisible","handleBlur","hasTrigger","hide","handleClick","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","handleOpenChange","componentDidLoad","tooltipPositioner","popover","Popover","syncOptions","host","addEventListener","hidden","componentDidUpdate","disconnectedCallback","destroy","removeEventListener","disabled","sixShow","emit","defaultPrevented","_a","sixHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","setOptions","placement","distance","skidding","transitionElement","tooltip","onAfterHide","sixAfterHide","onAfterShow","sixAfterShow","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","role","name","content"],"sources":["src/components/six-tooltip/six-tooltip.scss?tag=six-tooltip&encapsulation=shadow","src/components/six-tooltip/six-tooltip.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  display: contents;\n}\n\n.tooltip-positioner {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  pointer-events: none;\n}\n\n.tooltip {\n  max-width: var(--max-width);\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-tooltip-background-color);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-tooltip-color);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-x-small);\n  transform: scale(0.8);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n  }\n}\n\n.tooltip-positioner {\n  &[data-popper-placement^='top'] .tooltip {\n    transform-origin: bottom;\n  }\n\n  &[data-popper-placement^='bottom'] .tooltip {\n    transform-origin: top;\n  }\n\n  &[data-popper-placement^='left'] .tooltip {\n    transform-origin: right;\n  }\n\n  &[data-popper-placement^='right'] .tooltip {\n    transform-origin: left;\n  }\n\n  &.popover-visible .tooltip {\n    opacity: 1;\n    transform: none;\n    transition-delay: var(--show-delay);\n    transition-duration: var(--show-duration);\n    transition-timing-function: var(--show-timing-function);\n  }\n}\n\n// Arrow + bottom\n.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {\n  bottom: 100%;\n  left: calc(50% - var(--six-tooltip-arrow-size));\n  border-bottom: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-left: var(--six-tooltip-arrow-size) solid transparent;\n  border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {\n  left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {\n  right: var(--six-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n// Arrow + top\n.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {\n  top: 100%;\n  left: calc(50% - var(--six-tooltip-arrow-size));\n  border-top: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-left: var(--six-tooltip-arrow-size) solid transparent;\n  border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {\n  left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {\n  right: var(--six-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n// Arrow + left\n.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {\n  top: calc(50% - var(--six-tooltip-arrow-size));\n  left: 100%;\n  border-left: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-top: var(--six-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {\n  top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {\n  top: auto;\n  bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n\n// Arrow + right\n.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {\n  top: calc(50% - var(--six-tooltip-arrow-size));\n  right: 100%;\n  border-right: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-top: var(--six-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {\n  top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {\n  top: auto;\n  bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tooltip',\n  styleUrl: 'six-tooltip.scss',\n  shadow: true,\n})\nexport class SixTooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover?: Popover;\n  private tooltipPositioner?: HTMLElement;\n  private target?: HTMLElement;\n  private tooltip?: HTMLElement;\n\n  @Element() host!: HTMLSixTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip, so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event({ eventName: 'six-tooltip-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event({ eventName: 'six-tooltip-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event({ eventName: 'six-tooltip-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event({ eventName: 'six-tooltip-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.tooltipPositioner == null) return;\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    this.host.addEventListener('blur', this.handleBlur, true);\n    this.host.addEventListener('click', this.handleClick, true);\n    this.host.addEventListener('focus', this.handleFocus, true);\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover != null) {\n      this.popover.destroy();\n    }\n\n    this.host.removeEventListener('blur', this.handleBlur, true);\n    this.host.removeEventListener('click', this.handleClick, true);\n    this.host.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover?.show();\n  }\n\n  /** Shows the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.disabled) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover?.hide();\n  }\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...this.host.children].find(\n      (el) => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (target == null) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    const oldTarget = this.target;\n    const newTarget = this.getTarget();\n\n    if (newTarget !== oldTarget) {\n      if (oldTarget != null) {\n        oldTarget.removeAttribute('aria-describedby');\n      }\n      newTarget.setAttribute('aria-describedby', this.componentId);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    if (this.popover == null) return;\n\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.sixAfterHide.emit(),\n      onAfterShow: () => this.sixAfterShow.emit(),\n    });\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n        <slot onSlotchange={this.handleSlotChange} />\n        <div ref={(el) => (this.tooltipPositioner = el)} class=\"tooltip-positioner\">\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            id={this.componentId}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\">{this.content}</slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-83864cfe.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as i,g as t}from"./p-6153045b.js";import{h as e}from"./p-15559d38.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";const o=class{constructor(t){s(this,t);this.provideSlot=s=>{if(this.summaryIconHasContent){return i("div",{slot:s},i("slot",{name:s}))}return i("slot",{name:s,onSlotchange:()=>{var i;const t=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(`slot[name="${s}"]`);if(t!=null){this.summaryIconHasContent=t.assignedNodes().length>0}}})};this.hasItems=false;this.name="";this.icon="";this.value="";this.open=false;this.summaryIcon=undefined;this.summaryIconHasContent=false}connectedCallback(){this.handleSlotChange=this.handleSlotChange.bind(this)}componentWillLoad(){this.handleSlotChange()}handleSlotChange(){this.hasItems=e(this.host)}isSubgroup(){var s;return((s=this.host.parentElement)===null||s===void 0?void 0:s.closest("six-sidebar-item-group"))!=null}render(){return i("six-details",{class:{"six-sidebar-item-group--childless":!this.hasItems,"six-sidebar-item-group--subgroup":this.isSubgroup()},inline:true,open:this.open,"summary-icon":this.summaryIcon,hasContent:this.hasItems},i("div",{slot:"summary"},i("div",{class:"six-sidebar-details__header"},this.icon&&i("six-icon",{class:"six-sidebar-details__header-icon"},this.icon),this.name)),this.provideSlot("summary-icon"),i("slot",null))}get host(){return t(this)}};o.style=r;export{o as six_sidebar_item_group};
-//# sourceMappingURL=p-83864cfe.entry.js.map

package/dist/ui-library/p-83864cfe.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSidebarItemGroupCss","SixSidebarItemGroup","this","provideSlot","name","summaryIconHasContent","h","slot","onSlotchange","_a","host","shadowRoot","querySelector","assignedNodes","length","connectedCallback","handleSlotChange","bind","componentWillLoad","hasItems","hasSlot","isSubgroup","parentElement","closest","render","class","inline","open","summaryIcon","hasContent","icon"],"sources":["src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAyB,8c,MCelBC,EAAmB,M,yBAsCtBC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,sBAAuB,CAC9B,OACEC,EAAA,OAAKC,KAAMH,GACTE,EAAA,QAAMF,KAAMA,I,CAKlB,OACEE,EAAA,QACEF,KAAMA,EACNI,aAAc,K,MACZ,MAAMD,GAAOE,EAAAP,KAAKQ,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAEG,cAA+B,cAAcR,OAChF,GAAIG,GAAQ,KAAM,CAChBL,KAAKG,sBAAwBE,EAAKM,gBAAgBC,OAAS,C,IAGzD,E,cArDQ,M,UAGL,G,UAGA,G,WAGkB,G,UAGD,M,sDAKC,K,CAEjC,iBAAAC,GACEb,KAAKc,iBAAmBd,KAAKc,iBAAiBC,KAAKf,K,CAGrD,iBAAAgB,GACEhB,KAAKc,kB,CAGC,gBAAAA,GACNd,KAAKiB,SAAWC,EAAQlB,KAAKQ,K,CAGvB,UAAAW,G,MACN,QAAOZ,EAAAP,KAAKQ,KAAKY,iBAAa,MAAAb,SAAA,SAAAA,EAAEc,QAAQ,4BAA6B,I,CAyBvE,MAAAC,GACE,OACElB,EAAA,eACEmB,MAAO,CACL,qCAAsCvB,KAAKiB,SAC3C,mCAAoCjB,KAAKmB,cAE3CK,OAAQ,KACRC,KAAMzB,KAAKyB,KAAI,eACDzB,KAAK0B,YACnBC,WAAY3B,KAAKiB,UAEjBb,EAAA,OAAKC,KAAK,WACRD,EAAA,OAAKmB,MAAM,+BACRvB,KAAK4B,MAAQxB,EAAA,YAAUmB,MAAM,oCAAoCvB,KAAK4B,MACtE5B,KAAKE,OAGTF,KAAKC,YAAY,gBAClBG,EAAA,a"}

package/dist/ui-library/p-9f0b43f9.entry.js

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

package/dist/ui-library/p-9f0b43f9.entry.js.map

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

package/dist/ui-library/p-b550a258.entry.js

@@ -1,2 +0,0 @@
-import{r,c as a,h as i}from"./p-6153045b.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";const o=class{constructor(i){r(this,i);this.sixClear=a(this,"six-tag-clear",7);this.handleClearClick=()=>{this.sixClear.emit()};this.type="primary";this.size="medium";this.pill=false;this.clearable=false}render(){return i("span",{part:"base",class:{tag:true,"tag--primary":this.type==="primary","tag--success":this.type==="success","tag--info":this.type==="info","tag--warning":this.type==="warning","tag--danger":this.type==="danger","tag--action":this.type==="action","tag--text":this.type==="text","tag--small":this.size==="small","tag--medium":this.size==="medium","tag--large":this.size==="large","tag--pill":this.pill,"tag--clear":this.clearable}},i("span",{part:"content",class:"tag__content"},i("slot",null)),this.clearable&&i("six-icon-button",{exportparts:"base:clear-button",size:"xSmall",name:"clear",class:"tag__clear",onClick:this.handleClearClick}))}};o.style=s;export{o as six_tag};
-//# sourceMappingURL=p-b550a258.entry.js.map

package/dist/ui-library/p-b550a258.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixTagCss","SixTag","this","handleClearClick","sixClear","emit","render","h","part","class","tag","type","size","pill","clearable","exportparts","name","onClick"],"sources":["src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  font-family: var(--six-font-family);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n  color: var(--six-color-white);\n  background-color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-success-500);\n  background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-clay-50);\n  background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-warning-700);\n  background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n  color: var(--six-color-white);\n  border-color: var(--six-color-danger-800);\n  background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n  color: var(--six-color-white);\n  border-color: var(--six-color-action-500);\n  background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--six-button-font-size-small);\n  height: calc(var(--six-height-small) * 0.8);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-small);\n  padding: 0 var(--six-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: calc(var(--six-height-medium) * 0.8);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-medium);\n  padding: 0 var(--six-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--six-button-font-size-large);\n  height: calc(var(--six-height-large) * 0.8);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-large);\n  padding: 0 var(--six-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot />\n        </span>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAY,00E,MCqBLC,EAAM,M,iEAgBTC,KAAAC,iBAAmB,KACzBD,KAAKE,SAASC,MAAM,E,UAfqF,U,UAG7C,S,UAG9B,M,eAGK,K,CASrC,MAAAC,GACE,OACEC,EAAA,QACEC,KAAK,OACLC,MAAO,CACLC,IAAK,KAGL,eAAgBR,KAAKS,OAAS,UAC9B,eAAgBT,KAAKS,OAAS,UAC9B,YAAaT,KAAKS,OAAS,OAC3B,eAAgBT,KAAKS,OAAS,UAC9B,cAAeT,KAAKS,OAAS,SAC7B,cAAeT,KAAKS,OAAS,SAC7B,YAAaT,KAAKS,OAAS,OAG3B,aAAcT,KAAKU,OAAS,QAC5B,cAAeV,KAAKU,OAAS,SAC7B,aAAcV,KAAKU,OAAS,QAG5B,YAAaV,KAAKW,KAClB,aAAcX,KAAKY,YAGrBP,EAAA,QAAMC,KAAK,UAAUC,MAAM,gBACzBF,EAAA,cAGDL,KAAKY,WACJP,EAAA,mBACEQ,YAAY,oBACZH,KAAK,SACLI,KAAK,QACLP,MAAM,aACNQ,QAASf,KAAKC,mB"}

package/dist/ui-library/p-bf87464b.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as e,g as r}from"./p-6153045b.js";import{F as i}from"./p-d42c2025.js";import{h as l}from"./p-15559d38.js";import{E as s}from"./p-7d95def3.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';let n=0;const a=class{constructor(e){o(this,e);this.sixBlur=t(this,"six-checkbox-blur",7);this.sixChange=t(this,"six-checkbox-change",7);this.sixFocus=t(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++n}`;this.labelId=`checkbox-label-${n}`;this.textId=`checkbox-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.handleChange=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.indeterminate=false;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleMouseDown=o=>{var t;o.preventDefault();(t=this.nativeInput)===null||t===void 0?void 0:t.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";this.invalid=false;this.checked=false;this.indeterminate=false}handleCheckedChange(){if(this.nativeInput==null)return;this.nativeInput.checked=this.checked;this.checked=this.nativeInput.checked;this.nativeInput.indeterminate=this.indeterminate}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-checkbox-change","change",this.host);this.eventListeners.forward("six-checkbox-blur","blur",this.host);this.eventListeners.forward("six-checkbox-focus","focus",this.host)}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const o=this.nativeInput;if(o==null){return}o.indeterminate=this.indeterminate}async setFocus(o){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.blur()}handleSlotChange(){this.hasLabelSlot=l(this.host,"label")}render(){return e(i,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,errorText:this.errorText,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},e("label",{part:"base",class:{checkbox:true,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},e("span",{part:"control",class:"checkbox__control"},this.checked&&e("span",{part:"checked-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(3.428571, 3.428571)"},e("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),e("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&e("span",{part:"indeterminate-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(2.285714, 6.857143)"},e("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),e("input",{ref:o=>this.nativeInput=o,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{part:"text",id:this.textId,class:"checkbox__text"},e("slot",null))))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=c;export{a as six_checkbox};
-//# sourceMappingURL=p-bf87464b.entry.js.map

package/dist/ui-library/p-bf87464b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","eventListeners","EventListeners","handleChange","nativeInput","checked","indeterminate","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleMouseDown","event","preventDefault","_a","focus","handleCheckedChange","handleLabelChange","handleSlotChange","connectedCallback","host","shadowRoot","addEventListener","forward","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","setFocus","options","removeFocus","blur","hasLabelSlot","hasSlot","render","h","FormControl","label","errorText","size","disabled","required","displayError","invalid","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) return;\n\n    this.nativeInput.checked = this.checked;\n    this.checked = this.nativeInput.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n    this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n    this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-d367f4f9.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,g as l}from"./p-6153045b.js";import{F as r}from"./p-d42c2025.js";import{h as e}from"./p-15559d38.js";const s=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}';let i=0;const a=class{constructor(t){o(this,t);this.wrapperLabelId=`label-${++i}`;this.labelId=`label-label-${i}`;this.helpTextId=`label-help-text-${i}`;this.handleSlotChange=()=>{this.hasLabelSlot=e(this.host,"label");this.hasHelpTextSlot=e(this.host,"help-text")};this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.size="medium";this.label="";this.helpText="";this.disabled=false;this.required=false}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange)}render(){return t(r,{inputId:this.wrapperLabelId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:this.size,disabled:this.disabled,required:this.required},t("slot",null))}get host(){return l(this)}static get watchers(){return{helpText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=s;export{a as six_group_label};
-//# sourceMappingURL=p-d367f4f9.entry.js.map

package/dist/ui-library/p-d42c2025.js

@@ -1,2 +0,0 @@
-import{h as l}from"./p-6153045b.js";const o=(o,r)=>{var e,t,a,n,s,i;const m=o.label!=null&&o.label.trim()!==""?true:(e=o.hasLabelSlot)!==null&&e!==void 0?e:false;const d=o.helpText!=null&&o.helpText.trim()!==""?true:(t=o.hasHelpTextSlot)!==null&&t!==void 0?t:false;return l("div",{part:"form-control",class:{"form-control":true,"form-control--small":o.size==="small","form-control--medium":o.size==="medium","form-control--large":o.size==="large","form-control--has-label":m,"form-control--has-help-text":d,"form-control--has-error-text":(a=o.displayError)!==null&&a!==void 0?a:false,"form-control--disabled":(n=o.disabled)!==null&&n!==void 0?n:false,"form-control--invalid":((s=o.displayError)!==null&&s!==void 0?s:false)&&!o.disabled}},l("label",{part:"label",id:o.labelId,class:{"form-control__label":true,"form-control__label__required":(i=o.required)!==null&&i!==void 0?i:false},htmlFor:o.inputId,"aria-hidden":m?"false":"true",onClick:o.onLabelClick},l("slot",{name:"label"},o.label)),l("div",{class:"form-control__input"},r),l("div",{part:"error-text",id:o.errorTextId,class:"form-control__error-text","aria-hidden":o.displayError?"false":"true"},o.errorText),l("div",{part:"help-text",id:o.helpTextId,class:"form-control__help-text","aria-hidden":d?"false":"true"},l("slot",{name:"help-text"},o.helpText)))};export{o as F};
-//# sourceMappingURL=p-d42c2025.js.map

package/dist/ui-library/p-d42c2025.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FormControl","props","children","hasLabel","label","trim","_a","hasLabelSlot","hasHelpText","helpText","_b","hasHelpTextSlot","h","part","class","size","_c","displayError","_d","disabled","_e","id","labelId","_f","required","htmlFor","inputId","onClick","onLabelClick","name","errorTextId","errorText","helpTextId"],"sources":["src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h, VNode } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text */\n  errorText?: string;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children: VNode[]) => {\n  const hasLabel = props.label != null && props.label.trim() !== '' ? true : props.hasLabelSlot ?? false;\n  const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : props.hasHelpTextSlot ?? false;\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': props.displayError ?? false,\n        'form-control--disabled': props.disabled ?? false,\n        'form-control--invalid': (props.displayError ?? false) && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required ?? false,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={props.displayError ? 'false' : 'true'}\n      >\n        {props.errorText}\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":"0CA8CMA,EAAc,CAACC,EAAyBC,K,gBAC5C,MAAMC,EAAWF,EAAMG,OAAS,MAAQH,EAAMG,MAAMC,SAAW,GAAK,MAAOC,EAAAL,EAAMM,gBAAY,MAAAD,SAAA,EAAAA,EAAI,MACjG,MAAME,EAAcP,EAAMQ,UAAY,MAAQR,EAAMQ,SAASJ,SAAW,GAAK,MAAOK,EAAAT,EAAMU,mBAAe,MAAAD,SAAA,EAAAA,EAAI,MAE7G,OACEE,EAAA,OACEC,KAAK,eACLC,MAAO,CACL,eAAgB,KAChB,sBAAuBb,EAAMc,OAAS,QACtC,uBAAwBd,EAAMc,OAAS,SACvC,sBAAuBd,EAAMc,OAAS,QACtC,0BAA2BZ,EAC3B,8BAA+BK,EAC/B,gCAAgCQ,EAAAf,EAAMgB,gBAAY,MAAAD,SAAA,EAAAA,EAAI,MACtD,0BAA0BE,EAAAjB,EAAMkB,YAAQ,MAAAD,SAAA,EAAAA,EAAI,MAC5C,0BAA0BE,EAAAnB,EAAMgB,gBAAY,MAAAG,SAAA,EAAAA,EAAI,SAAWnB,EAAMkB,WAGnEP,EAAA,SACEC,KAAK,QACLQ,GAAIpB,EAAMqB,QACVR,MAAO,CACL,sBAAuB,KACvB,iCAAiCS,EAAAtB,EAAMuB,YAAQ,MAAAD,SAAA,EAAAA,EAAI,OAErDE,QAASxB,EAAMyB,QAAO,cACTvB,EAAW,QAAU,OAClCwB,QAAS1B,EAAM2B,cAEfhB,EAAA,QAAMiB,KAAK,SAAS5B,EAAMG,QAG5BQ,EAAA,OAAKE,MAAM,uBAAuBZ,GAElCU,EAAA,OACEC,KAAK,aACLQ,GAAIpB,EAAM6B,YACVhB,MAAM,2BAA0B,cACnBb,EAAMgB,aAAe,QAAU,QAE3ChB,EAAM8B,WAGTnB,EAAA,OACEC,KAAK,YACLQ,GAAIpB,EAAM+B,WACVlB,MAAM,0BAAyB,cAClBN,EAAc,QAAU,QAErCI,EAAA,QAAMiB,KAAK,aAAa5B,EAAMQ,WAE5B,S"}