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/side-panel/side-panel.js CHANGED Viewed

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix, selectorTabbable } from "../../globals/settings.js";
+import { selectorTabbable } from "../../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 HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -21,7 +21,6 @@ import { property, query, queryAssignedElements, state } from "lit/decorators.js
 import Close20 from "@carbon/icons/es/close/20.js";
 import ArrowLeft16 from "@carbon/icons/es/arrow--left/16.js";
 import { moderate02 } from "@carbon/motion";
 //#region src/components/side-panel/side-panel.ts
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -31,8 +30,8 @@ import { moderate02 } from "@carbon/motion";
 */
 const PRECEDING = Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 const FOLLOWING = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
-const blockClass = `${prefix}--side-panel`;
-const blockClassActionSet = `${prefix}--action-set`;
+const blockClass = `cds-custom--side-panel`;
+const blockClassActionSet = `cds-custom--action-set`;
 /**
 * Observes resize of the given element with the given resize observer.
 *
@@ -146,11 +145,11 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 			else this._isOpen = this.open;
 		};
 		this._checkUpdateIconButtonSizes = () => {
-			const slug = this.querySelector(`${prefix}-slug`);
+			const slug = this.querySelector(`cds-custom-slug`);
 			const otherButtons = this?.shadowRoot?.querySelectorAll("#nav-back-button, #close-button");
 			let iconButtonSize = "sm";
 			if (slug || otherButtons?.length) {
-				if ((this?.querySelectorAll?.(`${prefix}-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
+				if ((this?.querySelectorAll?.(`cds-custom-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
 			}
 			if (slug) slug?.setAttribute("size", iconButtonSize);
 			if (otherButtons) [...otherButtons].forEach((btn) => {
@@ -200,10 +199,10 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this.includeOverlay = false;
 		this.navigationBackIconDescription = "Back";
 		this.open = false;
-		this.placement = SIDE_PANEL_PLACEMENT.RIGHT;
+		this.placement = "right";
 		this.preventCloseOnClickOutside = false;
 		this.selectorPageContent = "";
-		this.size = SIDE_PANEL_SIZE.MEDIUM;
+		this.size = "md";
 		this.slideIn = false;
 	}
 	/**
@@ -249,10 +248,12 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 	}
 	_handleSlugChange(e) {
 		this._checkUpdateIconButtonSizes();
-		this._hasSlug = e.target.assignedElements().length > 0;
+		const childItems = e.target.assignedElements();
+		this._hasSlug = childItems.length > 0;
 	}
 	_handleSubtitleChange(e) {
-		this._hasSubtitle = (e.target?.assignedElements()).length > 0;
+		const subtitle = e.target?.assignedElements();
+		this._hasSubtitle = subtitle.length > 0;
 	}
 	_handleActionToolbarChange(e) {
 		const toolbarActions = e.target?.assignedElements();
@@ -324,7 +325,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
               aria-label=${navigationBackIconDescription}
               kind="ghost"
               size="sm"
-              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}
+              class=${`cds-custom--btn ${blockClass}__navigation-back-button`}
               @click=${this._handleNavigateBack}>
               ${iconLoader(ArrowLeft16, { slot: "icon" })}
               <span slot="tooltip-content">
@@ -481,19 +482,19 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 	* Cancellation of this event stops the user-initiated action of closing this side-panel.
 	*/
 	static get eventBeforeClose() {
-		return `${prefix}-side-panel-beingclosed`;
+		return `cds-custom-side-panel-beingclosed`;
 	}
 	/**
 	* The name of the custom event fired after this side-panel is closed upon a user gesture.
 	*/
 	static get eventClose() {
-		return `${prefix}-side-panel-closed`;
+		return `cds-custom-side-panel-closed`;
 	}
 	/**
 	* The name of the custom event fired on clicking the navigate back button
 	*/
 	static get eventNavigateBack() {
-		return `${prefix}-side-panel-navigate-back`;
+		return `cds-custom-side-panel-navigate-back`;
 	}
 };
 __decorate([query("#start-sentinel")], CDSSidePanel.prototype, "_startSentinelNode", void 0);
