npm - @carbon/web-components - Versions diffs - 2.52.0 → 2.53.0-rc.0 - Mend

@carbon/web-components 2.52.0 → 2.53.0-rc.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.

Files changed (1760) hide show

package/es-custom/components/textarea/textarea.js CHANGED Viewed

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import if_non_empty_default from "../../globals/directives/if-non-empty.js";
 import text_input_default from "../text-input/text-input.js";
@@ -18,7 +18,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
 import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
 //#region src/components/textarea/textarea.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -91,33 +90,33 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 		const { enableCounter, maxCount } = this;
 		const textCount = this.value?.length ?? 0;
 		const wordCount = this.value?.match(/\p{L}+/gu)?.length || 0;
-		const invalidIcon = iconLoader(WarningFilled16, { class: `${prefix}--text-area__invalid-icon` });
-		const warnIcon = iconLoader(WarningAltFilled16, { class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning` });
+		const invalidIcon = iconLoader(WarningFilled16, { class: `cds-custom--text-area__invalid-icon` });
+		const warnIcon = iconLoader(WarningAltFilled16, { class: `cds-custom--text-area__invalid-icon cds-custom--text-area__invalid-icon--warning` });
 		const textareaClasses = classMap({
-			[`${prefix}--text-area`]: true,
-			[`${prefix}--text-area--warn`]: this.warn,
-			[`${prefix}--text-area--invalid`]: this.invalid,
-			[`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel
+			[`cds-custom--text-area`]: true,
+			[`cds-custom--text-area--warn`]: this.warn,
+			[`cds-custom--text-area--invalid`]: this.invalid,
+			[`cds-custom--text-area__wrapper--decorator`]: this._hasAILabel
 		});
 		const textareaWrapperClasses = classMap({
-			[`${prefix}--text-area__wrapper`]: true,
-			[`${prefix}--text-area__wrapper--cols`]: this.cols,
-			[`${prefix}--text-area__wrapper--warn`]: this.warn,
-			[`${prefix}--text-area__wrapper--readonly`]: this.readonly
+			[`cds-custom--text-area__wrapper`]: true,
+			[`cds-custom--text-area__wrapper--cols`]: this.cols,
+			[`cds-custom--text-area__wrapper--warn`]: this.warn,
+			[`cds-custom--text-area__wrapper--readonly`]: this.readonly
 		});
 		const labelClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--visually-hidden`]: this.hideLabel,
-			[`${prefix}--label--disabled`]: this.disabled
+			[`cds-custom--label`]: true,
+			[`cds-custom--visually-hidden`]: this.hideLabel,
+			[`cds-custom--label--disabled`]: this.disabled
 		});
 		const counterClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--label--disabled`]: this.disabled,
-			[`${prefix}--text-area__label-counter`]: true
+			[`cds-custom--label`]: true,
+			[`cds-custom--label--disabled`]: this.disabled,
+			[`cds-custom--text-area__label-counter`]: true
 		});
 		const helperTextClasses = classMap({
-			[`${prefix}--form__helper-text`]: true,
-			[`${prefix}--form__helper-text--disabled`]: this.disabled
+			[`cds-custom--form__helper-text`]: true,
+			[`cds-custom--form__helper-text--disabled`]: this.disabled
 		});
 		const counter = enableCounter && maxCount ? html` <label class="${counterClasses}">
             <slot name="label-text"
@@ -142,7 +141,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 		};
 		const validationMessage = html`
       <div
-        class="${prefix}--form-requirement"
+        class="${"cds-custom"}--form-requirement"
         ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
         <slot name="${normalizedProps["slot-name"]}">
           ${normalizedProps["slot-text"]} ${this.isFluid ? icon() : null}
@@ -150,7 +149,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
       </div>
     `;
 		return html`
-      <div class="${prefix}--text-area__label-wrapper">
+      <div class="${"cds-custom"}--text-area__label-wrapper">
         <label class="${labelClasses}" for="input">
           <slot name="label-text"> ${this.label} </slot>
         </label>
@@ -180,7 +179,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
         <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
         <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
         ${this.isFluid ? html`
-              <hr class="${prefix}--text-area__divider" />
+              <hr class="${"cds-custom"}--text-area__divider" />
               ${validationMessage}
             ` : null}
       </div>
@@ -196,7 +195,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 			else textarea.removeAttribute("maxlength");
 			this._prevCounterMode = this.counterMode;
 		}
