npm - @govtechsg/sgds-web-component - Versions diffs - 3.2.0-rc.1 → 3.2.0-rc.3 - Mend

@govtechsg/sgds-web-component 3.2.0-rc.1 → 3.2.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (453) hide show

package/react/components/Input/sgds-input.cjs.js.map CHANGED Viewed

	@@ -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 { 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 \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, formPlaceholderStyles, inputStyle];\n /** @internal /\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type: \"email\" \| \"number\" \| \"password\" \| \"search\" \| \"tel\" \| \"text\" \| \"time\" \| \"url\" =\n \"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 /The input's value attribute. /\n @property({ reflect: true }) value = \"\";\n\n @state() protected _isTouched = 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 this.setInvalid(!this._mixinCheckValidity());\n if (sgdsBlur.defaultPrevented) return;\n\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 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 (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /* @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\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.type}\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.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 ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n </div>\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 <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()} ${this._renderInput()} ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","nothing","ifDefined","live","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","__decorate","property","defaultValue","state","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;AAYG;MACU,SAAU,SAAQA,qCAAsB,CAACC,6BAAkB,CAAC,CAAA;AAAzE,IAAA,WAAA,GAAA;;QAQ+B,IAAI,CAAA,IAAA,GAC/B,MAAM,CAAC;;QAqBkC,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;;QAGhC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAErB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KA6KvC;;AA1KQ,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,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;QAC7C,IAAI,QAAQ,CAAC,gBAAgB;YAAE,OAAO;AAEtC,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;QAClE,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,SAAS,CAAC,gBAAgB;YAAE,OAAO;AACvC,QAAA,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;KAClC;;IAGD,gBAAgB,GAAA;AACd,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,OAAOC,kBAAI,CAAA,CAAA;;AAEqB,kCAAA,EAAAC,oBAAQ,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,GAAGD,kBAAI,CAAA,CAAqC,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAA,OAAA,CAAS,GAAGE,WAAO,CAAA;;;AAG9E,eAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACX,aAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACb,eAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACb,sBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;yBAC1B,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACpC,kBAAA,EAAAA,sBAAS,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,EAAAC,YAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACb,oBAAA,EAAAD,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACzB,oBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC/B,cAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnB,cAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClB,eAAA,EAAAA,sBAAS,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;6BACLA,sBAAS,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;;UAEN,IAAI,CAAC,OAAO,GAAGH,kBAAI,CAAA,CAAyC,uCAAA,CAAA,GAAGE,WAAO,CAAA;UACtE,IAAI,CAAC,KAAK,GAAGF,kBAAI,CAAA,CAAqE,mEAAA,CAAA,GAAGE,WAAO,CAAA;AAChG,QAAA,EAAA,IAAI,CAAC,MAAM,GAAGF,kBAAI,CAAA,CAAqC,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAA,OAAA,CAAS,GAAGE,WAAO,CAAA;;KAE1F,CAAC;KACH;IACS,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;AACpF,QAAA,OAAO,IAAI,CAAC,OAAO,IAAI,gBAAgB;cACnCF,kBAAI,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;cACPA,kBAAI,CAAA,CAAA,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,CAAC;KACrC;IACS,YAAY,GAAA;QACpB,MAAM,aAAa,GAAGA,kBAAI,CAAA,CAAA;;AAEhB,YAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACV,cAAA,EAAAC,oBAAQ,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,GAAGD,kBAAI,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,OAAOA,kBAAI,CAAA,CAAA;;AAEyB,sCAAA,EAAAC,oBAAQ,CAAC;YACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;AAEA,QAAA,EAAA,IAAI,CAAC,YAAY,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,YAAY,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA;;KAEzE,CAAC;KACH;;AAhPM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAGF,6BAAkB,CAAC,MAAM,EAAEM,0BAAqB,EAAEC,gBAAU,CAAnE,CAAqE;AAClF;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,cAAc,EAAEC,uBAAW;AAC3B,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAHkB,CAGjB;AAE2BC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmBD,gBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAgB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGfD,gBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAgB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGAD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjDD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAa,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAa,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG3CD,gBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGAD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMjDD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAsB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGUD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAwC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvCD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAyB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInED,gBAAA,CAAA;AADC,IAAAE,yBAAY,EAAE;AACG,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG0BF,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGdD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhCD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAErBD,gBAAA,CAAA;AAAlB,IAAAG,mBAAK,EAAE;AAA8B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA2EtCH,gBAAA,CAAA;IADCI,WAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKnD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAEDJ,gBAAA,CAAA;IADCI,WAAK,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.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 { 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, formPlaceholderStyles, inputStyle];\n /** @internal /\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type: \"email\" \| \"number\" \| \"password\" \| \"search\" \| \"tel\" \| \"text\" \| \"time\" \| \"url\" =\n \"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 /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 this.setInvalid(!this._mixinCheckValidity());\n if (sgdsBlur.defaultPrevented) return;\n\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 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 (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /* @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\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 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","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","__decorate","property","defaultValue","state","watch"],"mappings":"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"}

package/react/components/Input/sgds-input.js CHANGED Viewed

@@ -19,7 +19,8 @@ import { SgdsIcon } from '../Icon/sgds-icon.js';
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
  *
  * @slot icon - The slot for leading icon of text input
- *
+ * @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
+ * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot
  * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
@@ -49,6 +50,7 @@ class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) {
         /**The input's value attribute. */
         this.value = "";
         this._isTouched = false;