@@ -506,7 +507,7 @@ __decorate([query(`.${blockClass}__subtitle-text`)], CDSSidePanel.prototype, "_s
 __decorate([query(`.${blockClass}__inner-content`)], CDSSidePanel.prototype, "_innerContent", void 0);
 __decorate([queryAssignedElements({
 	slot: "actions",
-	selector: `${prefix}-button`
+	selector: `cds-custom-button`
 })], CDSSidePanel.prototype, "_actions", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_isOpen", void 0);
@@ -584,9 +585,9 @@ __decorate([property({
 	reflect: false,
 	type: String
 })], CDSSidePanel.prototype, "title", void 0);
-CDSSidePanel = __decorate([carbonElement(`${prefix}-side-panel`)], CDSSidePanel);
+CDSSidePanel = __decorate([carbonElement(`cds-custom-side-panel`)], CDSSidePanel);
 var side_panel_default = CDSSidePanel;
 //#endregion
 export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE, side_panel_default as default };
 //# sourceMappingURL=side-panel.js.map

package/es-custom/components/side-panel/side-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-panel.js","names":["customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 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 { LitElement, html } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16.js';\nimport Close20 from '@carbon/icons/es/close/20.js';\nimport { moderate02 } from '@carbon/motion';\nimport '../button/index';\nimport '../icon-button/index';\nimport '../layer/index';\nimport Handle from '../../globals/internal/handle';\nimport '../button/button-set-base';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst PRECEDING =\n Node.DOCUMENT_POSITION_PRECEDING \| Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n Node.DOCUMENT_POSITION_FOLLOWING \| Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--side-panel`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/\n Observes resize of the given element with the given resize observer.\n \n @param observer The resize observer.\n * @param elem The element to observe the resize.\n /\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n if (!elem) {\n return null;\n }\n observer.observe(elem);\n return {\n release() {\n observer.unobserve(elem);\n return null;\n },\n } as Handle;\n};\n\n/\n Tries to focus on the given elements and bails out if one of them is successful.\n \n @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n /\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n if (!reverse) {\n for (let i = 0; i < elems.length; ++i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n } else {\n for (let i = elems.length - 1; i >= 0; --i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n }\n return false;\n}\n\n/\n SidePanel.\n \n @deprecated Use Carbon for IBM Products `side-panel` component.\n * This component has been deprecated in `@carbon/web-components` and will instead be maintained\n * in the Carbon for IBM Products library:\n * https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-custom-side-panel\n * @csspart dialog The dialog.\n * @fires cds-custom-side-panel-beingclosed\n * The custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires cds-custom-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires cds-custom-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n /\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n /\n The handle for observing resize of the parent element of this element.\n /\n private _hObserveResize: Handle \| null = null;\n\n /\n The element that had focus before this side-panel gets open.\n /\n private _launcher: Element \| null = null;\n\n /\n Node to track focus going outside of side-panel content.\n /\n @query('#start-sentinel')\n private _startSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track focus going outside of side-panel content.\n /\n @query('#end-sentinel')\n private _endSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track side panel.\n /\n @query(`.${blockClass}`)\n private _sidePanel!: HTMLDivElement;\n\n @query(`.${blockClass}__animated-scroll-wrapper`)\n private _animateScrollWrapper?: HTMLElement;\n\n @query(`.${blockClass}__label-text`)\n private _label!: HTMLElement;\n\n @query(`.${blockClass}__title-text`)\n private _title!: HTMLElement;\n\n @query(`.${blockClass}__subtitle-text`)\n private _subtitle!: HTMLElement;\n\n @query(`.${blockClass}__inner-content`)\n private _innerContent!: HTMLElement;\n\n @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n private _actions!: Array<HTMLElement>;\n\n @state()\n _doAnimateTitle = true;\n\n @state()\n _isOpen = false;\n\n @state()\n _containerScrollTop = -16;\n\n @state()\n _hasSubtitle = false;\n\n @state()\n _hasSlug = false;\n\n @state()\n _hasActionToolbar = false;\n\n @state()\n _actionsCount = 0;\n\n @state()\n _slugCloseSize = 'sm';\n\n /\n Handles `blur` event on this element.\n \n @param event The event.\n * @param event.target The event target.\n * @param event.relatedTarget The event relatedTarget.\n /\n @HostListener('shadowRoot:focusout')\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 _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n const {\n open,\n _startSentinelNode: startSentinelNode,\n _endSentinelNode: endSentinelNode,\n } = this;\n\n const oldContains = target !== this && this.contains(target as Node);\n const currentContains =\n relatedTarget !== this &&\n (this.contains(relatedTarget as Node) \|\|\n (this.shadowRoot?.contains(relatedTarget as Node) &&\n relatedTarget !== (startSentinelNode as Node) &&\n relatedTarget !== (endSentinelNode as Node)));\n\n // Performs focus wrapping if _all_ of the following is met:\n // This side-panel is open\n // * The viewport still has focus\n // * SidePanel body used to have focus but no longer has focus\n const { selectorTabbable: selectorTabbableForSidePanel } = this\n .constructor as typeof CDSSidePanel;\n\n if (open && relatedTarget && oldContains && !currentContains) {\n const comparisonResult = (target as Node).compareDocumentPosition(\n relatedTarget as Node\n );\n\n if (relatedTarget === startSentinelNode \|\| comparisonResult & PRECEDING) {\n await (this.constructor as typeof CDSSidePanel)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForSidePanel),\n true\n ) &&\n relatedTarget !== this\n ) {\n this.focus();\n }\n } else if (\n relatedTarget === endSentinelNode \|\|\n comparisonResult & FOLLOWING\n ) {\n await (this.constructor as typeof CDSSidePanel)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForSidePanel),\n true\n )\n ) {\n this.focus();\n }\n }\n }\n };\n\n @HostListener('document:keydown')\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 _handleKeydown = ({ key, target }: KeyboardEvent) => {\n if (key === 'Esc' \|\| key === 'Escape') {\n this._handleUserInitiatedClose(target);\n }\n };\n\n private _reducedMotion =\n typeof window !== 'undefined' && window?.matchMedia\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : { matches: true };\n\n /*\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleClickOnOverlay(event: MouseEvent) {\n if (!this.preventCloseOnClickOutside) {\n this._handleUserInitiatedClose(event.target);\n }\n }\n\n /\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleCloseClick(event: MouseEvent) {\n this._handleUserInitiatedClose(event.target);\n }\n\n /\n Handles user-initiated close request of this side-panel.\n \n @param triggeredBy The element that triggered this close request.\n /\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventClose,\n init\n )\n );\n }\n }\n }\n\n private _handleNavigateBack(triggeredBy: EventTarget \| null) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n {\n composed: true,\n detail: {\n triggeredBy,\n },\n }\n )\n );\n }\n\n private _adjustPageContent = () => {\n // sets/resets styles based on slideIn property and selectorPageContent;\n if (this.selectorPageContent) {\n const pageContentEl: HTMLElement \| null = document.querySelector(\n this.selectorPageContent\n );\n\n if (pageContentEl) {\n const newValues = {\n marginInlineStart: '',\n marginInlineEnd: '',\n inlineSize: '',\n transition: this._reducedMotion.matches\n ? 'none'\n : `all ${moderate02}`,\n transitionProperty: 'margin-inline-start, margin-inline-end',\n };\n if (this.open) {\n newValues.inlineSize = 'auto';\n if (this.placement === 'left') {\n newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n } else {\n newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n }\n }\n\n Object.keys(newValues).forEach((key) => {\n pageContentEl.style[key] = newValues[key];\n });\n }\n }\n };\n\n private _checkSetOpen = () => {\n const { _sidePanel: sidePanel } = this;\n if (sidePanel && this._isOpen) {\n if (this._reducedMotion) {\n this._isOpen = false;\n } else {\n // wait until the side panel has transitioned off the screen to remove\n sidePanel.addEventListener('transitionend', () => {\n this._isOpen = false;\n });\n }\n } else {\n // allow the html to render before animating in the side panel\n this._isOpen = this.open;\n }\n };\n\n private _checkUpdateIconButtonSizes = () => {\n const slug = this.querySelector(`${prefix}-slug`);\n const otherButtons = this?.shadowRoot?.querySelectorAll(\n '#nav-back-button, #close-button'\n );\n\n let iconButtonSize = 'sm';\n\n if (slug \|\| otherButtons?.length) {\n const actions = this?.querySelectorAll?.(\n `${prefix}-button[slot='actions']`\n );\n\n if (actions?.length && /l/.test(this.size)) {\n iconButtonSize = 'md';\n }\n }\n\n if (slug) {\n slug?.setAttribute('size', iconButtonSize);\n }\n\n if (otherButtons) {\n [...otherButtons].forEach((btn) => {\n btn.setAttribute('size', iconButtonSize);\n });\n }\n };\n\n private _handleSlugChange(e: Event) {\n this._checkUpdateIconButtonSizes();\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n this._hasSlug = childItems.length > 0;\n }\n\n private _handleSubtitleChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const subtitle = target?.assignedElements();\n\n this._hasSubtitle = subtitle.length > 0;\n }\n\n private _handleActionToolbarChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const toolbarActions = target?.assignedElements();\n\n this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n if (this._hasActionToolbar) {\n for (const toolbarAction of toolbarActions) {\n // toolbar actions size should always be sm\n toolbarAction.setAttribute('size', 'sm');\n }\n }\n }\n\n private _checkUpdateActionSizes = () => {\n if (this._actions) {\n for (let i = 0; i < this._actions.length; i++) {\n this._actions[i].setAttribute(\n 'size',\n this.condensedActions ? 'lg' : 'xl'\n );\n }\n }\n };\n\n private _maxActions = 3;\n private _handleActionsChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const actions = target?.assignedElements();\n\n // update slug size\n this._checkUpdateIconButtonSizes();\n\n const actionsCount = actions?.length ?? 0;\n if (actionsCount > this._maxActions) {\n this._actionsCount = this._maxActions;\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(`Too many side-panel actions, max ${this._maxActions}.`);\n }\n } else {\n this._actionsCount = actionsCount;\n }\n\n for (let i = 0; i < actions?.length; i++) {\n if (i + 1 > this._maxActions) {\n // hide excessive side panel actions\n actions[i].setAttribute('hidden', 'true');\n actions[i].setAttribute(\n `data-actions-limit-${this._maxActions}-exceeded`,\n `${actions.length}`\n );\n } else {\n actions[i].classList.add(`${blockClassActionSet}__action-button`);\n }\n }\n this._checkUpdateActionSizes();\n }\n\n private _checkSetDoAnimateTitle = () => {\n let canDoAnimateTitle = false;\n\n if (\n this._sidePanel &&\n this.open &&\n this.animateTitle &&\n this?.title?.length &&\n !this._reducedMotion.matches\n ) {\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n // used to calculate the header moves\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-distance`,\n `${scrollAnimationDistance}`\n );\n\n let scrollEl = this._animateScrollWrapper;\n if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n scrollEl = this._innerContent;\n }\n\n if (scrollEl) {\n const innerComputed = window?.getComputedStyle(this._innerContent);\n const innerPaddingHeight = innerComputed\n ? parseFloat(innerComputed?.paddingTop) +\n parseFloat(innerComputed?.paddingBottom)\n : 0;\n\n canDoAnimateTitle =\n (!!this.labelText \|\| !!this._hasActionToolbar \|\| this._hasSubtitle) &&\n scrollEl.scrollHeight - scrollEl.clientHeight >=\n scrollAnimationDistance + innerPaddingHeight;\n }\n }\n\n this._doAnimateTitle = canDoAnimateTitle;\n };\n\n /\n The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n /\n // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n private _resizeObserver = new ResizeObserver(() => {\n if (this._sidePanel) {\n this._checkSetDoAnimateTitle();\n }\n });\n\n private _getScrollAnimationDistance = () => {\n const labelHeight = this?._label?.offsetHeight ?? 0;\n const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n const titleVerticalBorder = this._hasActionToolbar\n ? this._title.offsetHeight - this._title.clientHeight\n : 0;\n\n return labelHeight + subtitleHeight + titleVerticalBorder;\n };\n\n private _scrollObserver = () => {\n const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n `${\n Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance\n }`\n );\n };\n\n private _handleCurrentStepUpdate = () => {\n const scrollable = this._animateScrollWrapper ?? this._innerContent;\n if (scrollable) {\n scrollable.scrollTop = 0;\n }\n };\n\n /\n Determines if the title will animate on scroll\n /\n @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n animateTitle = true;\n\n /\n Sets the close button icon description\n /\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription = 'Close';\n\n /\n Determines whether the side panel should render the condensed version (affects action buttons primarily)\n /\n @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n condensedActions = false;\n\n /\n Sets the current step of the side panel\n /\n @property({ reflect: true, attribute: 'current-step', type: Number })\n currentStep;\n\n /\n Determines whether the side panel should render with an overlay\n /\n @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n includeOverlay = false;\n\n /\n Sets the label text which will display above the title text\n /\n @property({ reflect: true, attribute: 'label-text' })\n labelText;\n\n /\n Sets the icon description for the navigation back icon button\n /\n @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n navigationBackIconDescription = 'Back';\n\n /\n `true` if the side-panel should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n SidePanel placement.\n /\n @property({ reflect: true, type: String })\n placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n /\n Prevent closing on click outside of side-panel\n /\n @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n preventCloseOnClickOutside = false;\n\n /\n The initial location of focus in the side panel\n /\n @property({\n reflect: true,\n attribute: 'selector-initial-focus',\n type: String,\n })\n selectorInitialFocus;\n\n /\n Selector for page content, used to push content to side except\n /\n @property({ reflect: true, attribute: 'selector-page-content' })\n selectorPageContent = '';\n\n /\n SidePanel size.\n /\n @property({ reflect: true, type: String })\n size = SIDE_PANEL_SIZE.MEDIUM;\n\n /\n Determines if this panel slides in\n /\n @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n slideIn = false;\n\n /\n Sets the title text\n /\n @property({ reflect: false, type: String })\n title;\n\n async connectObservers() {\n await this.updateComplete;\n this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n }\n\n disconnectObservers() {\n if (this._hObserveResize) {\n this._hObserveResize = this._hObserveResize.release();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.disconnectObservers();\n this.connectObservers();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.disconnectObservers();\n }\n\n render() {\n const {\n closeIconDescription,\n condensedActions,\n currentStep,\n includeOverlay,\n labelText,\n navigationBackIconDescription,\n open,\n placement,\n size,\n slideIn,\n title,\n } = this;\n\n if (!open && !this._isOpen) {\n return html``;\n }\n\n const actionsMultiple = ['', 'single', 'double', 'triple'][\n this._actionsCount\n ];\n\n const titleTemplate = html`<div\n class=${`${blockClass}__title`}\n ?no-label=${!!labelText}>\n <h2 class=${title ? `${blockClass}__title-text` : ''} title=${title}>\n ${title}\n </h2>\n\n ${this._doAnimateTitle\n ? html`<h2\n class=${`${blockClass}__collapsed-title-text`}\n title=${title}\n aria-hidden=\"true\">\n ${title}\n </h2>`\n : ''}\n </div>`;\n\n const headerHasTitleClass = this.title\n ? ` ${blockClass}__header--has-title `\n : '';\n const headerTemplate = html`\n <div\n class=${`${blockClass}__header${headerHasTitleClass}`}\n ?detail-step=${currentStep > 0}\n ?no-title-animation=${!this._doAnimateTitle}\n ?reduced-motion=${this._reducedMotion.matches}>\n <!-- render back button -->\n ${currentStep > 0\n ? html`<cds-custom-icon-button\n align=\"bottom-left\"\n aria-label=${navigationBackIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n @click=${this._handleNavigateBack}>\n ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n <span slot=\"tooltip-content\">\n ${navigationBackIconDescription}\n </span>\n </cds-custom-icon-button>`\n : ''}\n\n <!-- render title label -->\n ${title?.length && labelText?.length\n ? html` <p class=${`${blockClass}__label-text`}>${labelText}</p>`\n : ''}\n\n <!-- title -->\n ${title ? titleTemplate : ''}\n\n <!-- render slug and close button area -->\n <div class=${`${blockClass}__slug-and-close`}>\n <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n <!-- {normalizedSlug} -->\n <cds-custom-icon-button\n align=\"bottom-right\"\n aria-label=${closeIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${blockClass}__close-button`}\n @click=${this._handleCloseClick}>\n ${iconLoader(Close20, { slot: 'icon' })}\n <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n </cds-custom-icon-button>\n </div>\n\n <!-- render sub title -->\n <p\n class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n ?hidden=${!this._hasSubtitle}\n ?no-title-animation=${!this._doAnimateTitle}\n ?no-action-toolbar=${!this._hasActionToolbar}\n ?no-title=${!title}>\n <slot\n name=\"subtitle\"\n @slotchange=${this._handleSubtitleChange}></slot>\n </p>\n\n <div\n class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n ?hidden=${!this._hasActionToolbar}\n ?no-title-animation=${!this._doAnimateTitle}>\n <slot\n name=\"action-toolbar\"\n @slotchange=${this._handleActionToolbarChange}></slot>\n </div>\n </div>\n `;\n\n const mainTemplate = html`<div\n class=${`${blockClass}__inner-content`}\n ?scrolls=${!this._doAnimateTitle}>\n <cds-custom-layer level=\"1\">\n <slot></slot>\n </cds-custom-layer>\n </div> `;\n\n const sidePanelAnimateTitleClass = this._doAnimateTitle\n ? ` ${blockClass}--animated-title`\n : '';\n\n return html`\n <div\n class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n part=\"dialog\"\n role=\"complementary\"\n placement=\"${placement}\"\n ?has-slug=${this._hasSlug}\n ?open=${this._isOpen}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n ?condensed-actions=${condensedActions}\n ?overlay=${includeOverlay \|\| slideIn}\n ?slide-in=${slideIn}\n size=${size}>\n <a\n id=\"start-sentinel\"\n class=\"sentinel\"\n hidden\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n\n ${this._doAnimateTitle\n ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n ${headerTemplate} ${mainTemplate}\n </div>`\n : html` ${headerTemplate} ${mainTemplate}`}\n\n <cds-custom-button-set-base\n class=${`${blockClass}__actions-container`}\n ?hidden=${this._actionsCount === 0}\n ?condensed=${condensedActions}\n actions-multiple=${actionsMultiple}\n size=${size}>\n <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n </cds-custom-button-set-base>\n\n <a\n id=\"end-sentinel\"\n class=\"sentinel\"\n hidden\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n </div>\n\n ${includeOverlay\n ? html`<div\n ?slide-in=${slideIn}\n class=${`${blockClass}__overlay`}\n ?open=${this.open}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n tabindex=\"-1\"\n @click=${this._handleClickOnOverlay}></div>`\n : ''}\n `;\n }\n\n async updated(changedProperties) {\n if (changedProperties.has('condensedActions')) {\n this._checkUpdateActionSizes();\n }\n\n if (changedProperties.has('currentStep')) {\n this._handleCurrentStepUpdate();\n }\n\n if (changedProperties.has('_doAnimateTitle')) {\n this?._animateScrollWrapper?.removeEventListener(\n 'scroll',\n this._scrollObserver\n );\n\n if (this._doAnimateTitle) {\n this?._animateScrollWrapper?.addEventListener(\n 'scroll',\n this._scrollObserver\n );\n } else {\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n '0'\n );\n }\n }\n\n if (\n changedProperties.has('_isOpen') \|\|\n changedProperties.has('animateTitle')\n ) {\n / @state property changed /\n this._checkSetDoAnimateTitle();\n }\n\n if (\n changedProperties.has('slideIn') \|\|\n changedProperties.has('open') \|\|\n changedProperties.has('includeOverlay')\n ) {\n this._adjustPageContent();\n }\n\n if (changedProperties.has('open')) {\n this._checkSetOpen();\n\n this.disconnectObservers();\n if (this.open) {\n this.connectObservers();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n this._launcher = this.ownerDocument!.activeElement;\n const focusNode =\n this.selectorInitialFocus &&\n this.querySelector(this.selectorInitialFocus);\n\n await (this.constructor as typeof CDSSidePanel)._delay();\n if (focusNode) {\n // For cases where a `carbon-web-components` component (e.g. `<cds-custom-button>`) being `primaryFocusNode`,\n // where its first update/render cycle that makes it focusable happens after `<cds-custom-side-panel>`'s first update/render cycle\n (focusNode as HTMLElement).focus();\n } else if (\n !tryFocusElems(\n this.querySelectorAll(\n (this.constructor as typeof CDSSidePanel).selectorTabbable\n ),\n true\n )\n ) {\n this.focus();\n }\n } else if (\n this._launcher &&\n typeof (this._launcher as HTMLElement).focus === 'function'\n ) {\n (this._launcher as HTMLElement).focus();\n this._launcher = null;\n }\n }\n }\n\n /\n @param ms The number of milliseconds.\n * @returns A promise that is resolves after the given milliseconds.\n /\n private static _delay(ms = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n }\n\n /\n A selector selecting tabbable nodes.\n /\n static get selectorTabbable() {\n return selectorTabbable;\n }\n\n /\n The name of the custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n /\n static get eventBeforeClose() {\n return `${prefix}-side-panel-beingclosed`;\n }\n\n /\n The name of the custom event fired after this side-panel is closed upon a user gesture.\n /\n static get eventClose() {\n return `${prefix}-side-panel-closed`;\n }\n\n /\n The name of the custom event fired on clicking the navigate back button\n */\n static get eventNavigateBack() {\n return `${prefix}-side-panel-navigate-back`;\n }\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"side-panel.js","names":["customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 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 { LitElement, html } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16.js';\nimport Close20 from '@carbon/icons/es/close/20.js';\nimport { moderate02 } from '@carbon/motion';\nimport '../button/index';\nimport '../icon-button/index';\nimport '../layer/index';\nimport Handle from '../../globals/internal/handle';\nimport '../button/button-set-base';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst PRECEDING =\n Node.DOCUMENT_POSITION_PRECEDING \| Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n Node.DOCUMENT_POSITION_FOLLOWING \| Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--side-panel`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/\n Observes resize of the given element with the given resize observer.\n \n @param observer The resize observer.\n * @param elem The element to observe the resize.\n /\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n if (!elem) {\n return null;\n }\n observer.observe(elem);\n return {\n release() {\n observer.unobserve(elem);\n return null;\n },\n } as Handle;\n};\n\n/\n Tries to focus on the given elements and bails out if one of them is successful.\n \n @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n /\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n if (!reverse) {\n for (let i = 0; i < elems.length; ++i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n } else {\n for (let i = elems.length - 1; i >= 0; --i) {\n const elem = elems[i];\n elem.focus();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (elem.ownerDocument!.activeElement === elem) {\n return true;\n }\n }\n }\n return false;\n}\n\n/\n SidePanel.\n \n @deprecated Use Carbon for IBM Products `side-panel` component.\n * This component has been deprecated in `@carbon/web-components` and will instead be maintained\n * in the Carbon for IBM Products library:\n * https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-custom-side-panel\n * @csspart dialog The dialog.\n * @fires cds-custom-side-panel-beingclosed\n * The custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires cds-custom-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires cds-custom-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n /\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n /\n The handle for observing resize of the parent element of this element.\n /\n private _hObserveResize: Handle \| null = null;\n\n /\n The element that had focus before this side-panel gets open.\n /\n private _launcher: Element \| null = null;\n\n /\n Node to track focus going outside of side-panel content.\n /\n @query('#start-sentinel')\n private _startSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track focus going outside of side-panel content.\n /\n @query('#end-sentinel')\n private _endSentinelNode!: HTMLAnchorElement;\n\n /\n Node to track side panel.\n /\n @query(`.${blockClass}`)\n private _sidePanel!: HTMLDivElement;\n\n @query(`.${blockClass}__animated-scroll-wrapper`)\n private _animateScrollWrapper?: HTMLElement;\n\n @query(`.${blockClass}__label-text`)\n private _label!: HTMLElement;\n\n @query(`.${blockClass}__title-text`)\n private _title!: HTMLElement;\n\n @query(`.${blockClass}__subtitle-text`)\n private _subtitle!: HTMLElement;\n\n @query(`.${blockClass}__inner-content`)\n private _innerContent!: HTMLElement;\n\n @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n private _actions!: Array<HTMLElement>;\n\n @state()\n _doAnimateTitle = true;\n\n @state()\n _isOpen = false;\n\n @state()\n _containerScrollTop = -16;\n\n @state()\n _hasSubtitle = false;\n\n @state()\n _hasSlug = false;\n\n @state()\n _hasActionToolbar = false;\n\n @state()\n _actionsCount = 0;\n\n @state()\n _slugCloseSize = 'sm';\n\n /\n Handles `blur` event on this element.\n \n @param event The event.\n * @param event.target The event target.\n * @param event.relatedTarget The event relatedTarget.\n /\n @HostListener('shadowRoot:focusout')\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 _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n const {\n open,\n _startSentinelNode: startSentinelNode,\n _endSentinelNode: endSentinelNode,\n } = this;\n\n const oldContains = target !== this && this.contains(target as Node);\n const currentContains =\n relatedTarget !== this &&\n (this.contains(relatedTarget as Node) \|\|\n (this.shadowRoot?.contains(relatedTarget as Node) &&\n relatedTarget !== (startSentinelNode as Node) &&\n relatedTarget !== (endSentinelNode as Node)));\n\n // Performs focus wrapping if _all_ of the following is met:\n // This side-panel is open\n // * The viewport still has focus\n // * SidePanel body used to have focus but no longer has focus\n const { selectorTabbable: selectorTabbableForSidePanel } = this\n .constructor as typeof CDSSidePanel;\n\n if (open && relatedTarget && oldContains && !currentContains) {\n const comparisonResult = (target as Node).compareDocumentPosition(\n relatedTarget as Node\n );\n\n if (relatedTarget === startSentinelNode \|\| comparisonResult & PRECEDING) {\n await (this.constructor as typeof CDSSidePanel)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForSidePanel),\n true\n ) &&\n relatedTarget !== this\n ) {\n this.focus();\n }\n } else if (\n relatedTarget === endSentinelNode \|\|\n comparisonResult & FOLLOWING\n ) {\n await (this.constructor as typeof CDSSidePanel)._delay();\n if (\n !tryFocusElems(\n this.querySelectorAll(selectorTabbableForSidePanel),\n true\n )\n ) {\n this.focus();\n }\n }\n }\n };\n\n @HostListener('document:keydown')\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 _handleKeydown = ({ key, target }: KeyboardEvent) => {\n if (key === 'Esc' \|\| key === 'Escape') {\n this._handleUserInitiatedClose(target);\n }\n };\n\n private _reducedMotion =\n typeof window !== 'undefined' && window?.matchMedia\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : { matches: true };\n\n /*\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleClickOnOverlay(event: MouseEvent) {\n if (!this.preventCloseOnClickOutside) {\n this._handleUserInitiatedClose(event.target);\n }\n }\n\n /\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleCloseClick(event: MouseEvent) {\n this._handleUserInitiatedClose(event.target);\n }\n\n /\n Handles user-initiated close request of this side-panel.\n \n @param triggeredBy The element that triggered this close request.\n /\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventClose,\n init\n )\n );\n }\n }\n }\n\n private _handleNavigateBack(triggeredBy: EventTarget \| null) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n {\n composed: true,\n detail: {\n triggeredBy,\n },\n }\n )\n );\n }\n\n private _adjustPageContent = () => {\n // sets/resets styles based on slideIn property and selectorPageContent;\n if (this.selectorPageContent) {\n const pageContentEl: HTMLElement \| null = document.querySelector(\n this.selectorPageContent\n );\n\n if (pageContentEl) {\n const newValues = {\n marginInlineStart: '',\n marginInlineEnd: '',\n inlineSize: '',\n transition: this._reducedMotion.matches\n ? 'none'\n : `all ${moderate02}`,\n transitionProperty: 'margin-inline-start, margin-inline-end',\n };\n if (this.open) {\n newValues.inlineSize = 'auto';\n if (this.placement === 'left') {\n newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n } else {\n newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n }\n }\n\n Object.keys(newValues).forEach((key) => {\n pageContentEl.style[key] = newValues[key];\n });\n }\n }\n };\n\n private _checkSetOpen = () => {\n const { _sidePanel: sidePanel } = this;\n if (sidePanel && this._isOpen) {\n if (this._reducedMotion) {\n this._isOpen = false;\n } else {\n // wait until the side panel has transitioned off the screen to remove\n sidePanel.addEventListener('transitionend', () => {\n this._isOpen = false;\n });\n }\n } else {\n // allow the html to render before animating in the side panel\n this._isOpen = this.open;\n }\n };\n\n private _checkUpdateIconButtonSizes = () => {\n const slug = this.querySelector(`${prefix}-slug`);\n const otherButtons = this?.shadowRoot?.querySelectorAll(\n '#nav-back-button, #close-button'\n );\n\n let iconButtonSize = 'sm';\n\n if (slug \|\| otherButtons?.length) {\n const actions = this?.querySelectorAll?.(\n `${prefix}-button[slot='actions']`\n );\n\n if (actions?.length && /l/.test(this.size)) {\n iconButtonSize = 'md';\n }\n }\n\n if (slug) {\n slug?.setAttribute('size', iconButtonSize);\n }\n\n if (otherButtons) {\n [...otherButtons].forEach((btn) => {\n btn.setAttribute('size', iconButtonSize);\n });\n }\n };\n\n private _handleSlugChange(e: Event) {\n this._checkUpdateIconButtonSizes();\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n this._hasSlug = childItems.length > 0;\n }\n\n private _handleSubtitleChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const subtitle = target?.assignedElements();\n\n this._hasSubtitle = subtitle.length > 0;\n }\n\n private _handleActionToolbarChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const toolbarActions = target?.assignedElements();\n\n this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n if (this._hasActionToolbar) {\n for (const toolbarAction of toolbarActions) {\n // toolbar actions size should always be sm\n toolbarAction.setAttribute('size', 'sm');\n }\n }\n }\n\n private _checkUpdateActionSizes = () => {\n if (this._actions) {\n for (let i = 0; i < this._actions.length; i++) {\n this._actions[i].setAttribute(\n 'size',\n this.condensedActions ? 'lg' : 'xl'\n );\n }\n }\n };\n\n private _maxActions = 3;\n private _handleActionsChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const actions = target?.assignedElements();\n\n // update slug size\n this._checkUpdateIconButtonSizes();\n\n const actionsCount = actions?.length ?? 0;\n if (actionsCount > this._maxActions) {\n this._actionsCount = this._maxActions;\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n console.error(`Too many side-panel actions, max ${this._maxActions}.`);\n }\n } else {\n this._actionsCount = actionsCount;\n }\n\n for (let i = 0; i < actions?.length; i++) {\n if (i + 1 > this._maxActions) {\n // hide excessive side panel actions\n actions[i].setAttribute('hidden', 'true');\n actions[i].setAttribute(\n `data-actions-limit-${this._maxActions}-exceeded`,\n `${actions.length}`\n );\n } else {\n actions[i].classList.add(`${blockClassActionSet}__action-button`);\n }\n }\n this._checkUpdateActionSizes();\n }\n\n private _checkSetDoAnimateTitle = () => {\n let canDoAnimateTitle = false;\n\n if (\n this._sidePanel &&\n this.open &&\n this.animateTitle &&\n this?.title?.length &&\n !this._reducedMotion.matches\n ) {\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n // used to calculate the header moves\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-distance`,\n `${scrollAnimationDistance}`\n );\n\n let scrollEl = this._animateScrollWrapper;\n if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n scrollEl = this._innerContent;\n }\n\n if (scrollEl) {\n const innerComputed = window?.getComputedStyle(this._innerContent);\n const innerPaddingHeight = innerComputed\n ? parseFloat(innerComputed?.paddingTop) +\n parseFloat(innerComputed?.paddingBottom)\n : 0;\n\n canDoAnimateTitle =\n (!!this.labelText \|\| !!this._hasActionToolbar \|\| this._hasSubtitle) &&\n scrollEl.scrollHeight - scrollEl.clientHeight >=\n scrollAnimationDistance + innerPaddingHeight;\n }\n }\n\n this._doAnimateTitle = canDoAnimateTitle;\n };\n\n /\n The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n /\n // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n private _resizeObserver = new ResizeObserver(() => {\n if (this._sidePanel) {\n this._checkSetDoAnimateTitle();\n }\n });\n\n private _getScrollAnimationDistance = () => {\n const labelHeight = this?._label?.offsetHeight ?? 0;\n const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n const titleVerticalBorder = this._hasActionToolbar\n ? this._title.offsetHeight - this._title.clientHeight\n : 0;\n\n return labelHeight + subtitleHeight + titleVerticalBorder;\n };\n\n private _scrollObserver = () => {\n const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n `${\n Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance\n }`\n );\n };\n\n private _handleCurrentStepUpdate = () => {\n const scrollable = this._animateScrollWrapper ?? this._innerContent;\n if (scrollable) {\n scrollable.scrollTop = 0;\n }\n };\n\n /\n Determines if the title will animate on scroll\n /\n @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n animateTitle = true;\n\n /\n Sets the close button icon description\n /\n @property({ reflect: true, attribute: 'close-icon-description' })\n closeIconDescription = 'Close';\n\n /\n Determines whether the side panel should render the condensed version (affects action buttons primarily)\n /\n @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n condensedActions = false;\n\n /\n Sets the current step of the side panel\n /\n @property({ reflect: true, attribute: 'current-step', type: Number })\n currentStep;\n\n /\n Determines whether the side panel should render with an overlay\n /\n @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n includeOverlay = false;\n\n /\n Sets the label text which will display above the title text\n /\n @property({ reflect: true, attribute: 'label-text' })\n labelText;\n\n /\n Sets the icon description for the navigation back icon button\n /\n @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n navigationBackIconDescription = 'Back';\n\n /\n `true` if the side-panel should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n SidePanel placement.\n /\n @property({ reflect: true, type: String })\n placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n /\n Prevent closing on click outside of side-panel\n /\n @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n preventCloseOnClickOutside = false;\n\n /\n The initial location of focus in the side panel\n /\n @property({\n reflect: true,\n attribute: 'selector-initial-focus',\n type: String,\n })\n selectorInitialFocus;\n\n /\n Selector for page content, used to push content to side except\n /\n @property({ reflect: true, attribute: 'selector-page-content' })\n selectorPageContent = '';\n\n /\n SidePanel size.\n /\n @property({ reflect: true, type: String })\n size = SIDE_PANEL_SIZE.MEDIUM;\n\n /\n Determines if this panel slides in\n /\n @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n slideIn = false;\n\n /\n Sets the title text\n /\n @property({ reflect: false, type: String })\n title;\n\n async connectObservers() {\n await this.updateComplete;\n this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n }\n\n disconnectObservers() {\n if (this._hObserveResize) {\n this._hObserveResize = this._hObserveResize.release();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.disconnectObservers();\n this.connectObservers();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.disconnectObservers();\n }\n\n render() {\n const {\n closeIconDescription,\n condensedActions,\n currentStep,\n includeOverlay,\n labelText,\n navigationBackIconDescription,\n open,\n placement,\n size,\n slideIn,\n title,\n } = this;\n\n if (!open && !this._isOpen) {\n return html``;\n }\n\n const actionsMultiple = ['', 'single', 'double', 'triple'][\n this._actionsCount\n ];\n\n const titleTemplate = html`<div\n class=${`${blockClass}__title`}\n ?no-label=${!!labelText}>\n <h2 class=${title ? `${blockClass}__title-text` : ''} title=${title}>\n ${title}\n </h2>\n\n ${this._doAnimateTitle\n ? html`<h2\n class=${`${blockClass}__collapsed-title-text`}\n title=${title}\n aria-hidden=\"true\">\n ${title}\n </h2>`\n : ''}\n </div>`;\n\n const headerHasTitleClass = this.title\n ? ` ${blockClass}__header--has-title `\n : '';\n const headerTemplate = html`\n <div\n class=${`${blockClass}__header${headerHasTitleClass}`}\n ?detail-step=${currentStep > 0}\n ?no-title-animation=${!this._doAnimateTitle}\n ?reduced-motion=${this._reducedMotion.matches}>\n <!-- render back button -->\n ${currentStep > 0\n ? html`<cds-custom-icon-button\n align=\"bottom-left\"\n aria-label=${navigationBackIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n @click=${this._handleNavigateBack}>\n ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n <span slot=\"tooltip-content\">\n ${navigationBackIconDescription}\n </span>\n </cds-custom-icon-button>`\n : ''}\n\n <!-- render title label -->\n ${title?.length && labelText?.length\n ? html` <p class=${`${blockClass}__label-text`}>${labelText}</p>`\n : ''}\n\n <!-- title -->\n ${title ? titleTemplate : ''}\n\n <!-- render slug and close button area -->\n <div class=${`${blockClass}__slug-and-close`}>\n <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n <!-- {normalizedSlug} -->\n <cds-custom-icon-button\n align=\"bottom-right\"\n aria-label=${closeIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${blockClass}__close-button`}\n @click=${this._handleCloseClick}>\n ${iconLoader(Close20, { slot: 'icon' })}\n <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n </cds-custom-icon-button>\n </div>\n\n <!-- render sub title -->\n <p\n class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n ?hidden=${!this._hasSubtitle}\n ?no-title-animation=${!this._doAnimateTitle}\n ?no-action-toolbar=${!this._hasActionToolbar}\n ?no-title=${!title}>\n <slot\n name=\"subtitle\"\n @slotchange=${this._handleSubtitleChange}></slot>\n </p>\n\n <div\n class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n ?hidden=${!this._hasActionToolbar}\n ?no-title-animation=${!this._doAnimateTitle}>\n <slot\n name=\"action-toolbar\"\n @slotchange=${this._handleActionToolbarChange}></slot>\n </div>\n </div>\n `;\n\n const mainTemplate = html`<div\n class=${`${blockClass}__inner-content`}\n ?scrolls=${!this._doAnimateTitle}>\n <cds-custom-layer level=\"1\">\n <slot></slot>\n </cds-custom-layer>\n </div> `;\n\n const sidePanelAnimateTitleClass = this._doAnimateTitle\n ? ` ${blockClass}--animated-title`\n : '';\n\n return html`\n <div\n class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n part=\"dialog\"\n role=\"complementary\"\n placement=\"${placement}\"\n ?has-slug=${this._hasSlug}\n ?open=${this._isOpen}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n ?condensed-actions=${condensedActions}\n ?overlay=${includeOverlay \|\| slideIn}\n ?slide-in=${slideIn}\n size=${size}>\n <a\n id=\"start-sentinel\"\n class=\"sentinel\"\n hidden\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n\n ${this._doAnimateTitle\n ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n ${headerTemplate} ${mainTemplate}\n </div>`\n : html` ${headerTemplate} ${mainTemplate}`}\n\n <cds-custom-button-set-base\n class=${`${blockClass}__actions-container`}\n ?hidden=${this._actionsCount === 0}\n ?condensed=${condensedActions}\n actions-multiple=${actionsMultiple}\n size=${size}>\n <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n </cds-custom-button-set-base>\n\n <a\n id=\"end-sentinel\"\n class=\"sentinel\"\n hidden\n href=\"javascript:void 0\"\n role=\"navigation\"></a>\n </div>\n\n ${includeOverlay\n ? html`<div\n ?slide-in=${slideIn}\n class=${`${blockClass}__overlay`}\n ?open=${this.open}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n tabindex=\"-1\"\n @click=${this._handleClickOnOverlay}></div>`\n : ''}\n `;\n }\n\n async updated(changedProperties) {\n if (changedProperties.has('condensedActions')) {\n this._checkUpdateActionSizes();\n }\n\n if (changedProperties.has('currentStep')) {\n this._handleCurrentStepUpdate();\n }\n\n if (changedProperties.has('_doAnimateTitle')) {\n this?._animateScrollWrapper?.removeEventListener(\n 'scroll',\n this._scrollObserver\n );\n\n if (this._doAnimateTitle) {\n this?._animateScrollWrapper?.addEventListener(\n 'scroll',\n this._scrollObserver\n );\n } else {\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n '0'\n );\n }\n }\n\n if (\n changedProperties.has('_isOpen') \|\|\n changedProperties.has('animateTitle')\n ) {\n / @state property changed /\n this._checkSetDoAnimateTitle();\n }\n\n if (\n changedProperties.has('slideIn') \|\|\n changedProperties.has('open') \|\|\n changedProperties.has('includeOverlay')\n ) {\n this._adjustPageContent();\n }\n\n if (changedProperties.has('open')) {\n this._checkSetOpen();\n\n this.disconnectObservers();\n if (this.open) {\n this.connectObservers();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n this._launcher = this.ownerDocument!.activeElement;\n const focusNode =\n this.selectorInitialFocus &&\n this.querySelector(this.selectorInitialFocus);\n\n await (this.constructor as typeof CDSSidePanel)._delay();\n if (focusNode) {\n // For cases where a `carbon-web-components` component (e.g. `<cds-custom-button>`) being `primaryFocusNode`,\n // where its first update/render cycle that makes it focusable happens after `<cds-custom-side-panel>`'s first update/render cycle\n (focusNode as HTMLElement).focus();\n } else if (\n !tryFocusElems(\n this.querySelectorAll(\n (this.constructor as typeof CDSSidePanel).selectorTabbable\n ),\n true\n )\n ) {\n this.focus();\n }\n } else if (\n this._launcher &&\n typeof (this._launcher as HTMLElement).focus === 'function'\n ) {\n (this._launcher as HTMLElement).focus();\n this._launcher = null;\n }\n }\n }\n\n /\n @param ms The number of milliseconds.\n * @returns A promise that is resolves after the given milliseconds.\n /\n private static _delay(ms = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n }\n\n /\n A selector selecting tabbable nodes.\n /\n static get selectorTabbable() {\n return selectorTabbable;\n }\n\n /\n The name of the custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n /\n static get eventBeforeClose() {\n return `${prefix}-side-panel-beingclosed`;\n }\n\n /\n The name of the custom event fired after this side-panel is closed upon a user gesture.\n /\n static get eventClose() {\n return `${prefix}-side-panel-closed`;\n }\n\n /\n The name of the custom event fired on clicking the navigate back button\n */\n static get eventNavigateBack() {\n return `${prefix}-side-panel-navigate-back`;\n }\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}

package/es-custom/components/skeleton-icon/skeleton-icon.js CHANGED Viewed

@@ -5,12 +5,11 @@
  * 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 skeleton_icon_default$1 from "./skeleton-icon.scss.js";
 import { LitElement } from "lit";
 //#region src/components/skeleton-icon/skeleton-icon.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -28,9 +27,9 @@ let CDSSkeletonIcon = class CDSSkeletonIcon extends LitElement {
 		this.styles = skeleton_icon_default$1;
 	}
 };
