@govtechsg/sgds-web-component 3.10.0-rc.4 → 3.10.0
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.
- package/base/select-element.d.ts +0 -1
- package/base/select-element.js +0 -1
- package/base/select-element.js.map +1 -1
- package/components/Checkbox/index.umd.min.js +3 -3
- package/components/Checkbox/index.umd.min.js.map +1 -1
- package/components/Checkbox/sgds-checkbox-group.d.ts +0 -1
- package/components/Checkbox/sgds-checkbox-group.js +0 -1
- package/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/components/Checkbox/sgds-checkbox.d.ts +0 -1
- package/components/Checkbox/sgds-checkbox.js +0 -1
- package/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/components/ComboBox/index.umd.min.js +225 -225
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +3 -3
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Datepicker/sgds-datepicker.d.ts +0 -1
- package/components/Datepicker/sgds-datepicker.js +0 -1
- package/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/components/FileUpload/index.umd.min.js +2 -2
- package/components/FileUpload/index.umd.min.js.map +1 -1
- package/components/FileUpload/sgds-file-upload.d.ts +0 -1
- package/components/FileUpload/sgds-file-upload.js +0 -1
- package/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/components/Input/index.umd.min.js +2 -2
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Input/sgds-input.d.ts +0 -1
- package/components/Input/sgds-input.js +0 -1
- package/components/Input/sgds-input.js.map +1 -1
- package/components/QuantityToggle/index.umd.min.js +3 -3
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/QuantityToggle/sgds-quantity-toggle.d.ts +0 -1
- package/components/QuantityToggle/sgds-quantity-toggle.js +0 -1
- package/components/QuantityToggle/sgds-quantity-toggle.js.map +1 -1
- package/components/Radio/index.umd.min.js +6 -6
- package/components/Radio/index.umd.min.js.map +1 -1
- package/components/Radio/sgds-radio-group.d.ts +0 -1
- package/components/Radio/sgds-radio-group.js +0 -1
- package/components/Radio/sgds-radio-group.js.map +1 -1
- package/components/Select/index.umd.min.js +2 -2
- package/components/Select/index.umd.min.js.map +1 -1
- package/components/SystemBanner/index.umd.min.js +2 -2
- package/components/SystemBanner/index.umd.min.js.map +1 -1
- package/components/SystemBanner/sgds-system-banner.d.ts +2 -2
- package/components/SystemBanner/sgds-system-banner.js +5 -5
- package/components/SystemBanner/sgds-system-banner.js.map +1 -1
- package/components/Table/index.umd.min.js +62 -17
- package/components/Table/index.umd.min.js.map +1 -1
- package/components/Table/sgds-table-cell.js +1 -1
- package/components/Table/sgds-table-cell.js.map +1 -1
- package/components/Table/sgds-table-head.d.ts +2 -5
- package/components/Table/sgds-table-head.js +24 -15
- package/components/Table/sgds-table-head.js.map +1 -1
- package/components/Table/sgds-table.d.ts +41 -6
- package/components/Table/sgds-table.js +57 -15
- package/components/Table/sgds-table.js.map +1 -1
- package/components/Table/table-cell.js +1 -1
- package/components/Table/table-context.d.ts +3 -0
- package/components/Table/table-context.js +6 -0
- package/components/Table/table-context.js.map +1 -0
- package/components/Table/table-head.js +1 -1
- package/components/Table/table.js +1 -1
- package/components/Textarea/index.umd.min.js +6 -6
- package/components/Textarea/index.umd.min.js.map +1 -1
- package/components/Textarea/sgds-textarea.d.ts +0 -1
- package/components/Textarea/sgds-textarea.js +0 -1
- package/components/Textarea/sgds-textarea.js.map +1 -1
- package/components/index.umd.min.js +31 -27
- package/components/index.umd.min.js.map +1 -1
- package/index.umd.min.js +616 -612
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/select-element.cjs.js +0 -1
- package/react/base/select-element.cjs.js.map +1 -1
- package/react/base/select-element.js +0 -1
- package/react/base/select-element.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js +0 -1
- package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox-group.js +0 -1
- package/react/components/Checkbox/sgds-checkbox-group.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js +0 -1
- package/react/components/Checkbox/sgds-checkbox.cjs.js.map +1 -1
- package/react/components/Checkbox/sgds-checkbox.js +0 -1
- package/react/components/Checkbox/sgds-checkbox.js.map +1 -1
- package/react/components/Datepicker/sgds-datepicker.cjs.js +0 -1
- package/react/components/Datepicker/sgds-datepicker.cjs.js.map +1 -1
- package/react/components/Datepicker/sgds-datepicker.js +0 -1
- package/react/components/Datepicker/sgds-datepicker.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js +0 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.js +0 -1
- package/react/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/react/components/Input/sgds-input.cjs.js +0 -1
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js +0 -1
- package/react/components/Input/sgds-input.js.map +1 -1
- package/react/components/QuantityToggle/sgds-quantity-toggle.cjs.js +0 -1
- package/react/components/QuantityToggle/sgds-quantity-toggle.cjs.js.map +1 -1
- package/react/components/QuantityToggle/sgds-quantity-toggle.js +0 -1
- package/react/components/QuantityToggle/sgds-quantity-toggle.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js +0 -1
- package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.js +0 -1
- package/react/components/Radio/sgds-radio-group.js.map +1 -1
- package/react/components/SystemBanner/sgds-system-banner.cjs.js +5 -5
- package/react/components/SystemBanner/sgds-system-banner.cjs.js.map +1 -1
- package/react/components/SystemBanner/sgds-system-banner.js +5 -5
- package/react/components/SystemBanner/sgds-system-banner.js.map +1 -1
- package/react/components/Table/sgds-table-cell.cjs.js +1 -1
- package/react/components/Table/sgds-table-cell.cjs.js.map +1 -1
- package/react/components/Table/sgds-table-cell.js +1 -1
- package/react/components/Table/sgds-table-cell.js.map +1 -1
- package/react/components/Table/sgds-table-head.cjs.js +24 -15
- package/react/components/Table/sgds-table-head.cjs.js.map +1 -1
- package/react/components/Table/sgds-table-head.js +24 -15
- package/react/components/Table/sgds-table-head.js.map +1 -1
- package/react/components/Table/sgds-table.cjs.js +56 -14
- package/react/components/Table/sgds-table.cjs.js.map +1 -1
- package/react/components/Table/sgds-table.js +57 -15
- package/react/components/Table/sgds-table.js.map +1 -1
- package/react/components/Table/table-cell.cjs.js +1 -1
- package/react/components/Table/table-cell.js +1 -1
- package/react/components/Table/table-context.cjs.js +11 -0
- package/react/components/Table/table-context.cjs.js.map +1 -0
- package/react/components/Table/table-context.js +7 -0
- package/react/components/Table/table-context.js.map +1 -0
- package/react/components/Table/table-head.cjs.js +1 -1
- package/react/components/Table/table-head.js +1 -1
- package/react/components/Table/table.cjs.js +1 -1
- package/react/components/Table/table.js +1 -1
- package/react/components/Textarea/sgds-textarea.cjs.js +0 -1
- package/react/components/Textarea/sgds-textarea.cjs.js.map +1 -1
- package/react/components/Textarea/sgds-textarea.js +0 -1
- package/react/components/Textarea/sgds-textarea.js.map +1 -1
- package/react/utils/inputValidationController.cjs.js +2 -2
- package/react/utils/inputValidationController.cjs.js.map +1 -1
- package/react/utils/inputValidationController.js +2 -2
- package/react/utils/inputValidationController.js.map +1 -1
- package/react/utils/validatorMixin.cjs.js +10 -13
- package/react/utils/validatorMixin.cjs.js.map +1 -1
- package/react/utils/validatorMixin.js +10 -13
- package/react/utils/validatorMixin.js.map +1 -1
- package/utils/inputValidationController.d.ts +1 -1
- package/utils/inputValidationController.js +2 -2
- package/utils/inputValidationController.js.map +1 -1
- package/utils/validatorMixin.js +10 -13
- package/utils/validatorMixin.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-input.cjs.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n static formAssociated = true;\n /** @internal */\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"time\"\n | \"url\"\n | \"datetime-local\" = \"text\";\n\n /** The prefix of the input */\n @property({ type: String }) prefix: string;\n\n /** The suffix of the input */\n @property({ type: String }) suffix: string;\n\n /** Sets the minimum length of the input */\n @property({ type: Number, reflect: true }) minlength: number;\n\n /** Sets the maximum length of the input */\n @property({ type: Number, reflect: true }) maxlength: number;\n\n /** The input's minimum value. Only applies number input types. */\n @property() min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property() max: number;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n /** A pattern to validate input against. */\n @property({ type: String }) pattern: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Makes the input readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n * implied, allowing any numeric value. Only applies to number input types.\n */\n @property() step: number | \"any\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as valid. */\n @property({ type: Boolean, reflect: true }) valid = false;\n\n /** Marks the component as loading. */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /**The input's value attribute. */\n @property({ reflect: true }) value = \"\";\n\n @state() protected _isTouched = false;\n\n @state() private _showPassword = false;\n\n /** Sets focus on the input. */\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n /** Sets blur on the input. */\n public blur() {\n this.input.blur();\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected _handleBlur() {\n const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsBlur.defaultPrevented) return;\n\n this.setInvalid(!this._mixinCheckValidity());\n this._isTouched = true;\n }\n private _handleClick() {\n this.focus();\n }\n\n protected _handleChange(e: Event) {\n this.value = this.input.value;\n const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsChange.defaultPrevented) return;\n\n super._mixinHandleChange(e);\n }\n protected _handleInputChange(e: Event) {\n this.value = this.input.value;\n const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /** @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.setInvalid(!this._mixinCheckValidity());\n }\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n protected _renderInput() {\n const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n return html`\n <div\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n <slot name=\"icon\"></slot>\n ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n <input\n class=\"form-control\"\n type=${this._inputType()}\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n pattern=${ifDefined(this.pattern)}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${live(this.value)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step as number)}\n @input=${(e: Event) => this._handleInputChange(e)}\n @change=${(e: Event) => this._handleChange(e)}\n @invalid=${() => this.setInvalid(true)}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n <slot name=\"trailing-icon\">\n ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n </slot>\n </div>\n `;\n }\n protected _renderPasswordToggle() {\n return html`<sgds-icon\n tabIndex=\"0\"\n role=\"button\"\n name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n @click=${() => (this._showPassword = !this._showPassword)}\n ></sgds-icon>`;\n }\n protected _inputType() {\n if (this.type === \"password\" && this._showPassword) {\n return \"text\";\n }\n return this.type;\n }\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n render() {\n return html`\n <div\n class=\"form-control-container ${classMap({\n disabled: this.disabled\n })}\"\n >\n ${this._renderLabel()}\n <div class=\"form-control-row\">\n ${this._renderInput()}\n <slot name=\"action\"></slot>\n </div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","nothing","ifDefined","live","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","__decorate","property","defaultValue","state","watch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-input.cjs.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n /** @internal */\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"time\"\n | \"url\"\n | \"datetime-local\" = \"text\";\n\n /** The prefix of the input */\n @property({ type: String }) prefix: string;\n\n /** The suffix of the input */\n @property({ type: String }) suffix: string;\n\n /** Sets the minimum length of the input */\n @property({ type: Number, reflect: true }) minlength: number;\n\n /** Sets the maximum length of the input */\n @property({ type: Number, reflect: true }) maxlength: number;\n\n /** The input's minimum value. Only applies number input types. */\n @property() min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property() max: number;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n /** A pattern to validate input against. */\n @property({ type: String }) pattern: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Makes the input readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n * implied, allowing any numeric value. Only applies to number input types.\n */\n @property() step: number | \"any\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as valid. */\n @property({ type: Boolean, reflect: true }) valid = false;\n\n /** Marks the component as loading. */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /**The input's value attribute. */\n @property({ reflect: true }) value = \"\";\n\n @state() protected _isTouched = false;\n\n @state() private _showPassword = false;\n\n /** Sets focus on the input. */\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n /** Sets blur on the input. */\n public blur() {\n this.input.blur();\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected _handleBlur() {\n const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsBlur.defaultPrevented) return;\n\n this.setInvalid(!this._mixinCheckValidity());\n this._isTouched = true;\n }\n private _handleClick() {\n this.focus();\n }\n\n protected _handleChange(e: Event) {\n this.value = this.input.value;\n const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsChange.defaultPrevented) return;\n\n super._mixinHandleChange(e);\n }\n protected _handleInputChange(e: Event) {\n this.value = this.input.value;\n const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /** @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.setInvalid(!this._mixinCheckValidity());\n }\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n protected _renderInput() {\n const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n return html`\n <div\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n <slot name=\"icon\"></slot>\n ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n <input\n class=\"form-control\"\n type=${this._inputType()}\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n pattern=${ifDefined(this.pattern)}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${live(this.value)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step as number)}\n @input=${(e: Event) => this._handleInputChange(e)}\n @change=${(e: Event) => this._handleChange(e)}\n @invalid=${() => this.setInvalid(true)}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n <slot name=\"trailing-icon\">\n ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n </slot>\n </div>\n `;\n }\n protected _renderPasswordToggle() {\n return html`<sgds-icon\n tabIndex=\"0\"\n role=\"button\"\n name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n @click=${() => (this._showPassword = !this._showPassword)}\n ></sgds-icon>`;\n }\n protected _inputType() {\n if (this.type === \"password\" && this._showPassword) {\n return \"text\";\n }\n return this.type;\n }\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n render() {\n return html`\n <div\n class=\"form-control-container ${classMap({\n disabled: this.disabled\n })}\"\n >\n ${this._renderLabel()}\n <div class=\"form-control-row\">\n ${this._renderInput()}\n <slot name=\"action\"></slot>\n </div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","nothing","ifDefined","live","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","__decorate","property","defaultValue","state","watch"],"mappings":"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"}
|
|
@@ -249,7 +249,6 @@ class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) {
|
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
251
|
SgdsInput.styles = [...FormControlElement.styles, css_248z, css_248z$1, css_248z$2];
|
|
252
|
-
SgdsInput.formAssociated = true;
|
|
253
252
|
/** @internal */
|
|
254
253
|
SgdsInput.dependencies = {
|
|
255
254
|
"sgds-spinner": SgdsSpinner,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-input.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n static formAssociated = true;\n /** @internal */\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"time\"\n | \"url\"\n | \"datetime-local\" = \"text\";\n\n /** The prefix of the input */\n @property({ type: String }) prefix: string;\n\n /** The suffix of the input */\n @property({ type: String }) suffix: string;\n\n /** Sets the minimum length of the input */\n @property({ type: Number, reflect: true }) minlength: number;\n\n /** Sets the maximum length of the input */\n @property({ type: Number, reflect: true }) maxlength: number;\n\n /** The input's minimum value. Only applies number input types. */\n @property() min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property() max: number;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n /** A pattern to validate input against. */\n @property({ type: String }) pattern: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Makes the input readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n * implied, allowing any numeric value. Only applies to number input types.\n */\n @property() step: number | \"any\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as valid. */\n @property({ type: Boolean, reflect: true }) valid = false;\n\n /** Marks the component as loading. */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /**The input's value attribute. */\n @property({ reflect: true }) value = \"\";\n\n @state() protected _isTouched = false;\n\n @state() private _showPassword = false;\n\n /** Sets focus on the input. */\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n /** Sets blur on the input. */\n public blur() {\n this.input.blur();\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected _handleBlur() {\n const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsBlur.defaultPrevented) return;\n\n this.setInvalid(!this._mixinCheckValidity());\n this._isTouched = true;\n }\n private _handleClick() {\n this.focus();\n }\n\n protected _handleChange(e: Event) {\n this.value = this.input.value;\n const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsChange.defaultPrevented) return;\n\n super._mixinHandleChange(e);\n }\n protected _handleInputChange(e: Event) {\n this.value = this.input.value;\n const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /** @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.setInvalid(!this._mixinCheckValidity());\n }\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n protected _renderInput() {\n const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n return html`\n <div\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n <slot name=\"icon\"></slot>\n ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n <input\n class=\"form-control\"\n type=${this._inputType()}\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n pattern=${ifDefined(this.pattern)}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${live(this.value)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step as number)}\n @input=${(e: Event) => this._handleInputChange(e)}\n @change=${(e: Event) => this._handleChange(e)}\n @invalid=${() => this.setInvalid(true)}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n <slot name=\"trailing-icon\">\n ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n </slot>\n </div>\n `;\n }\n protected _renderPasswordToggle() {\n return html`<sgds-icon\n tabIndex=\"0\"\n role=\"button\"\n name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n @click=${() => (this._showPassword = !this._showPassword)}\n ></sgds-icon>`;\n }\n protected _inputType() {\n if (this.type === \"password\" && this._showPassword) {\n return \"text\";\n }\n return this.type;\n }\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n render() {\n return html`\n <div\n class=\"form-control-container ${classMap({\n disabled: this.disabled\n })}\"\n >\n ${this._renderLabel()}\n <div class=\"form-control-row\">\n ${this._renderInput()}\n <slot name=\"action\"></slot>\n </div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsInput;\n"],"names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;AAaG;MACU,SAAU,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAAzE,IAAA,WAAA,GAAA;;QAS+B,IAAI,CAAA,IAAA,GASV,MAAM,CAAC;;QAqBa,IAAW,CAAA,WAAA,GAAG,aAAa,CAAC;;QAM3B,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAGlB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAgB7D,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAG0B,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAGd,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAEjB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGlC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAErB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QAErB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAyMxC;;AAtMQ,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;IAEM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;AAED;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AACD;;AAEG;AACI,IAAA,WAAW,CAAC,KAA0B,EAAE,OAAgB,EAAE,MAAoB,EAAA;QACnF,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;KACvD;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;IAES,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzB;IAES,WAAW,GAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;QAClD,IAAI,QAAQ,CAAC,gBAAgB;YAAE,OAAO;QAEtC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAC7C,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;IACO,YAAY,GAAA;QAClB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;AAES,IAAA,aAAa,CAAC,CAAQ,EAAA;QAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAElE,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;QAClD,IAAI,UAAU,CAAC,gBAAgB;YAAE,OAAO;AAExC,QAAA,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;KAC7B;AACS,IAAA,kBAAkB,CAAC,CAAQ,EAAA;QACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAEhE,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;QAClD,IAAI,SAAS,CAAC,gBAAgB;YAAE,OAAO;AACvC,QAAA,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;KAClC;;IAGD,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,8BAA8B,EAAE;YAAE,OAAO;AAClD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;SAC9C;KACF;IAED,qBAAqB,GAAA;;AAEnB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxB;IAES,YAAY,GAAA;AACpB,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,OAAO,CAAC;AACtF,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEqB,kCAAA,EAAA,QAAQ,CAAC;YACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,YAAY,EAAE,IAAI,CAAC,OAAO,IAAI,iBAAiB;SAChD,CAAC,CAAA;AACO,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;;AAGxB,QAAA,EAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAqC,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAA,OAAA,CAAS,GAAG,OAAO,CAAA;;;iBAG9E,IAAI,CAAC,UAAU,EAAE,CAAA;AACnB,aAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACb,eAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACb,sBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;yBAC1B,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACpC,kBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACpB,qBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACf,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACb,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AAChB,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACb,oBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACzB,oBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC/B,cAAA,EAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,cAAA,EAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClB,eAAA,EAAA,SAAS,CAAC,IAAI,CAAC,IAAc,CAAC,CAAA;mBAC5B,CAAC,CAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;oBACvC,CAAC,CAAQ,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;AAClC,mBAAA,EAAA,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;AAC7B,iBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAClB,gBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;6BACL,SAAS,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,GAAG,CAAG,EAAA,IAAI,CAAC,UAAU,CAAA,QAAA,CAAU,GAAG,SAAS,CAAC,CAAA;AACtF,2BAAA,EAAA,IAAI,CAAC,QAAQ,CAAI,CAAA,EAAA,IAAI,CAAC,UAAU,CAAQ,KAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;AACzF,cAAE,CAAA,EAAG,IAAI,CAAC,UAAU,CAAU,QAAA,CAAA;AAC9B,cAAE,EAAE,CAAA;;AAEN,QAAA,EAAA,IAAI,CAAC,IAAI,KAAK,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,GAAG,OAAO,CAAA;AACjE,QAAA,EAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAqC,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAA,OAAA,CAAS,GAAG,OAAO,CAAA;;YAEnF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA,CAAyC,uCAAA,CAAA,GAAG,OAAO,CAAA;YACtE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAAqE,mEAAA,CAAA,GAAG,OAAO,CAAA;;;KAGvG,CAAC;KACH;IACS,qBAAqB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAA,CAAA;;;aAGF,IAAI,CAAC,aAAa,GAAG,gBAAgB,GAAG,UAAU,CAAA;eAChD,OAAO,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;kBAC7C,CAAC;KAChB;IACS,UAAU,GAAA;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,aAAa,EAAE;AAClD,YAAA,OAAO,MAAM,CAAC;SACf;QACD,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IACS,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;AAEpF,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,gBAAgB;cACnC,IAAI,CAAA,CAAA;;AAES,mBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACtB,YAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;AAEzE,cAAA,CAAA;cACP,IAAI,CAAA,CAAA,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,CAAC;KACrC;IACS,YAAY,GAAA;QACpB,MAAM,aAAa,GAAG,IAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACV,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACC,SAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAEhB,CAAC;AACF,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;KACpC;IACS,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAa,UAAA,EAAA,IAAI,CAAC,UAAU,CAA2B,wBAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEyB,sCAAA,EAAA,QAAQ,CAAC;YACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;UAEA,IAAI,CAAC,YAAY,EAAE,CAAA;;YAEjB,IAAI,CAAC,YAAY,EAAE,CAAA;;;UAGrB,IAAI,CAAC,eAAe,EAAE,CAAA;;KAE3B,CAAC;KACH;;AAzRM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAqB,EAAEC,UAAqB,EAAEC,UAAU,CAAC,CAAC;AAClG,SAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAC7B;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,cAAc,EAAE,WAAW;AAC3B,IAAA,WAAW,EAAE,QAAQ;AACtB,CAHkB,CAGjB;AAE2B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AASE,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGF,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAgB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAgB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGA,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjD,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAa,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAa,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG3C,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGA,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMjD,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGU,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAwC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAyB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInE,UAAA,CAAA;AADC,IAAA,YAAY,EAAE;AACG,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG0B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGd,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAoB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAErB,UAAA,CAAA;AAAlB,IAAA,KAAK,EAAE;AAA8B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAErB,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA+B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA+EvC,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAMnD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAED,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAIjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"sgds-input.js","sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n /** @internal */\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"time\"\n | \"url\"\n | \"datetime-local\" = \"text\";\n\n /** The prefix of the input */\n @property({ type: String }) prefix: string;\n\n /** The suffix of the input */\n @property({ type: String }) suffix: string;\n\n /** Sets the minimum length of the input */\n @property({ type: Number, reflect: true }) minlength: number;\n\n /** Sets the maximum length of the input */\n @property({ type: Number, reflect: true }) maxlength: number;\n\n /** The input's minimum value. Only applies number input types. */\n @property() min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property() max: number;\n\n /** The input's placeholder text. */\n @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n /** A pattern to validate input against. */\n @property({ type: String }) pattern: string;\n\n /** Autofocus the input */\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n /** Makes the input readonly. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n * implied, allowing any numeric value. Only applies to number input types.\n */\n @property() step: number | \"any\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = \"\";\n\n /** Marks the component as valid. */\n @property({ type: Boolean, reflect: true }) valid = false;\n\n /** Marks the component as loading. */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Makes the input a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Boolean, reflect: true }) noValidate = false;\n\n /**The input's value attribute. */\n @property({ reflect: true }) value = \"\";\n\n @state() protected _isTouched = false;\n\n @state() private _showPassword = false;\n\n /** Sets focus on the input. */\n public focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n /** Sets blur on the input. */\n public blur() {\n this.input.blur();\n }\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n return this._mixinSetValidity(flags, message, anchor);\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected _handleBlur() {\n const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsBlur.defaultPrevented) return;\n\n this.setInvalid(!this._mixinCheckValidity());\n this._isTouched = true;\n }\n private _handleClick() {\n this.focus();\n }\n\n protected _handleChange(e: Event) {\n this.value = this.input.value;\n const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsChange.defaultPrevented) return;\n\n super._mixinHandleChange(e);\n }\n protected _handleInputChange(e: Event) {\n this.value = this.input.value;\n const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /** @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._mixinShouldSkipSgdsValidation()) return;\n if (this._isTouched) {\n this.setInvalid(!this._mixinCheckValidity());\n }\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n\n protected _renderInput() {\n const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n return html`\n <div\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n <slot name=\"icon\"></slot>\n ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n <input\n class=\"form-control\"\n type=${this._inputType()}\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n pattern=${ifDefined(this.pattern)}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${live(this.value)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step as number)}\n @input=${(e: Event) => this._handleInputChange(e)}\n @change=${(e: Event) => this._handleChange(e)}\n @invalid=${() => this.setInvalid(true)}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n <slot name=\"trailing-icon\">\n ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n </slot>\n </div>\n `;\n }\n protected _renderPasswordToggle() {\n return html`<sgds-icon\n tabIndex=\"0\"\n role=\"button\"\n name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n @click=${() => (this._showPassword = !this._showPassword)}\n ></sgds-icon>`;\n }\n protected _inputType() {\n if (this.type === \"password\" && this._showPassword) {\n return \"text\";\n }\n return this.type;\n }\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n render() {\n return html`\n <div\n class=\"form-control-container ${classMap({\n disabled: this.disabled\n })}\"\n >\n ${this._renderLabel()}\n <div class=\"form-control-row\">\n ${this._renderInput()}\n <slot name=\"action\"></slot>\n </div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsInput;\n"],"names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-quantity-toggle.cjs.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, queryAsync } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport formControlStyle from \"../../styles/form-text-control.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue, best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [\n ...FormControlElement.styles,\n formPlaceholderStyles,\n svgStyles,\n formControlStyle,\n quantityToggleStyle\n ];\n static formAssociated = true;\n\n /** @internal */\n static dependencies = {\n \"sgds-input\": SgdsInput,\n \"sgds-icon-button\": SgdsIconButton\n };\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n /** The input's value. Set to 0 by default */\n @property({ type: Number, reflect: true }) value = 0;\n\n /** Controls the incremental / decremental value of the input */\n @property({ type: Number }) step = 1;\n\n /** The input's minimum value. Only applies number input types. */\n @property({ type: Number }) min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property({ type: Number }) max: number;\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n /** Sets the quantity toggle as readonly */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = 0;\n\n @queryAsync(\"sgds-input\") private _sgdsInput: Promise<SgdsInput>;\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n private async _handleChange() {\n const sgdsInput = await this._sgdsInput;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n this.invalid = !this._mixinReportValidity();\n }\n private async _handleInputChange() {\n const sgdsInput = await this._sgdsInput;\n this.invalid = false;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n }\n\n private async _mixinResetFormControl() {\n const sgdsInput = await this._sgdsInput;\n this.value = this.defaultValue;\n sgdsInput.input.value = this.value.toString();\n this._mixinResetValidity(sgdsInput.input);\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const allowedKeys = [\n \"Backspace\",\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n ...Array.from(Array(10).keys()).map(key => key.toString()),\n \"Tab\"\n ];\n\n // Allow keydown event only if the pressed key is in the allowedKeys array\n if (!allowedKeys.includes(event.key)) {\n event.preventDefault();\n }\n }\n\n private _handleInvalid() {\n this.invalid = true;\n }\n private _handleValid() {\n this.invalid = false;\n }\n\n /** Simulates a click on the plus button */\n public plus() {\n this.plusBtn.click();\n }\n\n /** Simulates a click on the minus button */\n public minus() {\n this.minusBtn.click();\n }\n\n private async _onPlus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n this._validateOnClick(sgdsInput.input);\n }\n private async _onMinus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n if (this.value < this.step) {\n this.value = 0;\n } else {\n this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());\n }\n\n this._validateOnClick(sgdsInput.input);\n }\n\n /**\n * Validates the input on button clicks of the toggle.\n * Input is validated every time the button is click to update the invalid state\n * to indiciate the validity of quantity toggle\n * @param input native HTMLInputElement\n */\n private async _validateOnClick(input: HTMLInputElement) {\n const sgdsInput = await this._sgdsInput;\n await sgdsInput.updateComplete;\n this._mixinSetFormValue();\n this._mixinValidate(input);\n this.invalid = !this._mixinReportValidity();\n }\n\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n disabled: this.disabled\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n render() {\n return html`\n <div class=\"form-control-container\">\n ${this._renderLabel()}\n <div class=\"input-group\">\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`decrease by ${this.step}`}\n ?disabled=${this.disabled ||\n (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n this.readonly}\n @click=${this._onMinus}\n name=\"dash\"\n >\n </sgds-icon-button>\n <sgds-input\n type=\"number\"\n class=\"quantity-toggle\"\n name=${ifDefined(this.name)}\n step=${ifDefined(this.step)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${live(this.value)}\n @sgds-change=${this._handleChange}\n @sgds-input=${this._handleInputChange}\n @sgds-invalid=${this._handleInvalid}\n @sgds-valid=${this._handleValid}\n @keydown=${this._handleKeyDown}\n ?disabled=${this.disabled}\n id=${this._controlId}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n ></sgds-input>\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`increase by ${this.step}`}\n @click=${this._onPlus}\n ?disabled=${this.disabled ||\n (this.max !== undefined && this.max && this.value >= this.max) ||\n this.readonly}\n name=\"plus\"\n >\n </sgds-icon-button>\n </div>\n <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle","SgdsInput","SgdsIconButton","__decorate","query","property","defaultValue","queryAsync"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-quantity-toggle.cjs.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, queryAsync } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport formControlStyle from \"../../styles/form-text-control.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue, best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [\n ...FormControlElement.styles,\n formPlaceholderStyles,\n svgStyles,\n formControlStyle,\n quantityToggleStyle\n ];\n\n /** @internal */\n static dependencies = {\n \"sgds-input\": SgdsInput,\n \"sgds-icon-button\": SgdsIconButton\n };\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n /** The input's value. Set to 0 by default */\n @property({ type: Number, reflect: true }) value = 0;\n\n /** Controls the incremental / decremental value of the input */\n @property({ type: Number }) step = 1;\n\n /** The input's minimum value. Only applies number input types. */\n @property({ type: Number }) min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property({ type: Number }) max: number;\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n /** Sets the quantity toggle as readonly */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = 0;\n\n @queryAsync(\"sgds-input\") private _sgdsInput: Promise<SgdsInput>;\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n private async _handleChange() {\n const sgdsInput = await this._sgdsInput;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n this.invalid = !this._mixinReportValidity();\n }\n private async _handleInputChange() {\n const sgdsInput = await this._sgdsInput;\n this.invalid = false;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n }\n\n private async _mixinResetFormControl() {\n const sgdsInput = await this._sgdsInput;\n this.value = this.defaultValue;\n sgdsInput.input.value = this.value.toString();\n this._mixinResetValidity(sgdsInput.input);\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const allowedKeys = [\n \"Backspace\",\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n ...Array.from(Array(10).keys()).map(key => key.toString()),\n \"Tab\"\n ];\n\n // Allow keydown event only if the pressed key is in the allowedKeys array\n if (!allowedKeys.includes(event.key)) {\n event.preventDefault();\n }\n }\n\n private _handleInvalid() {\n this.invalid = true;\n }\n private _handleValid() {\n this.invalid = false;\n }\n\n /** Simulates a click on the plus button */\n public plus() {\n this.plusBtn.click();\n }\n\n /** Simulates a click on the minus button */\n public minus() {\n this.minusBtn.click();\n }\n\n private async _onPlus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n this._validateOnClick(sgdsInput.input);\n }\n private async _onMinus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n if (this.value < this.step) {\n this.value = 0;\n } else {\n this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());\n }\n\n this._validateOnClick(sgdsInput.input);\n }\n\n /**\n * Validates the input on button clicks of the toggle.\n * Input is validated every time the button is click to update the invalid state\n * to indiciate the validity of quantity toggle\n * @param input native HTMLInputElement\n */\n private async _validateOnClick(input: HTMLInputElement) {\n const sgdsInput = await this._sgdsInput;\n await sgdsInput.updateComplete;\n this._mixinSetFormValue();\n this._mixinValidate(input);\n this.invalid = !this._mixinReportValidity();\n }\n\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n disabled: this.disabled\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n render() {\n return html`\n <div class=\"form-control-container\">\n ${this._renderLabel()}\n <div class=\"input-group\">\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`decrease by ${this.step}`}\n ?disabled=${this.disabled ||\n (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n this.readonly}\n @click=${this._onMinus}\n name=\"dash\"\n >\n </sgds-icon-button>\n <sgds-input\n type=\"number\"\n class=\"quantity-toggle\"\n name=${ifDefined(this.name)}\n step=${ifDefined(this.step)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${live(this.value)}\n @sgds-change=${this._handleChange}\n @sgds-input=${this._handleInputChange}\n @sgds-invalid=${this._handleInvalid}\n @sgds-valid=${this._handleValid}\n @keydown=${this._handleKeyDown}\n ?disabled=${this.disabled}\n id=${this._controlId}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n ></sgds-input>\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`increase by ${this.step}`}\n @click=${this._onPlus}\n ?disabled=${this.disabled ||\n (this.max !== undefined && this.max && this.value >= this.max) ||\n this.readonly}\n name=\"plus\"\n >\n </sgds-icon-button>\n </div>\n <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle","SgdsInput","SgdsIconButton","__decorate","query","property","defaultValue","queryAsync"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, queryAsync } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport formControlStyle from \"../../styles/form-text-control.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue, best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [\n ...FormControlElement.styles,\n formPlaceholderStyles,\n svgStyles,\n formControlStyle,\n quantityToggleStyle\n ];\n static formAssociated = true;\n\n /** @internal */\n static dependencies = {\n \"sgds-input\": SgdsInput,\n \"sgds-icon-button\": SgdsIconButton\n };\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n /** The input's value. Set to 0 by default */\n @property({ type: Number, reflect: true }) value = 0;\n\n /** Controls the incremental / decremental value of the input */\n @property({ type: Number }) step = 1;\n\n /** The input's minimum value. Only applies number input types. */\n @property({ type: Number }) min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property({ type: Number }) max: number;\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n /** Sets the quantity toggle as readonly */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = 0;\n\n @queryAsync(\"sgds-input\") private _sgdsInput: Promise<SgdsInput>;\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n private async _handleChange() {\n const sgdsInput = await this._sgdsInput;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n this.invalid = !this._mixinReportValidity();\n }\n private async _handleInputChange() {\n const sgdsInput = await this._sgdsInput;\n this.invalid = false;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n }\n\n private async _mixinResetFormControl() {\n const sgdsInput = await this._sgdsInput;\n this.value = this.defaultValue;\n sgdsInput.input.value = this.value.toString();\n this._mixinResetValidity(sgdsInput.input);\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const allowedKeys = [\n \"Backspace\",\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n ...Array.from(Array(10).keys()).map(key => key.toString()),\n \"Tab\"\n ];\n\n // Allow keydown event only if the pressed key is in the allowedKeys array\n if (!allowedKeys.includes(event.key)) {\n event.preventDefault();\n }\n }\n\n private _handleInvalid() {\n this.invalid = true;\n }\n private _handleValid() {\n this.invalid = false;\n }\n\n /** Simulates a click on the plus button */\n public plus() {\n this.plusBtn.click();\n }\n\n /** Simulates a click on the minus button */\n public minus() {\n this.minusBtn.click();\n }\n\n private async _onPlus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n this._validateOnClick(sgdsInput.input);\n }\n private async _onMinus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n if (this.value < this.step) {\n this.value = 0;\n } else {\n this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());\n }\n\n this._validateOnClick(sgdsInput.input);\n }\n\n /**\n * Validates the input on button clicks of the toggle.\n * Input is validated every time the button is click to update the invalid state\n * to indiciate the validity of quantity toggle\n * @param input native HTMLInputElement\n */\n private async _validateOnClick(input: HTMLInputElement) {\n const sgdsInput = await this._sgdsInput;\n await sgdsInput.updateComplete;\n this._mixinSetFormValue();\n this._mixinValidate(input);\n this.invalid = !this._mixinReportValidity();\n }\n\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n disabled: this.disabled\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n render() {\n return html`\n <div class=\"form-control-container\">\n ${this._renderLabel()}\n <div class=\"input-group\">\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`decrease by ${this.step}`}\n ?disabled=${this.disabled ||\n (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n this.readonly}\n @click=${this._onMinus}\n name=\"dash\"\n >\n </sgds-icon-button>\n <sgds-input\n type=\"number\"\n class=\"quantity-toggle\"\n name=${ifDefined(this.name)}\n step=${ifDefined(this.step)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${live(this.value)}\n @sgds-change=${this._handleChange}\n @sgds-input=${this._handleInputChange}\n @sgds-invalid=${this._handleInvalid}\n @sgds-valid=${this._handleValid}\n @keydown=${this._handleKeyDown}\n ?disabled=${this.disabled}\n id=${this._controlId}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n ></sgds-input>\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`increase by ${this.step}`}\n @click=${this._onPlus}\n ?disabled=${this.disabled ||\n (this.max !== undefined && this.max && this.value >= this.max) ||\n this.readonly}\n name=\"plus\"\n >\n </sgds-icon-button>\n </div>\n <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-quantity-toggle.js","sources":["../../../../src/components/QuantityToggle/sgds-quantity-toggle.ts"],"sourcesContent":["import { property, query, queryAsync } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport SgdsInput from \"../Input/sgds-input\";\nimport quantityToggleStyle from \"./quantity-toggle.css\";\nimport formControlStyle from \"../../styles/form-text-control.css\";\n/**\n * @summary The quantity toggle component is used to increase or decrease an incremental venue, best used when the user needs to enter or adjust the quantity of a selected item.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n *\n */\nexport class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n static styles = [\n ...FormControlElement.styles,\n formPlaceholderStyles,\n svgStyles,\n formControlStyle,\n quantityToggleStyle\n ];\n\n /** @internal */\n static dependencies = {\n \"sgds-input\": SgdsInput,\n \"sgds-icon-button\": SgdsIconButton\n };\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='increase by']\") private plusBtn: HTMLButtonElement;\n /** @internal */\n @query(\"sgds-icon-button[ariaLabel^='decrease by']\") private minusBtn: HTMLButtonElement;\n\n /** The input's value. Set to 0 by default */\n @property({ type: Number, reflect: true }) value = 0;\n\n /** Controls the incremental / decremental value of the input */\n @property({ type: Number }) step = 1;\n\n /** The input's minimum value. Only applies number input types. */\n @property({ type: Number }) min: number;\n\n /** The input's maximum value. Only applies number input types. */\n @property({ type: Number }) max: number;\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n /** Sets the quantity toggle as readonly */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue()\n defaultValue = 0;\n\n @queryAsync(\"sgds-input\") private _sgdsInput: Promise<SgdsInput>;\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n private async _handleChange() {\n const sgdsInput = await this._sgdsInput;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n this.invalid = !this._mixinReportValidity();\n }\n private async _handleInputChange() {\n const sgdsInput = await this._sgdsInput;\n this.invalid = false;\n if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === \"\") {\n sgdsInput.value = \"0\";\n }\n this.value = parseInt(sgdsInput.value);\n this._mixinSetFormValue();\n this._mixinValidate(sgdsInput.input);\n }\n\n private async _mixinResetFormControl() {\n const sgdsInput = await this._sgdsInput;\n this.value = this.defaultValue;\n sgdsInput.input.value = this.value.toString();\n this._mixinResetValidity(sgdsInput.input);\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n const allowedKeys = [\n \"Backspace\",\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n ...Array.from(Array(10).keys()).map(key => key.toString()),\n \"Tab\"\n ];\n\n // Allow keydown event only if the pressed key is in the allowedKeys array\n if (!allowedKeys.includes(event.key)) {\n event.preventDefault();\n }\n }\n\n private _handleInvalid() {\n this.invalid = true;\n }\n private _handleValid() {\n this.invalid = false;\n }\n\n /** Simulates a click on the plus button */\n public plus() {\n this.plusBtn.click();\n }\n\n /** Simulates a click on the minus button */\n public minus() {\n this.minusBtn.click();\n }\n\n private async _onPlus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());\n this._validateOnClick(sgdsInput.input);\n }\n private async _onMinus(event: MouseEvent) {\n const sgdsInput = await this._sgdsInput;\n event.preventDefault();\n event.stopPropagation();\n if (this.value < this.step) {\n this.value = 0;\n } else {\n this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());\n }\n\n this._validateOnClick(sgdsInput.input);\n }\n\n /**\n * Validates the input on button clicks of the toggle.\n * Input is validated every time the button is click to update the invalid state\n * to indiciate the validity of quantity toggle\n * @param input native HTMLInputElement\n */\n private async _validateOnClick(input: HTMLInputElement) {\n const sgdsInput = await this._sgdsInput;\n await sgdsInput.updateComplete;\n this._mixinSetFormValue();\n this._mixinValidate(input);\n this.invalid = !this._mixinReportValidity();\n }\n\n protected _renderFeedback() {\n const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n return this.invalid && wantFeedbackText\n ? html` <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n </div>\n </div>`\n : html`${this._renderHintText()}`;\n }\n\n protected _renderLabel() {\n const labelTemplate = html`\n <label\n for=${this._controlId}\n id=${this._labelId}\n class=${classMap({\n \"form-label\": true,\n disabled: this.disabled\n })}\n >${this.label}</label\n >\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n render() {\n return html`\n <div class=\"form-control-container\">\n ${this._renderLabel()}\n <div class=\"input-group\">\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`decrease by ${this.step}`}\n ?disabled=${this.disabled ||\n (this.min !== undefined ? this.value <= this.min : this.value < 1) ||\n this.readonly}\n @click=${this._onMinus}\n name=\"dash\"\n >\n </sgds-icon-button>\n <sgds-input\n type=\"number\"\n class=\"quantity-toggle\"\n name=${ifDefined(this.name)}\n step=${ifDefined(this.step)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${live(this.value)}\n @sgds-change=${this._handleChange}\n @sgds-input=${this._handleInputChange}\n @sgds-invalid=${this._handleInvalid}\n @sgds-valid=${this._handleValid}\n @keydown=${this._handleKeyDown}\n ?disabled=${this.disabled}\n id=${this._controlId}\n ?invalid=${this.invalid}\n hasFeedback=${ifDefined(this.hasFeedback !== \"text\" ? \"style\" : undefined)}\n ></sgds-input>\n <sgds-icon-button\n variant=\"ghost\"\n ariaLabel=${`increase by ${this.step}`}\n @click=${this._onPlus}\n ?disabled=${this.disabled ||\n (this.max !== undefined && this.max && this.value >= this.max) ||\n this.readonly}\n name=\"plus\"\n >\n </sgds-icon-button>\n </div>\n <div id=\"announcer\" role=\"region\" aria-live=\"assertive\" class=\"visually-hidden\">${this.value}</div>\n ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsQuantityToggle;\n"],"names":["formPlaceholderStyles","svgStyles","formControlStyle","quantityToggleStyle"],"mappings":"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"}
|
|
@@ -244,7 +244,6 @@ class SgdsRadioGroup extends validatorMixin.SgdsFormValidatorMixin(formControlEl
|
|
|
244
244
|
}
|
|
245
245
|
}
|
|
246
246
|
SgdsRadioGroup.styles = [...formControlElement["default"].styles, radioGroup["default"]];
|
|
247
|
-
SgdsRadioGroup.formAssociated = true;
|
|
248
247
|
tslib.__decorate([
|
|
249
248
|
decorators_js.query("slot:not([name])")
|
|
250
249
|
], SgdsRadioGroup.prototype, "defaultSlot", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, radioGroupStyles];\n static formAssociated = true;\n\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n /**@internal */\n @state() defaultValue = \"\";\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _handleInvalidChange() {\n this._radios.forEach(r => (r.invalid = this.invalid));\n }\n\n @state() private _isTouched = false;\n /**\n * radio requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.addEventListener(\"sgds-blur\", () => {\n this._isTouched = true;\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n if (this.value) {\n this._updateInputValue(\"change\");\n }\n }\n\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n\n this._updateInputValue();\n\n const radios = this._radios;\n\n radios.forEach(radio => {\n return (radio.checked = radio === target);\n });\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private _updateInputValue(eventName = \"change\") {\n this.input.value = this.value;\n this.input.dispatchEvent(new InputEvent(eventName));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n this._updateInputValue();\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n // preventDefault at the end to allow Tab\n event.preventDefault();\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this._disabledChildRadios();\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n this._disabledChildRadios();\n }\n\n private _disabledChildRadios() {\n if (this.disabled) {\n const radios = this._radios;\n radios.forEach(radio => (radio.disabled = this.disabled));\n }\n }\n\n render() {\n const defaultSlot = html`\n <slot\n class=\"radio-container\"\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n return html`\n <fieldset name=${this.name}>\n <div class=\"label-hint-container\">\n <label\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n ${this.label}\n </label>\n ${this._renderHintText()}\n </div>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => super._mixinHandleChange(e)}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","live","nothing","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-radio-group.cjs.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, radioGroupStyles];\n\n /**@internal */\n @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n /**@internal */\n @state() defaultValue = \"\";\n\n /** The selected value of the control. */\n @property({ reflect: true }) value = \"\";\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n _handleValueChange() {\n this.emit(\"sgds-change\", { detail: { value: this.value } });\n this._updateCheckedRadio();\n }\n @watch(\"invalid\", { waitUntilFirstUpdate: true })\n _handleInvalidChange() {\n this._radios.forEach(r => (r.invalid = this.invalid));\n }\n\n @state() private _isTouched = false;\n /**\n * radio requries a custom _mixinResetFormControl as the update of input value\n * requires to fire a reset event manually\n * */\n private _mixinResetFormControl() {\n this.value = this.input.value = this.defaultValue;\n this._updateInputValue(\"reset\");\n this._mixinResetValidity(this.input);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.addEventListener(\"sgds-blur\", () => {\n this._isTouched = true;\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n const radios = this._radios;\n radios.forEach((item, index) => {\n if (radios.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case radios.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n if (this.value) {\n this._updateInputValue(\"change\");\n }\n }\n\n @queryAssignedElements()\n private _radios!: Array<SgdsRadio>;\n\n private _handleRadioClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as SgdsRadio;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n\n this._updateInputValue();\n\n const radios = this._radios;\n\n radios.forEach(radio => {\n return (radio.checked = radio === target);\n });\n }\n /**\n * when input value is set programatically, need to manually dispatch a change event\n * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n */\n private _updateInputValue(eventName = \"change\") {\n this.input.value = this.value;\n this.input.dispatchEvent(new InputEvent(eventName));\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n return;\n }\n\n const radios = this._radios.filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n let index = radios.indexOf(checkedRadio) + incr;\n if (index < 0) {\n index = radios.length - 1;\n }\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this._radios.forEach(radio => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.value = radios[index].value;\n this._updateInputValue();\n radios[index].checked = true;\n radios[index].tabIndex = 0;\n // preventDefault at the end to allow Tab\n event.preventDefault();\n }\n\n private _handleSlotChange() {\n const radios = this._radios;\n\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this._disabledChildRadios();\n if (!radios.some(radio => radio.checked)) {\n if (radios[0]) radios[0].tabIndex = 0;\n }\n }\n\n private _updateCheckedRadio() {\n const radios = this._radios;\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage() {\n return this._mixinGetValidationMessage();\n }\n\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\n if (this._isTouched) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n this._disabledChildRadios();\n }\n\n private _disabledChildRadios() {\n if (this.disabled) {\n const radios = this._radios;\n radios.forEach(radio => (radio.disabled = this.disabled));\n }\n }\n\n render() {\n const defaultSlot = html`\n <slot\n class=\"radio-container\"\n @click=${this._handleRadioClick}\n @keydown=${this._handleKeyDown}\n @slotchange=${this._handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n return html`\n <fieldset name=${this.name}>\n <div class=\"label-hint-container\">\n <label\n class=${classMap({\n \"form-label\": true,\n required: this.required\n })}\n >\n ${this.label}\n </label>\n ${this._renderHintText()}\n </div>\n ${defaultSlot}\n <input\n type=\"text\"\n class=\"radio-group-validation-input ${classMap({\n \"is-invalid\": this.hasFeedback && this.invalid\n })}\"\n ?required=${this.required}\n tabindex=\"-1\"\n @change=${(e: Event) => super._mixinHandleChange(e)}\n .value=${live(this.value)}\n aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n />\n ${this.invalid && this.hasFeedback\n ? html`\n <div class=\"invalid-feedback-container\">\n <slot name=\"invalidIcon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n </slot>\n <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `\n : nothing}\n </fieldset>\n `;\n }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","live","nothing","radioGroupStyles","__decorate","query","state","property","watch","queryAssignedElements"],"mappings":"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"}
|
|
@@ -240,7 +240,6 @@ class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
|
|
|
240
240
|
}
|
|
241
241
|
}
|
|
242
242
|
SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z];
|
|
243
|
-
SgdsRadioGroup.formAssociated = true;
|
|
244
243
|
__decorate([
|
|
245
244
|
query("slot:not([name])")
|
|
246
245
|
], SgdsRadioGroup.prototype, "defaultSlot", void 0);
|