npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.7c3e3d8 → 0.0.0-insider.a358260 - Mend

@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.a358260

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 (81) hide show

package/dist/cjs/six-checkbox.cjs.entry.js +57 -46
package/dist/cjs/six-checkbox.cjs.entry.js.map +1 -1
package/dist/cjs/six-input.cjs.entry.js +8 -10
package/dist/cjs/six-input.cjs.entry.js.map +1 -1
package/dist/cjs/six-radio.cjs.entry.js +56 -51
package/dist/cjs/six-radio.cjs.entry.js.map +1 -1
package/dist/cjs/six-range.cjs.entry.js +114 -75
package/dist/cjs/six-range.cjs.entry.js.map +1 -1
package/dist/cjs/six-select.cjs.entry.js +298 -239
package/dist/cjs/six-select.cjs.entry.js.map +1 -1
package/dist/cjs/six-textarea.cjs.entry.js +97 -74
package/dist/cjs/six-textarea.cjs.entry.js.map +1 -1
package/dist/collection/components/six-checkbox/six-checkbox.js +62 -49
package/dist/collection/components/six-checkbox/six-checkbox.js.map +1 -1
package/dist/collection/components/six-input/six-input.js +8 -10
package/dist/collection/components/six-input/six-input.js.map +1 -1
package/dist/collection/components/six-radio/six-radio.js +60 -53
package/dist/collection/components/six-radio/six-radio.js.map +1 -1
package/dist/collection/components/six-range/six-range.js +121 -76
package/dist/collection/components/six-range/six-range.js.map +1 -1
package/dist/collection/components/six-select/six-select.js +248 -240
package/dist/collection/components/six-select/six-select.js.map +1 -1
package/dist/collection/components/six-select/util.js +52 -0
package/dist/collection/components/six-select/util.js.map +1 -0
package/dist/collection/components/six-textarea/six-textarea.js +115 -105
package/dist/collection/components/six-textarea/six-textarea.js.map +1 -1
package/dist/components/six-checkbox.js +57 -46
package/dist/components/six-checkbox.js.map +1 -1
package/dist/components/six-input2.js +8 -10
package/dist/components/six-input2.js.map +1 -1
package/dist/components/six-radio.js +56 -51
package/dist/components/six-radio.js.map +1 -1
package/dist/components/six-range.js +114 -75
package/dist/components/six-range.js.map +1 -1
package/dist/components/six-select.js +299 -240
package/dist/components/six-select.js.map +1 -1
package/dist/components/six-textarea.js +97 -74
package/dist/components/six-textarea.js.map +1 -1
package/dist/components.json +30 -22
package/dist/esm/six-checkbox.entry.js +57 -46
package/dist/esm/six-checkbox.entry.js.map +1 -1
package/dist/esm/six-input.entry.js +8 -10
package/dist/esm/six-input.entry.js.map +1 -1
package/dist/esm/six-radio.entry.js +56 -51
package/dist/esm/six-radio.entry.js.map +1 -1
package/dist/esm/six-range.entry.js +114 -75
package/dist/esm/six-range.entry.js.map +1 -1
package/dist/esm/six-select.entry.js +299 -240
package/dist/esm/six-select.entry.js.map +1 -1
package/dist/esm/six-textarea.entry.js +97 -74
package/dist/esm/six-textarea.entry.js.map +1 -1
package/dist/types/components/six-checkbox/six-checkbox.d.ts +21 -17
package/dist/types/components/six-input/six-input.d.ts +1 -1
package/dist/types/components/six-radio/six-radio.d.ts +10 -11
package/dist/types/components/six-range/six-range.d.ts +24 -20
package/dist/types/components/six-select/six-select.d.ts +35 -40
package/dist/types/components/six-select/util.d.ts +7 -0
package/dist/types/components/six-textarea/six-textarea.d.ts +22 -31
package/dist/types/components.d.ts +9 -13
package/dist/ui-library/p-163f2bb0.entry.js +2 -0
package/dist/ui-library/p-163f2bb0.entry.js.map +1 -0
package/dist/ui-library/{p-e9e930d2.entry.js → p-394a2a12.entry.js} +2 -2
package/dist/ui-library/{p-e9e930d2.entry.js.map → p-394a2a12.entry.js.map} +1 -1
package/dist/ui-library/{p-7e0cc4ae.entry.js → p-3c635d0a.entry.js} +2 -2
package/dist/ui-library/p-3c635d0a.entry.js.map +1 -0
package/dist/ui-library/p-5a25d6fb.entry.js +2 -0
package/dist/ui-library/p-5a25d6fb.entry.js.map +1 -0
package/dist/ui-library/{p-90dc6af4.entry.js → p-97cc839c.entry.js} +2 -2
package/dist/ui-library/p-97cc839c.entry.js.map +1 -0
package/dist/ui-library/p-f604e067.entry.js +2 -0
package/dist/ui-library/p-f604e067.entry.js.map +1 -0
package/dist/ui-library/ui-library.esm.js +1 -1
package/package.json +1 -1
package/dist/ui-library/p-0d79b0c6.entry.js +0 -2
package/dist/ui-library/p-0d79b0c6.entry.js.map +0 -1
package/dist/ui-library/p-7e0cc4ae.entry.js.map +0 -1
package/dist/ui-library/p-835c3ff7.entry.js +0 -2
package/dist/ui-library/p-835c3ff7.entry.js.map +0 -1
package/dist/ui-library/p-90dc6af4.entry.js.map +0 -1
package/dist/ui-library/p-edc96efc.entry.js +0 -2
package/dist/ui-library/p-edc96efc.entry.js.map +0 -1