-CDSSkeletonIcon = __decorate([carbonElement(`${prefix}-skeleton-icon`)], CDSSkeletonIcon);
+CDSSkeletonIcon = __decorate([carbonElement(`cds-custom-skeleton-icon`)], CDSSkeletonIcon);
 var skeleton_icon_default = CDSSkeletonIcon;
 //#endregion
 export { skeleton_icon_default as default };
 //# sourceMappingURL=skeleton-icon.js.map

package/es-custom/components/skeleton-icon/skeleton-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-icon.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-icon/skeleton-icon.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 { LitElement } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-icon.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Skeleton icon.\n \n @element cds-custom-skeleton-icon\n */\n@customElement(`${prefix}-skeleton-icon`)\nclass CDSSkeletonIcon extends LitElement {\n static styles = styles;\n}\n\nexport default CDSSkeletonIcon;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,~~4BACM~~,wBAAwB,WAAW;;gBACvBA;;;8BAFjBC,cAAc,~~GAAG~~,~~OAAO~~,~~gBAAgB~~;AAKzC,~~4BAAe~~"}
1	+ {"version":3,"file":"skeleton-icon.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-icon/skeleton-icon.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 { LitElement } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-icon.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Skeleton icon.\n \n @element cds-custom-skeleton-icon\n */\n@customElement(`${prefix}-skeleton-icon`)\nclass CDSSkeletonIcon extends LitElement {\n static styles = styles;\n}\n\nexport default CDSSkeletonIcon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,kBAAA,MACM,wBAAwB,WAAW;;gBACvBA;;;8BAFjBC,cAAc,oBAA0B,CAAA,EAAA,gBAAA;AAKzC,IAAA,wBAAe"}