-		const wrapper = this.shadowRoot?.querySelector(`.${prefix}--text-area__wrapper`);
+		const wrapper = this.shadowRoot?.querySelector(`.cds-custom--text-area__wrapper`);
 		if (!wrapper) return;
 		this._resizeObserver = new ResizeObserver(() => {
 			this._measureWrapper();
@@ -208,8 +207,8 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 	* helper-text and invalid/warn-text
 	*/
 	_measureWrapper() {
-		const wrapperWidth = (this.shadowRoot?.querySelector(`.${prefix}--text-area__wrapper`))?.scrollWidth;
-		[this.shadowRoot?.querySelector(`.${prefix}--form__helper-text`), this.shadowRoot?.querySelector(`.${prefix}--form-requirement`)].forEach((el) => {
+		const wrapperWidth = (this.shadowRoot?.querySelector(`.cds-custom--text-area__wrapper`))?.scrollWidth;
+		[this.shadowRoot?.querySelector(`.cds-custom--form__helper-text`), this.shadowRoot?.querySelector(`.cds-custom--form-requirement`)].forEach((el) => {
 			if (el) {
 				el.style.maxWidth = `${wrapperWidth}px`;
 				el.style.overflowWrap = "break-word";
@@ -249,9 +248,9 @@ __decorate([property({
 })], CDSTextarea.prototype, "required", void 0);
 __decorate([property()], CDSTextarea.prototype, "rows", void 0);
 __decorate([query("textarea")], CDSTextarea.prototype, "_textarea", void 0);
-CDSTextarea = __decorate([carbonElement(`${prefix}-textarea`)], CDSTextarea);
+CDSTextarea = __decorate([carbonElement(`cds-custom-textarea`)], CDSTextarea);
 var textarea_default = CDSTextarea;
 //#endregion
 export { textarea_default as default };
 //# sourceMappingURL=textarea.js.map

package/es-custom/components/textarea/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","names":["CDSTextInput","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/textarea/textarea.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2025\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CDSTextInput from '../text-input/text-input';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/\n Text area.\n \n @element cds-custom-textarea\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n /\n@customElement(`${prefix}-textarea`)\nclass CDSTextarea extends CDSTextInput {\n /\n Manually handles maxCount for counterMode = 'word'\n * @param event The keyboard event.\n /\n protected _onKeyDown(evt: KeyboardEvent) {\n if (!this.disabled && this.enableCounter && this.counterMode === 'word') {\n const currentWordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n if (\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === ' ') \|\|\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === 'Enter')\n ) {\n evt.preventDefault();\n }\n }\n }\n\n /\n Handles `onPaste` event on the `<input>`.\n * Manually handles maxCount for counterMode = 'word' when\n * the user is pasting text\n \n @param event The clipboard event.\n /\n protected _onPaste(evt: ClipboardEvent) {\n if (\n this.counterMode === 'word' &&\n this.enableCounter &&\n typeof this.maxCount !== 'undefined'\n ) {\n const existingWords: string[] =\n this._textarea.value.match(/\\p{L}+/gu) \|\| [];\n const pastedWords: string[] =\n evt.clipboardData?.getData('Text').match(/\\p{L}+/gu) \|\| [];\n\n const totalWords = existingWords.length + pastedWords.length;\n\n if (totalWords > this.maxCount) {\n evt.preventDefault();\n\n const allowedWords = existingWords\n .concat(pastedWords)\n .slice(0, this.maxCount);\n\n this._textarea.value = allowedWords.join(' ');\n this._textarea.dispatchEvent(\n new InputEvent('input', {\n inputType: 'insertFromPaste',\n data: allowedWords.join(' '),\n bubbles: true,\n })\n );\n }\n }\n }\n /\n Handles `oninput` event on the `<input>`.\n \n @param event The event.\n * @param event.target The event target.\n /\n protected _handleInput({ target }: Event) {\n this.value = (target as HTMLTextAreaElement).value;\n }\n\n /\n The number of columns for the textarea to show by default\n /\n @property({ type: Number })\n cols;\n\n /\n Specify whether the textarea is fluid or not\n /\n @property({ type: Boolean })\n isFluid = false;\n\n /\n Specify the method used for calculating the counter number\n /\n @property({\n type: String,\n reflect: true,\n hasChanged(newVal: string, oldVal: string) {\n if ((newVal === 'character' \|\| newVal === 'word') && newVal !== oldVal) {\n return true;\n }\n return false;\n },\n attribute: 'counter-mode',\n })\n counterMode: 'character' \| 'word' = 'character';\n\n /\n ID to link the `label` and `textarea`\n /\n @property()\n id = '';\n\n /\n Pattern to validate the textarea against for HTML validity checking\n /\n @property()\n pattern = '';\n\n /\n Boolean property to set the required status\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n The number of rows for the textarea to show by default\n /\n @property()\n rows = 4;\n\n /\n Get a reference to the underlying textarea so we can directly apply values.\n * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically\n /\n @query('textarea')\n protected _textarea!: HTMLTextAreaElement;\n\n /\n The previous counterMode selected. This lets the counterMode state update\n * when the user toggles between both modes.\n /\n private _prevCounterMode: 'character' \| 'word' = this.counterMode;\n\n /\n Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when\n * cols is updated\n /\n private _resizeObserver?: ResizeObserver;\n\n render() {\n const { enableCounter, maxCount } = this;\n\n const textCount = this.value?.length ?? 0;\n const wordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n\n const invalidIcon = iconLoader(WarningFilled16, {\n class: `${prefix}--text-area__invalid-icon`,\n });\n\n const warnIcon = iconLoader(WarningAltFilled16, {\n class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,\n });\n\n const textareaClasses = classMap({\n [`${prefix}--text-area`]: true,\n [`${prefix}--text-area--warn`]: this.warn,\n [`${prefix}--text-area--invalid`]: this.invalid,\n [`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel,\n });\n\n const textareaWrapperClasses = classMap({\n [`${prefix}--text-area__wrapper`]: true,\n [`${prefix}--text-area__wrapper--cols`]: this.cols,\n [`${prefix}--text-area__wrapper--warn`]: this.warn,\n [`${prefix}--text-area__wrapper--readonly`]: this.readonly,\n });\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--visually-hidden`]: this.hideLabel,\n [`${prefix}--label--disabled`]: this.disabled,\n });\n\n const counterClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: this.disabled,\n [`${prefix}--text-area__label-counter`]: true,\n });\n\n const helperTextClasses = classMap({\n [`${prefix}--form__helper-text`]: true,\n [`${prefix}--form__helper-text--disabled`]: this.disabled,\n });\n\n const counter =\n enableCounter && maxCount\n ? html` <label class=\"${counterClasses}\">\n <slot name=\"label-text\"\n >${this.counterMode === 'word'\n ? wordCount\n : textCount}/${maxCount}</slot\n >\n </label>`\n : null;\n\n const icon = () => {\n if (this.invalid) {\n return invalidIcon;\n } else if (this.warn && !this.invalid) {\n return warnIcon;\n }\n return null;\n };\n\n const helper = html`\n <div class=\"${helperTextClasses}\" id=\"helper-text\">\n <slot name=\"helper-text\">${this.helperText}</slot>\n </div>\n `;\n\n const normalizedProps = {\n invalid: this.invalid,\n warn: this.warn,\n 'slot-name': this.invalid ? 'invalid-text' : 'warn-text',\n 'slot-text': this.invalid ? this.invalidText : this.warnText,\n };\n\n const validationMessage = html`\n <div\n class=\"${prefix}--form-requirement\"\n ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n <slot name=\"${normalizedProps['slot-name']}\">\n ${normalizedProps['slot-text']} ${this.isFluid ? icon() : null}\n </slot>\n </div>\n `;\n\n return html`\n <div class=\"${prefix}--text-area__label-wrapper\">\n <label class=\"${labelClasses}\" for=\"input\">\n <slot name=\"label-text\"> ${this.label} </slot>\n </label>\n ${counter}\n </div>\n <div class=\"${textareaWrapperClasses}\" ?data-invalid=\"${this.invalid}\">\n ${!this.isFluid ? icon() : null}\n <textarea\n autocomplete=\"${this.autocomplete}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${textareaClasses}\"\n cols=\"${ifDefined(this.cols)}\"\n ?data-invalid=\"${this.invalid}\"\n ?disabled=\"${this.disabled}\"\n id=\"input\"\n name=\"${ifNonEmpty(this.name)}\"\n pattern=\"${ifNonEmpty(this.pattern)}\"\n placeholder=\"${ifNonEmpty(this.placeholder)}\"\n ?readonly=\"${this.readonly}\"\n ?required=\"${this.required}\"\n rows=\"${ifDefined(this.rows)}\"\n .value=\"${this.value}\"\n maxlength=\"${this.counterMode === 'character'\n ? ifNonEmpty(this.maxCount)\n : ''}\"\n @keydown=\"${this._onKeyDown}\"\n @paste=\"${this._onPaste}\"\n @input=\"${this._handleInput}\"></textarea>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.isFluid\n ? html`\n <hr class=\"${prefix}--text-area__divider\" />\n ${validationMessage}\n `\n : null}\n </div>\n ${/ Non-fluid: validation and helper outside field wrapper / ''}\n ${!this.isFluid ? html` ${helper} ${validationMessage} ` : null}\n `;\n }\n updated(): void {\n super.updated?.();\n if (this.counterMode !== this._prevCounterMode) {\n const textarea = this._textarea;\n if (textarea) {\n if (this.counterMode === 'character') {\n textarea.setAttribute('maxlength', String(this.maxCount));\n } else {\n textarea.removeAttribute('maxlength');\n }\n }\n this._prevCounterMode = this.counterMode;\n }\n\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n if (!wrapper) return;\n\n this._resizeObserver = new ResizeObserver(() => {\n this._measureWrapper();\n });\n this._resizeObserver.observe(wrapper);\n }\n\n /\n Measures the width of the wrapper and applies that to the max-width of the\n * helper-text and invalid/warn-text\n */\n private _measureWrapper() {\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n\n const wrapperWidth = wrapper?.scrollWidth;\n\n const helper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form__helper-text`\n );\n const requirement = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form-requirement`\n );\n [helper, requirement].forEach((el) => {\n if (el) {\n el.style.maxWidth = `${wrapperWidth}px`;\n el.style.overflowWrap = 'break-word';\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._resizeObserver?.disconnect();\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}
1	+ {"version":3,"file":"textarea.js","names":["CDSTextInput","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/textarea/textarea.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2025\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CDSTextInput from '../text-input/text-input';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/\n Text area.\n \n @element cds-custom-textarea\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n /\n@customElement(`${prefix}-textarea`)\nclass CDSTextarea extends CDSTextInput {\n /\n Manually handles maxCount for counterMode = 'word'\n * @param event The keyboard event.\n /\n protected _onKeyDown(evt: KeyboardEvent) {\n if (!this.disabled && this.enableCounter && this.counterMode === 'word') {\n const currentWordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n if (\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === ' ') \|\|\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === 'Enter')\n ) {\n evt.preventDefault();\n }\n }\n }\n\n /\n Handles `onPaste` event on the `<input>`.\n * Manually handles maxCount for counterMode = 'word' when\n * the user is pasting text\n \n @param event The clipboard event.\n /\n protected _onPaste(evt: ClipboardEvent) {\n if (\n this.counterMode === 'word' &&\n this.enableCounter &&\n typeof this.maxCount !== 'undefined'\n ) {\n const existingWords: string[] =\n this._textarea.value.match(/\\p{L}+/gu) \|\| [];\n const pastedWords: string[] =\n evt.clipboardData?.getData('Text').match(/\\p{L}+/gu) \|\| [];\n\n const totalWords = existingWords.length + pastedWords.length;\n\n if (totalWords > this.maxCount) {\n evt.preventDefault();\n\n const allowedWords = existingWords\n .concat(pastedWords)\n .slice(0, this.maxCount);\n\n this._textarea.value = allowedWords.join(' ');\n this._textarea.dispatchEvent(\n new InputEvent('input', {\n inputType: 'insertFromPaste',\n data: allowedWords.join(' '),\n bubbles: true,\n })\n );\n }\n }\n }\n /\n Handles `oninput` event on the `<input>`.\n \n @param event The event.\n * @param event.target The event target.\n /\n protected _handleInput({ target }: Event) {\n this.value = (target as HTMLTextAreaElement).value;\n }\n\n /\n The number of columns for the textarea to show by default\n /\n @property({ type: Number })\n cols;\n\n /\n Specify whether the textarea is fluid or not\n /\n @property({ type: Boolean })\n isFluid = false;\n\n /\n Specify the method used for calculating the counter number\n /\n @property({\n type: String,\n reflect: true,\n hasChanged(newVal: string, oldVal: string) {\n if ((newVal === 'character' \|\| newVal === 'word') && newVal !== oldVal) {\n return true;\n }\n return false;\n },\n attribute: 'counter-mode',\n })\n counterMode: 'character' \| 'word' = 'character';\n\n /\n ID to link the `label` and `textarea`\n /\n @property()\n id = '';\n\n /\n Pattern to validate the textarea against for HTML validity checking\n /\n @property()\n pattern = '';\n\n /\n Boolean property to set the required status\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n The number of rows for the textarea to show by default\n /\n @property()\n rows = 4;\n\n /\n Get a reference to the underlying textarea so we can directly apply values.\n * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically\n /\n @query('textarea')\n protected _textarea!: HTMLTextAreaElement;\n\n /\n The previous counterMode selected. This lets the counterMode state update\n * when the user toggles between both modes.\n /\n private _prevCounterMode: 'character' \| 'word' = this.counterMode;\n\n /\n Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when\n * cols is updated\n /\n private _resizeObserver?: ResizeObserver;\n\n render() {\n const { enableCounter, maxCount } = this;\n\n const textCount = this.value?.length ?? 0;\n const wordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n\n const invalidIcon = iconLoader(WarningFilled16, {\n class: `${prefix}--text-area__invalid-icon`,\n });\n\n const warnIcon = iconLoader(WarningAltFilled16, {\n class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,\n });\n\n const textareaClasses = classMap({\n [`${prefix}--text-area`]: true,\n [`${prefix}--text-area--warn`]: this.warn,\n [`${prefix}--text-area--invalid`]: this.invalid,\n [`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel,\n });\n\n const textareaWrapperClasses = classMap({\n [`${prefix}--text-area__wrapper`]: true,\n [`${prefix}--text-area__wrapper--cols`]: this.cols,\n [`${prefix}--text-area__wrapper--warn`]: this.warn,\n [`${prefix}--text-area__wrapper--readonly`]: this.readonly,\n });\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--visually-hidden`]: this.hideLabel,\n [`${prefix}--label--disabled`]: this.disabled,\n });\n\n const counterClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: this.disabled,\n [`${prefix}--text-area__label-counter`]: true,\n });\n\n const helperTextClasses = classMap({\n [`${prefix}--form__helper-text`]: true,\n [`${prefix}--form__helper-text--disabled`]: this.disabled,\n });\n\n const counter =\n enableCounter && maxCount\n ? html` <label class=\"${counterClasses}\">\n <slot name=\"label-text\"\n >${this.counterMode === 'word'\n ? wordCount\n : textCount}/${maxCount}</slot\n >\n </label>`\n : null;\n\n const icon = () => {\n if (this.invalid) {\n return invalidIcon;\n } else if (this.warn && !this.invalid) {\n return warnIcon;\n }\n return null;\n };\n\n const helper = html`\n <div class=\"${helperTextClasses}\" id=\"helper-text\">\n <slot name=\"helper-text\">${this.helperText}</slot>\n </div>\n `;\n\n const normalizedProps = {\n invalid: this.invalid,\n warn: this.warn,\n 'slot-name': this.invalid ? 'invalid-text' : 'warn-text',\n 'slot-text': this.invalid ? this.invalidText : this.warnText,\n };\n\n const validationMessage = html`\n <div\n class=\"${prefix}--form-requirement\"\n ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n <slot name=\"${normalizedProps['slot-name']}\">\n ${normalizedProps['slot-text']} ${this.isFluid ? icon() : null}\n </slot>\n </div>\n `;\n\n return html`\n <div class=\"${prefix}--text-area__label-wrapper\">\n <label class=\"${labelClasses}\" for=\"input\">\n <slot name=\"label-text\"> ${this.label} </slot>\n </label>\n ${counter}\n </div>\n <div class=\"${textareaWrapperClasses}\" ?data-invalid=\"${this.invalid}\">\n ${!this.isFluid ? icon() : null}\n <textarea\n autocomplete=\"${this.autocomplete}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${textareaClasses}\"\n cols=\"${ifDefined(this.cols)}\"\n ?data-invalid=\"${this.invalid}\"\n ?disabled=\"${this.disabled}\"\n id=\"input\"\n name=\"${ifNonEmpty(this.name)}\"\n pattern=\"${ifNonEmpty(this.pattern)}\"\n placeholder=\"${ifNonEmpty(this.placeholder)}\"\n ?readonly=\"${this.readonly}\"\n ?required=\"${this.required}\"\n rows=\"${ifDefined(this.rows)}\"\n .value=\"${this.value}\"\n maxlength=\"${this.counterMode === 'character'\n ? ifNonEmpty(this.maxCount)\n : ''}\"\n @keydown=\"${this._onKeyDown}\"\n @paste=\"${this._onPaste}\"\n @input=\"${this._handleInput}\"></textarea>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.isFluid\n ? html`\n <hr class=\"${prefix}--text-area__divider\" />\n ${validationMessage}\n `\n : null}\n </div>\n ${/ Non-fluid: validation and helper outside field wrapper / ''}\n ${!this.isFluid ? html` ${helper} ${validationMessage} ` : null}\n `;\n }\n updated(): void {\n super.updated?.();\n if (this.counterMode !== this._prevCounterMode) {\n const textarea = this._textarea;\n if (textarea) {\n if (this.counterMode === 'character') {\n textarea.setAttribute('maxlength', String(this.maxCount));\n } else {\n textarea.removeAttribute('maxlength');\n }\n }\n this._prevCounterMode = this.counterMode;\n }\n\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n if (!wrapper) return;\n\n this._resizeObserver = new ResizeObserver(() => {\n this._measureWrapper();\n });\n this._resizeObserver.observe(wrapper);\n }\n\n /\n Measures the width of the wrapper and applies that to the max-width of the\n * helper-text and invalid/warn-text\n */\n private _measureWrapper() {\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n\n const wrapperWidth = wrapper?.scrollWidth;\n\n const helper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form__helper-text`\n );\n const requirement = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form-requirement`\n );\n [helper, requirement].forEach((el) => {\n if (el) {\n el.style.maxWidth = `${wrapperWidth}px`;\n el.style.overflowWrap = 'break-word';\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._resizeObserver?.disconnect();\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}

package/es-custom/components/textarea/textarea.scss.js CHANGED Viewed

@@ -6,10 +6,9 @@
  */
 import { css } from "lit";
 //#region src/components/textarea/textarea.scss?lit
 var textarea_default = css([".cds-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds-custom--fieldset{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--fieldset *,.cds-custom--fieldset :after,.cds-custom--fieldset :before{box-sizing:inherit}.cds-custom--form-item{align-items:flex-start;display:flex;flex:1 1 auto;flex-direction:column;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds-custom--label html{font-size:100%}.cds-custom--label body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds-custom--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--label strong{font-weight:600}.cds-custom--label{color:var(--cds-text-secondary,#525252);display:inline-block;font-weight:var(--cds-label-01-font-weight,400);font-weight:400;line-height:var(--cds-label-01-line-height,1.33333);line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds-custom--label,.cds-custom--label .cds-custom--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds-custom--label .cds-custom--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label--no-margin{margin-block-end:0}.cds-custom--label+.cds-custom--tooltip{inset-block-start:.2rem;inset-inline-start:.5rem;position:relative}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger *,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :after,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :before{box-sizing:inherit}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger::-moz-focus-inner{border:0}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger{align-items:center;display:flex;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);justify-content:center;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds-custom--label+.cds-custom--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label.cds-custom--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--label.cds-custom--skeleton:active,.cds-custom--label.cds-custom--skeleton:focus,.cds-custom--label.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--label.cds-custom--skeleton:before{animation:cds-custom--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds-custom--label.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--label.cds-custom--skeleton{background:CanvasText}.cds-custom--label.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--label.cds-custom--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds-custom--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper--warn~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box--warning~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--number__input-wrapper--warning~.cds-custom--form-requirement,.cds-custom--select--warning .cds-custom--select-input__wrapper~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper--warn~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning>.cds-custom--text-input~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker--warning~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds-custom--select--inline.cds-custom--select--warning .cds-custom--select-input--inline__wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement{display:inline-flex;inline-size:100%;margin:0;margin-block-end:0;max-block-size:100%;overflow:visible;padding-inline-start:.5rem}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{color:var(--cds-text-error,#da1e28)}.cds-custom--form--fluid .cds-custom--text-input__field-wrapper--warning,.cds-custom--form--fluid .cds-custom--text-input__field-wrapper[data-invalid]{display:block}.cds-custom--form--fluid input[data-invalid]{outline:none}.cds-custom--form--fluid .cds-custom--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds-custom--form-requirement html{font-size:100%}.cds-custom--form-requirement body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds-custom--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--form-requirement strong{font-weight:600}.cds-custom--form-requirement{display:none;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin:.25rem 0 0;max-block-size:0;overflow:hidden}.cds-custom--select--inline .cds-custom--form__helper-text{margin-block-start:0}.cds-custom--form__helper-text{color:var(--cds-text-helper,#6f6f6f);font-size:var(--cds-helper-text-01-font-size,.75rem);inline-size:100%;letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin-block-start:.25rem;opacity:1;z-index:0}.cds-custom--form__helper-text--disabled,.cds-custom--label--disabled,fieldset[disabled] .cds-custom--form__helper-text,fieldset[disabled] .cds-custom--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds-custom--text-area{border:0;box-sizing:border-box;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--text-area *,.cds-custom--text-area :after,.cds-custom--text-area :before{box-sizing:inherit}.cds-custom--text-area{background-color:var(--cds-field);block-size:100%;border:none;border-block-end:1px solid var(--cds-border-strong);color:var(--cds-text-primary,#161616);font-family:inherit;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);min-block-size:2.5rem;min-inline-size:10rem;outline:2px solid transparent;outline-offset:-2px;padding:.6875rem var(--cds-layout-density-padding-inline-local);resize:vertical;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--text-area:active,.cds-custom--text-area:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--text-area:active,.cds-custom--text-area:focus{outline-style:dotted}}.cds-custom--text-area::-moz-placeholder{color:var(--cds-text-placeholder,hsla(0,0%,9%,.4));font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);opacity:1}.cds-custom--text-area::placeholder{color:var(--cds-text-placeholder,hsla(0,0%,9%,.4));font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);opacity:1}.cds-custom--text-area--light{background-color:var(--cds-field-02,#fff)}.cds-custom--text-area__wrapper{--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));display:flex;inline-size:100%;max-inline-size:100%;position:relative}.cds-custom--text-area__wrapper--cols{inline-size:auto}.cds-custom--text-area__invalid-icon{position:absolute;fill:var(--cds-support-error,#da1e28);inset-block-start:.75rem;inset-inline-end:var(--cds-layout-density-padding-inline-local)}.cds-custom--text-area__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds-custom--text-area__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds-custom--text-area__counter-alert{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px}.cds-custom--form-item:has(.cds-custom--text-area__wrapper--cols){inline-size:-moz-fit-content;inline-size:fit-content}.cds-custom--text-area:disabled{background-color:var(--cds-field);border-block-end:1px solid transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed;outline:none;resize:none}.cds-custom--text-area:disabled::-moz-placeholder{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--text-area:disabled::placeholder{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--text-area__wrapper--readonly .cds-custom--text-area{background:transparent;border-block-end-color:var(--cds-border-subtle)}.cds-custom--text-area__wrapper--decorator .cds-custom--text-area__inner-wrapper--decorator>*,.cds-custom--text-area__wrapper--slug .cds-custom--ai-label,.cds-custom--text-area__wrapper--slug .cds-custom--slug{inset-block-start:.75rem;inset-inline-end:1rem;position:absolute}.cds-custom--text-area__wrapper--decorator .cds-custom--ai-label.cds-custom--ai-label--revert,.cds-custom--text-area__wrapper--slug .cds-custom--ai-label.cds-custom--ai-label--revert,.cds-custom--text-area__wrapper--slug .cds-custom--slug.cds-custom--slug--revert{inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}.cds-custom--text-area__wrapper--decorator .cds-custom--text-area:has(~.cds-custom--text-area__inner-wrapper--decorator .cds-custom--ai-label):not(:has(~.cds-custom--text-area__inner-wrapper--decorator .cds-custom--ai-label--revert)),.cds-custom--text-area__wrapper--slug .cds-custom--text-area:has(~.cds-custom--ai-label):not(:has(~.cds-custom--ai-label--revert)),.cds-custom--text-area__wrapper--slug .cds-custom--text-area:has(~.cds-custom--slug):not(:has(~.cds-custom--slug--revert)){background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds-custom--text-area__wrapper--decorator .cds-custom--text-area:has(~.cds-custom--text-area__inner-wrapper--decorator>*),.cds-custom--text-area__wrapper--slug .cds-custom--text-area:has(~.cds-custom--ai-label),.cds-custom--text-area__wrapper--slug .cds-custom--text-area:has(~.cds-custom--slug){padding-inline-end:2.5rem}.cds-custom--text-area--invalid:has(~.cds-custom--ai-label),.cds-custom--text-area--invalid:has(~.cds-custom--slug),.cds-custom--text-area--invalid:has(~.cds-custom--text-area__inner-wrapper--decorator>*),.cds-custom--text-area--warn:has(~.cds-custom--ai-label),.cds-custom--text-area--warn:has(~.cds-custom--slug),.cds-custom--text-area--warn:has(~.cds-custom--text-area__inner-wrapper--decorator>*){padding-inline-end:4rem}.cds-custom--text-area--invalid~.cds-custom--ai-label,.cds-custom--text-area--invalid~.cds-custom--slug,.cds-custom--text-area--invalid~.cds-custom--text-area__inner-wrapper--decorator>*,.cds-custom--text-area--warn~.cds-custom--ai-label,.cds-custom--text-area--warn~.cds-custom--slug,.cds-custom--text-area--warn~.cds-custom--text-area__inner-wrapper--decorator>*{inset-inline-end:2.5rem}.cds-custom--text-area--invalid~.cds-custom--ai-label.cds-custom--ai-label--revert,.cds-custom--text-area--invalid~.cds-custom--slug.cds-custom--slug--revert,.cds-custom--text-area--invalid~.cds-custom--text-area__inner-wrapper--decorator>.cds-custom--ai-label.cds-custom--ai-label--revert,.cds-custom--text-area--warn~.cds-custom--ai-label.cds-custom--ai-label--revert,.cds-custom--text-area--warn~.cds-custom--slug.cds-custom--slug--revert,.cds-custom--text-area--warn~.cds-custom--text-area__inner-wrapper--decorator>.cds-custom--ai-label.cds-custom--ai-label--revert{inset-inline-end:2rem}.cds-custom--text-area.cds-custom--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--text-area.cds-custom--skeleton:active,.cds-custom--text-area.cds-custom--skeleton:focus,.cds-custom--text-area.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--text-area.cds-custom--skeleton:before{animation:cds-custom--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds-custom--text-area.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--text-area.cds-custom--skeleton{background:CanvasText}.cds-custom--text-area.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--text-area.cds-custom--skeleton{block-size:6.25rem;inline-size:100%}.cds-custom--text-area.cds-custom--skeleton::-moz-placeholder{color:transparent}.cds-custom--text-area.cds-custom--skeleton::placeholder{color:transparent}.cds-custom--text-area__label-wrapper{display:flex;inline-size:100%;justify-content:space-between;position:relative}:host(cds-custom-textarea){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;outline:none}:host(cds-custom-textarea) ::slotted(cds-custom-ai-label),:host(cds-custom-textarea) ::slotted(cds-custom-slug){inset-block-start:.75rem;inset-inline-end:1rem;position:absolute}:host(cds-custom-textarea) ::slotted(cds-custom-ai-label[revert-active]),:host(cds-custom-textarea) ::slotted(cds-custom-slug[revert-active]){inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}:host(cds-custom-textarea) textarea:not([cols]),:host(cds-custom-textarea) textarea[cols=\"0\"],:host(cds-custom-textarea:not([cols])),:host(cds-custom-textarea[cols=\"0\"]){inline-size:100%}:host(cds-custom-textarea[invalid]) .cds-custom--text-area__wrapper--decorator .cds-custom--text-area,:host(cds-custom-textarea[warn]) .cds-custom--text-area__wrapper--decorator .cds-custom--text-area{padding-inline-end:4rem}:host(cds-custom-textarea[invalid]) ::slotted(cds-custom-ai-label),:host(cds-custom-textarea[invalid]) ::slotted(cds-custom-slug),:host(cds-custom-textarea[warn]) ::slotted(cds-custom-ai-label),:host(cds-custom-textarea[warn]) ::slotted(cds-custom-slug){inset-inline-end:2.5rem}:host(cds-custom-textarea[invalid]) ::slotted(cds-custom-ai-label[revert-active]),:host(cds-custom-textarea[invalid]) ::slotted(cds-custom-slug[revert-active]),:host(cds-custom-textarea[warn]) ::slotted(cds-custom-ai-label[revert-active]),:host(cds-custom-textarea[warn]) ::slotted(cds-custom-slug[revert-active]){inset-inline-end:2rem}:host(cds-custom-textarea[ai-label]) .cds-custom--text-area__wrapper--decorator{background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds-custom--text-area__wrapper--cols{display:inline-flex}"]);
 //#endregion
 export { textarea_default as default };
 //# sourceMappingURL=textarea.scss.js.map

package/es-custom/components/tile/clickable-tile.js CHANGED Viewed

@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import link_default from "../link/link.js";
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
+import "../../globals/shared-enums.js";
 import tile_default from "./tile.scss.js";
 import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import AILabel24 from "@carbon/icons/es/ai-label/24.js";
 //#region src/components/tile/clickable-tile.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -32,7 +31,7 @@ import AILabel24 from "@carbon/icons/es/ai-label/24.js";
 let CDSClickableTile = class CDSClickableTile extends link_default {
 	constructor(..._args) {
 		super(..._args);
-		this.colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
+		this.colorScheme = "";
 		this.linkRole = "button";
 		this.hasRoundedCorners = false;
 		this.aiLabel = false;
@@ -41,12 +40,12 @@ let CDSClickableTile = class CDSClickableTile extends link_default {
 	get _classes() {
 		const { colorScheme, disabled, hasRoundedCorners, aiLabel, slug } = this;
 		return classMap({
-			[`${prefix}--link`]: true,
-			[`${prefix}--link--disabled`]: disabled,
-			[`${prefix}--tile`]: true,
-			[`${prefix}--tile--clickable`]: true,
-			[`${prefix}--tile--${colorScheme}`]: colorScheme,
-			[`${prefix}--tile--slug-rounded`]: (aiLabel || slug) && hasRoundedCorners
+			[`cds-custom--link`]: true,
+			[`cds-custom--link--disabled`]: disabled,
+			[`cds-custom--tile`]: true,
+			[`cds-custom--tile--clickable`]: true,
+			[`cds-custom--tile--${colorScheme}`]: colorScheme,
+			[`cds-custom--tile--slug-rounded`]: (aiLabel || slug) && hasRoundedCorners
 		});
 	}
 	/**
@@ -68,7 +67,7 @@ let CDSClickableTile = class CDSClickableTile extends link_default {
 	_renderInner() {
 		return html`
       ${super._renderInner()}
-      ${this.aiLabel || this.slug ? iconLoader(AILabel24, { class: `${prefix}--tile--ai-label-icon` }) : ""}
+      ${this.aiLabel || this.slug ? iconLoader(AILabel24, { class: `cds-custom--tile--ai-label-icon` }) : ""}
       <slot name="decorator"></slot>
     `;
 	}
@@ -78,13 +77,13 @@ let CDSClickableTile = class CDSClickableTile extends link_default {
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-custom-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-custom-ai-label`;
 	}
 	static {
 		this.styles = tile_default;
@@ -104,9 +103,9 @@ __decorate([property({
 	attribute: "ai-label"
 })], CDSClickableTile.prototype, "aiLabel", void 0);
 __decorate([property({ type: Boolean })], CDSClickableTile.prototype, "slug", void 0);
-CDSClickableTile = __decorate([carbonElement(`${prefix}-clickable-tile`)], CDSClickableTile);
+CDSClickableTile = __decorate([carbonElement(`cds-custom-clickable-tile`)], CDSClickableTile);
 var clickable_tile_default = CDSClickableTile;
 //#endregion
 export { clickable_tile_default as default };
 //# sourceMappingURL=clickable-tile.js.map

package/es-custom/components/tile/clickable-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clickable-tile.js","names":["CDSLink","~~TILE_COLOR_SCHEME","~~styles","customElement"],"sources":["../../../src/components/tile/clickable-tile.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2024\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport AILabel24 from '@carbon/icons/es/ai-label/24.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n/\n Clickable tile.\n \n @element cds-custom-clickable-tile\n /\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n protected get _classes(): any {\n const { colorScheme, disabled, hasRoundedCorners, aiLabel, slug } = this;\n return classMap({\n [`${prefix}--link`]: true,\n [`${prefix}--link--disabled`]: disabled,\n [`${prefix}--tile`]: true,\n [`${prefix}--tile--clickable`]: true,\n [`${prefix}--tile--${colorScheme}`]: colorScheme,\n [`${prefix}--tile--slug-rounded`]: (aiLabel \|\| slug) && hasRoundedCorners,\n });\n }\n\n /\n The color scheme.\n \n @default\n /\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /\n The a11y role for `<a>`.\n /\n @property({ attribute: 'link-role' })\n linkRole = 'button';\n\n /\n Specify if the `ClickableTile` component should be rendered with rounded corners.\n * Only valid when `ai-label` prop is present\n /\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n @property({ type: Boolean, attribute: 'ai-label' })\n aiLabel = false;\n\n /\n deprecated - remove in v12\n /\n @property({ type: Boolean })\n slug = false;\n\n /\n If using `slug`, set `ai-label` attribute to true so\n * the styles are applied for slug as well\n \n remove in v12\n /\n connectedCallback() {\n if (this.slug) {\n this.setAttribute('ai-Label', '');\n this.aiLabel = true;\n }\n super.connectedCallback();\n }\n\n /\n @returns The inner content.\n /\n protected _renderInner() {\n return html`\n ${super._renderInner()}\n ${this.aiLabel \|\| this.slug\n ? iconLoader(AILabel24, { class: `${prefix}--tile--ai-label-icon` })\n : ''}\n <slot name=\"decorator\"></slot>\n `;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n */\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAsBA,~~6BACM~~,yBAAyBA,aAAQ~~;;;qBAoBvBC,0BAAkB~~;~~kBAMrB;~~2BAOS;iBAGV;cAMH;;CAxCP,IAAc,WAAgB;EAC5B,MAAM,EAAE,aAAa,UAAU,mBAAmB,SAAS,SAAS;AACpE,SAAO,SAAS;IACb,~~GAAG,OAAO,UAAU~~;IACpB,~~GAAG,OAAO,oBAAoB~~;IAC9B,~~GAAG,OAAO,UAAU~~;IACpB,~~GAAG,OAAO,qBAAqB~~;IAC/B,~~GAAG~~,~~OAAO,UAAU,~~gBAAgB;IACpC,~~GAAG~~,~~OAAO,yBAAyB,~~WAAW,SAAS;GACzD,CAAC;;;;;;;;CAuCJ,oBAAoB;AAClB,MAAI,KAAK,MAAM;AACb,QAAK,aAAa,YAAY,GAAG;AACjC,QAAK,UAAU;;AAEjB,QAAM,mBAAmB;;;;;CAM3B,~~AAAU,eAAe~~;AACvB,SAAO,IAAI;QACP,MAAM,cAAc,CAAC;QACrB,KAAK,WAAW,KAAK,OACnB,WAAW,WAAW,EAAE,OAAO,~~GAAG~~,~~OAAO,wBAAwB,~~CAAC,GAClE,GAAG;;;;;;;;;CAUX,WAAW,WAAW;AACpB,SAAO~~,GAAG,OAAO~~;;;;;~~CAMnB~~,WAAW,cAAc;AACvB,SAAO~~,GAAG,OAAO~~;;;~~gBAGHC~~;;;YApEf,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC;YAMtD,SAAS,EAAE,WAAW,aAAa,CAAC;YAOpC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC;YAG7D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,CAAC;YAMlD,SAAS,EAAE,MAAM,SAAS,CAAC;+BA1C7BC,cAAc,~~GAAG~~,~~OAAO~~,~~iBAAiB~~;AA2F1C,~~6BAAe~~"}
1	+ {"version":3,"file":"clickable-tile.js","names":["CDSLink","styles","customElement"],"sources":["../../../src/components/tile/clickable-tile.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2024\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport AILabel24 from '@carbon/icons/es/ai-label/24.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n/\n Clickable tile.\n \n @element cds-custom-clickable-tile\n /\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n protected get _classes(): any {\n const { colorScheme, disabled, hasRoundedCorners, aiLabel, slug } = this;\n return classMap({\n [`${prefix}--link`]: true,\n [`${prefix}--link--disabled`]: disabled,\n [`${prefix}--tile`]: true,\n [`${prefix}--tile--clickable`]: true,\n [`${prefix}--tile--${colorScheme}`]: colorScheme,\n [`${prefix}--tile--slug-rounded`]: (aiLabel \|\| slug) && hasRoundedCorners,\n });\n }\n\n /\n The color scheme.\n \n @default\n /\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /\n The a11y role for `<a>`.\n /\n @property({ attribute: 'link-role' })\n linkRole = 'button';\n\n /\n Specify if the `ClickableTile` component should be rendered with rounded corners.\n * Only valid when `ai-label` prop is present\n /\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n @property({ type: Boolean, attribute: 'ai-label' })\n aiLabel = false;\n\n /\n deprecated - remove in v12\n /\n @property({ type: Boolean })\n slug = false;\n\n /\n If using `slug`, set `ai-label` attribute to true so\n * the styles are applied for slug as well\n \n remove in v12\n /\n connectedCallback() {\n if (this.slug) {\n this.setAttribute('ai-Label', '');\n this.aiLabel = true;\n }\n super.connectedCallback();\n }\n\n /\n @returns The inner content.\n /\n protected _renderInner() {\n return html`\n ${super._renderInner()}\n ${this.aiLabel \|\| this.slug\n ? iconLoader(AILabel24, { class: `${prefix}--tile--ai-label-icon` })\n : ''}\n <slot name=\"decorator\"></slot>\n `;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n */\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,mBAAA,MACM,yBAAyBA,aAAQ;;;;kBA0B1B;2BAOS;iBAGV;cAMH;;CAxCP,IAAc,WAAgB;EAC5B,MAAM,EAAE,aAAa,UAAU,mBAAmB,SAAS,SAAS;AACpE,SAAO,SAAS;IACb,cAAoB;IACpB,wBAA8B;IAC9B,cAAoB;IACpB,yBAA+B;IAC/B,cAAoB,gBAAgB;IACpC,6BAAmC,WAAW,SAAS;GACzD,CAAC;;;;;;;;CAuCJ,oBAAoB;AAClB,MAAI,KAAK,MAAM;AACb,QAAK,aAAa,YAAY,GAAG;AACjC,QAAK,UAAU;;AAEjB,QAAM,mBAAmB;;;;;CAM3B,eAAyB;AACvB,SAAO,IAAI;QACP,MAAM,cAAc,CAAC;QACrB,KAAK,WAAW,KAAK,OACnB,WAAW,WAAW,EAAE,OAAO,4BAAkC,CAAC,GAClE,GAAG;;;;;;;;;CAUX,WAAW,WAAW;AACpB,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOC;;;YApEf,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,eAAA,KAAA,EAAA;YAMtD,SAAS,EAAE,WAAW,aAAa,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAOpC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC,CAAA,EAAA,iBAAA,WAAA,qBAAA,KAAA,EAAA;YAG7D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,CAAC,CAAA,EAAA,iBAAA,WAAA,WAAA,KAAA,EAAA;YAMlD,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;+BA1C7BC,cAAc,qBAA2B,CAAA,EAAA,iBAAA;AA2F1C,IAAA,yBAAe"}

package/es-custom/components/tile/defs.js CHANGED Viewed

@@ -6,5 +6,4 @@
  */
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
-export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME };
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME };

package/es-custom/components/tile/expandable-tile.js CHANGED Viewed

@@ -5,21 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
+import "../../globals/shared-enums.js";
 import tile_default from "./tile.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import ChevronDown16 from "@carbon/icons/es/chevron--down/16.js";
 //#region src/components/tile/expandable-tile.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -44,7 +43,7 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
 		this._handleClick = () => {
 			if (!this.withInteractive) this._handleExpand();
 		};
-		this.colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
+		this.colorScheme = "";
 		this.expanded = false;
 		this.hasRoundedCorners = false;
 		this.withInteractive = false;
@@ -101,8 +100,8 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
 		return html`
       <button
         class="${classMap({
-			[`${prefix}--tile__chevron`]: true,
-			[`${prefix}--tile__chevron--interactive`]: withInteractive
+			[`cds-custom--tile__chevron`]: true,
+			[`cds-custom--tile__chevron--interactive`]: withInteractive
 		})}"
         aria-labelledby="above-the-fold-content"
         aria-controls="below-the-fold-content"
@@ -114,10 +113,10 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
       <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
       <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
       <slot name="decorator"></slot>
-      <div id="content" class="${prefix}--tile-content">
+      <div id="content" class="${"cds-custom"}--tile-content">
         <div><slot name="above-the-fold-content"></slot></div>
         <div
-          class="${prefix}-ce--expandable-tile--below-the-fold-content"
+          class="${"cds-custom"}-ce--expandable-tile--below-the-fold-content"
           style="${ifDefined(!expanded ? void 0 : `max-height: ${belowTheContentHeight}px`)}">
           <slot @slotchange="${handleSlotChangeBelowTheFoldContent}"></slot>
         </div>
@@ -130,26 +129,26 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-custom-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-custom-ai-label`;
 	}
 	/**
 	* The name of the custom event fired before the expanded state is changed upon a user gesture.
 	* Cancellation of this event stops changing the user-initiated change in expanded state.
 	*/
 	static get eventBeforeToggle() {
-		return `${prefix}-expandable-tile-beingtoggled`;
+		return `cds-custom-expandable-tile-beingtoggled`;
 	}
 	/**
 	* The name of the custom event fired after a the expanded state is changed upon a user gesture.
 	*/
 	static get eventToggle() {
-		return `${prefix}-expandable-tile-toggled`;
+		return `cds-custom-expandable-tile-toggled`;
 	}
 	static {
 		this.styles = tile_default;
@@ -173,9 +172,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "with-interactive"
 })], CDSExpandableTile.prototype, "withInteractive", void 0);
-CDSExpandableTile = __decorate([carbonElement(`${prefix}-expandable-tile`)], CDSExpandableTile);
+CDSExpandableTile = __decorate([carbonElement(`cds-custom-expandable-tile`)], CDSExpandableTile);
 var expandable_tile_default = CDSExpandableTile;
 //#endregion
 export { expandable_tile_default as default };
 //# sourceMappingURL=expandable-tile.js.map

package/es-custom/components/tile/expandable-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expandable-tile.js","names":["~~TILE_COLOR_SCHEME","~~styles","customElement"],"sources":["../../../src/components/tile/expandable-tile.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Expandable tile.\n \n @element cds-custom-expandable-tile\n * @fires cds-custom-expandable-tile-beingtoggled\n * The custom event fired before the expanded state is changed upon a user gesture.\n * Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-custom-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n /\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n The computed height of the below-the-fold content.\n /\n private _belowTheContentHeight = 0;\n\n /\n `true` if there is an AI Label.\n /\n protected _hasAILabel = false;\n\n /\n Handles `slotchange` event.\n /\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSExpandableTile)?.aiLabelItem\n ) \|\|\n // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSExpandableTile)?.slugItem\n )\n : false\n );\n\n if (hasContent.length > 0) {\n this._hasAILabel = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n }\n this.requestUpdate();\n }\n\n /\n Handles `slotchange` event on the below-the-fold content.\n \n @param event The event.\n /\n private _handleSlotChangeBelowTheFoldContent(event: Event) {\n this._belowTheContentHeight = (event.target as HTMLSlotElement)\n .assignedNodes()\n .reduce(\n (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n 0\n );\n\n if (!this._belowTheContentHeight) {\n const element = getComputedStyle(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n this.querySelector('cds-custom-tile-below-the-fold-content') as any\n );\n this._belowTheContentHeight = parseInt(element.height, 10);\n }\n this.requestUpdate();\n }\n\n private _handleExpand() {\n const expanded = !this.expanded;\n this.focus();\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n const constructor = this.constructor as typeof CDSExpandableTile;\n const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n ...init,\n cancelable: true,\n });\n if (this.dispatchEvent(beforeChangeEvent)) {\n this.expanded = expanded;\n const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n this.dispatchEvent(afterChangeEvent);\n }\n }\n\n @HostListener('click')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = () => {\n if (!this.withInteractive) {\n this._handleExpand();\n }\n };\n\n /\n The color scheme.\n /\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /\n `true` to expand this expandable tile.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n Specify if the `ExpandableTile` component should be rendered with rounded corners.\n * Only valid when `ai-label` prop is present\n /\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n /\n `true` to expand this expandable tile.\n /\n @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n withInteractive = false;\n\n updated() {\n if (this._hasAILabel) {\n this.setAttribute('ai-label', '');\n } else {\n this.removeAttribute('ai-label');\n }\n }\n\n render() {\n const {\n expanded,\n withInteractive,\n _belowTheContentHeight: belowTheContentHeight,\n _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n } = this;\n\n const classes = classMap({\n [`${prefix}--tile__chevron`]: true,\n [`${prefix}--tile__chevron--interactive`]: withInteractive,\n });\n return html`\n <button\n class=\"${classes}\"\n aria-labelledby=\"above-the-fold-content\"\n aria-controls=\"below-the-fold-content\"\n tabindex=\"0\"\n @click=\"${withInteractive ? this._handleExpand : ''}\"\n aria-expanded=\"${String(expanded)}\">\n ${iconLoader(ChevronDown16, { id: 'icon' })}\n </button>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"decorator\"></slot>\n <div id=\"content\" class=\"${prefix}--tile-content\">\n <div><slot name=\"above-the-fold-content\"></slot></div>\n <div\n class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n style=\"${ifDefined(\n !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n )}\">\n <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n </div>\n </div>\n `;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n /\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n /\n The name of the custom event fired before the expanded state is changed upon a user gesture.\n * Cancellation of this event stops changing the user-initiated change in expanded state.\n /\n static get eventBeforeToggle() {\n return `${prefix}-expandable-tile-beingtoggled`;\n }\n\n /\n The name of the custom event fired after a the expanded state is changed upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-expandable-tile-toggled`;\n }\n\n static styles = styles;\n}\n\nexport default CDSExpandableTile;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8BA,~~8BACM~~,0BAA0B,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;gCAIvC;qBAKT;4BA2EK;AAC3B,OAAI,CAAC,KAAK,gBACR,MAAK,eAAe~~;;qBAQVA,0BAAkB~~;~~kBAMrB;~~2BAOS;yBAMF;;;;;CAnGlB,~~AAAU~~,~~kBAAkB,~~EAAE,UAAiB;EAC7C,MAAM,aAAc,OACjB,eAAe,CACf,QAAQ,SACN,KAAqB,YAAY,~~SAC7B~~,KAAqB,QACnB,KAAK,aAA0C,YACjD,IAEA,KAAqB,QACnB,KAAK,aAA0C,SACjD,GACD,MACL;AAEH,MAAI,WAAW,SAAS,GAAG;AACzB,QAAK,cAAc,QAAQ,WAAW;~~AACtC~~,~~GAAC~~,~~WAAW,~~GAAmB,aAAa,QAAQ,KAAK;;AAE3D,OAAK,eAAe;;;;;;;CAQtB,~~AAAQ~~,~~qCAAqC,~~OAAc;AACzD,OAAK,yBAA0B,MAAM,OAClC,eAAe,CACf,QACE,KAAK,SAAS,OAAQ,KAAqB,gBAAgB,IAC5D,EACD;AAEH,MAAI,CAAC,KAAK,wBAAwB;GAChC,MAAM,UAAU,iBAEd,KAAK,cAAc,kCAAkC,CACtD;AACD,QAAK,yBAAyB,SAAS,QAAQ,QAAQ,GAAG;;AAE5D,OAAK,eAAe;;CAGtB,~~AAAQ,gBAAgB~~;EACtB,MAAM,WAAW,CAAC,KAAK;AACvB,OAAK,OAAO;EACZ,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,UACD;GACF;EACD,MAAM,cAAc,KAAK;EACzB,MAAM,oBAAoB,IAAI,YAAY,YAAY,mBAAmB;GACvE,GAAG;GACH,YAAY;GACb,CAAC;AACF,MAAI,KAAK,cAAc,kBAAkB,EAAE;AACzC,QAAK,WAAW;GAChB,MAAM,mBAAmB,IAAI,YAAY,YAAY,aAAa,KAAK;AACvE,QAAK,cAAc,iBAAiB;;;CAsCxC,UAAU;AACR,MAAI,KAAK,YACP,MAAK,aAAa,YAAY,GAAG;MAEjC,MAAK,gBAAgB,WAAW;;CAIpC,SAAS;EACP,MAAM,EACJ,UACA,iBACA,wBAAwB,uBACxB,sCAAsC,wCACpC;AAMJ,SAAO,IAAI;;iBAJK,SAAS;IACtB,~~GAAG,OAAO,mBAAmB~~;IAC7B,~~GAAG,OAAO,gCAAgC~~;GAC5C,CAAC,CAGmB;;;;kBAIP,kBAAkB,KAAK,gBAAgB,GAAG;yBACnC,OAAO,SAAS,CAAC;UAChC,WAAW,eAAe,EAAE,IAAI,QAAQ,CAAC,CAAC;;2CAET,KAAK,kBAAkB;uCAC3B,KAAK,kBAAkB;;~~iCAE7B,OAAO~~;;;~~mBAGrB,OAAO~~;mBACP,UACP,CAAC,WAAW,~~SAAY~~,eAAe,sBAAsB,IAC9D,CAAC;+BACmB,oCAAoC;;;;;;;;;;CAWjE,WAAW,WAAW;AACpB,SAAO~~,GAAG,OAAO~~;;;;;~~CAMnB~~,WAAW,cAAc;AACvB,SAAO~~,GAAG,OAAO~~;;;;;;~~CAOnB~~,WAAW,oBAAoB;AAC7B,SAAO~~,GAAG,OAAO~~;;;;;~~CAMnB~~,WAAW,cAAc;AACvB,SAAO~~,GAAG,OAAO~~;;;~~gBAGHC~~;;;YA/Gf,aAAa,QAAQ;YAYrB,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC;YAMtD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAO1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC;YAM7D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC;gCAjH3EC,cAAc,~~GAAG~~,~~OAAO~~,~~kBAAkB~~;AAoM3C,~~8BAAe~~"}
1	+ {"version":3,"file":"expandable-tile.js","names":["styles","customElement"],"sources":["../../../src/components/tile/expandable-tile.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Expandable tile.\n \n @element cds-custom-expandable-tile\n * @fires cds-custom-expandable-tile-beingtoggled\n * The custom event fired before the expanded state is changed upon a user gesture.\n * Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-custom-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n /\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n The computed height of the below-the-fold content.\n /\n private _belowTheContentHeight = 0;\n\n /\n `true` if there is an AI Label.\n /\n protected _hasAILabel = false;\n\n /\n Handles `slotchange` event.\n /\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSExpandableTile)?.aiLabelItem\n ) \|\|\n // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSExpandableTile)?.slugItem\n )\n : false\n );\n\n if (hasContent.length > 0) {\n this._hasAILabel = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n }\n this.requestUpdate();\n }\n\n /\n Handles `slotchange` event on the below-the-fold content.\n \n @param event The event.\n /\n private _handleSlotChangeBelowTheFoldContent(event: Event) {\n this._belowTheContentHeight = (event.target as HTMLSlotElement)\n .assignedNodes()\n .reduce(\n (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n 0\n );\n\n if (!this._belowTheContentHeight) {\n const element = getComputedStyle(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n this.querySelector('cds-custom-tile-below-the-fold-content') as any\n );\n this._belowTheContentHeight = parseInt(element.height, 10);\n }\n this.requestUpdate();\n }\n\n private _handleExpand() {\n const expanded = !this.expanded;\n this.focus();\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n const constructor = this.constructor as typeof CDSExpandableTile;\n const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n ...init,\n cancelable: true,\n });\n if (this.dispatchEvent(beforeChangeEvent)) {\n this.expanded = expanded;\n const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n this.dispatchEvent(afterChangeEvent);\n }\n }\n\n @HostListener('click')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = () => {\n if (!this.withInteractive) {\n this._handleExpand();\n }\n };\n\n /\n The color scheme.\n /\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /\n `true` to expand this expandable tile.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n Specify if the `ExpandableTile` component should be rendered with rounded corners.\n * Only valid when `ai-label` prop is present\n /\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n /\n `true` to expand this expandable tile.\n /\n @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n withInteractive = false;\n\n updated() {\n if (this._hasAILabel) {\n this.setAttribute('ai-label', '');\n } else {\n this.removeAttribute('ai-label');\n }\n }\n\n render() {\n const {\n expanded,\n withInteractive,\n _belowTheContentHeight: belowTheContentHeight,\n _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n } = this;\n\n const classes = classMap({\n [`${prefix}--tile__chevron`]: true,\n [`${prefix}--tile__chevron--interactive`]: withInteractive,\n });\n return html`\n <button\n class=\"${classes}\"\n aria-labelledby=\"above-the-fold-content\"\n aria-controls=\"below-the-fold-content\"\n tabindex=\"0\"\n @click=\"${withInteractive ? this._handleExpand : ''}\"\n aria-expanded=\"${String(expanded)}\">\n ${iconLoader(ChevronDown16, { id: 'icon' })}\n </button>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"decorator\"></slot>\n <div id=\"content\" class=\"${prefix}--tile-content\">\n <div><slot name=\"above-the-fold-content\"></slot></div>\n <div\n class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n style=\"${ifDefined(\n !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n )}\">\n <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n </div>\n </div>\n `;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n /\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n /\n The name of the custom event fired before the expanded state is changed upon a user gesture.\n * Cancellation of this event stops changing the user-initiated change in expanded state.\n /\n static get eventBeforeToggle() {\n return `${prefix}-expandable-tile-beingtoggled`;\n }\n\n /\n The name of the custom event fired after a the expanded state is changed upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-expandable-tile-toggled`;\n }\n\n static styles = styles;\n}\n\nexport default CDSExpandableTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;gCAIvC;qBAKT;4BA2EK;AAC3B,OAAI,CAAC,KAAK,gBACR,MAAK,eAAe;;;kBAcb;2BAOS;yBAMF;;;;;CAnGlB,kBAA4B,EAAE,UAAiB;EAC7C,MAAM,aAAc,OACjB,eAAe,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,aAA0C,YACjD,IAEA,KAAqB,QACnB,KAAK,aAA0C,SACjD,GACD,MACL;AAEH,MAAI,WAAW,SAAS,GAAG;AACzB,QAAK,cAAc,QAAQ,WAAW;AACrC,cAAW,GAAmB,aAAa,QAAQ,KAAK;;AAE3D,OAAK,eAAe;;;;;;;CAQtB,qCAA6C,OAAc;AACzD,OAAK,yBAA0B,MAAM,OAClC,eAAe,CACf,QACE,KAAK,SAAS,OAAQ,KAAqB,gBAAgB,IAC5D,EACD;AAEH,MAAI,CAAC,KAAK,wBAAwB;GAChC,MAAM,UAAU,iBAEd,KAAK,cAAc,kCAAkC,CACtD;AACD,QAAK,yBAAyB,SAAS,QAAQ,QAAQ,GAAG;;AAE5D,OAAK,eAAe;;CAGtB,gBAAwB;EACtB,MAAM,WAAW,CAAC,KAAK;AACvB,OAAK,OAAO;EACZ,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,UACD;GACF;EACD,MAAM,cAAc,KAAK;EACzB,MAAM,oBAAoB,IAAI,YAAY,YAAY,mBAAmB;GACvE,GAAG;GACH,YAAY;GACb,CAAC;AACF,MAAI,KAAK,cAAc,kBAAkB,EAAE;AACzC,QAAK,WAAW;GAChB,MAAM,mBAAmB,IAAI,YAAY,YAAY,aAAa,KAAK;AACvE,QAAK,cAAc,iBAAiB;;;CAsCxC,UAAU;AACR,MAAI,KAAK,YACP,MAAK,aAAa,YAAY,GAAG;MAEjC,MAAK,gBAAgB,WAAW;;CAIpC,SAAS;EACP,MAAM,EACJ,UACA,iBACA,wBAAwB,uBACxB,sCAAsC,wCACpC;AAMJ,SAAO,IAAI;;iBAJK,SAAS;IACtB,uBAA6B;IAC7B,oCAA0C;GAC5C,CAAC,CAGmB;;;;kBAIP,kBAAkB,KAAK,gBAAgB,GAAG;yBACnC,OAAO,SAAS,CAAC;UAChC,WAAW,eAAe,EAAE,IAAI,QAAQ,CAAC,CAAC;;2CAET,KAAK,kBAAkB;uCAC3B,KAAK,kBAAkB;;uCAEtB;;;yBAGd;mBACP,UACP,CAAC,WAAW,KAAA,IAAY,eAAe,sBAAsB,IAC9D,CAAC;+BACmB,oCAAoC;;;;;;;;;;CAWjE,WAAW,WAAW;AACpB,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;;;;CAOT,WAAW,oBAAoB;AAC7B,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOA;;;YA/Gf,aAAa,QAAQ,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAYrB,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAMtD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC,CAAA,EAAA,kBAAA,WAAA,qBAAA,KAAA,EAAA;YAM7D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,kBAAA,WAAA,mBAAA,KAAA,EAAA;gCAjH3EC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AAoM3C,IAAA,0BAAe"}