package/dist/cjs/six-textarea.cjs.entry.js.map CHANGED Viewed

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

package/dist/collection/components/six-checkbox/six-checkbox.js CHANGED Viewed

@@ -29,11 +29,31 @@ export class SixCheckbox {
     this.eventListeners = new EventListeners();
     /** default state whether the radio button should be checked or not when resetting */
     this.defaultState = false;
+    this.handleChange = () => {
+      if (this.nativeInput != null) {
+        this.checked = this.nativeInput.checked;
+        this.indeterminate = false;
+      }
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.sixBlur.emit();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.sixFocus.emit();
+    };
+    this.handleMouseDown = (event) => {
+      var _a;
+      // Prevent clicks on the label from briefly blurring the input
+      event.preventDefault();
+      (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     this.hasFocus = false;
     this.hasLabelSlot = false;
     this.hasErrorTextSlot = false;
-    this.name = undefined;
-    this.value = undefined;
+    this.name = '';
+    this.value = 'on';
     this.disabled = false;
     this.required = false;
     this.label = '';
@@ -44,27 +64,24 @@ export class SixCheckbox {
     this.errorOnBlur = false;
   }
   handleCheckedChange() {
-    if (!this.input) {
+    if (this.nativeInput == null) {
       return;
     }
-    this.input.checked = this.checked;
-    this.input.indeterminate = this.indeterminate;
-    this.invalid = !this.input.checkValidity();
+    this.nativeInput.checked = this.checked;
+    this.nativeInput.indeterminate = this.indeterminate;
+    this.invalid = !this.nativeInput.checkValidity();
     this.sixChange.emit();
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleInvalid = this.handleInvalid.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
   }
   disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   componentWillLoad() {
@@ -72,65 +89,59 @@ export class SixCheckbox {
     this.handleSlotChange();
   }
   componentDidLoad() {
-    this.input.indeterminate = this.indeterminate;
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.validationMessage;
+    const nativeInput = this.nativeInput;
+    if (nativeInput == null) {
+      return;
+    }
+    nativeInput.indeterminate = this.indeterminate;
+    this.eventListeners.add(nativeInput, 'invalid', (event) => {
+      this.invalid = true;
+      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
+        this.customErrorText = nativeInput.validationMessage;
       }
       event.preventDefault();
     });
   }
   /** Sets focus on the checkbox. */
   async setFocus(options) {
-    this.input.focus(options);
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus from the checkbox. */
   async removeFocus() {
-    this.input.blur();
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   async reportValidity() {
-    return this.input.reportValidity();
+    var _a;
+    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
-    return this.input.validity.valid;
+    if (this.nativeInput == null) {
+      return true;
+    }
+    return this.nativeInput.validity.valid;
   }
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   async setCustomValidity(message) {
     this.customErrorText = '';
     this.customValidation = message !== '';
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
+    if (this.nativeInput != null) {
+      this.nativeInput.setCustomValidity(message);
+      this.invalid = !this.nativeInput.checkValidity();
+    }
   }
   /** Resets the formcontrol */
   async reset() {
+    var _a;
     this.checked = this.defaultState;
     this.customErrorText = '';
     this.customValidation = false;
-    this.input.setCustomValidity('');
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
     this.invalid = false;
   }
-  handleChange() {
-    this.checked = this.input.checked;
-    this.indeterminate = false;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleMouseDown(event) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
   handleSlotChange() {
     this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
     this.hasLabelSlot = hasSlot(this.host, 'label');
@@ -139,14 +150,14 @@ export class SixCheckbox {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
   render() {
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("label", { part: "base", class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("label", { part: "base", class: {
         checkbox: true,
         'checkbox--checked': this.checked,
         'checkbox--disabled': this.disabled,
         'checkbox--focused': this.hasFocus,
         'checkbox--invalid': this.invalid,
         'checkbox--indeterminate': this.indeterminate,
-      }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid })), h("span", { part: "text", id: this.textId, class: "checkbox__text" }, h("slot", null)))));
+      }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { part: "text", id: this.textId, class: "checkbox__text" }, h("slot", null)))));
   }
   static get is() { return "six-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -177,7 +188,8 @@ export class SixCheckbox {
           "text": "The checkbox's name attribute."
         },
         "attribute": "name",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "value": {
         "type": "string",
@@ -191,10 +203,11 @@ export class SixCheckbox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The checkbox's value attribute."
+          "text": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`."
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'on'"
       },
       "disabled": {
         "type": "boolean",

package/dist/collection/components/six-checkbox/six-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-checkbox.js","sourceRoot":"","sources":["../../../src/components/six-checkbox/six-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"six-checkbox.js","sourceRoot":"","sources":["../../../src/components/six-checkbox/six-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n /\n\n@Component({\n tag: 'six-checkbox',\n styleUrl: 'six-checkbox.scss',\n shadow: true,\n})\nexport class SixCheckbox {\n private inputId = `checkbox-${++id}`;\n private labelId = `checkbox-label-${id}`;\n private textId = `checkbox-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private customErrorText = '';\n private customValidation = false;\n private 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 = '';\n\n /\n The value of the checkbox does not mean if it's checked or not, use the `checked`\n * property for that.\n \n The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n * it's only used when the checkbox participates in a native `<form>`.\n /\n @Prop() value = 'on';\n\n /* Set to true to disable the checkbox. /\n @Prop() disabled = false;\n\n /* Set to true to 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.nativeInput == null) {\n return;\n }\n this.nativeInput.checked = this.checked;\n this.nativeInput.indeterminate = this.indeterminate;\n this.invalid = !this.nativeInput.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.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 const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n\n nativeInput.indeterminate = this.indeterminate;\n this.eventListeners.add(nativeInput, 'invalid', (event) => {\n this.invalid = true;\n if (this.customValidation \|\| (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n this.customErrorText = nativeInput.validationMessage;\n }\n event.preventDefault();\n });\n }\n\n /* Sets focus on the checkbox. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the checkbox. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.nativeInput?.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity() {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.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 if (this.nativeInput != null) {\n this.nativeInput.setCustomValidity(message);\n this.invalid = !this.nativeInput.checkValidity();\n }\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.nativeInput?.setCustomValidity('');\n this.invalid = false;\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.indeterminate = false;\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n private handleSlotChange() {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n }\n\n private 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 != null ? 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.nativeInput = el)}\n id={this.inputId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"checkbox\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"]}

package/dist/collection/components/six-input/six-input.js CHANGED Viewed

@@ -155,10 +155,6 @@ export class SixInput {
     (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
-  getValue() {
-    var _a;
-    return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
-  }
   /** Sets focus on the input. */
   async setFocus(options) {
     var _a;
@@ -185,8 +181,7 @@ export class SixInput {
       return;
     }
     this.nativeInput.setRangeText(replacement, start, end, selectMode);
-    const value = this.getValue();
-    if (value !== this.nativeInput.value) {
+    if (this.getValue() !== this.nativeInput.value) {
       this.value = this.nativeInput.value;
       this.sixChange.emit();
       this.sixInput.emit();
@@ -234,17 +229,20 @@ export class SixInput {
   }
   /** Resets the formcontrol */
   async reset() {
+    var _a;
     this.value = this.defaultValue;
     this.customErrorText = '';
     this.customValidation = false;
-    if (this.nativeInput != null) {
-      this.nativeInput.setCustomValidity('');
-    }
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
     this.invalid = false;
   }
   displayError() {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
+  getValue() {
+    var _a;
+    return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
+  }
   render() {
     return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
         input: true,
@@ -262,7 +260,7 @@ export class SixInput {
       } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
         input__control: true,
         input__control__prefix: hasSlot(this.host, 'prefix'),
-      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.value, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
+      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
   }
   static get is() { return "six-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-input/six-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-input.js","sourceRoot":"","sources":["../../../src/components/six-input/six-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,MAAM,UAAU,GAAwE;EACtF,KAAK,EAAE,QAAQ;EACf,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAOH,MAAM,OAAO,QAAQ;;IACX,YAAO,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IAC1B,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;IACrC,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;IAEvC,oBAAe,GAAG,EAAE,CAAC;IACrB,qBAAgB,GAAG,KAAK,CAAC;IACzB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAqI9C,4EAA4E;IACpE,iBAAY,GAAG,EAAE,CAAC;IAiJlB,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;QAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;QAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;OACtB;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC/C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;QAC5B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;OAC1B;MACD,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEM,yBAAoB,GAAG,GAAG,EAAE;MAClC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACnD,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;MACvD,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;MACzD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC,CAAC;oBA9TkB,KAAK;2BACE,KAAK;4BACJ,KAAK;wBACT,KAAK;6BACA,KAAK;gBAGmE,MAAM;gBAG7C,QAAQ;gBAGtC,EAAE;iBAGc,EAAE;gBAGlB,KAAK;iBAGrB,EAAE;oBAGC,EAAE;qBAGD,EAAE;;oBAMc,KAAK;oBAGL,KAAK;;;;;;;oBAqBL,KAAK;0BAGhB,KAAK;uBAGM,KAAK;wBAGlB,KAAK;qBAGR,KAAK;sBAGJ,KAAK;mBAMwB,KAAK;qBAGnC,KAAK;0BAGA,KAAK;;gBAMf,KAAK;uBAGE,KAAK;;EAK3B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC7B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;QACzC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;OACrC;MACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;KAClD;EACH,CAAC;EAoBD,iBAAiB;;IACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAC9E,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpC,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,IAAI,WAAW,IAAI,IAAI,EAAE;MACvB,OAAO;KACR;IACD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;MACxD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,SAAS,KAAK,EAAE,IAAI,IAAI,CAAC,eAAe,KAAK,EAAE,CAAC,EAAE;QAC7G,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC,iBAAiB,CAAC;OACtD;MACD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;EAClC,CAAC;EAEO,QAAQ;;IACd,OAAO,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EACvC,CAAC;EAED,+BAA+B;EAE/B,KAAK,CAAC,QAAQ,CAAC,OAAsB;;IACnC,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;EACnC,CAAC;EAED,oCAAoC;EAEpC,KAAK,CAAC,WAAW;;IACf,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;EAC3B,CAAC;EAED,yCAAyC;EAEzC,KAAK,CAAC,MAAM;;IACV,OAAO,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,EAAE,CAAC;EACpC,CAAC;EAED,wEAAwE;EAExE,KAAK,CAAC,iBAAiB,CACrB,cAAsB,EACtB,YAAoB,EACpB,qBAAsD,MAAM;;IAE5D,OAAO,MAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,CAAC,cAAc,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAAC;EAC/F,CAAC;EAED,kDAAkD;EAElD,KAAK,CAAC,YAAY,CAChB,WAAmB,EACnB,KAAa,EACb,GAAW,EACX,aAAsD,UAAU;IAEhE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,OAAO;KACR;IAED,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;MACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;EACH,CAAC;EAED,gGAAgG;EAEhG,KAAK,CAAC,cAAc;;IAClB,OAAO,MAAA,IAAI,CAAC,WAAW,0CAAE,cAAc,EAAE,CAAC;EAC5C,CAAC;EAED,2BAA2B;EAE3B,KAAK,CAAC,aAAa;IACjB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,OAAO,IAAI,CAAC;KACb;IACD,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;EACzC,CAAC;EAED,yGAAyG;EAEzG,KAAK,CAAC,iBAAiB,CAAC,OAAe;IACrC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC1B,IAAI,CAAC,gBAAgB,GAAG,OAAO,KAAK,EAAE,CAAC;IACvC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;MAC5C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;KAClD;EACH,CAAC;EAED,0CAA0C;EAE1C,KAAK,CAAC,WAAW;;IACf,OAAO,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,0CAAE,QAAQ,CAAC;EACrC,CAAC;EAED,0CAA0C;EAE1C,KAAK,CAAC,OAAO;IACX,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,OAAO,IAAI,CAAC;KACb;IACD,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;EACzC,CAAC;EAED,mDAAmD;EAEnD,KAAK,CAAC,oBAAoB;IACxB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,OAAO,EAAE,CAAC;KACX;IACD,OAAO,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC;EAC5C,CAAC;EAED,6BAA6B;EAE7B,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC1B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAC9B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;MAC5B,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;KACxC;IACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EA+CO,YAAY;IAClB,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC/D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC/E,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;MAEjC,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;UACL,KAAK,EAAE,IAAI;UAEX,QAAQ;UACR,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;UACrC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;UACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;UAErC,SAAS;UACT,aAAa,EAAE,IAAI,CAAC,IAAI;UACxB,aAAa,EAAE,IAAI,CAAC,IAAI;UACxB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;UAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;UAC/B,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,CAAC;UAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO;SAC/B;QAED,YAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;UACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB;QAEP,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE;YACL,cAAc,EAAE,IAAI;YACpB,sBAAsB,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;WACrD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7E,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,qBACR,IAAI,CAAC,OAAO,sBACX,IAAI,CAAC,UAAU,kBACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,iBACX,eAAe,GAC3B;QAED,IAAI,CAAC,SAAS,IAAI,CACjB,cACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAC,IAAI,iBACD,oBAAoB;UAEhC,YAAM,IAAI,EAAC,YAAY;YACrB,gBAAU,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAkB,CAClD,CACA,CACV;QAEA,IAAI,CAAC,cAAc,IAAI,CACtB,cACE,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,QAAQ,EAAC,IAAI,IAEZ,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACxB,YAAM,IAAI,EAAC,oBAAoB;UAC7B,gBAAU,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,qBAA2B,CAC3D,CACR,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,oBAAoB;UAC7B,gBAAU,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAuB,CACvD,CACR,CACM,CACV;QAED,YAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;UACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACH,CACM,CACf,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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\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 private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private customErrorText = '';\n private customValidation = false;\n private 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 = false;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The input's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck = false;\n\n /\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 this.value = this.getValue();\n if (this.nativeInput != null) {\n if (this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the clear button is activated. /\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* defaultValue which the input will be reverted to when executing reset /\n private defaultValue = '';\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.getValue();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.eventListeners.add(nativeInput, 'invalid', (event) => {\n this.invalid = true;\n if (this.customValidation \|\| (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n this.customErrorText = nativeInput.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 private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. /\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n const value = this.getValue();\n if (value !== this.nativeInput.value) {\n this.value = this.nativeInput.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.nativeInput?.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.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 if (this.nativeInput != null) {\n this.nativeInput.setCustomValidity(message);\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Returns the native input's validity /\n @Method()\n async getValidity(): Promise<ValidityState \| undefined> {\n return this?.nativeInput?.validity;\n }\n\n /* Returns the native input's validity /\n @Method()\n async isValid(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.validity.valid;\n }\n\n /* Returns the native input's validationMessage /\n @Method()\n async getValidationMessage() {\n if (this.nativeInput == null) {\n return '';\n }\n return this.nativeInput.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 if (this.nativeInput != null) {\n this.nativeInput.setCustomValidity('');\n }\n this.invalid = false;\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private 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 private 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 != null ? 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.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.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 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"]}
1	+ {"version":3,"file":"six-input.js","sourceRoot":"","sources":["../../../src/components/six-input/six-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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\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 private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private customErrorText = '';\n private customValidation = false;\n private 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 = false;\n\n /* The input's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The input's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The input's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The input's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* Enables spell checking on the input. /\n @Prop() spellcheck = false;\n\n /\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 this.value = this.getValue();\n if (this.nativeInput != null) {\n if (this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the clear button is activated. /\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* defaultValue which the input will be reverted to when executing reset /\n private defaultValue = '';\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.getValue();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.eventListeners.add(nativeInput, 'invalid', (event) => {\n this.invalid = true;\n if (this.customValidation \|\| (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n this.customErrorText = nativeInput.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.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. /\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.nativeInput?.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.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 if (this.nativeInput != null) {\n this.nativeInput.setCustomValidity(message);\n this.invalid = !this.nativeInput.checkValidity();\n }\n }\n\n /* Returns the native input's validity /\n @Method()\n async getValidity(): Promise<ValidityState \| undefined> {\n return this?.nativeInput?.validity;\n }\n\n /* Returns the native input's validity /\n @Method()\n async isValid(): Promise<boolean> {\n if (this.nativeInput == null) {\n return true;\n }\n return this.nativeInput.validity.valid;\n }\n\n /* Returns the native input's validationMessage /\n @Method()\n async getValidationMessage() {\n if (this.nativeInput == null) {\n return '';\n }\n return this.nativeInput.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.nativeInput?.setCustomValidity('');\n this.invalid = false;\n }\n\n private handleChange = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private 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 private displayError() {\n return this.invalid && (!this.errorOnBlur \|\| !this.hasFocus);\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.customErrorText != null ? 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.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.pattern}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-invalid={this.invalid ? 'true' : 'false'}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n 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"]}