+        this._showPassword = false;
     }
     /** Sets focus on the input. */
     focus(options) {
@@ -141,7 +143,7 @@ class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) {
         ${this.prefix ? html `<span class="form-control-prefix">${this.prefix}</span>` : nothing}
         <input
           class="form-control"
-          type=${this.type}
+          type=${this._inputType()}
           id=${this._controlId}
           name=${ifDefined(this.name)}
           placeholder=${ifDefined(this.placeholder)}
@@ -167,12 +169,29 @@ class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) {
             ? `${this._controlId}-invalid`
             : ""}"
         />
-        ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
-        ${this.valid ? html `<sgds-icon name="check-circle-fill" class="valid-icon"></sgds-icon>` : nothing}
+        ${this.type === "password" ? this._renderPasswordToggle() : nothing}
         ${this.suffix ? html `<span class="form-control-suffix">${this.suffix}</span>` : nothing}
+        <slot name="trailing-icon">
+          ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
+          ${this.valid ? html `<sgds-icon name="check-circle-fill" class="valid-icon"></sgds-icon>` : nothing}
+        </slot>
       </div>
     `;
     }
+    _renderPasswordToggle() {
+        return html `<sgds-icon
+      tabIndex="0"
+      role="button"
+      name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
+      @click=${() => (this._showPassword = !this._showPassword)}
+    ></sgds-icon>`;
+    }
+    _inputType() {
+        if (this.type === "password" && this._showPassword) {
+            return "text";
+        }
+        return this.type;
+    }
     _renderFeedback() {
         const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
         return this.invalid && wantFeedbackText
@@ -209,7 +228,12 @@ class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) {
             disabled: this.disabled
         })}"
       >
-        ${this._renderLabel()} ${this._renderInput()} ${this._renderFeedback()}
+        ${this._renderLabel()}
+        <div class="form-control-row">
+          ${this._renderInput()}
+          <slot name="action"></slot>
+        </div>
+        ${this._renderFeedback()}
       </div>
     `;
     }
@@ -280,6 +304,9 @@ __decorate([
 __decorate([
     state()
 ], SgdsInput.prototype, "_isTouched", void 0);
+__decorate([
+    state()
+], SgdsInput.prototype, "_showPassword", void 0);
 __decorate([
     watch("_isTouched", { waitUntilFirstUpdate: true })
 ], SgdsInput.prototype, "_handleIsTouched", null);

package/react/components/Input/sgds-input.js.map CHANGED Viewed

	@@ -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 { 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 \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, formPlaceholderStyles, inputStyle];\n /** @internal /\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type: \"email\" \| \"number\" \| \"password\" \| \"search\" \| \"tel\" \| \"text\" \| \"time\" \| \"url\" =\n \"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 /The input's value attribute. /\n @property({ reflect: true }) value = \"\";\n\n @state() protected _isTouched = 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 this.setInvalid(!this._mixinCheckValidity());\n if (sgdsBlur.defaultPrevented) return;\n\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 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 (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /* @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\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.type}\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.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 ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n </div>\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 <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()} ${this._renderInput()} ${this._renderFeedback()}\n </div>\n `;\n }\n}\n\nexport default SgdsInput;\n"],"names":["formPlaceholderStyles","inputStyle"],"mappings":"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"}
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 { 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, formPlaceholderStyles, inputStyle];\n /** @internal /\n static dependencies = {\n \"sgds-spinner\": SgdsSpinner,\n \"sgds-icon\": SgdsIcon\n };\n\n @property({ reflect: true }) type: \"email\" \| \"number\" \| \"password\" \| \"search\" \| \"tel\" \| \"text\" \| \"time\" \| \"url\" =\n \"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 /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 this.setInvalid(!this._mixinCheckValidity());\n if (sgdsBlur.defaultPrevented) return;\n\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 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 (sgdsInput.defaultPrevented) return;\n super._mixinHandleInputChange(e);\n }\n /* @internal */\n @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n _handleIsTouched() {\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 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":["formPlaceholderStyles","inputStyle"],"mappings":"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"}

package/react/components/Tooltip/tooltip.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host{display:contents}.tooltip-placeholder{display:inline-block}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
+var css_248z = lit.css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=tooltip.cjs.js.map

package/react/components/Tooltip/tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host{display:contents}.tooltip-placeholder{display:inline-block}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
+var css_248z = css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
 export { css_248z as default };
 //# sourceMappingURL=tooltip.js.map

package/react/utils/slot.cjs.js CHANGED Viewed

@@ -52,6 +52,24 @@ class HasSlotController {
         }
     }
 }
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent.trim();
+        }
+    });
+    return text;
+}
 exports.HasSlotController = HasSlotController;