package/es-custom/components/skeleton-icon/skeleton-icon.scss.js CHANGED Viewed

@@ -6,10 +6,9 @@
  */
 import { css } from "lit";
 //#region src/components/skeleton-icon/skeleton-icon.scss?lit
 var skeleton_icon_default = css(["@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}}@keyframes ai-skeleton-animation{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.cds-custom--icon--skeleton,:host(cds-custom-skeleton-icon){background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--icon--skeleton:active,.cds-custom--icon--skeleton:focus,.cds-custom--icon--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--icon--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--icon--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--icon--skeleton,:host(cds-custom-skeleton-icon){background:CanvasText}.cds-custom--icon--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--icon--skeleton,:host(cds-custom-skeleton-icon){block-size:1rem;display:inline-block;inline-size:1rem}.cds-custom--skeleton__placeholder{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--skeleton__placeholder:active,.cds-custom--skeleton__placeholder:focus,.cds-custom--skeleton__placeholder:hover{border:none;cursor:default;outline:none}.cds-custom--skeleton__placeholder: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--skeleton__placeholder:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__placeholder{background:CanvasText}.cds-custom--skeleton__placeholder:before{background:Canvas;forced-color-adjust:none}}.cds-custom--skeleton__placeholder{block-size:6.25rem;inline-size:6.25rem}.cds-custom--skeleton__text{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--skeleton__text:active,.cds-custom--skeleton__text:focus,.cds-custom--skeleton__text:hover{border:none;cursor:default;outline:none}.cds-custom--skeleton__text: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--skeleton__text:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__text{background:CanvasText}.cds-custom--skeleton__text:before{background:Canvas;forced-color-adjust:none}}.cds-custom--skeleton__text{block-size:1rem;inline-size:100%;margin-block-end:.5rem}.cds-custom--skeleton__heading{block-size:1.5rem}.cds-custom--skeleton__icon--ai,.cds-custom--skeleton__placeholder--ai,.cds-custom--skeleton__text--ai{background:var(--cds-ai-skeleton-background,#d0e2ff);overflow:hidden}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before,.cds-custom--skeleton__text--ai:before{animation:ai-skeleton-animation 1.25s ease-in-out infinite;background:linear-gradient(90deg,rgba(69,137,255,0) 0,rgba(69,137,255,.5) 50%,rgba(69,137,255,0))}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before{inline-size:200%}.cds-custom--skeleton__placeholder--ai{border-radius:.5rem}.cds-custom--skeleton__text--ai{border-radius:1rem}.cds-custom--skeleton__icon--ai{border-radius:.125rem}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__icon--ai,.cds-custom--skeleton__placeholder--ai,.cds-custom--skeleton__text--ai{background:CanvasText}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before,.cds-custom--skeleton__text--ai:before{background:Canvas}}:host(cds-custom-skeleton-icon){background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}:host(cds-custom-skeleton-icon):active,:host(cds-custom-skeleton-icon):focus,:host(cds-custom-skeleton-icon):hover{border:none;cursor:default;outline:none}:host(cds-custom-skeleton-icon):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){:host(cds-custom-skeleton-icon):before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){:host(cds-custom-skeleton-icon){background:CanvasText}:host(cds-custom-skeleton-icon):before{background:Canvas;forced-color-adjust:none}}"]);
 //#endregion
 export { skeleton_icon_default as default };
 //# sourceMappingURL=skeleton-icon.scss.js.map

