@six-group/ui-library 0.0.0-insider.af88f91 → 0.0.0-insider.b13c699

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

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as r,g as i}from"./p-05eb1bab.js";import{F as e}from"./p-605bdd81.js";import{h as a}from"./p-0cebf1d2.js";import{E as s}from"./p-8bfb4bfc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-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, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:2px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);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-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:"";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}';const n=l;let h=0;const c=class{constructor(r){o(this,r);this.sixChange=t(this,"six-range-change",7);this.sixBlur=t(this,"six-range-blur",7);this.sixFocus=t(this,"six-range-focus",7);this.inputId=`input-${++h}`;this.labelId=`input-label-${h}`;this.helpTextId=`input-help-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new s;this.handleInput=()=>{if(this.nativeInput!=null){this.update(parseFloat(this.nativeInput.value))}requestAnimationFrame((()=>{this.sixChange.emit()}))};this.handleBlur=()=>{var o;this.hasFocus=false;this.hasTooltip=false;this.sixBlur.emit();if(this.nativeInput!=null){(o=this.resizeObserver)===null||o===void 0?void 0:o.unobserve(this.nativeInput)}};this.handleFocus=()=>{var o;this.hasFocus=true;this.hasTooltip=true;this.sixFocus.emit();if(this.nativeInput!=null){(o=this.resizeObserver)===null||o===void 0?void 0:o.observe(this.nativeInput)}};this.handleSlotChange=()=>{this.hasHelpTextSlot=a(this.host,"help-text");this.hasLabelSlot=a(this.host,"label");this.hasErrorTextSlot=a(this.host,"error-text")};this.handleTouchStart=()=>{this.setFocus()};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.hasTooltip=false;this.name="";this.value=0;this.required=false;this.helpText="";this.disabled=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.min=0;this.max=100;this.step=1;this.tooltip="top";this.tooltipFormatter=o=>o.toString()}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.update()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.update();this.handleSlotChange()}componentDidLoad(){const o=this.nativeInput;if(o==null){return}this.update();this.resizeObserver=new ResizeObserver((()=>this.update()))}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentDidUpdate(){const{min:o,max:t}=this.getMinMax();this.syncTooltip(o,t,this.value)}getMinMax(){var o,t;const r=(o=Number(this.min))!==null&&o!==void 0?o:0;const i=(t=Number(this.max))!==null&&t!==void 0?t:0;return{min:r,max:i}}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()}syncTooltip(o,t,r){if(this.tooltip!=="none"&&this.nativeInput!=null&&this.output!=null){const i=Math.max(0,(r-o)/(t-o));const e=this.nativeInput.offsetWidth;const a=this.output.offsetWidth;const s=getComputedStyle(this.nativeInput).getPropertyValue("--thumb-size");const l=`calc(${e*i}px - calc(calc(${i} * ${s}) - calc(${s} / 2)))`;this.output.style.transform=`translateX(${l})`;this.output.style.marginLeft=`-${a/2}px`}}isFirefox(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}update(o){var t,r;if(o!=null){this.value=o}const i=(t=Number(this.min))!==null&&t!==void 0?t:0;const e=(r=Number(this.max))!==null&&r!==void 0?r:0;let a;const s=parseFloat(this.value);if(isNaN(s)){a=this.getDefaultValue(i,e)}else{a=s}if(this.nativeInput!=null){this.nativeInput.value=a.toString();this.value=parseFloat(this.nativeInput.value)}else{this.value=a}this.calculateColorRunnableTrack(i,e,this.value);this.syncTooltip(i,e,this.value)}getDefaultValue(o,t){return t<o?o:o+(t-o)/2}calculateColorRunnableTrack(o,t,r){if(!this.isFirefox()&&this.nativeInput!=null){const i=Math.ceil((r-o)/(t-o)*100);this.nativeInput.style.background="-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) "+i+"%, var(--six-color-web-rock-300) "+i+"%)"}}render(){return r(e,{key:"cf23b46a8ca2596e962810d3528163ab9add32c3",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:"medium",errorTextId:this.errorTextId,errorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,errorTextCount:this.errorTextCount,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{key:"370f20143ac3c9325b7cc99ceb3c3a6720a50b1c",part:"base",class:{range:true,"range--disabled":this.disabled,"range--focused":this.hasFocus,"range--tooltip-visible":this.hasTooltip,"range--tooltip-top":this.tooltip==="top","range--tooltip-bottom":this.tooltip==="bottom"},onTouchStart:this.handleTouchStart},r("input",{key:"74380f56888930992b753f905cd6e9256c24d106",part:"input",ref:o=>this.nativeInput=o,type:"range",class:"range__control",name:this.name,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.value,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),this.tooltip!=="none"&&r("output",{part:"tooltip",ref:o=>this.output=o,class:"range__tooltip"},this.tooltipFormatter(this.value))))}get host(){return i(this)}static get watchers(){return{label:["handleLabelChange"],errorText:["handleLabelChange"],helpText:["handleLabelChange"],value:["handleValueChange"],min:["handleValueChange"],max:["handleValueChange"]}}};c.style=n;export{c as six_range};
-//# sourceMappingURL=p-d42f1ea9.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixRangeCss","SixRangeStyle0","id","SixRange","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleInput","nativeInput","update","parseFloat","value","requestAnimationFrame","sixChange","emit","handleBlur","hasFocus","hasTooltip","sixBlur","_a","resizeObserver","unobserve","handleFocus","sixFocus","observe","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasLabelSlot","hasErrorTextSlot","handleTouchStart","setFocus","toString","handleLabelChange","handleValueChange","connectedCallback","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","ResizeObserver","disconnectedCallback","removeEventListener","removeAll","componentDidUpdate","min","max","getMinMax","syncTooltip","Number","_b","options","focus","removeFocus","blur","tooltip","output","percent","Math","inputWidth","offsetWidth","tooltipWidth","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","navigator","userAgent","toLowerCase","indexOf","updateValue","parsedValue","isNaN","getDefaultValue","calculateColorRunnableTrack","ceil","background","render","h","FormControl","key","label","helpText","size","errorText","errorTextCount","disabled","required","displayError","invalid","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n        var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 2px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  private output?: HTMLElement;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = 0;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  handleValueChange() {\n    this.update();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.update();\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n    this.update();\n    this.resizeObserver = new ResizeObserver(() => this.update());\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentDidUpdate() {\n    const { min, max } = this.getMinMax();\n    this.syncTooltip(min, max, this.value);\n  }\n\n  private getMinMax() {\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    return { min, max };\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleInput = () => {\n    if (this.nativeInput != null) {\n      this.update(parseFloat(this.nativeInput.value));\n    }\n    requestAnimationFrame(() => {\n      this.sixChange.emit();\n    });\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.unobserve(this.nativeInput);\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    if (this.nativeInput != null) {\n      this.resizeObserver?.observe(this.nativeInput);\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private handleTouchStart = () => {\n    this.setFocus();\n  };\n\n  private syncTooltip(min: number, max: number, value: number) {\n    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n      const percent = Math.max(0, (value - min) / (max - min));\n      const inputWidth = this.nativeInput.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  private isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  private update(updateValue?: number) {\n    if (updateValue != null) {\n      this.value = updateValue;\n    }\n\n    const min = Number(this.min) ?? 0;\n    const max = Number(this.max) ?? 0;\n    let value;\n    const parsedValue = parseFloat(this.value as never);\n    if (isNaN(parsedValue)) {\n      value = this.getDefaultValue(min, max);\n    } else {\n      value = parsedValue;\n    }\n\n    if (this.nativeInput != null) {\n      // The value may have constraints, so we set the native control's\n      // value and sync it back to ensure it adheres to min, max, and step\n      // properly.\n      this.nativeInput.value = value.toString();\n      this.value = parseFloat(this.nativeInput.value);\n    } else {\n      this.value = value;\n    }\n    this.calculateColorRunnableTrack(min, max, this.value);\n    this.syncTooltip(min, max, this.value);\n  }\n\n  /**\n   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n   */\n  private getDefaultValue(min: number, max: number): number {\n    return max < min ? min : min + (max - min) / 2;\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  private calculateColorRunnableTrack(min: number, max: number, value: number) {\n    if (!this.isFirefox() && this.nativeInput != null) {\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.nativeInput.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        errorTextCount={this.errorTextCount}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"qKAAA,MAAMA,EAAc,4hNACpB,MAAAC,EAAeD,ECKf,IAAIE,EAAK,E,MAqBIC,EAAQ,M,uJACXC,KAAAC,QAAU,WAAWH,IACrBE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,IAChCE,KAAAI,YAAc,oBAAoBN,IAClCE,KAAAK,eAAiB,IAAIC,EA6HrBN,KAAAO,YAAc,KACpB,GAAIP,KAAKQ,aAAe,KAAM,CAC5BR,KAAKS,OAAOC,WAAWV,KAAKQ,YAAYG,O,CAE1CC,uBAAsB,KACpBZ,KAAKa,UAAUC,MAAM,GACrB,EAGId,KAAAe,WAAa,K,MACnBf,KAAKgB,SAAW,MAChBhB,KAAKiB,WAAa,MAClBjB,KAAKkB,QAAQJ,OACb,GAAId,KAAKQ,aAAe,KAAM,EAC5BW,EAAAnB,KAAKoB,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,UAAUrB,KAAKQ,Y,GAIhCR,KAAAsB,YAAc,K,MACpBtB,KAAKgB,SAAW,KAChBhB,KAAKiB,WAAa,KAClBjB,KAAKuB,SAAST,OACd,GAAId,KAAKQ,aAAe,KAAM,EAC5BW,EAAAnB,KAAKoB,kBAAc,MAAAD,SAAA,SAAAA,EAAEK,QAAQxB,KAAKQ,Y,GAI9BR,KAAAyB,iBAAmB,KACzBzB,KAAK0B,gBAAkBC,EAAQ3B,KAAK4B,KAAM,aAC1C5B,KAAK6B,aAAeF,EAAQ3B,KAAK4B,KAAM,SACvC5B,KAAK8B,iBAAmBH,EAAQ3B,KAAK4B,KAAM,aAAa,EAGlD5B,KAAA+B,iBAAmB,KACzB/B,KAAKgC,UAAU,E,cAvJG,M,qBACO,M,sBACC,M,kBACJ,M,gBACF,M,UAGP,G,WAGkB,E,cAGd,M,cAGA,G,cAGA,M,WAGH,G,eAGuB,G,2CAMJ,M,SAGrB,E,SAGA,I,UAGC,E,aAG8B,M,sBAGjBrB,GAAkBA,EAAMsB,U,CAcpD,iBAAAC,GACElC,KAAKyB,kB,CAMP,iBAAAU,GACEnC,KAAKS,Q,CAGP,iBAAA2B,G,OACEjB,EAAAnB,KAAK4B,KAAKS,cAAU,MAAAlB,SAAA,SAAAA,EAAEmB,iBAAiB,aAActC,KAAKyB,iB,CAG5D,iBAAAc,GACEvC,KAAKS,SACLT,KAAKyB,kB,CAGP,gBAAAe,GACE,MAAMhC,EAAcR,KAAKQ,YACzB,GAAIA,GAAe,KAAM,CACvB,M,CAEFR,KAAKS,SACLT,KAAKoB,eAAiB,IAAIqB,gBAAe,IAAMzC,KAAKS,U,CAGtD,oBAAAiC,G,OACEvB,EAAAnB,KAAK4B,KAAKS,cAAU,MAAAlB,SAAA,SAAAA,EAAEwB,oBAAoB,aAAc3C,KAAKyB,kBAC7DzB,KAAKK,eAAeuC,W,CAGtB,kBAAAC,GACE,MAAMC,IAAEA,EAAGC,IAAEA,GAAQ/C,KAAKgD,YAC1BhD,KAAKiD,YAAYH,EAAKC,EAAK/C,KAAKW,M,CAG1B,SAAAqC,G,QACN,MAAMF,GAAM3B,EAAA+B,OAAOlD,KAAK8C,QAAI,MAAA3B,SAAA,EAAAA,EAAI,EAChC,MAAM4B,GAAMI,EAAAD,OAAOlD,KAAK+C,QAAI,MAAAI,SAAA,EAAAA,EAAI,EAChC,MAAO,CAAEL,MAAKC,M,CAKhB,cAAMf,CAASoB,G,OACbjC,EAAAnB,KAAKQ,eAAW,MAAAW,SAAA,SAAAA,EAAEkC,MAAMD,E,CAK1B,iBAAME,G,OACJnC,EAAAnB,KAAKQ,eAAW,MAAAW,SAAA,SAAAA,EAAEoC,M,CAwCZ,WAAAN,CAAYH,EAAaC,EAAapC,GAC5C,GAAIX,KAAKwD,UAAY,QAAUxD,KAAKQ,aAAe,MAAQR,KAAKyD,QAAU,KAAM,CAC9E,MAAMC,EAAUC,KAAKZ,IAAI,GAAIpC,EAAQmC,IAAQC,EAAMD,IACnD,MAAMc,EAAa5D,KAAKQ,YAAYqD,YACpC,MAAMC,EAAe9D,KAAKyD,OAAOI,YACjC,MAAME,EAAYC,iBAAiBhE,KAAKQ,aAAayD,iBAAiB,gBACtE,MAAMC,EAAI,QAAQN,EAAaF,mBAAyBA,OAAaK,aAAqBA,WAC1F/D,KAAKyD,OAAOU,MAAMC,UAAY,cAAcF,KAC5ClE,KAAKyD,OAAOU,MAAME,WAAa,IAAIP,EAAe,K,EAI9C,SAAAQ,GACN,OAAOC,UAAUC,UAAUC,cAAcC,QAAQ,YAAc,C,CAGzD,MAAAjE,CAAOkE,G,QACb,GAAIA,GAAe,KAAM,CACvB3E,KAAKW,MAAQgE,C,CAGf,MAAM7B,GAAM3B,EAAA+B,OAAOlD,KAAK8C,QAAI,MAAA3B,SAAA,EAAAA,EAAI,EAChC,MAAM4B,GAAMI,EAAAD,OAAOlD,KAAK+C,QAAI,MAAAI,SAAA,EAAAA,EAAI,EAChC,IAAIxC,EACJ,MAAMiE,EAAclE,WAAWV,KAAKW,OACpC,GAAIkE,MAAMD,GAAc,CACtBjE,EAAQX,KAAK8E,gBAAgBhC,EAAKC,E,KAC7B,CACLpC,EAAQiE,C,CAGV,GAAI5E,KAAKQ,aAAe,KAAM,CAI5BR,KAAKQ,YAAYG,MAAQA,EAAMsB,WAC/BjC,KAAKW,MAAQD,WAAWV,KAAKQ,YAAYG,M,KACpC,CACLX,KAAKW,MAAQA,C,CAEfX,KAAK+E,4BAA4BjC,EAAKC,EAAK/C,KAAKW,OAChDX,KAAKiD,YAAYH,EAAKC,EAAK/C,KAAKW,M,CAM1B,eAAAmE,CAAgBhC,EAAaC,GACnC,OAAOA,EAAMD,EAAMA,EAAMA,GAAOC,EAAMD,GAAO,C,CAMvC,2BAAAiC,CAA4BjC,EAAaC,EAAapC,GAC5D,IAAKX,KAAKsE,aAAetE,KAAKQ,aAAe,KAAM,CACjD,MAAMkD,EAAUC,KAAKqB,MAAOrE,EAAQmC,IAAQC,EAAMD,GAAQ,KAC1D9C,KAAKQ,YAAY2D,MAAMc,WACrB,2EACAvB,EACA,oCACAA,EACA,I,EAIN,MAAAwB,GACE,OACEC,EAACC,EAAW,CAAAC,IAAA,2CACVpF,QAASD,KAAKC,QACdqF,MAAOtF,KAAKsF,MACZpF,QAASF,KAAKE,QACd2B,aAAc7B,KAAK6B,aACnB1B,WAAYH,KAAKG,WACjBoF,SAAUvF,KAAKuF,SACf7D,gBAAiB1B,KAAK0B,gBACtB8D,KAAK,SACLpF,YAAaJ,KAAKI,YAClBqF,UAAWzF,KAAKyF,UAChB3D,iBAAkB9B,KAAK8B,iBACvB4D,eAAgB1F,KAAK0F,eACrBC,SAAU3F,KAAK2F,SACfC,SAAU5F,KAAK4F,SACfC,aAAc7F,KAAK8F,SAEnBX,EAAA,OAAAE,IAAA,2CACEU,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,kBAAmBjG,KAAK2F,SACxB,iBAAkB3F,KAAKgB,SACvB,yBAA0BhB,KAAKiB,WAC/B,qBAAsBjB,KAAKwD,UAAY,MACvC,wBAAyBxD,KAAKwD,UAAY,UAE5C0C,aAAclG,KAAK+B,kBAEnBoD,EAAA,SAAAE,IAAA,2CACEU,KAAK,QACLI,IAAMC,GAAQpG,KAAKQ,YAAc4F,EACjCC,KAAK,QACLL,MAAM,iBACNM,KAAMtG,KAAKsG,KACXX,SAAU3F,KAAK2F,SACf7C,IAAK9C,KAAK8C,IACVC,IAAK/C,KAAK+C,IACVwD,KAAMvG,KAAKuG,KACX5F,MAAOX,KAAKW,MACZ6F,QAASxG,KAAKO,YACdkG,QAASzG,KAAKsB,YACdoF,OAAQ1G,KAAKe,aAEdf,KAAKwD,UAAY,QAChB2B,EAAA,UAAQY,KAAK,UAAUI,IAAMC,GAAQpG,KAAKyD,OAAS2C,EAAKJ,MAAM,kBAC3DhG,KAAK2G,iBAAiB3G,KAAKW,S"}

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

