@redvars/peacock 3.5.0 → 3.6.0

package/dist/index.js

@@ -1,11 +1,18 @@
-export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Checkbox, d as Chip, e as CircularProgress, f as Container, D as DatePicker, g as Divider, E as Elevation, h as EmptyState, F as Field, i as FocusRing, I as Icon, j as Image, k as Input, L as LinearProgress, l as Link, M as Menu, m as MenuItem, N as NumberField, P as Pagination, R as Radio, n as Ripple, S as SegmentedButton, o as SegmentedButtonGroup, p as Select, q as SelectOptionElement, r as Skeleton, s as Slider, t as Snackbar, u as Spinner, v as SubMenu, w as Switch, T as Tab, x as TabGroup, y as TabPanel, z as Table, G as Tabs, H as Tag, J as Textarea, K as TimePicker, O as Tooltip, Q as TreeNode, U as TreeView } from './select-4pl4XBj7.js';
+export { F as FlowDesigner, I as Icon } from './flow-designer-dZnLJOQT.js';
+export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Checkbox, d as Chip, e as CircularProgress, f as Container, D as DatePicker, g as Divider, E as Elevation, h as EmptyState, F as Field, i as FocusRing, I as Image, j as Input, L as LinearProgress, k as Link, M as Menu, l as MenuItem, N as NavigationRail, m as NavigationRailItem, n as NumberField, P as Pagination, R as Radio, o as Ripple, S as SegmentedButton, p as SegmentedButtonGroup, q as Select, r as SelectOptionElement, s as SidebarMenu, t as SidebarMenuItem, u as SidebarSubMenu, v as Skeleton, w as Slider, x as Snackbar, y as Spinner, z as SubMenu, G as Switch, T as Tab, H as TabGroup, J as TabPanel, K as Table, O as Tabs, Q as Tag, U as Textarea, V as TimePicker, W as Tooltip, X as UrlField } from './navigation-rail-DyO0oAZU.js';
 export { Clock } from './clock.js';
-export { B as Button } from './button-DMN1dPAg.js';
-export { B as ButtonGroup, I as IconButton } from './button-group-CX9CUUXk.js';
-export { F as Fab } from './fab-C5Nzxk0E.js';
+export { Button } from './button.js';
+export { ButtonGroup } from './button-group.js';
+export { I as IconButton } from './icon-button-CK1ZuE-2.js';
+export { Fab } from './fab.js';
+export { SplitButton } from './split-button.js';
+export { DropdownButton } from './dropdown-button.js';
 export { NumberCounter } from './number-counter.js';
+export { P as Popover } from './popover-NC7b1lTq.js';
+export { PopoverContent } from './popover-content.js';
 export { CodeHighlighter } from './code-highlighter.js';
 export { default as CodeEditor } from './code-editor.js';
+export { HtmlEditor } from './html-editor.js';
 export { ChartDoughnut } from './chart-doughnut.js';
 export { ChartPie } from './chart-pie.js';
 export { ChartBar } from './chart-bar.js';
@@ -14,25 +21,41 @@ export { Card } from './card.js';
 import './card-content.js';
 export { Banner } from './banner.js';
 export { Notification } from './notification.js';
+export { NotificationManager } from './notification-manager.js';
+export { Modal } from './modal.js';
 export { BottomSheet } from './bottom-sheet.js';
 export { SideSheet } from './side-sheet.js';
 export { Search } from './search.js';
 export { Toolbar } from './toolbar.js';
+export { Calendar } from './calendar.js';
+export { CalendarColumnView } from './calendar-column-view.js';
+export { CalendarMonthView } from './calendar-month-view.js';
+export { Canvas } from './canvas.js';
+export { F as FlowDesignerNode } from './flow-designer-node-XMe-jlKg.js';
+export { ConditionBuilder } from './condition-builder.js';
+export { CbPredicate } from './cb-predicate.js';
+export { CbCompoundExpression } from './cb-compound-expression.js';
+export { CbExpression } from './cb-expression.js';
+export { CbDivider } from './cb-divider.js';
 import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
 import './state-DwbEjqVk.js';
+import './query-QBcUV-L_.js';
 import './directive-ZPhl09Yt.js';
 import './unsafe-html-BsGUjx94.js';
 import './class-map-YU7g0o3B.js';
 import './observe-slot-change-BGJfgg2E.js';