+exports.getTextContent = getTextContent;
 //# sourceMappingURL=slot.cjs.js.map

package/react/utils/slot.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slot.cjs.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";;;;;MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF~~;;;;~~"}
1	+ {"version":3,"file":"slot.cjs.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent.trim();\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";;;;;MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF,CAAA;AAuBD;;;AAGG;AACG,SAAU,cAAc,CAAC,IAAwC,EAAA;IACrE,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,EAAE,CAAC;KACX;AACD,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,CAAC,GAAG,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;AACpC,YAAA,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACjC;AACH,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,IAAI,CAAC;AACd;;;;;"}

package/react/utils/slot.js CHANGED Viewed

@@ -48,6 +48,23 @@ class HasSlotController {
         }
     }
 }
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent.trim();
+        }
+    });
+    return text;
+}
-export { HasSlotController };
+export { HasSlotController, getTextContent };
 //# sourceMappingURL=slot.js.map

package/react/utils/slot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slot.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF;;;;"}
1	+ {"version":3,"file":"slot.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent.trim();\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":"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"}

package/scripts/figma/sync-figma-to-tokens/__tests__/write-tokens-to-css-var.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/scripts/figma/sync-figma-to-tokens/color.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { RGB, RGBA } from "@figma/rest-api-spec";
+/**
+ * Compares two colors for approximate equality since converting between Figma RGBA objects (from 0 -> 1) and
+ * hex colors can result in slight differences.
+ */
+export declare function colorApproximatelyEqual(colorA: RGB | RGBA, colorB: RGB | RGBA): boolean;
+export declare function parseColor(color: string): RGB | RGBA;
+export declare function rgbToHex({ r, g, b, ...rest }: RGB | RGBA): string;

package/scripts/figma/sync-figma-to-tokens/figma_api.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { GetLocalVariablesResponse, PostVariablesRequestBody, PostVariablesResponse } from "@figma/rest-api-spec";
+export default class FigmaApi {
+    private baseUrl;
+    private token;
+    constructor(token: string);
+    getLocalVariables(fileKey: string): Promise<GetLocalVariablesResponse>;
+    postVariables(fileKey: string, payload: PostVariablesRequestBody): Promise<PostVariablesResponse>;
+}

package/scripts/figma/sync-figma-to-tokens/sync-figma-to-tokens.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "dotenv/config";

package/scripts/figma/sync-figma-to-tokens/token_export.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { GetLocalVariablesResponse } from "@figma/rest-api-spec";
+import { TokensFile } from "./token_types";
+export declare function tokenFilesFromLocalVariables(localVariablesResponse: GetLocalVariablesResponse): {
+    [fileName: string]: TokensFile;
+};

package/scripts/figma/sync-figma-to-tokens/token_types.d.ts ADDED Viewed

@@ -0,0 +1,52 @@
+/**
+ * This file defines what design tokens and design token files look like in the codebase.
+ *
+ * Tokens are distinct from variables, in that a [token](https://tr.designtokens.org/format/#design-token)
+ * is a name/value pair (with other properties), while a variable in Figma stores multiple values,
+ * one for each mode.
+ */
+import { VariableCodeSyntax, VariableScope } from "@figma/rest-api-spec";
+export interface Token {
+    /**
+     * The [type](https://tr.designtokens.org/format/#type-0) of the token.
+     *
+     * We allow `string` and `boolean` types in addition to the draft W3C spec's `color` and `number` types
+     * to align with the resolved types for Figma variables.
+     */
+    $type: "color" | "number" | "string" | "boolean";
+    $value: string | number | boolean;
+    $description?: string;
+    $extensions?: {
+        /**
+         * The `com.figma` namespace stores Figma-specific variable properties
+         */
+        "com.figma"?: {
+            hiddenFromPublishing?: boolean;
+            scopes?: VariableScope[];
+            codeSyntax?: VariableCodeSyntax;
+        };
+    };
+}
+export type TokenOrTokenGroup = Token | ({
+    [tokenName: string]: Token;
+} & {
+    $type?: never;
+    $value?: never;
+});
+/**
+ * Defines what we expect a Design Tokens file to look like in the codebase.
+ *
+ * This format mostly adheres to the [draft W3C spec for Design Tokens](https://tr.designtokens.org/format/)
+ * as of its most recent 24 July 2023 revision except for the $type property, for which
+ * we allow `string` and `boolean` values in addition to the spec's `color` and `number` values.
+ * We need to support `string` and `boolean` types to align with the resolved types for Figma variables.
+ *
+ * Additionally, we expect each tokens file to define tokens for a single variable collection and mode.
+ * There currently isn't a way to represent modes or themes in the W3C community group design token specification.
+ * Once the spec resolves how it wants to treat/handle modes, this code will be updated to reflect the new standard.
+ *
+ * Follow this discussion for updates: https://github.com/design-tokens/community-group/issues/210
+ */
+export type TokensFile = {
+    [key: string]: TokenOrTokenGroup;
+};