@@ -1,2 +0,0 @@
-import{r as s,h as e}from"./p-05eb1bab.js";const i=".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";const t=i;const a=class{constructor(e){s(this,e)}render(){return e("div",{key:"a7119608a094e12dec079974a2a313eac5bf63ae",class:"six-files-list__container"},e("slot",{key:"eedc03a42dafc5d690db84ed670b1f0b0bb71b81"}))}};a.style=t;export{a as six_file_list};
-//# sourceMappingURL=p-fe37dadf.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixFileListCss","SixFileListStyle0","SixFileList","render","h","key","class"],"sources":["src/components/six-file-list/six-file-list.scss?tag=six-file-list&encapsulation=shadow","src/components/six-file-list/six-file-list.tsx"],"sourcesContent":[".six-files-list {\n  &__container {\n    padding: 1rem;\n\n    & :last-child {\n      padding-bottom: 0;\n    }\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list',\n  styleUrl: 'six-file-list.scss',\n  shadow: true,\n})\nexport class SixFileList {\n  render() {\n    return (\n      <div class=\"six-files-list__container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,mGACvB,MAAAC,EAAeD,E,MCWFE,EAAW,M,yBACtB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,6BACTF,EAAA,QAAAC,IAAA,6C"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as o,h as e,g as r}from"./p-05eb1bab.js";import{E as t}from"./p-8bfb4bfc.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.radio{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}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__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:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";const a=s;let l=0;const n=class{constructor(e){i(this,e);this.sixBlur=o(this,"six-radio-blur",7);this.sixChange=o(this,"six-radio-change",7);this.sixFocus=o(this,"six-radio-focus",7);this.inputId=`radio-${++l}`;this.labelId=`radio-label-${l}`;this.eventListeners=new t;this.handleClick=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=i=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const e=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let r=o.indexOf(this.host)+e;if(r<0)r=o.length-1;if(r>o.length-1)r=0;this.getAllRadios().forEach((i=>i.checked=false));o[r].setFocus();o[r].checked=true;o[r].dispatchEvent(new CustomEvent("six-radio-change",{bubbles:true,cancelable:true}));i.preventDefault()}};this.handleMouseDown=i=>{var o;i.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.checked=false;this.invalid=false}handleCheckedChange(){if(this.checked){this.getSiblingRadios().forEach((i=>i.checked=false))}if(this.nativeInput!=null){this.nativeInput.checked=this.checked}}handleNameChange(i){if(this.nativeInput!=null){this.nativeInput.name=i}}connectedCallback(){this.eventListeners.forward("six-radio-change","change",this.host);this.eventListeners.forward("six-radio-blur","blur",this.host);this.eventListeners.forward("six-radio-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(i){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}getAllRadios(){const i=this.host.closest("form")||document.body;if(this.name==="")return[];return[...i.querySelectorAll("six-radio")].filter((i=>i.name===this.name))}getSiblingRadios(){return this.getAllRadios().filter((i=>i!==this.host))}render(){return e("label",{key:"11d5d7c460cf62b2fc73435137998c3b424ab58f",part:"base",class:{radio:true,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus},htmlFor:this.inputId,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown},e("span",{key:"e6ca5e0308ed109262b995b9831f32f5c5829cbc",part:"control",class:"radio__control"},e("span",{key:"c201309a8ef4def676aa48cf9dd66b94da28db10",part:"checked-icon",class:"radio__icon"},e("svg",{key:"0e003d8db64fb73c54e95fffb9005d434d2b114e",viewBox:"0 0 16 16"},e("g",{key:"374a33afe42003445cb91630754007f7057ff755",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},e("g",{key:"2b85fcbdf694e18c9234819a0a20ffd793be0102",fill:"currentColor"},e("circle",{key:"45842bd37b3dcea164b972c9ff6e461fc866536d",cx:"8",cy:"8",r:"5"}))))),e("input",{key:"924cbd7890627bbf79201b68a989f894e26d9579",ref:i=>this.nativeInput=i,id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,role:"radio","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{key:"f00e3fbac022d2be55117448df3e8ff908dd4cd5",part:"label",id:this.labelId,class:"radio__label"},e("slot",{key:"0fa728701561580e0d06f0568a001d1d234ed867"})))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],name:["handleNameChange"]}}};n.style=a;export{n as six_radio};
-//# sourceMappingURL=p-fe89a7c4.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixRadioCss","SixRadioStyle0","id","SixRadio","this","inputId","labelId","eventListeners","EventListeners","handleClick","nativeInput","checked","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleKeyDown","keyboardEvent","includes","key","radios","getAllRadios","filter","radio","disabled","incr","index","indexOf","host","length","forEach","setFocus","dispatchEvent","CustomEvent","bubbles","cancelable","preventDefault","handleMouseDown","event","_a","focus","handleCheckedChange","getSiblingRadios","handleNameChange","name","connectedCallback","forward","disconnectedCallback","removeAll","options","removeFocus","blur","form","closest","document","body","querySelectorAll","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","value","role","onClick","onBlur","onFocus"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.radio {\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.radio__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.radio__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: 50%;\n  background-color: var(--six-input-background-color);\n  color: transparent;\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='radio'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n  color: var(--six-selection-control-color);\n  border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  color: var(--six-input-border-color-focus);\n  border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .radio__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.radio--checked .radio__control {\n    color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.radio__label {\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 { 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 - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\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  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\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 handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().forEach((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n      radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n      keyboardEvent.preventDefault();\n    }\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  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,o3DACpB,MAAAC,EAAeD,ECGf,IAAIE,EAAK,E,MAqBIC,EAAQ,M,uJACXC,KAAAC,QAAU,WAAWH,IACrBE,KAAAE,QAAU,eAAeJ,IAEzBE,KAAAG,eAAiB,IAAIC,EAmFrBJ,KAAAK,YAAc,KACpB,GAAIL,KAAKM,aAAe,KAAM,CAC5BN,KAAKO,QAAUP,KAAKM,YAAYC,QAChCP,KAAKQ,UAAUC,M,GAIXT,KAAAU,WAAa,KACnBV,KAAKW,SAAW,MAChBX,KAAKY,QAAQH,MAAM,EAGbT,KAAAa,YAAc,KACpBb,KAAKW,SAAW,KAChBX,KAAKc,SAASL,MAAM,EAGdT,KAAAe,cAAiBC,IACvB,GAAI,CAAC,UAAW,YAAa,YAAa,cAAcC,SAASD,EAAcE,KAAM,CACnF,MAAMC,EAASnB,KAAKoB,eAAeC,QAAQC,IAAWA,EAAMC,WAC5D,MAAMC,EAAO,CAAC,UAAW,aAAaP,SAASD,EAAcE,MAAQ,EAAI,EACzE,IAAIO,EAAQN,EAAOO,QAAQ1B,KAAK2B,MAAQH,EACxC,GAAIC,EAAQ,EAAGA,EAAQN,EAAOS,OAAS,EACvC,GAAIH,EAAQN,EAAOS,OAAS,EAAGH,EAAQ,EAEvCzB,KAAKoB,eAAeS,SAASP,GAAWA,EAAMf,QAAU,QACxDY,EAAOM,GAAOK,WACdX,EAAOM,GAAOlB,QAAU,KACxBY,EAAOM,GAAOM,cAAc,IAAIC,YAAY,mBAAoB,CAAEC,QAAS,KAAMC,WAAY,QAC7FlB,EAAcmB,gB,GAIVnC,KAAAoC,gBAAmBC,I,MAEzBA,EAAMF,kBACNG,EAAAtC,KAAKM,eAAW,MAAAgC,SAAA,SAAAA,EAAEC,OAAO,E,cAnHP,M,UAGL,G,WAGkB,K,cAGd,M,aAG+B,M,aAGf,K,CAGnC,mBAAAC,GACE,GAAIxC,KAAKO,QAAS,CAChBP,KAAKyC,mBAAmBZ,SAASP,GAAWA,EAAMf,QAAU,O,CAE9D,GAAIP,KAAKM,aAAe,KAAM,CAC5BN,KAAKM,YAAYC,QAAUP,KAAKO,O,EAKpC,gBAAAmC,CAAiBC,GACf,GAAI3C,KAAKM,aAAe,KAAM,CAC5BN,KAAKM,YAAYqC,KAAOA,C,EAa5B,iBAAAC,GACE5C,KAAKG,eAAe0C,QAAQ,mBAAoB,SAAU7C,KAAK2B,MAC/D3B,KAAKG,eAAe0C,QAAQ,iBAAkB,OAAQ7C,KAAK2B,MAC3D3B,KAAKG,eAAe0C,QAAQ,kBAAmB,QAAS7C,KAAK2B,K,CAG/D,oBAAAmB,GACE9C,KAAKG,eAAe4C,W,CAKtB,cAAMjB,CAASkB,G,OACbV,EAAAtC,KAAKM,eAAW,MAAAgC,SAAA,SAAAA,EAAEC,MAAMS,E,CAK1B,iBAAMC,G,OACJX,EAAAtC,KAAKM,eAAW,MAAAgC,SAAA,SAAAA,EAAEY,M,CAGZ,YAAA9B,GACN,MAAM+B,EAAOnD,KAAK2B,KAAKyB,QAAQ,SAAWC,SAASC,KAEnD,GAAItD,KAAK2C,OAAS,GAAI,MAAO,GAE7B,MAAO,IAAIQ,EAAKI,iBAAiB,cAAclC,QAC5CC,GAA+BA,EAAMqB,OAAS3C,KAAK2C,M,CAIhD,gBAAAF,GACN,OAAOzC,KAAKoB,eAAeC,QAAQC,GAAUA,IAAUtB,KAAK2B,M,CA0C9D,MAAA6B,GACE,OACEC,EAAA,SAAAvC,IAAA,2CACEwC,KAAK,OACLC,MAAO,CACLrC,MAAO,KACP,iBAAkBtB,KAAKO,QACvB,kBAAmBP,KAAKuB,SACxB,iBAAkBvB,KAAKW,UAEzBiD,QAAS5D,KAAKC,QACd4D,UAAW7D,KAAKe,cAChB+C,YAAa9D,KAAKoC,iBAElBqB,EAAA,QAAAvC,IAAA,2CAAMwC,KAAK,UAAUC,MAAM,kBACzBF,EAAA,QAAAvC,IAAA,2CAAMwC,KAAK,eAAeC,MAAM,eAC9BF,EAAA,OAAAvC,IAAA,2CAAK6C,QAAQ,aACXN,EAAA,KAAAvC,IAAA,2CAAG8C,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,WACtDR,EAAA,KAAAvC,IAAA,2CAAG+C,KAAK,gBACNR,EAAA,UAAAvC,IAAA,2CAAQgD,GAAG,IAAIC,GAAG,IAAIC,EAAE,UAMhCX,EAAA,SAAAvC,IAAA,2CACEmD,IAAMC,GAAQtE,KAAKM,YAAcgE,EACjCxE,GAAIE,KAAKC,QACTsE,KAAK,QACL5B,KAAM3C,KAAK2C,KACX6B,MAAOxE,KAAKwE,MACZjE,QAASP,KAAKO,QACdgB,SAAUvB,KAAKuB,SACfkD,KAAK,QAAO,eACEzE,KAAKO,QAAU,OAAS,QAAO,kBAC5BP,KAAKE,QACtBwE,QAAS1E,KAAKK,YACdsE,OAAQ3E,KAAKU,WACbkE,QAAS5E,KAAKa,eAIlB4C,EAAA,QAAAvC,IAAA,2CAAMwC,KAAK,QAAQ5D,GAAIE,KAAKE,QAASyD,MAAM,gBACzCF,EAAA,QAAAvC,IAAA,8C"}