@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/react/components/Drawer/sgds-drawer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-drawer.cjs.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { HasSlotController } from \"../../utils/slot.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --drawer-size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --drawer-padding - The amount of padding to use for the header, body and footer\n * @cssproperty --drawer-bg - The drawer's background color.\n * @cssproperty --drawer-button-gap - The drawer's flex gap between buttons.\n *\n */\nexport class SgdsDrawer extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, drawerStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /** @internal */\n  private originalTrigger: HTMLElement | null;\n  /** @internal */\n  @query(\".drawer\") drawer: HTMLElement;\n  /** @internal */\n  @query(\".drawer-panel\") panel: HTMLElement;\n  /** @internal */\n  @query(\".drawer-overlay\") overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `noHeader`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  /** The direction from which the drawer will open. */\n  @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @property({ type: Boolean, reflect: true }) noHeader = false;\n\n  firstUpdated() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n  }\n\n  private uppercaseFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const slRequestClose = this.emit(\"sgds-request-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"drawer.denyClose\");\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.open && !this.contained && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\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\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector(\"[autofocus]\");\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute(\"autofocus\");\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute(\"autofocus\", \"\");\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\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    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.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      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.drawer.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      // 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  }\n\n  @watch(\"contained\", { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\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 drawer */\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  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          drawer: true,\n          \"drawer-open\": this.open,\n          \"drawer-top\": this.placement === \"top\",\n          \"drawer-end\": this.placement === \"end\",\n          \"drawer-bottom\": this.placement === \"bottom\",\n          \"drawer-start\": this.placement === \"start\",\n          \"drawer-contained\": this.contained,\n          \"drawer-fixed\": !this.contained,\n          \"drawer-has-footer\": this.hasSlotController.test(\"footer\")\n        })}\n      >\n        <div part=\"overlay\" class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n        <div\n          part=\"panel\"\n          class=\"drawer-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? \"title\" : undefined)}\n          tabindex=\"0\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"drawer-header\">\n                  <h2 part=\"title\" class=\"drawer-title\" id=\"title\">\n                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->\n                    <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer-header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <sgds-close-button\n                      part=\"close-button\"\n                      class=\"drawer-close\"\n                      aria-label=\"close drawer\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                    ></sgds-close-button>\n                  </div>\n                </header>\n              `\n            : nothing}\n\n          <slot part=\"body\" class=\"drawer-body\"></slot>\n\n          <footer part=\"footer\" class=\"drawer-footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 -100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 -100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n  keyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n  keyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["ScopedElementsMixin","SgdsElement","HasSlotController","SgdsCloseButton","lockBodyScrolling","unlockBodyScrolling","getAnimation","animateTo","stopAnimations","waitForEvent","html","classMap","ifDefined","nothing","drawerStyles","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Drawer/sgds-drawer.js