package/scripts/figma/sync-figma-to-tokens/utils.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare function areSetsEqual<T>(a: Set<T>, b: Set<T>): boolean;
+export declare function brightRed(msg: string): string;
+export declare function green(msg: string): string;

package/scripts/figma/sync-figma-to-tokens/write-tokens-to-css-var.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare function arrangeSgdsFiles(fileName: string): string;
+export declare function saveToMap(filePath: string, map: Map<string, object>, mapKey: string): Promise<void>;
+/**
+ * Converts a token name like '{sgds-dimension-320}' to a CSS var() reference.
+ * Example: '{sgds-dimension-320}' => 'var(--sgds-dimension-320)'
+ */
+export declare function tokenNameToCssVar(tokenName: string): string | undefined;
+export declare function tokenToCssVars(): Promise<void>;

package/{components → src/components}/Badge/sgds-badge.d.ts RENAMED Viewed

@@ -1,9 +1,11 @@
 import { nothing } from "lit";
 import SgdsElement from "../../base/sgds-element";
+import SgdsTooltip from "../Tooltip/sgds-tooltip";
 import SgdsCloseButton from "../../internals/CloseButton/sgds-close-button";
 export type BadgeVariant = "info" | "success" | "danger" | "warning" | "neutral";
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+ * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
  *
  * @slot default - slot for badge
  * @slot icon - The slot for icon to the left of the badge text
@@ -18,6 +20,7 @@ export declare class SgdsBadge extends SgdsElement {
     /**@internal */
     static dependencies: {
         "sgds-close-button": typeof SgdsCloseButton;
+        "sgds-tooltip": typeof SgdsTooltip;
     };
     /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
     show: boolean;
@@ -27,10 +30,18 @@ export declare class SgdsBadge extends SgdsElement {
     outlined: boolean;
     /** Manually set the dismissible state of the button to `false` */
     dismissible: boolean;
+    /** Manually enable full width */
+    fullWidth: boolean;
+    private truncated;
+    private text;
     /** Closes the badge  */
     close(): void;
     /**@internal */
     _handleShowChange(): void;
+    /**@internal */
+    _handleTruncation(): void;
+    private _handleLabelSlotChange;
+    private _renderBadge;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 export default SgdsBadge;

package/{components → src/components}/Input/sgds-input.d.ts RENAMED Viewed

@@ -7,7 +7,8 @@ declare const SgdsInput_base: (new (...args: any[]) => import("../../utils/valid
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
  *
  * @slot icon - The slot for leading icon of text input
- *
+ * @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
+ * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot
  * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
@@ -64,6 +65,7 @@ export declare class SgdsInput extends SgdsInput_base implements SgdsFormControl
     /**The input's value attribute. */
     value: string;
     protected _isTouched: boolean;
+    private _showPassword;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Sets blur on the input. */
@@ -98,6 +100,8 @@ export declare class SgdsInput extends SgdsInput_base implements SgdsFormControl
     _handleIsTouched(): void;
     _handleDisabledChange(): void;
     protected _renderInput(): import("lit-html").TemplateResult;
+    protected _renderPasswordToggle(): import("lit-html").TemplateResult;
+    protected _inputType(): "number" | "text" | "email" | "password" | "search" | "tel" | "time" | "url";
     protected _renderFeedback(): import("lit-html").TemplateResult;
     protected _renderLabel(): import("lit-html").TemplateResult;
     protected _renderHintText(): import("lit-html").TemplateResult;

package/utils/slot.js CHANGED Viewed

@@ -47,6 +47,23 @@ class HasSlotController {
         }
     }
 }
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent.trim();
+        }
+    });
+    return text;
+}
-export { HasSlotController };
+export { HasSlotController, getTextContent };
 //# sourceMappingURL=slot.js.map