npm - @govtechsg/sgds-web-component - Versions diffs - 3.6.0-rc.2 → 3.6.0 - Mend

@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.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 (233) hide show

package/react/components/Modal/sgds-modal.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-modal.cjs.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/*\n @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n \n @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n \n @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n \n /\nexport class SgdsModal extends SgdsElement {\n static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n /*@internal /\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n /*@internal /\n @query(\".modal\") dialog: HTMLElement;\n /*@internal /\n @query(\".modal-panel\") panel: HTMLElement;\n /*@internal /\n @query(\".modal-overlay\") overlay: HTMLElement;\n /*@internal /\n @query(\".modal-title\") heading: HTMLElement;\n /*@internal /\n private readonly hasSlotController = new HasSlotController(this, \"footer\");\n /*@internal /\n private modal: Modal;\n /*@internal /\n private originalTrigger: HTMLElement \| null;\n private _resizeHandler: () => void;\n\n /*Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Removes the default animation when opening and closing of modal /\n @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n /* Specifies a small, medium, large or fullscreen modal, the size is medium by default. /\n @property({ reflect: true }) size: \"sm\" \| \"md\" \| \"lg\" \| \"fullscreen\" = \"md\";\n\n /* Used only for SSR to indicate the presence of the `footer` slot. /\n @property({ type: Boolean }) hasFooterSlot = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.modal = new Modal(this);\n this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._removeResizeListener();\n unlockBodyScrolling(this);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this._onWindowResize();\n this.dialog.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n this.modal.activate();\n lockBodyScrolling(this);\n }\n }\n\n updated() {\n if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n }\n\n private _debounce(func: (...args: any[]) => void, wait: number) {\n let timeout: number;\n return (...args: any[]) => {\n clearTimeout(timeout);\n timeout = window.setTimeout(() => func(...args), wait);\n };\n }\n\n /* Handle the window resize event. /\n private _onWindowResize() {\n const panel = this.panel.getBoundingClientRect();\n const panelWidth = panel.width;\n const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n if (!this.panel) return;\n\n if (buttonElements.length <= 1) return;\n\n if (panelWidth < SM_BREAKPOINT \|\| (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = true;\n });\n } else {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = false;\n });\n }\n }\n\n /* Add the resize event listener. /\n private _addResizeListener() {\n window.addEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Remove the resize event listener. /\n private _removeResizeListener() {\n window.removeEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Shows the dialog. /\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hides the dialog */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private requestClose(source: \"close-button\" \| \"keyboard\" \| \"overlay\") {\n const sgdsRequestClose = this.emit(\"sgds-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (sgdsRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"modal.denyClose\");\n animateTo(this.panel, animation.keyframes);\n return;\n }\n\n this.hide();\n }\n\n addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n handleDocumentKeyDown(event: KeyboardEvent) {\n if (this.open && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n }\n\n private _overlayClickHandler() {\n if (this.size === \"fullscreen\") {\n return;\n }\n\n this.requestClose(\"overlay\");\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n this.modal.activate();\n\n lockBodyScrolling(this);\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n this.dialog.hidden = false;\n\n const panelAnimation = getAnimation(this, \"modal.show\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]));\n\n this.emit(\"sgds-after-show\");\n\n // Add focus on modal heading after opening it\n this.heading.focus();\n\n // Add resize listener only when the modal is shown\n this._addResizeListener();\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n this.modal.deactivate();\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, \"modal.hide\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]));\n\n this.dialog.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n unlockBodyScrolling(this);\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n\n // Remove resize listener when the modal is hidden\n this._removeResizeListener();\n }\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n modal: true,\n show: this.open,\n \"has-footer\": this.hasFooterSlot\n })}\n >\n <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n <div\n class=\"modal-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"title\"\n tabindex=\"-1\"\n >\n <div class=\"modal-content\">\n <sgds-close-button\n class=\"modal-header__close\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n ariaLabel=\"close modal\"\n ></sgds-close-button>\n <div class=\"modal-header\">\n <div class=\"modal-header__title-description\">\n <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"modal-body\">\n <slot></slot>\n </div>\n </div class=\"modal-content\">\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n keyframes: [\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n keyframes: [\n { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["SgdsElement","HasSlotController","Modal","unlockBodyScrolling","lockBodyScrolling","SM_BREAKPOINT","MD_BREAKPOINT","waitForEvent","getAnimation","animateTo","stopAnimations","html","classMap","headerStyles","svgStyles","modalStyle","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-modal.cjs.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/*\n @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n \n @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n \n @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n \n /\nexport class SgdsModal extends SgdsElement {\n static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n /*@internal /\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n /*@internal /\n @query(\".modal\") dialog: HTMLElement;\n /*@internal /\n @query(\".modal-panel\") panel: HTMLElement;\n /*@internal /\n @query(\".modal-overlay\") overlay: HTMLElement;\n /*@internal /\n @query(\".modal-title\") heading: HTMLElement;\n /*@internal /\n private readonly hasSlotController = new HasSlotController(this, \"footer\");\n /*@internal /\n private modal: Modal;\n /*@internal /\n private originalTrigger: HTMLElement \| null;\n private _resizeHandler: () => void;\n\n /*Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Removes the default animation when opening and closing of modal /\n @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n /* Specifies a small, medium, large or fullscreen modal, the size is medium by default. /\n @property({ reflect: true }) size: \"sm\" \| \"md\" \| \"lg\" \| \"fullscreen\" = \"md\";\n\n /* Used only for SSR to indicate the presence of the `footer` slot. /\n @property({ type: Boolean }) hasFooterSlot = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.modal = new Modal(this);\n this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._removeResizeListener();\n unlockBodyScrolling(this);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this._onWindowResize();\n this.dialog.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n this.modal.activate();\n lockBodyScrolling(this);\n }\n }\n\n updated() {\n if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n }\n\n private _debounce(func: (...args: any[]) => void, wait: number) {\n let timeout: number;\n return (...args: any[]) => {\n clearTimeout(timeout);\n timeout = window.setTimeout(() => func(...args), wait);\n };\n }\n\n /* Handle the window resize event. /\n private _onWindowResize() {\n const panel = this.panel.getBoundingClientRect();\n const panelWidth = panel.width;\n const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n if (!this.panel) return;\n\n if (buttonElements.length <= 1) return;\n\n if (panelWidth < SM_BREAKPOINT \|\| (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = true;\n });\n } else {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = false;\n });\n }\n }\n\n /* Add the resize event listener. /\n private _addResizeListener() {\n window.addEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Remove the resize event listener. /\n private _removeResizeListener() {\n window.removeEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Shows the dialog. /\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hides the dialog */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private requestClose(source: \"close-button\" \| \"keyboard\" \| \"overlay\") {\n const sgdsRequestClose = this.emit(\"sgds-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (sgdsRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"modal.denyClose\");\n animateTo(this.panel, animation.keyframes);\n return;\n }\n\n this.hide();\n }\n\n addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n handleDocumentKeyDown(event: KeyboardEvent) {\n if (this.open && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n }\n\n private _overlayClickHandler() {\n if (this.size === \"fullscreen\") {\n return;\n }\n\n this.requestClose(\"overlay\");\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n this.modal.activate();\n\n lockBodyScrolling(this);\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n this.dialog.hidden = false;\n\n const panelAnimation = getAnimation(this, \"modal.show\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]));\n\n this.emit(\"sgds-after-show\");\n\n // Add focus on modal heading after opening it\n this.heading.focus();\n\n // Add resize listener only when the modal is shown\n this._addResizeListener();\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n this.modal.deactivate();\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, \"modal.hide\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]));\n\n this.dialog.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n unlockBodyScrolling(this);\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n\n // Remove resize listener when the modal is hidden\n this._removeResizeListener();\n }\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n modal: true,\n show: this.open,\n \"has-footer\": this.hasFooterSlot\n })}\n >\n <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n <div\n class=\"modal-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"title\"\n tabindex=\"-1\"\n >\n <div class=\"modal-content\">\n <sgds-close-button\n class=\"modal-header__close\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n aria-label=\"close modal\"\n ></sgds-close-button>\n <div class=\"modal-header\">\n <div class=\"modal-header__title-description\">\n <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"modal-body\">\n <slot></slot>\n </div>\n </div class=\"modal-content\">\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n keyframes: [\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n keyframes: [\n { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["SgdsElement","HasSlotController","Modal","unlockBodyScrolling","lockBodyScrolling","SM_BREAKPOINT","MD_BREAKPOINT","waitForEvent","getAnimation","animateTo","stopAnimations","html","classMap","headerStyles","svgStyles","modalStyle","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Modal/sgds-modal.js CHANGED Viewed

@@ -12,7 +12,7 @@ import Modal from '../../utils/modal.js';
 import { HasSlotController } from '../../utils/slot.js';
 import { unlockBodyScrolling, lockBodyScrolling } from '../../utils/scroll.js';
 import { SM_BREAKPOINT, MD_BREAKPOINT } from '../../utils/breakpoints.js';
-import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
 import css_248z$2 from './modal.js';
 import css_248z from '../../styles/header-class.js';
 import css_248z$1 from '../../styles/svg.js';
@@ -235,7 +235,7 @@ class SgdsModal extends SgdsElement {
                    <sgds-close-button
                 class="modal-header__close"
                 @click="${() => this.requestClose("close-button")}"
-                ariaLabel="close modal"
+                aria-label="close modal"
               ></sgds-close-button>
             <div class="modal-header">
               <div class="modal-header__title-description">

package/react/components/Modal/sgds-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-modal.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/*\n @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n \n @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n \n @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n \n /\nexport class SgdsModal extends SgdsElement {\n static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n /*@internal /\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n /*@internal /\n @query(\".modal\") dialog: HTMLElement;\n /*@internal /\n @query(\".modal-panel\") panel: HTMLElement;\n /*@internal /\n @query(\".modal-overlay\") overlay: HTMLElement;\n /*@internal /\n @query(\".modal-title\") heading: HTMLElement;\n /*@internal /\n private readonly hasSlotController = new HasSlotController(this, \"footer\");\n /*@internal /\n private modal: Modal;\n /*@internal /\n private originalTrigger: HTMLElement \| null;\n private _resizeHandler: () => void;\n\n /*Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Removes the default animation when opening and closing of modal /\n @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n /* Specifies a small, medium, large or fullscreen modal, the size is medium by default. /\n @property({ reflect: true }) size: \"sm\" \| \"md\" \| \"lg\" \| \"fullscreen\" = \"md\";\n\n /* Used only for SSR to indicate the presence of the `footer` slot. /\n @property({ type: Boolean }) hasFooterSlot = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.modal = new Modal(this);\n this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._removeResizeListener();\n unlockBodyScrolling(this);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this._onWindowResize();\n this.dialog.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n this.modal.activate();\n lockBodyScrolling(this);\n }\n }\n\n updated() {\n if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n }\n\n private _debounce(func: (...args: any[]) => void, wait: number) {\n let timeout: number;\n return (...args: any[]) => {\n clearTimeout(timeout);\n timeout = window.setTimeout(() => func(...args), wait);\n };\n }\n\n /* Handle the window resize event. /\n private _onWindowResize() {\n const panel = this.panel.getBoundingClientRect();\n const panelWidth = panel.width;\n const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n if (!this.panel) return;\n\n if (buttonElements.length <= 1) return;\n\n if (panelWidth < SM_BREAKPOINT \|\| (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = true;\n });\n } else {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = false;\n });\n }\n }\n\n /* Add the resize event listener. /\n private _addResizeListener() {\n window.addEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Remove the resize event listener. /\n private _removeResizeListener() {\n window.removeEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Shows the dialog. /\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hides the dialog */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private requestClose(source: \"close-button\" \| \"keyboard\" \| \"overlay\") {\n const sgdsRequestClose = this.emit(\"sgds-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (sgdsRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"modal.denyClose\");\n animateTo(this.panel, animation.keyframes);\n return;\n }\n\n this.hide();\n }\n\n addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n handleDocumentKeyDown(event: KeyboardEvent) {\n if (this.open && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n }\n\n private _overlayClickHandler() {\n if (this.size === \"fullscreen\") {\n return;\n }\n\n this.requestClose(\"overlay\");\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n this.modal.activate();\n\n lockBodyScrolling(this);\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n this.dialog.hidden = false;\n\n const panelAnimation = getAnimation(this, \"modal.show\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]));\n\n this.emit(\"sgds-after-show\");\n\n // Add focus on modal heading after opening it\n this.heading.focus();\n\n // Add resize listener only when the modal is shown\n this._addResizeListener();\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n this.modal.deactivate();\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, \"modal.hide\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]));\n\n this.dialog.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n unlockBodyScrolling(this);\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n\n // Remove resize listener when the modal is hidden\n this._removeResizeListener();\n }\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n modal: true,\n show: this.open,\n \"has-footer\": this.hasFooterSlot\n })}\n >\n <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n <div\n class=\"modal-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"title\"\n tabindex=\"-1\"\n >\n <div class=\"modal-content\">\n <sgds-close-button\n class=\"modal-header__close\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n ariaLabel=\"close modal\"\n ></sgds-close-button>\n <div class=\"modal-header\">\n <div class=\"modal-header__title-description\">\n <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"modal-body\">\n <slot></slot>\n </div>\n </div class=\"modal-content\">\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n keyframes: [\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n keyframes: [\n { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["headerStyles","svgStyles","modalStyle"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-modal.js","sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/*\n @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n \n @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n \n @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n \n /\nexport class SgdsModal extends SgdsElement {\n static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n /*@internal /\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n /*@internal /\n @query(\".modal\") dialog: HTMLElement;\n /*@internal /\n @query(\".modal-panel\") panel: HTMLElement;\n /*@internal /\n @query(\".modal-overlay\") overlay: HTMLElement;\n /*@internal /\n @query(\".modal-title\") heading: HTMLElement;\n /*@internal /\n private readonly hasSlotController = new HasSlotController(this, \"footer\");\n /*@internal /\n private modal: Modal;\n /*@internal /\n private originalTrigger: HTMLElement \| null;\n private _resizeHandler: () => void;\n\n /*Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. /\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Removes the default animation when opening and closing of modal /\n @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n /* Specifies a small, medium, large or fullscreen modal, the size is medium by default. /\n @property({ reflect: true }) size: \"sm\" \| \"md\" \| \"lg\" \| \"fullscreen\" = \"md\";\n\n /* Used only for SSR to indicate the presence of the `footer` slot. /\n @property({ type: Boolean }) hasFooterSlot = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.modal = new Modal(this);\n this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._removeResizeListener();\n unlockBodyScrolling(this);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this._onWindowResize();\n this.dialog.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n this.modal.activate();\n lockBodyScrolling(this);\n }\n }\n\n updated() {\n if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n }\n\n private _debounce(func: (...args: any[]) => void, wait: number) {\n let timeout: number;\n return (...args: any[]) => {\n clearTimeout(timeout);\n timeout = window.setTimeout(() => func(...args), wait);\n };\n }\n\n /* Handle the window resize event. /\n private _onWindowResize() {\n const panel = this.panel.getBoundingClientRect();\n const panelWidth = panel.width;\n const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n if (!this.panel) return;\n\n if (buttonElements.length <= 1) return;\n\n if (panelWidth < SM_BREAKPOINT \|\| (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = true;\n });\n } else {\n buttonElements.forEach(buttonElement => {\n const button = buttonElement as SgdsButton;\n button.fullWidth = false;\n });\n }\n }\n\n /* Add the resize event listener. /\n private _addResizeListener() {\n window.addEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Remove the resize event listener. /\n private _removeResizeListener() {\n window.removeEventListener(\"resize\", this._resizeHandler);\n }\n\n /* Shows the dialog. /\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hides the dialog */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private requestClose(source: \"close-button\" \| \"keyboard\" \| \"overlay\") {\n const sgdsRequestClose = this.emit(\"sgds-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (sgdsRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"modal.denyClose\");\n animateTo(this.panel, animation.keyframes);\n return;\n }\n\n this.hide();\n }\n\n addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n handleDocumentKeyDown(event: KeyboardEvent) {\n if (this.open && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n }\n\n private _overlayClickHandler() {\n if (this.size === \"fullscreen\") {\n return;\n }\n\n this.requestClose(\"overlay\");\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n this.modal.activate();\n\n lockBodyScrolling(this);\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n this.dialog.hidden = false;\n\n const panelAnimation = getAnimation(this, \"modal.show\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]));\n\n this.emit(\"sgds-after-show\");\n\n // Add focus on modal heading after opening it\n this.heading.focus();\n\n // Add resize listener only when the modal is shown\n this._addResizeListener();\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n this.modal.deactivate();\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, \"modal.hide\");\n const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n !this.noAnimation &&\n (await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]));\n\n this.dialog.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n unlockBodyScrolling(this);\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n\n // Remove resize listener when the modal is hidden\n this._removeResizeListener();\n }\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n modal: true,\n show: this.open,\n \"has-footer\": this.hasFooterSlot\n })}\n >\n <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n <div\n class=\"modal-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"title\"\n tabindex=\"-1\"\n >\n <div class=\"modal-content\">\n <sgds-close-button\n class=\"modal-header__close\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n aria-label=\"close modal\"\n ></sgds-close-button>\n <div class=\"modal-header\">\n <div class=\"modal-header__title-description\">\n <slot class=\"modal-title\" id=\"title\" name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"modal-body\">\n <slot></slot>\n </div>\n </div class=\"modal-content\">\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n keyframes: [\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n keyframes: [\n { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n ],\n options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"names":["headerStyles","svgStyles","modalStyle"],"mappings":"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"}

package/react/components/Subnav/sgds-subnav.cjs.js CHANGED Viewed

@@ -16,6 +16,7 @@ var breakpoints = require('../../utils/breakpoints.cjs.js');
 var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var subnav = require('./subnav.cjs.js');
 var grid = require('../../css/grid.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 const VALID_KEYS = ["Enter", " "];
 /**
@@ -34,8 +35,11 @@ const VALID_KEYS = ["Enter", " "];
 class SgdsSubnav extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
+        /** Used only for SSR to indicate the presence of the `actions` slot. */
+        this.hasActionsSlot = false;
         this.isCollapsed = false;
         this.isMenuOpen = false;
+        this.hasSlotController = new slot.HasSlotController(this, "actions");
         this._handleResize = async () => {
             this.isCollapsed = window.innerWidth < breakpoints.LG_BREAKPOINT;
             await this.updateComplete;
@@ -91,6 +95,10 @@ class SgdsSubnav extends sgdsElement["default"] {
         super.firstUpdated(changedProperties);
         this._handleResize();
     }
+    updated() {
+        if (!this.hasActionsSlot)
+            this.hasActionsSlot = this.hasSlotController.test("actions");
+    }
     _handleClickOutOfElement(e, self) {
         if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {
             this.hide();
@@ -187,7 +195,12 @@ class SgdsSubnav extends sgdsElement["default"] {
             <div class="subnav-nav">
               <slot></slot>
             </div>
-            <div class="subnav-actions">
+            <div
+              class="${classMap_js.classMap({
+            "subnav-actions": true,
+            "no-actions": !this.hasActionsSlot
+        })}"
+            >
               <slot name="actions"></slot>
             </div>
           </div>
@@ -201,6 +214,9 @@ SgdsSubnav.styles = [...sgdsElement["default"].styles, subnav["default"], grid["
 SgdsSubnav.dependencies = {
     "sgds-icon": sgdsIcon.SgdsIcon
 };
+tslib.__decorate([
+    decorators_js.property({ type: Boolean })
+], SgdsSubnav.prototype, "hasActionsSlot", void 0);
 tslib.__decorate([
     decorators_js.query("nav")
 ], SgdsSubnav.prototype, "nav", void 0);

package/react/components/Subnav/sgds-subnav.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-subnav.cjs.js","sources":["../../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/*\n @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.\n \n @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n \n @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n \n /\n\nexport class SgdsSubnav extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n /** @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n @query(\"nav\")\n private nav: HTMLElement;\n\n @query(\".subnav-nav\")\n private mobileNav: HTMLElement;\n\n @query(\".header-container\")\n private headerContainer: HTMLElement;\n\n @query(\".subnav-toggler\")\n private toggler: HTMLElement;\n\n @query(\".subnav-nav-group\")\n private navGroup: HTMLElement;\n\n @query(\".subnav-actions\")\n private mobileActions: HTMLElement;\n\n @state()\n private isCollapsed = false;\n\n @state()\n private isMenuOpen = false;\n\n connectedCallback() {\n super.connectedCallback();\n\n // this._handleResize();\n window.addEventListener(\"resize\", this._handleResize);\n window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener(\"resize\", this._handleResize);\n window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n this._handleResize();\n }\n\n private _handleResize = async () => {\n this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n await this.updateComplete;\n\n if (!this.isCollapsed) {\n this.isMenuOpen = false;\n }\n\n this._updateMobileLayout();\n };\n\n private _updateMobileLayout = () => {\n if (!this.nav \|\| !this.headerContainer \|\| !this.mobileActions \|\| !this.mobileNav) return;\n\n if (this.isCollapsed) {\n const { top: subnavTop } = this.nav.getBoundingClientRect();\n const headerHeight = this.headerContainer.clientHeight;\n const actionsButtonHeight = this.mobileActions.clientHeight;\n const offset =\n window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n ? subnavTop + headerHeight\n : subnavTop + headerHeight + actionsButtonHeight;\n\n this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n this.style.minHeight = `${this.nav.clientHeight}px`;\n this.nav.style.position = \"absolute\";\n } else {\n this.mobileNav.style.maxHeight = \"none\";\n this.style.minHeight = \"auto\";\n this.nav.style.position = \"relative\";\n }\n };\n\n private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n this.hide();\n }\n }\n\n private _toggleMenu = () => {\n if (this.isMenuOpen) {\n this.hide();\n } else {\n document.querySelector(\"body\").style.overflow = \"hidden\";\n this.show();\n }\n\n this.toggler?.focus();\n };\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n\n event.preventDefault();\n this._toggleMenu();\n }\n\n /* Shows the menu. For when subnav is in the collapsed form /\n public async show() {\n if (this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the menu. For when subnav is in the collapsed form */\n public async hide() {\n if (!this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = false;\n document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private async _animateToShow() {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.isMenuOpen = false;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"flex\";\n }\n\n const { keyframes, options } = getAnimation(this, \"subnav.show\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n this.emit(\"sgds-after-show\");\n }\n\n private async _animateToHide() {\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.isMenuOpen = true;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n\n const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"none\";\n }\n\n this.emit(\"sgds-after-hide\");\n }\n\n @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.isMenuOpen) {\n // Show\n this._animateToShow();\n } else {\n // Hide\n this._animateToHide();\n }\n }\n\n @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n async handleCollapsedChange() {\n await this.updateComplete;\n this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n }\n\n render() {\n return html`\n <nav aria-label=\"Sub navigation\">\n <div\n class=${classMap({\n \"sgds-container\": true,\n subnav: true,\n collapsed: !this.isMenuOpen\n })}\n >\n <div class=\"header-container\">\n <slot name=\"header\"></slot>\n <sgds-icon\n class=\"subnav-toggler\"\n name=\"chevron-down\"\n tabindex=\"0\"\n @click=${this._toggleMenu}\n @keydown=${this._onKeyboardToggle}\n aria-label=\"Toggle sub navigation\"\n aria-expanded=${this.isMenuOpen}\n ></sgds-icon>\n </div>\n <div class=\"subnav-nav-group\">\n <div class=\"subnav-nav\">\n <slot></slot>\n </div>\n <div class=\"subnav-actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"names":["SgdsElement","LG_BREAKPOINT","MD_BREAKPOINT","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","subnavStyle","gridStyle","SgdsIcon","__decorate","query","state","watch","setDefaultAnimation"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-subnav.cjs.js","sources":["../../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/*\n @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.\n \n @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n \n @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n \n /\n\nexport class SgdsSubnav extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n /** @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* Used only for SSR to indicate the presence of the `actions` slot. /\n @property({ type: Boolean }) hasActionsSlot = false;\n\n @query(\"nav\")\n private nav: HTMLElement;\n\n @query(\".subnav-nav\")\n private mobileNav: HTMLElement;\n\n @query(\".header-container\")\n private headerContainer: HTMLElement;\n\n @query(\".subnav-toggler\")\n private toggler: HTMLElement;\n\n @query(\".subnav-nav-group\")\n private navGroup: HTMLElement;\n\n @query(\".subnav-actions\")\n private mobileActions: HTMLElement;\n\n @state()\n private isCollapsed = false;\n\n @state()\n private isMenuOpen = false;\n\n private readonly hasSlotController = new HasSlotController(this, \"actions\");\n\n connectedCallback() {\n super.connectedCallback();\n\n // this._handleResize();\n window.addEventListener(\"resize\", this._handleResize);\n window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener(\"resize\", this._handleResize);\n window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n this._handleResize();\n }\n\n updated() {\n if (!this.hasActionsSlot) this.hasActionsSlot = this.hasSlotController.test(\"actions\");\n }\n\n private _handleResize = async () => {\n this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n await this.updateComplete;\n\n if (!this.isCollapsed) {\n this.isMenuOpen = false;\n }\n\n this._updateMobileLayout();\n };\n\n private _updateMobileLayout = () => {\n if (!this.nav \|\| !this.headerContainer \|\| !this.mobileActions \|\| !this.mobileNav) return;\n\n if (this.isCollapsed) {\n const { top: subnavTop } = this.nav.getBoundingClientRect();\n const headerHeight = this.headerContainer.clientHeight;\n const actionsButtonHeight = this.mobileActions.clientHeight;\n const offset =\n window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n ? subnavTop + headerHeight\n : subnavTop + headerHeight + actionsButtonHeight;\n\n this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n this.style.minHeight = `${this.nav.clientHeight}px`;\n this.nav.style.position = \"absolute\";\n } else {\n this.mobileNav.style.maxHeight = \"none\";\n this.style.minHeight = \"auto\";\n this.nav.style.position = \"relative\";\n }\n };\n\n private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n this.hide();\n }\n }\n\n private _toggleMenu = () => {\n if (this.isMenuOpen) {\n this.hide();\n } else {\n document.querySelector(\"body\").style.overflow = \"hidden\";\n this.show();\n }\n\n this.toggler?.focus();\n };\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n\n event.preventDefault();\n this._toggleMenu();\n }\n\n /* Shows the menu. For when subnav is in the collapsed form /\n public async show() {\n if (this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the menu. For when subnav is in the collapsed form */\n public async hide() {\n if (!this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = false;\n document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private async _animateToShow() {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.isMenuOpen = false;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"flex\";\n }\n\n const { keyframes, options } = getAnimation(this, \"subnav.show\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n this.emit(\"sgds-after-show\");\n }\n\n private async _animateToHide() {\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.isMenuOpen = true;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n\n const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"none\";\n }\n\n this.emit(\"sgds-after-hide\");\n }\n\n @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.isMenuOpen) {\n // Show\n this._animateToShow();\n } else {\n // Hide\n this._animateToHide();\n }\n }\n\n @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n async handleCollapsedChange() {\n await this.updateComplete;\n this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n }\n\n render() {\n return html`\n <nav aria-label=\"Sub navigation\">\n <div\n class=${classMap({\n \"sgds-container\": true,\n subnav: true,\n collapsed: !this.isMenuOpen\n })}\n >\n <div class=\"header-container\">\n <slot name=\"header\"></slot>\n <sgds-icon\n class=\"subnav-toggler\"\n name=\"chevron-down\"\n tabindex=\"0\"\n @click=${this._toggleMenu}\n @keydown=${this._onKeyboardToggle}\n aria-label=\"Toggle sub navigation\"\n aria-expanded=${this.isMenuOpen}\n ></sgds-icon>\n </div>\n <div class=\"subnav-nav-group\">\n <div class=\"subnav-nav\">\n <slot></slot>\n </div>\n <div\n class=\"${classMap({\n \"subnav-actions\": true,\n \"no-actions\": !this.hasActionsSlot\n })}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"names":["SgdsElement","HasSlotController","LG_BREAKPOINT","MD_BREAKPOINT","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","subnavStyle","gridStyle","SgdsIcon","__decorate","property","query","state","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Subnav/sgds-subnav.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { __decorate } from 'tslib';
 import SgdsElement from '../../base/sgds-element.js';
 import { html } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { watch } from '../../utils/watch.js';
 import { waitForEvent } from '../../utils/event.js';
@@ -12,6 +12,7 @@ import { LG_BREAKPOINT, MD_BREAKPOINT } from '../../utils/breakpoints.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
 import css_248z from './subnav.js';
 import css_248z$1 from '../../css/grid.js';
+import { HasSlotController } from '../../utils/slot.js';
 const VALID_KEYS = ["Enter", " "];
 /**
@@ -30,8 +31,11 @@ const VALID_KEYS = ["Enter", " "];
 class SgdsSubnav extends SgdsElement {
     constructor() {
         super(...arguments);
+        /** Used only for SSR to indicate the presence of the `actions` slot. */
+        this.hasActionsSlot = false;
         this.isCollapsed = false;
         this.isMenuOpen = false;
+        this.hasSlotController = new HasSlotController(this, "actions");
         this._handleResize = async () => {
             this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
             await this.updateComplete;
@@ -87,6 +91,10 @@ class SgdsSubnav extends SgdsElement {
         super.firstUpdated(changedProperties);
         this._handleResize();
     }
+    updated() {
+        if (!this.hasActionsSlot)
+            this.hasActionsSlot = this.hasSlotController.test("actions");
+    }
     _handleClickOutOfElement(e, self) {
         if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {
             this.hide();
@@ -183,7 +191,12 @@ class SgdsSubnav extends SgdsElement {
             <div class="subnav-nav">
               <slot></slot>
             </div>
-            <div class="subnav-actions">
+            <div
+              class="${classMap({
+            "subnav-actions": true,
+            "no-actions": !this.hasActionsSlot
+        })}"
+            >
               <slot name="actions"></slot>
             </div>
           </div>
@@ -197,6 +210,9 @@ SgdsSubnav.styles = [...SgdsElement.styles, css_248z, css_248z$1];
 SgdsSubnav.dependencies = {
     "sgds-icon": SgdsIcon
 };
+__decorate([
+    property({ type: Boolean })
+], SgdsSubnav.prototype, "hasActionsSlot", void 0);
 __decorate([
     query("nav")
 ], SgdsSubnav.prototype, "nav", void 0);

package/react/components/Subnav/sgds-subnav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-subnav.js","sources":["../../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/*\n @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.\n \n @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n \n @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n \n /\n\nexport class SgdsSubnav extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n /** @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n @query(\"nav\")\n private nav: HTMLElement;\n\n @query(\".subnav-nav\")\n private mobileNav: HTMLElement;\n\n @query(\".header-container\")\n private headerContainer: HTMLElement;\n\n @query(\".subnav-toggler\")\n private toggler: HTMLElement;\n\n @query(\".subnav-nav-group\")\n private navGroup: HTMLElement;\n\n @query(\".subnav-actions\")\n private mobileActions: HTMLElement;\n\n @state()\n private isCollapsed = false;\n\n @state()\n private isMenuOpen = false;\n\n connectedCallback() {\n super.connectedCallback();\n\n // this._handleResize();\n window.addEventListener(\"resize\", this._handleResize);\n window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener(\"resize\", this._handleResize);\n window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n this._handleResize();\n }\n\n private _handleResize = async () => {\n this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n await this.updateComplete;\n\n if (!this.isCollapsed) {\n this.isMenuOpen = false;\n }\n\n this._updateMobileLayout();\n };\n\n private _updateMobileLayout = () => {\n if (!this.nav \|\| !this.headerContainer \|\| !this.mobileActions \|\| !this.mobileNav) return;\n\n if (this.isCollapsed) {\n const { top: subnavTop } = this.nav.getBoundingClientRect();\n const headerHeight = this.headerContainer.clientHeight;\n const actionsButtonHeight = this.mobileActions.clientHeight;\n const offset =\n window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n ? subnavTop + headerHeight\n : subnavTop + headerHeight + actionsButtonHeight;\n\n this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n this.style.minHeight = `${this.nav.clientHeight}px`;\n this.nav.style.position = \"absolute\";\n } else {\n this.mobileNav.style.maxHeight = \"none\";\n this.style.minHeight = \"auto\";\n this.nav.style.position = \"relative\";\n }\n };\n\n private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n this.hide();\n }\n }\n\n private _toggleMenu = () => {\n if (this.isMenuOpen) {\n this.hide();\n } else {\n document.querySelector(\"body\").style.overflow = \"hidden\";\n this.show();\n }\n\n this.toggler?.focus();\n };\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n\n event.preventDefault();\n this._toggleMenu();\n }\n\n /* Shows the menu. For when subnav is in the collapsed form /\n public async show() {\n if (this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the menu. For when subnav is in the collapsed form */\n public async hide() {\n if (!this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = false;\n document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private async _animateToShow() {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.isMenuOpen = false;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"flex\";\n }\n\n const { keyframes, options } = getAnimation(this, \"subnav.show\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n this.emit(\"sgds-after-show\");\n }\n\n private async _animateToHide() {\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.isMenuOpen = true;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n\n const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"none\";\n }\n\n this.emit(\"sgds-after-hide\");\n }\n\n @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.isMenuOpen) {\n // Show\n this._animateToShow();\n } else {\n // Hide\n this._animateToHide();\n }\n }\n\n @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n async handleCollapsedChange() {\n await this.updateComplete;\n this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n }\n\n render() {\n return html`\n <nav aria-label=\"Sub navigation\">\n <div\n class=${classMap({\n \"sgds-container\": true,\n subnav: true,\n collapsed: !this.isMenuOpen\n })}\n >\n <div class=\"header-container\">\n <slot name=\"header\"></slot>\n <sgds-icon\n class=\"subnav-toggler\"\n name=\"chevron-down\"\n tabindex=\"0\"\n @click=${this._toggleMenu}\n @keydown=${this._onKeyboardToggle}\n aria-label=\"Toggle sub navigation\"\n aria-expanded=${this.isMenuOpen}\n ></sgds-icon>\n </div>\n <div class=\"subnav-nav-group\">\n <div class=\"subnav-nav\">\n <slot></slot>\n </div>\n <div class=\"subnav-actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"names":["subnavStyle","gridStyle"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-subnav.js","sources":["../../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, PropertyValueMap } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/*\n @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.\n \n @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n \n @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n \n /\n\nexport class SgdsSubnav extends SgdsElement {\n static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n /** @internal /\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /* Used only for SSR to indicate the presence of the `actions` slot. /\n @property({ type: Boolean }) hasActionsSlot = false;\n\n @query(\"nav\")\n private nav: HTMLElement;\n\n @query(\".subnav-nav\")\n private mobileNav: HTMLElement;\n\n @query(\".header-container\")\n private headerContainer: HTMLElement;\n\n @query(\".subnav-toggler\")\n private toggler: HTMLElement;\n\n @query(\".subnav-nav-group\")\n private navGroup: HTMLElement;\n\n @query(\".subnav-actions\")\n private mobileActions: HTMLElement;\n\n @state()\n private isCollapsed = false;\n\n @state()\n private isMenuOpen = false;\n\n private readonly hasSlotController = new HasSlotController(this, \"actions\");\n\n connectedCallback() {\n super.connectedCallback();\n\n // this._handleResize();\n window.addEventListener(\"resize\", this._handleResize);\n window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener(\"resize\", this._handleResize);\n window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n this._handleResize();\n }\n\n updated() {\n if (!this.hasActionsSlot) this.hasActionsSlot = this.hasSlotController.test(\"actions\");\n }\n\n private _handleResize = async () => {\n this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n await this.updateComplete;\n\n if (!this.isCollapsed) {\n this.isMenuOpen = false;\n }\n\n this._updateMobileLayout();\n };\n\n private _updateMobileLayout = () => {\n if (!this.nav \|\| !this.headerContainer \|\| !this.mobileActions \|\| !this.mobileNav) return;\n\n if (this.isCollapsed) {\n const { top: subnavTop } = this.nav.getBoundingClientRect();\n const headerHeight = this.headerContainer.clientHeight;\n const actionsButtonHeight = this.mobileActions.clientHeight;\n const offset =\n window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n ? subnavTop + headerHeight\n : subnavTop + headerHeight + actionsButtonHeight;\n\n this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n this.style.minHeight = `${this.nav.clientHeight}px`;\n this.nav.style.position = \"absolute\";\n } else {\n this.mobileNav.style.maxHeight = \"none\";\n this.style.minHeight = \"auto\";\n this.nav.style.position = \"relative\";\n }\n };\n\n private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n this.hide();\n }\n }\n\n private _toggleMenu = () => {\n if (this.isMenuOpen) {\n this.hide();\n } else {\n document.querySelector(\"body\").style.overflow = \"hidden\";\n this.show();\n }\n\n this.toggler?.focus();\n };\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n\n event.preventDefault();\n this._toggleMenu();\n }\n\n /* Shows the menu. For when subnav is in the collapsed form /\n public async show() {\n if (this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /* Hide the menu. For when subnav is in the collapsed form */\n public async hide() {\n if (!this.isMenuOpen) {\n return;\n }\n\n this.isMenuOpen = false;\n document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n private async _animateToShow() {\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.isMenuOpen = false;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"flex\";\n }\n\n const { keyframes, options } = getAnimation(this, \"subnav.show\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n this.emit(\"sgds-after-show\");\n }\n\n private async _animateToHide() {\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.isMenuOpen = true;\n return;\n }\n\n await stopAnimations(this.mobileNav);\n\n const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n if (this.isCollapsed) {\n this.mobileNav.style.display = \"none\";\n }\n\n this.emit(\"sgds-after-hide\");\n }\n\n @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.isMenuOpen) {\n // Show\n this._animateToShow();\n } else {\n // Hide\n this._animateToHide();\n }\n }\n\n @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n async handleCollapsedChange() {\n await this.updateComplete;\n this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n }\n\n render() {\n return html`\n <nav aria-label=\"Sub navigation\">\n <div\n class=${classMap({\n \"sgds-container\": true,\n subnav: true,\n collapsed: !this.isMenuOpen\n })}\n >\n <div class=\"header-container\">\n <slot name=\"header\"></slot>\n <sgds-icon\n class=\"subnav-toggler\"\n name=\"chevron-down\"\n tabindex=\"0\"\n @click=${this._toggleMenu}\n @keydown=${this._onKeyboardToggle}\n aria-label=\"Toggle sub navigation\"\n aria-expanded=${this.isMenuOpen}\n ></sgds-icon>\n </div>\n <div class=\"subnav-nav-group\">\n <div class=\"subnav-nav\">\n <slot></slot>\n </div>\n <div\n class=\"${classMap({\n \"subnav-actions\": true,\n \"no-actions\": !this.hasActionsSlot\n })}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"names":["subnavStyle","gridStyle"],"mappings":"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"}

package/react/components/Subnav/subnav.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:950}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:950}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=subnav.cjs.js.map

package/react/components/Subnav/subnav.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host{display:block;position:sticky;top:0;z-index:950}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = css`:host{display:block;position:sticky;top:0;z-index:950}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 export { css_248z as default };
 //# sourceMappingURL=subnav.js.map