@@ -0,0 +1,413 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { animateTo, stopAnimations } from '../../utils/animate.js';
+import { getAnimation, setDefaultAnimation } from '../../utils/animation-registry.js';
+import { waitForEvent } from '../../utils/event.js';
+import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll.js';
+import { HasSlotController } from '../../utils/slot.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './drawer.js';
+import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+
+/**
+ * @summary Drawers slide in from a container to expose additional options and information.
+ *
+ * @slot - The drawer's main content.
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header.
+ * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+ *
+ * @event sgds-show - Emitted when the drawer opens.
+ * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.
+ * @event sgds-hide - Emitted when the drawer closes.
+ * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.
+ * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to
+ *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the drawer.
+ * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
+ * @csspart header - The drawer's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header.
+ * @csspart title - The drawer's title.
+ * @csspart close-button - The close button.
+ * @csspart body - The drawer's body.
+ * @csspart footer - The drawer's footer.
+ *
+ * @cssproperty --drawer-size - The preferred size of the drawer. This will be applied to the drawer's width or height
+ *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ * @cssproperty --drawer-padding - The amount of padding to use for the header, body and footer
+ * @cssproperty --drawer-bg - The drawer's background color.
+ * @cssproperty --drawer-button-gap - The drawer's flex gap between buttons.
+ *
+ */
+class SgdsDrawer extends ScopedElementsMixin(SgdsElement) {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.hasSlotController = new HasSlotController(this, "footer");
+        /**
+         * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+         * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+         */
+        this.open = false;
+        /**
+         * The drawer's label as displayed in the header. You should always include a relevant label even when using
+         * `noHeader`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+         */
+        this.label = "";
+        /** The direction from which the drawer will open. */
+        this.placement = "end";
+        /**
+         * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+         * its parent element, set this attribute and add `position: relative` to the parent.
+         */
+        this.contained = false;
+        /**
+         * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+         * accessible way for users to dismiss the drawer.
+         */
+        this.noHeader = false;
+        this.handleDocumentKeyDown = (event) => {
+            if (this.open && !this.contained && event.key === "Escape") {
+                event.stopPropagation();
+                this.requestClose("keyboard");
+            }
+        };
+    }
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-close-button": SgdsCloseButton
+        };
+    }
+    firstUpdated() {
+        this.drawer.hidden = !this.open;
+        if (this.open) {
+            this.addOpenListeners();
+            if (!this.contained) {
+                lockBodyScrolling(this);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockBodyScrolling(this);
+    }
+    uppercaseFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    requestClose(source) {
+        const slRequestClose = this.emit("sgds-request-close", {
+            cancelable: true,
+            detail: { source }
+        });
+        if (slRequestClose.defaultPrevented) {
+            const animation = getAnimation(this, "drawer.denyClose");
+            animateTo(this.panel, animation.keyframes, animation.options);
+            return;
+        }
+        this.hide();
+    }
+    addOpenListeners() {
+        document.addEventListener("keydown", this.handleDocumentKeyDown);
+    }
+    removeOpenListeners() {
+        document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            // Show
+            this.emit("sgds-show");
+            this.addOpenListeners();
+            this.originalTrigger = document.activeElement;
+            // Lock body scrolling only if the drawer isn't contained
+            if (!this.contained) {
+                lockBodyScrolling(this);
+            }
+            // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
+            // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`
+            // ourselves, and add the attribute back afterwards.
+            //
+            // Related: https://github.com/shoelace-style/shoelace/issues/693
+            //
+            const autoFocusTarget = this.querySelector("[autofocus]");
+            if (autoFocusTarget) {
+                autoFocusTarget.removeAttribute("autofocus");
+            }
+            await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);
+            this.drawer.hidden = false;
+            // Set initial focus
+            requestAnimationFrame(() => {
+                const slInitialFocus = this.emit("sgds-initial-focus", { cancelable: true });
+                if (!slInitialFocus.defaultPrevented) {
+                    // Set focus to the autofocus target and restore the attribute
+                    if (autoFocusTarget) {
+                        autoFocusTarget.focus({ preventScroll: true });
+                    }
+                    else {
+                        this.panel.focus({ preventScroll: true });
+                    }
+                }
+                // Restore the autofocus attribute
+                if (autoFocusTarget) {
+                    autoFocusTarget.setAttribute("autofocus", "");
+                }
+            });
+            const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);
+            const overlayAnimation = getAnimation(this, "drawer.overlay.show");
+            await Promise.all([
+                animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+                animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+            ]);
+            this.emit("sgds-after-show");
+        }
+        else {
+            // Hide
+            this.emit("sgds-hide");
+            this.removeOpenListeners();
+            if (!this.contained) {
+                unlockBodyScrolling(this);
+            }
+            await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);
+            const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);
+            const overlayAnimation = getAnimation(this, "drawer.overlay.hide");
+            // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to
+            // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear
+            // unexpectedly. We'll unhide them after all animations have completed.
+            await Promise.all([
+                animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+                    this.overlay.hidden = true;
+                }),
+                animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+                    this.panel.hidden = true;
+                })
+            ]);
+            this.drawer.hidden = true;
+            // Now that the dialog is hidden, restore the overlay and panel for next time
+            this.overlay.hidden = false;
+            this.panel.hidden = false;
+            // Restore focus to the original trigger
+            const trigger = this.originalTrigger;
+            if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === "function") {
+                setTimeout(() => trigger.focus());
+            }
+            this.emit("sgds-after-hide");
+        }
+    }
+    handleNoModalChange() {
+        if (this.open && !this.contained) {
+            lockBodyScrolling(this);
+        }
+        if (this.open && this.contained) {
+            unlockBodyScrolling(this);
+        }
+    }
+    /** Shows the drawer. */
+    async show() {
+        if (this.open) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, "sgds-after-show");
+    }
+    /** Hides the drawer */
+    async hide() {
+        if (!this.open) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, "sgds-after-hide");
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            drawer: true,
+            "drawer-open": this.open,
+            "drawer-top": this.placement === "top",
+            "drawer-end": this.placement === "end",
+            "drawer-bottom": this.placement === "bottom",
+            "drawer-start": this.placement === "start",
+            "drawer-contained": this.contained,
+            "drawer-fixed": !this.contained,
+            "drawer-has-footer": this.hasSlotController.test("footer")
+        })}
+      >
+        <div part="overlay" class="drawer-overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
+
+        <div
+          part="panel"
+          class="drawer-panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open ? "false" : "true"}
+          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}
+          aria-labelledby=${ifDefined(!this.noHeader ? "title" : undefined)}
+          tabindex="0"
+        >
+          ${!this.noHeader
+            ? html `
+                <header part="header" class="drawer-header">
+                  <h2 part="title" class="drawer-title" id="title">
+                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
+                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                  </h2>
+                  <div part="header-actions" class="drawer-header-actions">
+                    <slot name="header-actions"></slot>
+                    <sgds-close-button
+                      part="close-button"
+                      class="drawer-close"
+                      aria-label="close drawer"
+                      @click="${() => this.requestClose("close-button")}"
+                    ></sgds-close-button>
+                  </div>
+                </header>
+              `
+            : nothing}
+
+          <slot part="body" class="drawer-body"></slot>
+
+          <footer part="footer" class="drawer-footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsDrawer.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    query(".drawer")
+], SgdsDrawer.prototype, "drawer", void 0);
+__decorate([
+    query(".drawer-panel")
+], SgdsDrawer.prototype, "panel", void 0);
+__decorate([
+    query(".drawer-overlay")
+], SgdsDrawer.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDrawer.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDrawer.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsDrawer.prototype, "contained", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsDrawer.prototype, "noHeader", void 0);
+__decorate([
+    watch("open", { waitUntilFirstUpdate: true })
+], SgdsDrawer.prototype, "handleOpenChange", null);
+__decorate([
+    watch("contained", { waitUntilFirstUpdate: true })
+], SgdsDrawer.prototype, "handleNoModalChange", null);
+// Top
+setDefaultAnimation("drawer.showTop", {
+    keyframes: [
+        { opacity: 0, translate: "0 -100%" },
+        { opacity: 1, translate: "0 0" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideTop", {
+    keyframes: [
+        { opacity: 1, translate: "0 0" },
+        { opacity: 0, translate: "0 -100%" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+// End
+setDefaultAnimation("drawer.showEnd", {
+    keyframes: [
+        { opacity: 0, translate: "100%" },
+        { opacity: 1, translate: "0" }
+    ],
+    rtlKeyframes: [
+        { opacity: 0, translate: "-100%" },
+        { opacity: 1, translate: "0" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideEnd", {
+    keyframes: [
+        { opacity: 1, translate: "0" },
+        { opacity: 0, translate: "100%" }
+    ],
+    rtlKeyframes: [
+        { opacity: 1, translate: "0" },
+        { opacity: 0, translate: "-100%" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+// Bottom
+setDefaultAnimation("drawer.showBottom", {
+    keyframes: [
+        { opacity: 0, translate: "0 100%" },
+        { opacity: 1, translate: "0 0" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideBottom", {
+    keyframes: [
+        { opacity: 1, translate: "0 0" },
+        { opacity: 0, translate: "0 100%" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+// Start
+setDefaultAnimation("drawer.showStart", {
+    keyframes: [
+        { opacity: 0, translate: "-100%" },
+        { opacity: 1, translate: "0" }
+    ],
+    rtlKeyframes: [
+        { opacity: 0, translate: "100%" },
+        { opacity: 1, translate: "0" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideStart", {
+    keyframes: [
+        { opacity: 1, translate: "0" },
+        { opacity: 0, translate: "-100%" }
+    ],
+    rtlKeyframes: [
+        { opacity: 1, translate: "0" },
+        { opacity: 0, translate: "100%" }
+    ],
+    options: { duration: 250, easing: "ease" }
+});
+// Deny close
+setDefaultAnimation("drawer.denyClose", {
+    keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
+    options: { duration: 250 }
+});
+// Overlay
+setDefaultAnimation("drawer.overlay.show", {
+    keyframes: [{ opacity: 0 }, { opacity: 1 }],
+    options: { duration: 250 }
+});
+setDefaultAnimation("drawer.overlay.hide", {
+    keyframes: [{ opacity: 1 }, { opacity: 0 }],
+    options: { duration: 250 }
+});
+
+export { SgdsDrawer, SgdsDrawer as default };
+//# sourceMappingURL=sgds-drawer.js.map

package/react/components/Drawer/sgds-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-drawer.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { HasSlotController } from \"../../utils/slot.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --drawer-size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --drawer-padding - The amount of padding to use for the header, body and footer\n * @cssproperty --drawer-bg - The drawer's background color.\n * @cssproperty --drawer-button-gap - The drawer's flex gap between buttons.\n *\n */\nexport class SgdsDrawer extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, drawerStyles];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /** @internal */\n  private originalTrigger: HTMLElement | null;\n  /** @internal */\n  @query(\".drawer\") drawer: HTMLElement;\n  /** @internal */\n  @query(\".drawer-panel\") panel: HTMLElement;\n  /** @internal */\n  @query(\".drawer-overlay\") overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `noHeader`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ type: String, reflect: true }) label = \"\";\n\n  /** The direction from which the drawer will open. */\n  @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @property({ type: Boolean, reflect: true }) noHeader = false;\n\n  firstUpdated() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n  }\n\n  private uppercaseFirstLetter(string: string) {\n    return string.charAt(0).toUpperCase() + string.slice(1);\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const slRequestClose = this.emit(\"sgds-request-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"drawer.denyClose\");\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.open && !this.contained && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\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\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector(\"[autofocus]\");\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute(\"autofocus\");\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute(\"autofocus\", \"\");\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\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    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n      const overlayAnimation = getAnimation(this, \"drawer.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      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.drawer.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      // 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  }\n\n  @watch(\"contained\", { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\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 drawer */\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  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          drawer: true,\n          \"drawer-open\": this.open,\n          \"drawer-top\": this.placement === \"top\",\n          \"drawer-end\": this.placement === \"end\",\n          \"drawer-bottom\": this.placement === \"bottom\",\n          \"drawer-start\": this.placement === \"start\",\n          \"drawer-contained\": this.contained,\n          \"drawer-fixed\": !this.contained,\n          \"drawer-has-footer\": this.hasSlotController.test(\"footer\")\n        })}\n      >\n        <div part=\"overlay\" class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n        <div\n          part=\"panel\"\n          class=\"drawer-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? \"title\" : undefined)}\n          tabindex=\"0\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"drawer-header\">\n                  <h2 part=\"title\" class=\"drawer-title\" id=\"title\">\n                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->\n                    <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer-header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <sgds-close-button\n                      part=\"close-button\"\n                      class=\"drawer-close\"\n                      aria-label=\"close drawer\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                    ></sgds-close-button>\n                  </div>\n                </header>\n              `\n            : nothing}\n\n          <slot part=\"body\" class=\"drawer-body\"></slot>\n\n          <footer part=\"footer\" class=\"drawer-footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 -100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 -100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n  keyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n  keyframes: [\n    { opacity: 0, translate: \"0 100%\" },\n    { opacity: 1, translate: \"0 0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n  keyframes: [\n    { opacity: 1, translate: \"0 0\" },\n    { opacity: 0, translate: \"0 100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n  keyframes: [\n    { opacity: 0, translate: \"-100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: \"100%\" },\n    { opacity: 1, translate: \"0\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n  keyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"-100%\" }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: \"0\" },\n    { opacity: 0, translate: \"100%\" }\n  ],\n  options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["drawerStyles"],"mappings":"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"}

package/react/components/Dropdown/dropdown.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-bottom-right-radius:0;border-top-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.dropdown,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{border-bottom:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid;content:"";display:inline-block;margin-left:.255em;vertical-align:.255em}.dropdown-toggle:empty:after{margin-left:0}.dropdown-menu{--sgds-dropdown-z-index:1000;--sgds-dropdown-min-width:10rem;--sgds-dropdown-padding-x:0;--sgds-dropdown-padding-y:0.5rem;--sgds-dropdown-font-size:1rem;--sgds-dropdown-bg:var(--sgds-body-bg);--sgds-dropdown-color:var(--sgds-body-color);--sgds-dropdown-border-color:var(--sgds-border-color-translucent);--sgds-dropdown-border-radius:var(--sgds-border-radius);--sgds-dropdown-border-width:var(--sgds-border-width);background-clip:padding-box;background-color:var(--sgds-dropdown-bg);border:var(--sgds-dropdown-border-width) solid var(--sgds-dropdown-border-color);border-radius:var(--sgds-dropdown-border-radius);color:var(--sgds-dropdown-color);display:none;font-size:var(--sgds-dropdown-font-size);list-style:none;margin:0;min-width:var(--sgds-dropdown-min-width);padding:var(--sgds-dropdown-padding-y) var(--sgds-dropdown-padding-x);position:absolute;text-align:left;z-index:var(--sgds-dropdown-z-index)}.dropdown-divider{--sgds-dropdown-divider-bg:var(--sgds-border-color-translucent);--sgds-dropdown-divider-margin-y:0.5rem;border-top:1px solid var(--sgds-dropdown-divider-bg);height:0;margin:var(--sgds-dropdown-divider-margin-y) 0;opacity:1;overflow:hidden}.dropdown-item{--sgds-dropdown-item-color:var(--sgds-body-color);--sgds-dropdown-item-hover-color:var(--sgds-body-color);--sgds-dropdown-item-hover-bg:var(--sgds-gray-200);--sgds-dropdown-item-active-color:#fff;--sgds-dropdown-item-active-bg:var(--sgds-info);--sgds-dropdown-item-disabled-color:var(--sgds-gray-500);--sgds-dropdown-item-padding-x:1rem;--sgds-dropdown-item-padding-y:0.25rem;background-color:transparent;border:0;border-radius:var(--sgds-dropdown-item-border-radius,0);clear:both;color:var(--sgds-dropdown-item-color);display:block;font-weight:400;padding:var(--sgds-dropdown-item-padding-y) var(--sgds-dropdown-item-padding-x);text-align:inherit;text-decoration:none;white-space:nowrap}.dropdown-item:focus,.dropdown-item:hover{background-color:var(--sgds-dropdown-item-hover-bg);color:var(--sgds-dropdown-item-hover-color)}.dropdown-item.active,.dropdown-item:active{background-color:var(--sgds-dropdown-item-active-bg);color:var(--sgds-dropdown-item-active-color);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{background-color:transparent;color:var(--sgds-dropdown-item-disabled-color);pointer-events:none}.dropdown-menu.show{display:block}.dropdown-header{--sgds-dropdown-header-color:#5d5d5d;--sgds-dropdown-header-padding-x:1rem;--sgds-dropdown-header-padding-y:0.5rem;color:var(--sgds-dropdown-header-color);display:block;font-size:.875rem;margin-bottom:0;padding:var(--sgds-dropdown-header-padding-y) var(--sgds-dropdown-header-padding-x);white-space:nowrap}.sgds.dropdown .dropdown-toggle{align-items:center;gap:.5rem;justify-content:space-between}.sgds.dropdown .dropdown-toggle:after{content:none}.sgds.dropdown-menu{border:1px solid #909090;padding:0}.sgds.dropdown-menu li a.dropdown-item{padding:1rem}.sgds.dropdown-menu li a.dropdown-item.active,.sgds.dropdown-menu li a.dropdown-item:hover{background-color:#0950df;color:#fff}.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.dropdown-toggle-split{padding-left:.75rem;padding-right:.75rem}.dropdown-toggle-split:after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-left:.375rem;padding-right:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-left:.75rem;padding-right:.75rem}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-left-radius:0;border-bottom-right-radius:0}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .nav-item a.nav-link.dropdown-toggle{gap:.75rem}.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show{border-bottom:.125rem solid #9182e8;color:#9182e8}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+
+export { css_248z as default };
+//# sourceMappingURL=dropdown.js.map

package/react/components/Dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-dropdown-item.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport LinkElement from \"../../base/link-element\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n */\nexport class SgdsDropdownItem extends LinkElement {\n  static styles = [dropdownStyle];\n\n  /**@internal */\n  @query(\"a\")\n  private anchor: HTMLElement;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        this.anchor.click();\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div>\n        <a\n          href=\"${this.href}\"\n          class=\"dropdown-item ${classMap({\n            disabled: this.disabled,\n            active: this.active\n          })}\"\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          role=\"menuitem\"\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          target=${this.target}\n          ><slot></slot\n        ></a>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["LinkElement","html","classMap","dropdownStyle","__decorate","query"],"mappings":";;;;;;;;;;;;AAKA;;AAEG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;IAO/C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACrB,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGG,gBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACM,+BAAA,EAAAC,oBAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;qBAErC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AAC5B,iBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;;;;KAIzB,CAAC;KACH;;AAjCM,gBAAA,CAAA,MAAM,GAAG,CAACC,mBAAa,CAAC,CAAC;AAIxBC,gBAAA,CAAA;IADPC,mBAAK,CAAC,GAAG,CAAC;AACiB,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Dropdown/sgds-dropdown-item.js

@@ -0,0 +1,47 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import LinkElement from '../../base/link-element.js';
+import css_248z from './dropdown.js';
+
+/**
+ * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
+ */
+class SgdsDropdownItem extends LinkElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                this.anchor.click();
+            }
+        });
+    }
+    render() {
+        return html `
+      <div>
+        <a
+          href="${this.href}"
+          class="dropdown-item ${classMap({
+            disabled: this.disabled,
+            active: this.active
+        })}"
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          role="menuitem"
+          tabindex=${this.disabled ? "-1" : "0"}
+          target=${this.target}
+          ><slot></slot
+        ></a>
+      </div>
+    `;
+    }
+}
+SgdsDropdownItem.styles = [css_248z];
+__decorate([
+    query("a")
+], SgdsDropdownItem.prototype, "anchor", void 0);
+
+export { SgdsDropdownItem, SgdsDropdownItem as default };
+//# sourceMappingURL=sgds-dropdown-item.js.map

package/react/components/Dropdown/sgds-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport LinkElement from \"../../base/link-element\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n */\nexport class SgdsDropdownItem extends LinkElement {\n  static styles = [dropdownStyle];\n\n  /**@internal */\n  @query(\"a\")\n  private anchor: HTMLElement;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        this.anchor.click();\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div>\n        <a\n          href=\"${this.href}\"\n          class=\"dropdown-item ${classMap({\n            disabled: this.disabled,\n            active: this.active\n          })}\"\n          ?disabled=${this.disabled}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          role=\"menuitem\"\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          target=${this.target}\n          ><slot></slot\n        ></a>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle"],"mappings":";;;;;;;;AAKA;;AAEG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;IAO/C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACrB,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGG,gBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACM,+BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;0BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;qBAErC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AAC5B,iBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;;;;KAIzB,CAAC;KACH;;AAjCM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,CAAC,CAAC;AAIxB,UAAA,CAAA;IADP,KAAK,CAAC,GAAG,CAAC;AACiB,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}