package/es-custom/components/skeleton-placeholder/skeleton-placeholder.js CHANGED Viewed

@@ -5,14 +5,13 @@
  * 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 skeleton_placeholder_default$1 from "./skeleton-placeholder.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/skeleton-placeholder/skeleton-placeholder.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -27,7 +26,7 @@ import { classMap } from "lit/directives/class-map.js";
 */
 let CDSSkeletonPlaceholder = class CDSSkeletonPlaceholder extends LitElement {
 	render() {
-		let defaultClasses = { [`${prefix}--skeleton__placeholder`]: true };
+		let defaultClasses = { [`cds-custom--skeleton__placeholder`]: true };
 		if (this.optionalClasses) {
 			const outputObject = {};
 			this.optionalClasses?.split(" ").forEach((element) => {
@@ -48,9 +47,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "optional-classes"
 })], CDSSkeletonPlaceholder.prototype, "optionalClasses", void 0);
-CDSSkeletonPlaceholder = __decorate([carbonElement(`${prefix}-skeleton-placeholder`)], CDSSkeletonPlaceholder);
+CDSSkeletonPlaceholder = __decorate([carbonElement(`cds-custom-skeleton-placeholder`)], CDSSkeletonPlaceholder);
 var skeleton_placeholder_default = CDSSkeletonPlaceholder;
 //#endregion
 export { skeleton_placeholder_default as default };
 //# sourceMappingURL=skeleton-placeholder.js.map

package/es-custom/components/skeleton-placeholder/skeleton-placeholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-placeholder.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-placeholder/skeleton-placeholder.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-placeholder.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Skeleton placeholder.\n \n @element cds-custom-skeleton-placeholder\n /\n@customElement(`${prefix}-skeleton-placeholder`)\nclass CDSSkeletonPlaceholder extends LitElement {\n /\n Specify optional classes to be added to your SkeletonText\n */\n @property({ reflect: true, attribute: 'optional-classes' })\n optionalClasses;\n\n render() {\n let defaultClasses = {\n [`${prefix}--skeleton__placeholder`]: true,\n };\n\n if (this.optionalClasses) {\n const outputObject = {};\n this.optionalClasses?.split(' ').forEach((element) => {\n outputObject[element] = true;\n });\n defaultClasses = { ...defaultClasses, ...outputObject };\n }\n const classes = classMap(defaultClasses);\n\n return html` <div part=\"placeholder\" class=\"${classes}\"></div> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSSkeletonPlaceholder;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAmBA,~~mCACM~~,+BAA+B,WAAW;CAO9C,SAAS;EACP,IAAI,iBAAiB,GAClB,~~GAAG,OAAO,2BAA2B,~~MACvC;AAED,MAAI,KAAK,iBAAiB;GACxB,MAAM,eAAe,EAAE;AACvB,QAAK,iBAAiB,MAAM,IAAI,CAAC,SAAS,YAAY;AACpD,iBAAa,WAAW;KACxB;AACF,oBAAiB;IAAE,GAAG;IAAgB,GAAG;IAAc;;AAIzD,SAAO,IAAI,mCAFK,SAAS,eAAe,CAEc;;;gBAGxCA;;;YApBf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC;qCAL5DC,cAAc,~~GAAG~~,~~OAAO~~,~~uBAAuB~~;AA4BhD,~~mCAAe~~"}
1	+ {"version":3,"file":"skeleton-placeholder.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-placeholder/skeleton-placeholder.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-placeholder.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Skeleton placeholder.\n \n @element cds-custom-skeleton-placeholder\n /\n@customElement(`${prefix}-skeleton-placeholder`)\nclass CDSSkeletonPlaceholder extends LitElement {\n /\n Specify optional classes to be added to your SkeletonText\n */\n @property({ reflect: true, attribute: 'optional-classes' })\n optionalClasses;\n\n render() {\n let defaultClasses = {\n [`${prefix}--skeleton__placeholder`]: true,\n };\n\n if (this.optionalClasses) {\n const outputObject = {};\n this.optionalClasses?.split(' ').forEach((element) => {\n outputObject[element] = true;\n });\n defaultClasses = { ...defaultClasses, ...outputObject };\n }\n const classes = classMap(defaultClasses);\n\n return html` <div part=\"placeholder\" class=\"${classes}\"></div> `;\n }\n\n static styles = styles;\n}\n\nexport default CDSSkeletonPlaceholder;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,yBAAA,MACM,+BAA+B,WAAW;CAO9C,SAAS;EACP,IAAI,iBAAiB,GAClB,+BAAqC,MACvC;AAED,MAAI,KAAK,iBAAiB;GACxB,MAAM,eAAe,EAAE;AACvB,QAAK,iBAAiB,MAAM,IAAI,CAAC,SAAS,YAAY;AACpD,iBAAa,WAAW;KACxB;AACF,oBAAiB;IAAE,GAAG;IAAgB,GAAG;IAAc;;AAIzD,SAAO,IAAI,mCAFK,SAAS,eAAe,CAEc;;;gBAGxCA;;;YApBf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,uBAAA,WAAA,mBAAA,KAAA,EAAA;qCAL5DC,cAAc,2BAAiC,CAAA,EAAA,uBAAA;AA4BhD,IAAA,+BAAe"}

package/es-custom/components/skeleton-placeholder/skeleton-placeholder.scss.js CHANGED Viewed

@@ -6,10 +6,9 @@
  */
 import { css } from "lit";
 //#region src/components/skeleton-placeholder/skeleton-placeholder.scss?lit
 var skeleton_placeholder_default = css(["@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}}@keyframes ai-skeleton-animation{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.cds-custom--icon--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--icon--skeleton:active,.cds-custom--icon--skeleton:focus,.cds-custom--icon--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--icon--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--icon--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--icon--skeleton{background:CanvasText}.cds-custom--icon--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--icon--skeleton{block-size:1rem;display:inline-block;inline-size:1rem}.cds-custom--skeleton__placeholder{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--skeleton__placeholder:active,.cds-custom--skeleton__placeholder:focus,.cds-custom--skeleton__placeholder:hover{border:none;cursor:default;outline:none}.cds-custom--skeleton__placeholder: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--skeleton__placeholder:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__placeholder{background:CanvasText}.cds-custom--skeleton__placeholder:before{background:Canvas;forced-color-adjust:none}}.cds-custom--skeleton__placeholder{block-size:6.25rem;inline-size:6.25rem}.cds-custom--skeleton__text{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--skeleton__text:active,.cds-custom--skeleton__text:focus,.cds-custom--skeleton__text:hover{border:none;cursor:default;outline:none}.cds-custom--skeleton__text: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--skeleton__text:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__text{background:CanvasText}.cds-custom--skeleton__text:before{background:Canvas;forced-color-adjust:none}}.cds-custom--skeleton__text{block-size:1rem;inline-size:100%;margin-block-end:.5rem}.cds-custom--skeleton__heading{block-size:1.5rem}.cds-custom--skeleton__icon--ai,.cds-custom--skeleton__placeholder--ai,.cds-custom--skeleton__text--ai{background:var(--cds-ai-skeleton-background,#d0e2ff);overflow:hidden}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before,.cds-custom--skeleton__text--ai:before{animation:ai-skeleton-animation 1.25s ease-in-out infinite;background:linear-gradient(90deg,rgba(69,137,255,0) 0,rgba(69,137,255,.5) 50%,rgba(69,137,255,0))}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before{inline-size:200%}.cds-custom--skeleton__placeholder--ai{border-radius:.5rem}.cds-custom--skeleton__text--ai{border-radius:1rem}.cds-custom--skeleton__icon--ai{border-radius:.125rem}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__icon--ai,.cds-custom--skeleton__placeholder--ai,.cds-custom--skeleton__text--ai{background:CanvasText}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before,.cds-custom--skeleton__text--ai:before{background:Canvas}}"]);
 //#endregion
 export { skeleton_placeholder_default as default };
 //# sourceMappingURL=skeleton-placeholder.scss.js.map

package/es-custom/components/skeleton-text/defs.js CHANGED Viewed

@@ -26,7 +26,7 @@ let SKELETON_TEXT_TYPE = /* @__PURE__ */ function(SKELETON_TEXT_TYPE) {
 	SKELETON_TEXT_TYPE["HEADING"] = "heading";
 	return SKELETON_TEXT_TYPE;
 }({});
 //#endregion
 export { SKELETON_TEXT_TYPE };
 //# sourceMappingURL=defs.js.map

package/es-custom/components/skeleton-text/defs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/skeleton-text/defs.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2020, 2023\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\n/\n Skeleton text types.\n /\nexport enum SKELETON_TEXT_TYPE {\n /\n Regular variant.\n /\n REGULAR = '',\n\n /\n Heading variant.\n */\n HEADING = 'heading',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,~~kEAAL~~;;;;AAIL;;;;AAKA"}
1	+ {"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/skeleton-text/defs.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2020, 2023\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\n/\n Skeleton text types.\n /\nexport enum SKELETON_TEXT_TYPE {\n /\n Regular variant.\n /\n REGULAR = '',\n\n /\n Heading variant.\n */\n HEADING = 'heading',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,qBAAL,yBAAA,oBAAA;;;;AAIL,oBAAA,aAAA;;;;AAKA,oBAAA,aAAA;;KACD"}

package/es-custom/components/skeleton-text/skeleton-text.js CHANGED Viewed

@@ -5,15 +5,14 @@
  * 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 { SKELETON_TEXT_TYPE } from "./defs.js";
 import skeleton_text_default$1 from "./skeleton-text.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/skeleton-text/skeleton-text.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -36,7 +35,7 @@ function getRandomInt(min, max, n) {
 let CDSSkeletonText = class CDSSkeletonText extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.type = SKELETON_TEXT_TYPE.REGULAR;
+		this.type = "";
 		this.heading = false;
 		this.width = "100%";
 		this.paragraph = false;
@@ -45,8 +44,8 @@ let CDSSkeletonText = class CDSSkeletonText extends LitElement {
 	render() {
 		const { optionalClasses, paragraph, lineCount, type, width, heading } = this;
 		let defaultClasses = {
-			[`${prefix}--skeleton__text`]: true,
-			[`${prefix}--skeleton__heading`]: heading || type === SKELETON_TEXT_TYPE.HEADING
+			[`cds-custom--skeleton__text`]: true,
+			[`cds-custom--skeleton__heading`]: heading || type === "heading"
 		};
 		if (optionalClasses) {
 			const outputObject = {};
@@ -95,9 +94,9 @@ __decorate([property({
 	type: Number,
 	reflect: true
 })], CDSSkeletonText.prototype, "lineCount", void 0);
-CDSSkeletonText = __decorate([carbonElement(`${prefix}-skeleton-text`)], CDSSkeletonText);
+CDSSkeletonText = __decorate([carbonElement(`cds-custom-skeleton-text`)], CDSSkeletonText);
 var skeleton_text_default = CDSSkeletonText;
 //#endregion
 export { SKELETON_TEXT_TYPE, skeleton_text_default as default };
 //# sourceMappingURL=skeleton-text.js.map

package/es-custom/components/skeleton-text/skeleton-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-text.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-text/skeleton-text.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { SKELETON_TEXT_TYPE } from './defs';\nimport styles from './skeleton-text.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { SKELETON_TEXT_TYPE };\n\nfunction getRandomInt(min: number, max: number, n: number) {\n const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];\n return Math.floor(randoms[n % 3] (max - min + 1)) + min;\n}\n\n/*\n Skeleton text.\n \n @element cds-custom-skeleton-text\n /\n@customElement(`${prefix}-skeleton-text`)\nclass CDSSkeletonText extends LitElement {\n /\n Specify optional classes to be added to your SkeletonText\n /\n @property({ reflect: true, attribute: 'optional-classes' })\n optionalClasses;\n\n /\n The type of skeleton text.\n * @deprecated Use the `heading` property instead.\n /\n @property({ reflect: true })\n type = SKELETON_TEXT_TYPE.REGULAR;\n\n /\n Determines if the skeleton text should be rendered as a heading.\n /\n @property({ type: Boolean, reflect: true })\n heading = false;\n\n /\n width (in px or %) of single line of text or max-width of paragraph lines\n /\n @property({ reflect: true })\n width = '100%';\n\n /\n will generate multiple lines of text\n /\n @property({ type: Boolean, reflect: true })\n paragraph = false;\n\n /\n the number of lines in a paragraph\n */\n @property({ type: Number, reflect: true })\n lineCount = 3;\n\n render() {\n const { optionalClasses, paragraph, lineCount, type, width, heading } =\n this;\n let defaultClasses = {\n [`${prefix}--skeleton__text`]: true,\n [`${prefix}--skeleton__heading`]:\n heading \|\| type === SKELETON_TEXT_TYPE.HEADING,\n };\n\n if (optionalClasses) {\n const outputObject = {};\n optionalClasses?.split(' ').forEach((element) => {\n outputObject[element] = true;\n });\n defaultClasses = { ...defaultClasses, ...outputObject };\n }\n const classes = classMap(defaultClasses);\n\n if (paragraph) {\n const widthNum = parseInt(this.width, 10);\n const widthPx = this.width.includes('px');\n const widthPercent = this.width.includes('%');\n const lines: TemplateResult[] = [];\n for (let i = 0; i < lineCount; i++) {\n const randomWidth =\n (widthPercent && `${getRandomInt(0, 75, i)}px`) \|\|\n (widthPx && `${getRandomInt(0, widthNum, i)}px`);\n const style =\n (widthPercent && `width: calc(${width} - ${randomWidth})`) \|\|\n (widthPx && `width: ${randomWidth}`) \|\|\n '';\n lines.push(html`<p class=\"${classes}\" style=\"${style}\"></p>`);\n }\n return lines;\n }\n\n return html`<p class=\"${classes}\" style=\"width:${width}\"></p>`;\n }\n\n static styles = styles;\n}\n\nexport default CDSSkeletonText;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,SAAS,aAAa,KAAa,KAAa,GAAW;AAEzD,QAAO,KAAK,MADI;EAAC;EAAmB;EAAqB;EAAmB,CAClD,IAAI,MAAM,MAAM,MAAM,GAAG,GAAG;;;;;;;AAQxD,~~4BACM~~,wBAAwB,WAAW~~;;;cAYhC,mBAAmB~~;~~iBAMhB;~~eAMF;mBAMI;mBAMA;;CAEZ,SAAS;EACP,MAAM,EAAE,iBAAiB,WAAW,WAAW,MAAM,OAAO,YAC1D;EACF,IAAI,iBAAiB;IAClB,~~GAAG,OAAO,oBAAoB~~;IAC9B,~~GAAG~~,~~OAAO,uBACT,~~WAAW,~~SAAS,mBAAmB~~;~~GAC1C~~;AAED,MAAI,iBAAiB;GACnB,MAAM,eAAe,EAAE;AACvB,oBAAiB,MAAM,IAAI,CAAC,SAAS,YAAY;AAC/C,iBAAa,WAAW;KACxB;AACF,oBAAiB;IAAE,GAAG;IAAgB,GAAG;IAAc;;EAEzD,MAAM,UAAU,SAAS,eAAe;AAExC,MAAI,WAAW;GACb,MAAM,WAAW,SAAS,KAAK,OAAO,GAAG;GACzC,MAAM,UAAU,KAAK,MAAM,SAAS,KAAK;GACzC,MAAM,eAAe,KAAK,MAAM,SAAS,IAAI;GAC7C,MAAM,QAA0B,EAAE;AAClC,QAAK,IAAI,IAAI,GAAG,IAAI,WAAW,KAAK;IAClC,MAAM,cACH,gBAAgB,GAAG,aAAa,GAAG,IAAI,EAAE,CAAC,OAC1C,WAAW,GAAG,aAAa,GAAG,UAAU,EAAE,CAAC;IAC9C,MAAM,QACH,gBAAgB,eAAe,MAAM,KAAK,YAAY,MACtD,WAAW,UAAU,iBACtB;AACF,UAAM,KAAK,IAAI,aAAa,QAAQ,WAAW,MAAM,QAAQ;;AAE/D,UAAO;;AAGT,SAAO,IAAI,aAAa,QAAQ,iBAAiB,MAAM;;;gBAGzCA;;;YAzEf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC;YAO1D,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;8BApC3CC,cAAc,~~GAAG~~,~~OAAO~~,~~gBAAgB~~;AAiFzC,~~4BAAe~~"}
1	+ {"version":3,"file":"skeleton-text.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-text/skeleton-text.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { SKELETON_TEXT_TYPE } from './defs';\nimport styles from './skeleton-text.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { SKELETON_TEXT_TYPE };\n\nfunction getRandomInt(min: number, max: number, n: number) {\n const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];\n return Math.floor(randoms[n % 3] (max - min + 1)) + min;\n}\n\n/*\n Skeleton text.\n \n @element cds-custom-skeleton-text\n /\n@customElement(`${prefix}-skeleton-text`)\nclass CDSSkeletonText extends LitElement {\n /\n Specify optional classes to be added to your SkeletonText\n /\n @property({ reflect: true, attribute: 'optional-classes' })\n optionalClasses;\n\n /\n The type of skeleton text.\n * @deprecated Use the `heading` property instead.\n /\n @property({ reflect: true })\n type = SKELETON_TEXT_TYPE.REGULAR;\n\n /\n Determines if the skeleton text should be rendered as a heading.\n /\n @property({ type: Boolean, reflect: true })\n heading = false;\n\n /\n width (in px or %) of single line of text or max-width of paragraph lines\n /\n @property({ reflect: true })\n width = '100%';\n\n /\n will generate multiple lines of text\n /\n @property({ type: Boolean, reflect: true })\n paragraph = false;\n\n /\n the number of lines in a paragraph\n */\n @property({ type: Number, reflect: true })\n lineCount = 3;\n\n render() {\n const { optionalClasses, paragraph, lineCount, type, width, heading } =\n this;\n let defaultClasses = {\n [`${prefix}--skeleton__text`]: true,\n [`${prefix}--skeleton__heading`]:\n heading \|\| type === SKELETON_TEXT_TYPE.HEADING,\n };\n\n if (optionalClasses) {\n const outputObject = {};\n optionalClasses?.split(' ').forEach((element) => {\n outputObject[element] = true;\n });\n defaultClasses = { ...defaultClasses, ...outputObject };\n }\n const classes = classMap(defaultClasses);\n\n if (paragraph) {\n const widthNum = parseInt(this.width, 10);\n const widthPx = this.width.includes('px');\n const widthPercent = this.width.includes('%');\n const lines: TemplateResult[] = [];\n for (let i = 0; i < lineCount; i++) {\n const randomWidth =\n (widthPercent && `${getRandomInt(0, 75, i)}px`) \|\|\n (widthPx && `${getRandomInt(0, widthNum, i)}px`);\n const style =\n (widthPercent && `width: calc(${width} - ${randomWidth})`) \|\|\n (widthPx && `width: ${randomWidth}`) \|\|\n '';\n lines.push(html`<p class=\"${classes}\" style=\"${style}\"></p>`);\n }\n return lines;\n }\n\n return html`<p class=\"${classes}\" style=\"width:${width}\"></p>`;\n }\n\n static styles = styles;\n}\n\nexport default CDSSkeletonText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBA,SAAS,aAAa,KAAa,KAAa,GAAW;AAEzD,QAAO,KAAK,MADI;EAAC;EAAmB;EAAqB;EAAmB,CAClD,IAAI,MAAM,MAAM,MAAM,GAAG,GAAG;;;;;;;AAQxD,IAAA,kBAAA,MACM,wBAAwB,WAAW;;;;iBAkB7B;eAMF;mBAMI;mBAMA;;CAEZ,SAAS;EACP,MAAM,EAAE,iBAAiB,WAAW,WAAW,MAAM,OAAO,YAC1D;EACF,IAAI,iBAAiB;IAClB,wBAA8B;IAC9B,2BACC,WAAW,SAAA;GACd;AAED,MAAI,iBAAiB;GACnB,MAAM,eAAe,EAAE;AACvB,oBAAiB,MAAM,IAAI,CAAC,SAAS,YAAY;AAC/C,iBAAa,WAAW;KACxB;AACF,oBAAiB;IAAE,GAAG;IAAgB,GAAG;IAAc;;EAEzD,MAAM,UAAU,SAAS,eAAe;AAExC,MAAI,WAAW;GACb,MAAM,WAAW,SAAS,KAAK,OAAO,GAAG;GACzC,MAAM,UAAU,KAAK,MAAM,SAAS,KAAK;GACzC,MAAM,eAAe,KAAK,MAAM,SAAS,IAAI;GAC7C,MAAM,QAA0B,EAAE;AAClC,QAAK,IAAI,IAAI,GAAG,IAAI,WAAW,KAAK;IAClC,MAAM,cACH,gBAAgB,GAAG,aAAa,GAAG,IAAI,EAAE,CAAC,OAC1C,WAAW,GAAG,aAAa,GAAG,UAAU,EAAE,CAAC;IAC9C,MAAM,QACH,gBAAgB,eAAe,MAAM,KAAK,YAAY,MACtD,WAAW,UAAU,iBACtB;AACF,UAAM,KAAK,IAAI,aAAa,QAAQ,WAAW,MAAM,QAAQ;;AAE/D,UAAO;;AAGT,SAAO,IAAI,aAAa,QAAQ,iBAAiB,MAAM;;;gBAGzCA;;;YAzEf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,gBAAA,WAAA,mBAAA,KAAA,EAAA;YAO1D,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,WAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,SAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,aAAA,KAAA,EAAA;8BApC3CC,cAAc,oBAA0B,CAAA,EAAA,gBAAA;AAiFzC,IAAA,wBAAe"}

package/es-custom/components/skeleton-text/skeleton-text.scss.js CHANGED Viewed

@@ -6,10 +6,9 @@
  */
 import { css } from "lit";
 //#region src/components/skeleton-text/skeleton-text.scss?lit
 var skeleton_text_default = css(["@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}}@keyframes ai-skeleton-animation{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.cds-custom--icon--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--icon--skeleton:active,.cds-custom--icon--skeleton:focus,.cds-custom--icon--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--icon--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--icon--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--icon--skeleton{background:CanvasText}.cds-custom--icon--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--icon--skeleton{block-size:1rem;display:inline-block;inline-size:1rem}.cds-custom--skeleton__placeholder{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--skeleton__placeholder:active,.cds-custom--skeleton__placeholder:focus,.cds-custom--skeleton__placeholder:hover{border:none;cursor:default;outline:none}.cds-custom--skeleton__placeholder: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--skeleton__placeholder:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__placeholder{background:CanvasText}.cds-custom--skeleton__placeholder:before{background:Canvas;forced-color-adjust:none}}.cds-custom--skeleton__placeholder{block-size:6.25rem;inline-size:6.25rem}.cds-custom--skeleton__text{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--skeleton__text:active,.cds-custom--skeleton__text:focus,.cds-custom--skeleton__text:hover{border:none;cursor:default;outline:none}.cds-custom--skeleton__text: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--skeleton__text:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__text{background:CanvasText}.cds-custom--skeleton__text:before{background:Canvas;forced-color-adjust:none}}.cds-custom--skeleton__text{block-size:1rem;inline-size:100%;margin-block-end:.5rem}.cds-custom--skeleton__heading{block-size:1.5rem}.cds-custom--skeleton__icon--ai,.cds-custom--skeleton__placeholder--ai,.cds-custom--skeleton__text--ai{background:var(--cds-ai-skeleton-background,#d0e2ff);overflow:hidden}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before,.cds-custom--skeleton__text--ai:before{animation:ai-skeleton-animation 1.25s ease-in-out infinite;background:linear-gradient(90deg,rgba(69,137,255,0) 0,rgba(69,137,255,.5) 50%,rgba(69,137,255,0))}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before{inline-size:200%}.cds-custom--skeleton__placeholder--ai{border-radius:.5rem}.cds-custom--skeleton__text--ai{border-radius:1rem}.cds-custom--skeleton__icon--ai{border-radius:.125rem}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--skeleton__icon--ai,.cds-custom--skeleton__placeholder--ai,.cds-custom--skeleton__text--ai{background:CanvasText}.cds-custom--skeleton__icon--ai:before,.cds-custom--skeleton__placeholder--ai:before,.cds-custom--skeleton__text--ai:before{background:Canvas}}:host(cds-custom-skeleton-text){display:block;inline-size:100%}:host(cds-custom-skeleton-text) .cds-custom--skeleton__text{margin-block-start:0}"]);
 //#endregion
 export { skeleton_text_default as default };
 //# sourceMappingURL=skeleton-text.scss.js.map

package/es-custom/components/skip-to-content/skip-to-content.js CHANGED Viewed

@@ -5,15 +5,14 @@
  * 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 FocusMixin from "../../globals/mixins/focus.js";
 import skip_to_content_default$1 from "./skip-to-content.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/components/skip-to-content/skip-to-content.ts
 /**
 * Copyright IBM Corp. 2020, 2023
@@ -38,7 +37,7 @@ let CDSSkipToContent = class CDSSkipToContent extends FocusMixin(LitElement) {
 	render() {
 		const { linkAssisstiveText } = this;
 		return html`
-      <a class="${prefix}--skip-to-content" href="${ifDefined(this.href)}"
+      <a class="${"cds-custom"}--skip-to-content" href="${ifDefined(this.href)}"
         ><slot>${linkAssisstiveText}</slot></a
       >
     `;
@@ -61,9 +60,9 @@ let CDSSkipToContent = class CDSSkipToContent extends FocusMixin(LitElement) {
 };
 __decorate([property({ attribute: "link-assistive-text" })], CDSSkipToContent.prototype, "linkAssisstiveText", void 0);
 __decorate([property()], CDSSkipToContent.prototype, "href", void 0);
-CDSSkipToContent = __decorate([carbonElement(`${prefix}-skip-to-content`)], CDSSkipToContent);
+CDSSkipToContent = __decorate([carbonElement(`cds-custom-skip-to-content`)], CDSSkipToContent);
 var skip_to_content_default = CDSSkipToContent;
 //#endregion
 export { skip_to_content_default as default };
 //# sourceMappingURL=skip-to-content.js.map