@six-group/ui-library 0.0.0-insider.03e5196 → 0.0.0-insider.3f37dd4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/cjs/six-checkbox.cjs.entry.js +57 -46
  2. package/dist/cjs/six-checkbox.cjs.entry.js.map +1 -1
  3. package/dist/cjs/six-input.cjs.entry.js +107 -81
  4. package/dist/cjs/six-input.cjs.entry.js.map +1 -1
  5. package/dist/cjs/six-radio.cjs.entry.js +56 -51
  6. package/dist/cjs/six-radio.cjs.entry.js.map +1 -1
  7. package/dist/cjs/six-range.cjs.entry.js +114 -75
  8. package/dist/cjs/six-range.cjs.entry.js.map +1 -1
  9. package/dist/cjs/six-textarea.cjs.entry.js +97 -74
  10. package/dist/cjs/six-textarea.cjs.entry.js.map +1 -1
  11. package/dist/cjs/slot-ad537f24.js.map +1 -1
  12. package/dist/collection/components/six-checkbox/six-checkbox.js +62 -49
  13. package/dist/collection/components/six-checkbox/six-checkbox.js.map +1 -1
  14. package/dist/collection/components/six-input/six-input.js +130 -117
  15. package/dist/collection/components/six-input/six-input.js.map +1 -1
  16. package/dist/collection/components/six-radio/six-radio.js +60 -53
  17. package/dist/collection/components/six-radio/six-radio.js.map +1 -1
  18. package/dist/collection/components/six-range/six-range.js +121 -76
  19. package/dist/collection/components/six-range/six-range.js.map +1 -1
  20. package/dist/collection/components/six-textarea/six-textarea.js +115 -105
  21. package/dist/collection/components/six-textarea/six-textarea.js.map +1 -1
  22. package/dist/collection/utils/slot.js.map +1 -1
  23. package/dist/components/six-checkbox.js +57 -46
  24. package/dist/components/six-checkbox.js.map +1 -1
  25. package/dist/components/six-input2.js +107 -81
  26. package/dist/components/six-input2.js.map +1 -1
  27. package/dist/components/six-radio.js +56 -51
  28. package/dist/components/six-radio.js.map +1 -1
  29. package/dist/components/six-range.js +114 -75
  30. package/dist/components/six-range.js.map +1 -1
  31. package/dist/components/six-textarea.js +97 -74
  32. package/dist/components/six-textarea.js.map +1 -1
  33. package/dist/components/slot.js.map +1 -1
  34. package/dist/components.json +45 -35
  35. package/dist/esm/six-checkbox.entry.js +57 -46
  36. package/dist/esm/six-checkbox.entry.js.map +1 -1
  37. package/dist/esm/six-input.entry.js +107 -81
  38. package/dist/esm/six-input.entry.js.map +1 -1
  39. package/dist/esm/six-radio.entry.js +56 -51
  40. package/dist/esm/six-radio.entry.js.map +1 -1
  41. package/dist/esm/six-range.entry.js +114 -75
  42. package/dist/esm/six-range.entry.js.map +1 -1
  43. package/dist/esm/six-textarea.entry.js +97 -74
  44. package/dist/esm/six-textarea.entry.js.map +1 -1
  45. package/dist/esm/slot-6f3984c7.js.map +1 -1
  46. package/dist/types/components/six-checkbox/six-checkbox.d.ts +21 -17
  47. package/dist/types/components/six-input/six-input.d.ts +27 -36
  48. package/dist/types/components/six-radio/six-radio.d.ts +10 -11
  49. package/dist/types/components/six-range/six-range.d.ts +24 -20
  50. package/dist/types/components/six-textarea/six-textarea.d.ts +22 -31
  51. package/dist/types/components.d.ts +19 -27
  52. package/dist/ui-library/{p-14f20bbb.entry.js → p-394a2a12.entry.js} +2 -2
  53. package/dist/ui-library/p-394a2a12.entry.js.map +1 -0
  54. package/dist/ui-library/{p-7e0cc4ae.entry.js → p-3c635d0a.entry.js} +2 -2
  55. package/dist/ui-library/p-3c635d0a.entry.js.map +1 -0
  56. package/dist/ui-library/p-5a25d6fb.entry.js +2 -0
  57. package/dist/ui-library/p-5a25d6fb.entry.js.map +1 -0
  58. package/dist/ui-library/{p-90dc6af4.entry.js → p-97cc839c.entry.js} +2 -2
  59. package/dist/ui-library/p-97cc839c.entry.js.map +1 -0
  60. package/dist/ui-library/p-b4dfb7cf.js.map +1 -1
  61. package/dist/ui-library/p-f604e067.entry.js +2 -0
  62. package/dist/ui-library/p-f604e067.entry.js.map +1 -0
  63. package/dist/ui-library/ui-library.esm.js +1 -1
  64. package/package.json +9 -9
  65. package/dist/ui-library/p-0d79b0c6.entry.js +0 -2
  66. package/dist/ui-library/p-0d79b0c6.entry.js.map +0 -1
  67. package/dist/ui-library/p-14f20bbb.entry.js.map +0 -1
  68. package/dist/ui-library/p-7e0cc4ae.entry.js.map +0 -1
  69. package/dist/ui-library/p-90dc6af4.entry.js.map +0 -1
  70. package/dist/ui-library/p-edc96efc.entry.js +0 -2
  71. package/dist/ui-library/p-edc96efc.entry.js.map +0 -1