-import './query-QBcUV-L_.js';
+import './BaseHyperlinkMixin-BNuwbiEf.js';
 import './style-map-DVmWOuYy.js';
 import './dispatch-event-utils-CuEqjlPT.js';
-import './spread-B5cgadZl.js';
-import './is-dark-mode-DicqGkCJ.js';
-import './throttle-C7ZAPqtu.js';
+import './BaseButton-BNFAYn-S.js';
+import './BaseInput-14YmcfK7.js';
+import './is-dark-mode-DOcaw4Yq.js';
+import './button-colors-Ccys3hvS.js';
 import './transform-DSwFSqzD.js';
 import './pie-Dz0IDiPt.js';
 import './array-D5vjT2Xm.js';
 import './chart-bar-cn6rrna-.js';
+import './calendar-event-BrQ_SEKD.js';
+import './event-manager-D-QCmUgR.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/{is-dark-mode-DicqGkCJ.js → is-dark-mode-DOcaw4Yq.js}

@@ -1,28 +1,3 @@
-import { _ as __decorate, i } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-
-class BaseInput extends i {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.skeleton = false;
-    }
-}
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "readonly", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "required", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "skeleton", void 0);
-
 const observeThemeChange = (() => {
     const callbacks = new Set();
     const observer = new MutationObserver((records) => {
@@ -52,5 +27,5 @@ function isDarkMode() {
     return document.documentElement.dataset.theme === 'dark';
 }
 
-export { BaseInput as B, isDarkMode as i, observeThemeChange as o };
-//# sourceMappingURL=is-dark-mode-DicqGkCJ.js.map
+export { isDarkMode as i, observeThemeChange as o };
+//# sourceMappingURL=is-dark-mode-DOcaw4Yq.js.map

package/dist/is-dark-mode-DOcaw4Yq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-dark-mode-DOcaw4Yq.js","sources":["../../src/__utils/observe-theme-change.ts","../../src/__utils/is-dark-mode.ts"],"sourcesContent":["type ThemeChangeCallback = () => void;\n\nexport const observeThemeChange = (() => {\n  const callbacks = new Set<ThemeChangeCallback>();\n\n  const observer = new MutationObserver((records) => {\n    const changed = records.some(\n      (r) => r.type === \"attributes\" && r.attributeName === \"data-theme\"\n    );\n    if (!changed) return;\n\n    for (const callback of callbacks) {\n      try {\n        callback();\n      } catch (err) {\n        console.error(\"[observeThemeChange] callback threw:\", err);\n      }\n    }\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"data-theme\"],\n  });\n\n  return (callback: ThemeChangeCallback): (() => void) => {\n    callbacks.add(callback);\n    return () => callbacks.delete(callback);\n  };\n})();","export function isDarkMode() {\n  return document.documentElement.dataset.theme === 'dark';\n}"],"names":[],"mappings":"AAEO,MAAM,kBAAkB,GAAG,CAAC,MAAK;AACtC,IAAA,MAAM,SAAS,GAAG,IAAI,GAAG,EAAuB;IAEhD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,KAAI;QAChD,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAC1B,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,YAAY,IAAI,CAAC,CAAC,aAAa,KAAK,YAAY,CACnE;AACD,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;AAChC,YAAA,IAAI;AACF,gBAAA,QAAQ,EAAE;YACZ;YAAE,OAAO,GAAG,EAAE;AACZ,gBAAA,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,GAAG,CAAC;YAC5D;QACF;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;AACzC,QAAA,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,YAAY,CAAC;AAChC,KAAA,CAAC;IAEF,OAAO,CAAC,QAA6B,KAAkB;AACrD,QAAA,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;QACvB,OAAO,MAAM,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC;AACzC,IAAA,CAAC;AACH,CAAC;;SC7Be,UAAU,GAAA;IACxB,OAAO,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,MAAM;AAC1D;;;;"}

package/dist/modal.js

@@ -0,0 +1,418 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`@charset "UTF-8";
+* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: contents;
+  --modal-container-color: var(--color-surface-container-high, #ece6f0);
+  --modal-scrim-color: rgba(0, 0, 0, 0.32);
+  --modal-shape: var(--shape-corner-extra-large, 28px);
+  --modal-min-width: 280px;
+  --modal-max-width: 560px;
+  --modal-max-height: 90dvh;
+  --modal-transition-duration: var(--duration-medium2, 300ms);
+  --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+  --modal-heading-color: var(--color-on-surface, #1c1b1f);
+  --modal-subheading-color: var(--color-on-surface-variant, #49454f);
+  --modal-content-color: var(--color-on-surface-variant, #49454f);
+  --modal-divider-color: var(--color-outline-variant, #cac4d0);
+  --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
+}
+
+/* Scrim backdrop */
+.scrim {
+  background-color: var(--modal-scrim-color);
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  transition: opacity var(--modal-transition-duration) var(--modal-transition-easing);
+  z-index: 1000;
+}
+
+.scrim.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Dialog wrapper — centres the dialog on screen */
+.dialog-wrapper {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  overflow-y: auto;
+  padding: var(--spacing-400, 2rem) var(--spacing-200, 1rem);
+  position: fixed;
+  z-index: 1001;
+}
+
+/* Dialog container */
+.dialog {
+  background-color: var(--modal-container-color);
+  border-radius: var(--modal-shape);
+  box-shadow: var(--modal-elevation);
+  display: flex;
+  flex-direction: column;
+  max-height: var(--modal-max-height);
+  max-width: var(--modal-max-width);
+  min-width: var(--modal-min-width);
+  opacity: 0;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  transform: scale(0.9);
+  width: 100%;
+}
+.dialog.open {
+  animation: modal-enter var(--modal-transition-duration) var(--modal-transition-easing) forwards;
+}
+.dialog:not(.open) {
+  animation: modal-exit var(--modal-transition-duration) var(--modal-transition-easing) forwards;
+}
+
+/* Sizes */
+.dialog.size-xs {
+  --modal-max-width: 320px;
+}
+
+.dialog.size-sm {
+  --modal-max-width: 420px;
+}
+
+.dialog.size-md {
+  --modal-max-width: 560px;
+}
+
+.dialog.size-lg {
+  --modal-max-width: 800px;
+}
+
+.dialog.size-fullscreen {
+  --modal-max-width: 100%;
+  --modal-max-height: 100%;
+  border-radius: 0;
+  max-height: 100dvh;
+  max-width: 100vw;
+}
+
+.dialog-wrapper:has(.dialog.size-fullscreen) {
+  padding: 0;
+}
+
+/* Header */
+.dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--spacing-200, 1rem);
+  padding: var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem) var(--spacing-200, 1rem);
+}
+
+.dialog-heading-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.dialog-subheading {
+  color: var(--modal-subheading-color);
+  font-family: var(--typography-label-medium-font-family, sans-serif);
+  font-size: var(--typography-label-medium-font-size, 0.75rem);
+  font-weight: var(--typography-label-medium-font-weight, 500);
+  letter-spacing: var(--typography-label-medium-letter-spacing, 0.05em);
+  line-height: var(--typography-label-medium-line-height, 1.25rem);
+  margin: 0 0 var(--spacing-050, 0.25rem);
+  text-transform: uppercase;
+}
+
+.dialog-heading {
+  color: var(--modal-heading-color);
+  font-family: var(--typography-headline-small-font-family, sans-serif);
+  font-size: var(--typography-headline-small-font-size, 1.5rem);
+  font-weight: var(--typography-headline-small-font-weight, 400);
+  letter-spacing: var(--typography-headline-small-letter-spacing, 0);
+  line-height: var(--typography-headline-small-line-height, 2rem);
+  margin: 0;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  margin-block-start: -0.25rem;
+  margin-inline-end: -0.25rem;
+}
+
+/* Body content */
+.dialog-content {
+  color: var(--modal-content-color);
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 0 var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem);
+}
+
+/* When there is no header */
+.dialog:not(:has(.dialog-header)) .dialog-content {
+  padding-top: var(--spacing-300, 1.5rem);
+}
+
+/* Footer */
+.dialog-footer {
+  border-top: 1px solid transparent;
+}
+
+.dialog-footer:has(slot:not(:empty)),
+.dialog-footer slot::slotted(*) {
+  border-top-color: var(--modal-divider-color);
+}
+
+/* Loading overlay */
+.dialog-loader {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+}
+
+.dialog-loader-scrim {
+  background-color: var(--modal-container-color);
+  inset: 0;
+  opacity: 0.72;
+  position: absolute;
+}
+
+/* Animations */
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes modal-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}`;
+
+/**
+ * @label Modal
+ * @tag wc-modal
+ * @rawTag modal-wc
+ * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
+ *
+ * @cssprop --modal-container-color - Background color of the dialog container.
+ * @cssprop --modal-scrim-color - Color of the scrim backdrop.
+ * @cssprop --modal-shape - Corner radius of the dialog container.
+ * @cssprop --modal-min-width - Minimum width of the dialog.
+ * @cssprop --modal-max-width - Maximum width of the dialog.
+ * @cssprop --modal-max-height - Maximum height of the dialog.
+ *
+ * @example
+ * ```html
+ * <wc-modal open heading="Confirm Action">
+ *   <p>Are you sure you want to continue?</p>
+ *   <div slot="footer">
+ *     <wc-button variant="text">Cancel</wc-button>
+ *     <wc-button>Confirm</wc-button>
+ *   </div>
+ * </wc-modal>
+ * ```
+ * @tags overlay, dialog, feedback
+ */
+let Modal = class Modal extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Whether the modal is open. */
+        this.open = false;
+        /** Heading text shown in the modal header. */
+        this.heading = '';
+        /** Optional subheading / label text shown above the heading. */
+        this.subheading = '';
+        /**
+         * Size of the modal dialog.
+         * - `"xs"`: Extra-small.
+         * - `"sm"`: Small.
+         * - `"md"`: Medium (default).
+         * - `"lg"`: Large.
+         * - `"fullscreen"`: Full-screen dialog.
+         */
+        this.size = 'md';
+        /** When true, hides the close button in the header. */
+        this.hideClose = false;
+        /** When true, renders a loading overlay inside the modal. */
+        this.showLoader = false;
+        /** When true, clicking the scrim will not close the modal. */
+        this.noScrimClose = false;
+        this._visible = false;
+        this._handleKeydown = (e) => {
+            if (e.key === 'Escape') {
+                this._close('escape');
+            }
+        };
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this._close('programmatic');
+    }
+    _close(reason) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('modal-close', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleScrimClick() {
+        if (!this.noScrimClose) {
+            this._close('scrim');
+        }
+    }
+    _handleCloseClick() {
+        this._close('close-button');
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this._visible = true;
+                document.body.style.overflow = 'hidden';
+                document.addEventListener('keydown', this._handleKeydown);
+            }
+            else {
+                document.body.style.overflow = '';
+                document.removeEventListener('keydown', this._handleKeydown);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.style.overflow = '';
+        document.removeEventListener('keydown', this._handleKeydown);
+    }
+    _handleAnimationEnd(e) {
+        if (e.animationName === 'modal-exit') {
+            this._visible = false;
+        }
+    }
+    render() {
+        if (!this.open && !this._visible)
+            return A;
+        const hasHeader = this.heading || this.subheading || !this.hideClose;
+        return b `
+      <div
+        class=${e({ scrim: true, visible: this.open })}
+        @click=${this._handleScrimClick}
+        aria-hidden="true"
+      ></div>
+
+      <div class="dialog-wrapper" role="presentation">
+        <div
+          class=${e({
+            dialog: true,
+            open: this.open,
+            [`size-${this.size}`]: true,
+            'show-loader': this.showLoader,
+        })}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.heading ? 'modal-heading' : A}
+          @animationend=${this._handleAnimationEnd}
+        >
+          ${hasHeader
+            ? b `
+                <div class="dialog-header">
+                  <div class="dialog-heading-section">
+                    ${this.subheading
+                ? b `<p class="dialog-subheading">${this.subheading}</p>`
+                : A}
+                    ${this.heading
+                ? b `<h2 id="modal-heading" class="dialog-heading">
+                          ${this.heading}
+                        </h2>`
+                : A}
+                  </div>
+                  ${!this.hideClose
+                ? b `<wc-icon-button
+                        class="dialog-close"
+                        variant="text"
+                        aria-label="Close dialog"
+                        @click=${this._handleCloseClick}
+                      >
+                        <wc-icon name="close"></wc-icon>
+                      </wc-icon-button>`
+                : A}
+                </div>
+              `
+            : A}
+
+          <div class="dialog-content">
+            <slot></slot>
+          </div>
+
+          <div class="dialog-footer">
+            <slot name="footer"></slot>
+          </div>
+
+          ${this.showLoader
+            ? b `<div class="dialog-loader" aria-hidden="true">
+                <div class="dialog-loader-scrim"></div>
+                <wc-spinner></wc-spinner>
+              </div>`
+            : A}
+        </div>
+      </div>
+    `;
+    }
+};
+Modal.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Modal.prototype, "open", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Modal.prototype, "heading", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Modal.prototype, "subheading", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Modal.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'hide-close' })
+], Modal.prototype, "hideClose", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'show-loader' })
+], Modal.prototype, "showLoader", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'no-scrim-close' })
+], Modal.prototype, "noScrimClose", void 0);
+__decorate([
+    r()
+], Modal.prototype, "_visible", void 0);
+Modal = __decorate([
+    IndividualComponent
+], Modal);
+
+export { Modal };
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * <wc-modal open heading=\"Confirm Action\">\n *   <p>Are you sure you want to continue?</p>\n *   <div slot=\"footer\">\n *     <wc-button variant=\"text\">Cancel</wc-button>\n *     <wc-button>Confirm</wc-button>\n *   </div>\n * </wc-modal>\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n  static styles = [styles];\n\n  /** Whether the modal is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Heading text shown in the modal header. */\n  @property({ type: String, reflect: true }) heading = '';\n\n  /** Optional subheading / label text shown above the heading. */\n  @property({ type: String, reflect: true }) subheading = '';\n\n  /**\n   * Size of the modal dialog.\n   * - `\"xs\"`: Extra-small.\n   * - `\"sm\"`: Small.\n   * - `\"md\"`: Medium (default).\n   * - `\"lg\"`: Large.\n   * - `\"fullscreen\"`: Full-screen dialog.\n   */\n  @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n  /** When true, hides the close button in the header. */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n  hideClose = false;\n\n  /** When true, renders a loading overlay inside the modal. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n  showLoader = false;\n\n  /** When true, clicking the scrim will not close the modal. */\n  @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n  @state() private _visible = false;\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (!this.noScrimClose) {\n      this._close('scrim');\n    }\n  }\n\n  private _handleCloseClick() {\n    this._close('close-button');\n  }\n\n  private readonly _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this._close('escape');\n    }\n  };\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._visible = true;\n        document.body.style.overflow = 'hidden';\n        document.addEventListener('keydown', this._handleKeydown);\n      } else {\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', this._handleKeydown);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.body.style.overflow = '';\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _handleAnimationEnd(e: AnimationEvent) {\n    if (e.animationName === 'modal-exit') {\n      this._visible = false;\n    }\n  }\n\n  render() {\n    if (!this.open && !this._visible) return nothing;\n\n    const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n    return html`\n      <div\n        class=${classMap({ scrim: true, visible: this.open })}\n        @click=${this._handleScrimClick}\n        aria-hidden=\"true\"\n      ></div>\n\n      <div class=\"dialog-wrapper\" role=\"presentation\">\n        <div\n          class=${classMap({\n            dialog: true,\n            open: this.open,\n            [`size-${this.size}`]: true,\n            'show-loader': this.showLoader,\n          })}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n          @animationend=${this._handleAnimationEnd}\n        >\n          ${hasHeader\n            ? html`\n                <div class=\"dialog-header\">\n                  <div class=\"dialog-heading-section\">\n                    ${this.subheading\n                      ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n                      : nothing}\n                    ${this.heading\n                      ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n                          ${this.heading}\n                        </h2>`\n                      : nothing}\n                  </div>\n                  ${!this.hideClose\n                    ? html`<wc-icon-button\n                        class=\"dialog-close\"\n                        variant=\"text\"\n                        aria-label=\"Close dialog\"\n                        @click=${this._handleCloseClick}\n                      >\n                        <wc-icon name=\"close\"></wc-icon>\n                      </wc-icon-button>`\n                    : nothing}\n                </div>\n              `\n            : nothing}\n\n          <div class=\"dialog-content\">\n            <slot></slot>\n          </div>\n\n          <div class=\"dialog-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n\n          ${this.showLoader\n            ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n                <div class=\"dialog-loader-scrim\"></div>\n                <wc-spinner></wc-spinner>\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}