package/dist/ui-library/p-14f20bbb.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","handleLabelChange","handleSlotChange","handleValueChange","input","value","invalid","checkValidity","sixValueChange","emit","connectedCallback","handleChange","bind","handleInput","handleInvalid","handleBlur","handleFocus","handleClearClick","handlePasswordToggle","host","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","focus","blur","select","selectionStart","selectionEnd","selectionDirection","setSelectionRange","replacement","start","end","selectMode","setRangeText","sixChange","sixInput","reportValidity","validity","valid","message","setCustomValidity","hasFocus","sixBlur","sixFocus","sixClear","stopPropagation","isPasswordVisible","hasHelpTextSlot","hasSlot","hasLabelSlot","displayError","errorOnBlur","render","h","FormControl","label","helpText","size","disabled","required","part","class","line","pill","_a","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","onInvalid","onFocus","onBlur","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: var(--six-input-font-size-medium);\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, Method, Prop, State, Watch, h } 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\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown 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, 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 inputId = `input-${++id}`;\n labelId = `input-label-${id}`;\n helpTextId = `input-help-text-${id}`;\n errorTextId = `input-error-text-${id}`;\n input: HTMLInputElement;\n customErrorText = '';\n customValidation = false;\n\n readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = 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 label. Alternatively, you can use the label slot. */\n @Prop() label = '';\n\n /** The input's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** The input's error text. Alternatively, you can use the error-text slot. */\n @Prop() errorText = '';\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 make the input a required field. */\n @Prop({ reflect: true }) required: boolean;\n\n /** The input's autocaptialize attribute. */\n @Prop() autocapitalize: string;\n\n /** The input's autocorrect attribute. */\n @Prop() autocorrect: string;\n\n /** The input's autocomplete attribute. */\n @Prop() autocomplete: string;\n\n /** The input's autofocus attribute. */\n @Prop() autofocus: boolean;\n\n /** Enables spell checking on the input. */\n @Prop() spellcheck: boolean;\n\n /**\n * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n */\n @Prop({ mutable: true, 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 /** Set to display the error text on blur and not when typing */\n @Prop() errorOnBlur = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n if (!this.input) {\n return;\n }\n this.input.value = this.value;\n this.invalid = !this.input.checkValidity();\n this.sixValueChange.emit();\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 /**\n * Emitted whenever the value changes. Access the new value via event.target.value.\n * six-input-value-change will emit whenever the value changes.\n * So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,\n * but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter\n * or leaves the input field after entering some data.\n * */\n @Event({ eventName: 'six-input-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n /** defaultValue which the input will be reverted to when executing reset */\n private defaultValue = '';\n\n connectedCallback() {\n this.handleChange = this.handleChange.bind(this);\n this.handleInput = this.handleInput.bind(this);\n this.handleInvalid = this.handleInvalid.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleClearClick = this.handleClearClick.bind(this);\n this.handlePasswordToggle = this.handlePasswordToggle.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.value;\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.eventListeners.add(this.input, 'invalid', (event) => {\n if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n this.customErrorText = this.input.validationMessage;\n }\n event.preventDefault();\n });\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.input.focus(options);\n }\n\n /** Removes focus from the input. */\n @Method()\n async removeFocus() {\n this.input.blur();\n }\n\n /** Selects all the text in the input. */\n @Method()\n async select() {\n return this.input.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.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n ) {\n this.input.setRangeText(replacement, start, end, selectMode);\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n @Method()\n async reportValidity() {\n return this.input.reportValidity();\n }\n\n /** Checks for validity. */\n @Method()\n async checkValidity() {\n return this.input.validity.valid;\n }\n\n /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /** Returns the native input's validity */\n @Method()\n async getValidity() {\n return this.input.validity;\n }\n\n /** Returns the native input's validity */\n @Method()\n async isValid() {\n return this.input.validity.valid;\n }\n\n /** Returns the native input's validationMessage */\n @Method()\n async getValidationMessage() {\n return this.input.validationMessage;\n }\n\n /** Resets the formcontrol */\n @Method()\n async reset() {\n this.value = this.defaultValue;\n this.customErrorText = '';\n this.customValidation = false;\n this.input.setCustomValidity('');\n this.invalid = false;\n }\n\n handleChange() {\n this.value = this.input.value;\n this.sixChange.emit();\n }\n\n handleInput() {\n this.value = this.input.value;\n this.sixInput.emit();\n }\n\n handleInvalid() {\n this.invalid = true;\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.sixBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.sixFocus.emit();\n }\n\n handleClearClick(event: MouseEvent) {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n this.input.focus();\n\n event.stopPropagation();\n }\n\n handlePasswordToggle() {\n this.isPasswordVisible = !this.isPasswordVisible;\n }\n\n handleSlotChange() {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n }\n\n displayError() {\n return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.customErrorText ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\n >\n <div\n part=\"base\"\n class={{\n 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.value?.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.input = 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.value}\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 onInvalid={this.handleInvalid}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\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-7e0cc4ae.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["sixRangeCss","id","SixRange","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","value","toString","handleLabelChange","handleSlotChange","handleValueChange","input","calculateColorRunnableTrack","invalid","checkValidity","connectedCallback","handleInput","bind","handleBlur","handleFocus","handleTouchStart","host","shadowRoot","addEventListener","componentWillLoad","undefined","min","max","componentDidLoad","syncTooltip","resizeObserver","ResizeObserver","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","focus","blur","message","setCustomValidity","Number","sixChange","emit","requestAnimationFrame","hasFocus","hasTooltip","sixBlur","unobserve","sixFocus","observe","hasHelpTextSlot","hasSlot","hasLabelSlot","setFocus","displayError","errorOnBlur","tooltip","percent","Math","inputWidth","offsetWidth","tooltipWidth","output","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","parseInt","ceil","background","navigator","userAgent","toLowerCase","indexOf","render","h","FormControl","label","helpText","size","disabled","required","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["./src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","./src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 1px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } 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 inputId = `input-${++id}`;\n labelId = `input-label-${id}`;\n helpTextId = `input-help-text-${id}`;\n errorTextId = `input-error-text-${id}`;\n resizeObserver: ResizeObserver;\n\n output: HTMLElement;\n input: HTMLInputElement;\n customErrorText = '';\n customValidation = false;\n\n readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = 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: number;\n\n /** Set to true to make the input a required field. */\n @Prop({ reflect: true }) required: boolean;\n\n /** The range's label. Alternatively, you can use the label slot. */\n @Prop() label = '';\n\n /** The range's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** The input's error text. Alternatively, you can use the error-text slot. */\n @Prop() errorText = '';\n\n /** Set to true to disable the input. */\n @Prop() disabled = false;\n\n /**\n * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n * provided by the `setCustomValidity` method.\n */\n @Prop({ mutable: true, 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 /** Set to display the error text on blur and not when typing */\n @Prop() errorOnBlur = false;\n\n /** Emitted when the control's value changes. */\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 /** default value the slider will be reverted to when reset is executed */\n private defaultValue = 0;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n if (this.input) {\n this.input.value = this.value as any;\n this.calculateColorRunnableTrack();\n }\n // In rare cases, the watcher may be called before render so we need to make sure the input exists\n this.invalid = this.input ? !this.input.checkValidity() : false;\n }\n\n connectedCallback() {\n this.handleInput = this.handleInput.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n this.handleTouchStart = this.handleTouchStart.bind(this);\n\n this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n if (this.value === undefined || this.value === null) this.value = this.min;\n if (this.value < this.min) this.value = this.min;\n if (this.value > this.max) this.value = this.max;\n this.defaultValue = this.value;\n\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.syncTooltip();\n this.calculateColorRunnableTrack();\n this.resizeObserver = new ResizeObserver(() => this.syncTooltip());\n this.eventListeners.add(this.input, 'invalid', (event) => {\n if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n this.customErrorText = this.input.validationMessage;\n }\n event.preventDefault();\n });\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.input.focus(options);\n }\n\n /** Removes focus from the input. */\n @Method()\n async removeFocus() {\n this.input.blur();\n }\n\n /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /** Resets the formcontrol */\n @Method()\n async reset() {\n this.value = this.defaultValue;\n this.customErrorText = '';\n this.customValidation = false;\n this.input.setCustomValidity('');\n this.invalid = false;\n }\n\n handleInput() {\n this.value = Number(this.input.value);\n this.sixChange.emit();\n\n requestAnimationFrame(() => this.syncTooltip());\n requestAnimationFrame(() => this.calculateColorRunnableTrack());\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n this.resizeObserver.unobserve(this.input);\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n this.resizeObserver.observe(this.input);\n }\n\n handleSlotChange() {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n }\n\n handleTouchStart() {\n this.setFocus();\n }\n\n displayError() {\n return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n }\n\n syncTooltip() {\n if (this.tooltip !== 'none') {\n const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));\n const inputWidth = this.input.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.input).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 /**\n * For Firefox this functionality is not needed because it is supported by standard CSS.\n */\n calculateColorRunnableTrack() {\n if (!this.isFirefox()) {\n const value = parseInt(this.input.value, 10);\n const min = parseInt(this.input.min, 10);\n const max = parseInt(this.input.max, 10);\n const percent = Math.ceil(((value - min) / (max - min)) * 100);\n this.input.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 isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\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.customErrorText ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\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.input = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"mappings":"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"}
package/dist/ui-library/p-90dc6af4.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultState","handleCheckedChange","input","checked","indeterminate","invalid","checkValidity","sixChange","emit","handleLabelChange","handleSlotChange","connectedCallback","handleChange","bind","handleBlur","handleFocus","handleMouseDown","handleInvalid","host","shadowRoot","addEventListener","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","hasFocus","sixBlur","sixFocus","hasSlot","hasLabelSlot","displayError","errorOnBlur","render","h","FormControl","label","size","disabled","required","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus","onInvalid"],"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, Event, EventEmitter, Method, Prop, State, Watch, h, Element } 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 inputId = `checkbox-${++id}`;\n labelId = `checkbox-label-${id}`;\n textId = `checkbox-text-${id}`;\n errorTextId = `input-error-text-${id}`;\n input: HTMLInputElement;\n customErrorText = '';\n customValidation = false;\n\n readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixCheckboxElement;\n\n @State() hasFocus = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /** The checkbox's name attribute. */\n @Prop() name: string;\n\n /** The checkbox's value attribute. */\n @Prop() value: string;\n\n /** Set to true to disable the checkbox. */\n @Prop() disabled = false;\n\n /** Set to true to make the checkbox a required field. */\n @Prop() required = false;\n\n /** The checkbox label. Alternatively, you can use the label slot. */\n @Prop() label = '';\n\n /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n @Prop() errorText = '';\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 /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n /** Set to display the error text on blur and not when typing */\n @Prop() errorOnBlur = 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.input) {\n return;\n }\n this.input.checked = this.checked;\n this.input.indeterminate = this.indeterminate;\n this.invalid = !this.input.checkValidity();\n this.sixChange.emit();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n /** default state whether the radio button should be checked or not when resetting */\n private defaultState = false;\n\n connectedCallback() {\n this.handleChange = this.handleChange.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleMouseDown = this.handleMouseDown.bind(this);\n this.handleInvalid = this.handleInvalid.bind(this);\n\n this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentWillLoad() {\n this.defaultState = this.checked;\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.eventListeners.add(this.input, 'invalid', (event) => {\n if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n this.customErrorText = this.input.validationMessage;\n }\n event.preventDefault();\n });\n }\n\n /** Sets focus on the checkbox. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n @Method()\n async removeFocus() {\n this.input.blur();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n @Method()\n async reportValidity() {\n return this.input.reportValidity();\n }\n\n /** Checks for validity. */\n @Method()\n async checkValidity() {\n return this.input.validity.valid;\n }\n\n /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /** Resets the formcontrol */\n @Method()\n async reset() {\n this.checked = this.defaultState;\n this.customErrorText = '';\n this.customValidation = false;\n this.input.setCustomValidity('');\n this.invalid = false;\n }\n\n handleChange() {\n this.checked = this.input.checked;\n this.indeterminate = false;\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.sixBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.sixFocus.emit();\n }\n\n handleMouseDown(event: MouseEvent) {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.input.focus();\n }\n\n handleInvalid() {\n this.invalid = true;\n }\n\n handleSlotChange() {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n }\n\n displayError() {\n return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n errorTextId={this.errorTextId}\n errorText={this.customErrorText ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\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.input = 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 onInvalid={this.handleInvalid}\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-edc96efc.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as i,c as o,h as t,g as s}from"./p-ac4f4d45.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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}";let e=0;const a=class{constructor(t){i(this,t);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-${++e}`;this.labelId=`radio-label-${e}`;this.defaultState=false;this.hasFocus=false;this.name=undefined;this.value=undefined;this.disabled=false;this.checked=false;this.invalid=false}handleCheckedChange(){if(this.checked){this.getSiblingRadios().map((i=>i.checked=false))}if(this.input){this.input.checked=this.checked;this.sixChange.emit()}}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleMouseDown=this.handleMouseDown.bind(this)}componentWillLoad(){this.defaultState=this.checked}async setFocus(i){this.input.focus(i)}async removeFocus(){this.input.blur()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(i){this.input.setCustomValidity(i);this.invalid=!this.input.checkValidity()}async reset(){this.checked=this.defaultState;this.input.setCustomValidity("");this.invalid=false}getAllRadios(){const i=this.host.closest("six-form, 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))}handleClick(){this.checked=this.input.checked}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleKeyDown(i){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const t=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let s=o.indexOf(this.host)+t;if(s<0)s=o.length-1;if(s>o.length-1)s=0;this.getAllRadios().map((i=>i.checked=false));o[s].setFocus();o[s].checked=true;i.preventDefault()}}handleMouseDown(i){i.preventDefault();this.input.focus()}render(){return t("label",{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},t("span",{part:"control",class:"radio__control"},t("span",{part:"checked-icon",class:"radio__icon"},t("svg",{viewBox:"0 0 16 16"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},t("g",{fill:"currentColor"},t("circle",{cx:"8",cy:"8",r:"5"}))))),t("input",{ref:i=>this.input=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})),t("span",{part:"label",id:this.labelId,class:"radio__label"},t("slot",null)))}get host(){return s(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};a.style=r;export{a as six_radio};
2
- //# sourceMappingURL=p-edc96efc.entry.js.map
package/dist/ui-library/p-edc96efc.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["sixRadioCss","id","SixRadio","this","inputId","labelId","defaultState","handleCheckedChange","checked","getSiblingRadios","map","radio","input","sixChange","emit","connectedCallback","handleClick","bind","handleBlur","handleFocus","handleKeyDown","handleMouseDown","componentWillLoad","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","invalid","checkValidity","getAllRadios","form","host","closest","document","body","name","querySelectorAll","filter","hasFocus","sixBlur","sixFocus","event","includes","key","radios","disabled","incr","index","indexOf","length","setFocus","preventDefault","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, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The 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 inputId = `radio-${++id}`;\n labelId = `radio-label-${id}`;\n input: HTMLInputElement;\n\n @Element() host: HTMLSixRadioElement;\n\n @State() hasFocus = false;\n\n /** The radio's name attribute. */\n @Prop() name: string;\n\n /** The radio's value attribute. */\n @Prop() value: string;\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 /**\n * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n * provided by the `setCustomValidity` method.\n */\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.checked) {\n this.getSiblingRadios().map((radio) => (radio.checked = false));\n }\n if (this.input) {\n this.input.checked = this.checked;\n this.sixChange.emit();\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 /** default state whether the radio button should be checked or not when resetting */\n private defaultState = false;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleMouseDown = this.handleMouseDown.bind(this);\n }\n\n componentWillLoad() {\n this.defaultState = this.checked;\n }\n\n /** Sets focus on the radio. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the radio. */\n @Method()\n async removeFocus() {\n this.input.blur();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n @Method()\n async reportValidity() {\n return this.input.reportValidity();\n }\n\n /** Checks for validity. */\n @Method()\n async checkValidity() {\n return this.input.validity.valid;\n }\n\n /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n @Method()\n async setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /** Resets the formcontrol */\n @Method()\n async reset() {\n this.checked = this.defaultState;\n this.input.setCustomValidity('');\n this.invalid = false;\n }\n\n getAllRadios() {\n const form = this.host.closest('six-form, 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 getSiblingRadios() {\n return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n }\n\n handleClick() {\n this.checked = this.input.checked;\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.sixBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.sixFocus.emit();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n const incr = ['ArrowUp', 'ArrowLeft'].includes(event.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().map((radio) => (radio.checked = false));\n radios[index].setFocus();\n radios[index].checked = true;\n\n event.preventDefault();\n }\n }\n\n handleMouseDown(event: MouseEvent) {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.input.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.input = 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":"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"}