npm - @nuralyui/modal - Versions diffs - 0.0.3 → 0.0.5 - Mend

@nuralyui/modal 0.0.3 → 0.0.5

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 (27) hide show

package/modal.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport {css, html, LitElement} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nexport class ModalComponent extends LitElement {\n static override styles = css`\n :host {\n font-size: 16px;\n }\n .modal {\n position: fixed;\n z-index: 9999;\n background-color: #ffffff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n }\n\n dialog {\n border: 0;\n box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n min-width: 400px;\n min-height: 200px;\n }\n\n .dialog-label {\n cursor: move;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.3);\n z-index: 9998;\n }\n\n .close-icon {\n cursor: pointer;\n }\n ::slotted([slot='footer']) {\n / Styles applied specifically to slotted elements with slot=\"custom-slot\" */\n bottom: 0;\n position: absolute;\n text-align: end;\n margin-bottom: 10px;\n width : 93%;\n }\n\n ::slotted([slot='content']) {\n padding: 0px 24px 20px 24px;\n }\n @media (prefers-color-scheme: dark) {\n .modal {\n background-color: rgb(74, 74, 74);\n color: #ffffff;\n } \n .backdrop {\n background-color: rgba(0, 0, 0, 0.3);\n }\n }\n\n `;\n\n @property({type: Boolean})\n isOpen!: boolean;\n\n @property({type: String})\n label = '';\n\n @state()\n private offsetX = 0;\n\n @state()\n private offsetY = 0;\n\n private isDragging = false;\n private initialX = 0;\n private initialY = 0;\n\n override connectedCallback() {\n super.connectedCallback();\n // this.addEventListener('mousedown', this.startDrag);\n document.addEventListener('mousemove', this.drag.bind(this));\n // this.addEventListener('mouseup', this.stopDrag);\n document.addEventListener('keydown', this.handleKeyDown.bind(this));\n // document.addEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // this.removeEventListener('mousedown', this.startDrag);\n document.removeEventListener('mousemove', this.drag);\n // this.removeEventListener('mouseup', this.stopDrag);\n document.removeEventListener('keydown', this.handleKeyDown.bind(this));\n document.removeEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n private startDrag(event: MouseEvent) {\n if (event.target instanceof HTMLElement) {\n this.isDragging = true;\n this.initialX = event.clientX - this.offsetX;\n this.initialY = event.clientY - this.offsetY;\n event.preventDefault();\n }\n }\n\n private drag(event: MouseEvent) {\n if (this.isDragging) {\n this.offsetX = event.clientX - this.initialX;\n this.offsetY = event.clientY - this.initialY;\n this.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;\n event.preventDefault();\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.closeModal();\n event.preventDefault();\n }\n }\n\n private handleOutsideClick(event: MouseEvent) {\n if (this.isOpen && !this.isChildDialog(event.target as HTMLElement)) {\n this.closeModal();\n\n }\n }\n\n private isChildDialog(target: HTMLElement): boolean {\n let element = target.parentElement;\n while (element !== null) {\n if (element.tagName === 'DIALOG') {\n return true;\n }\n element = element.parentElement;\n }\n return false;\n }\n\n closeModal() {\n this.isOpen = false;\n this.offsetX = 0;\n this.offsetY = 0;\n this.style.transform = 'none';\n this.dispatchEvent(new CustomEvent('close'));\n\n }\n\n private adjustDialogPosition() {\n if (this.isOpen) {\n const dialog = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n if (dialog) {\n\n const contentHeight = dialog.clientHeight;\n const windowHeight = window.innerHeight;\n const dialogHeight = Math.min(contentHeight + 40, windowHeight - 40);\n\n const topPosition = Math.max((windowHeight - dialogHeight) / 2, 0);\n dialog.style.top = `${topPosition}px`;\n }\n }\n }\n override updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('isOpen')) {\n if (this.isOpen) {\n // The dialog has been opened\n this.adjustDialogPosition();\n }\n\n }\n }\n\n private stopDrag() {\n this.isDragging = false;\n }\n\n override render() {\n const backdropStyles = {\n display: this.isOpen ? 'block' : 'none',\n };\n const modalStyles = {\n transform: `translate(${this.offsetX}px, ${this.offsetY}px)`,\n };\n\n return html`\n <div class=\"backdrop\" style=${styleMap(backdropStyles)}></div>\n\n <dialog class=\"modal\" ?open=\"${this.isOpen}\" style=${styleMap(modalStyles)}>\n <hy-icon\n class=\"close-icon\"\n name=\"window-close\"\n style=\"float: right;\"\n @click=${() => (this.closeModal())}\n ></hy-icon>\n <h2 class=\"dialog-label\" @mousedown=${this.startDrag} @mouseup=${this.stopDrag}>${this.label}</h2>\n <slot></slot>\n <slot name=\"footer\"></slot>\n </dialog>\n `;\n }\n}\n\ncustomElements.define('modal-component', ModalComponent);\n"]}
1	+ {"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n /\n\nimport { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n ModalSize,\n ModalPosition,\n ModalAnimation,\n ModalBackdrop,\n EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ModalManager } from './modal-manager.js';\n\n// Import icon component\nimport '../icon/icon.component.js';\nimport '../button/button.component.js';\n\n// Import controllers\nimport {\n ModalDragController,\n ModalDragHost,\n ModalKeyboardController,\n ModalKeyboardHost\n} from './controllers/index.js';\n\n/\n Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n * <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n * open\n * size=\"large\"\n * position=\"top\"\n * animation=\"zoom\"\n * backdrop=\"static\"\n * draggable>\n * <div slot=\"header\">\n * <nr-icon name=\"info\"></nr-icon>\n * <span>Custom Header</span>\n * </div>\n * <p>Modal content</p>\n * <div slot=\"footer\">\n * <nr-button type=\"secondary\">Cancel</nr-button>\n * <nr-button type=\"primary\">OK</nr-button>\n * </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n /\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n implements ModalDragHost, ModalKeyboardHost {\n static override styles = styles;\n\n /* Whether the modal is open /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /* Modal size (small, medium, large, xl) /\n @property({ type: String })\n size: ModalSize = ModalSize.Medium;\n\n /* Modal position (center, top, bottom) /\n @property({ type: String })\n position: ModalPosition = ModalPosition.Center;\n\n /* Animation type /\n @property({ type: String })\n animation: ModalAnimation = ModalAnimation.Fade;\n\n /* Backdrop behavior /\n @property({ type: String })\n backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n /* Whether the modal can be closed /\n @property({ type: Boolean })\n closable = true;\n\n /* Whether the modal can be dragged /\n @property({ type: Boolean })\n modalDraggable = false;\n\n /* Whether the modal is resizable /\n @property({ type: Boolean })\n resizable = false;\n\n /* Whether the modal is fullscreen /\n @property({ type: Boolean })\n fullscreen = false;\n\n /* Modal title /\n @property({ type: String })\n modalTitle = EMPTY_STRING;\n\n /* Show close button in header /\n @property({ type: Boolean, attribute: 'show-close-button' })\n showCloseButton = true;\n\n /* Header icon /\n @property({ type: String })\n headerIcon = EMPTY_STRING;\n\n /* Z-index for the modal /\n @property({ type: Number })\n zIndex = 1000;\n\n /* Custom width /\n @property({ type: String })\n width = EMPTY_STRING;\n\n /* Custom height /\n @property({ type: String })\n height = EMPTY_STRING;\n\n /* Dragging state /\n @state()\n isDragging = false;\n\n /* Current X offset for dragging /\n @property({ type: Number })\n offsetX = 0;\n\n /* Current Y offset for dragging /\n @property({ type: Number })\n offsetY = 0;\n\n /* Animation state /\n @state()\n private animationState: 'closed' \| 'opening' \| 'open' \| 'closing' = 'closed';\n\n /* Previous focus element /\n private previousActiveElement: Element \| null = null;\n\n override requiredComponents = ['nr-icon', 'nr-button'];\n\n // Controllers\n private dragController = new ModalDragController(this);\n private keyboardController = new ModalKeyboardController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Restore focus when modal is destroyed\n if (this.previousActiveElement instanceof HTMLElement) {\n this.previousActiveElement.focus();\n }\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n }\n }\n\n private handleOpen() {\n // Register with modal manager and get z-index\n const assignedZIndex = ModalManager.openModal(this);\n this.zIndex = assignedZIndex;\n \n // Set animation state to opening\n this.animationState = 'opening';\n \n // Dispatch before open event\n this.dispatchEvent(new CustomEvent('modal-open', {\n bubbles: true,\n detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n }));\n\n // Wait for DOM update, then start JavaScript animation\n this.updateComplete.then(() => {\n this.startOpenAnimation();\n });\n }\n\n private startOpenAnimation() {\n const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n \n if (!modalElement \|\| !backdropElement) return;\n\n // Get animation keyframes based on animation type\n const { modalKeyframes} = this.getAnimationKeyframes();\n \n // Start animations\n const modalAnimation = modalElement.animate(modalKeyframes, {\n duration: 300,\n easing: 'ease',\n fill: 'forwards'\n });\n\n\n // When animation completes\n modalAnimation.addEventListener('finish', () => {\n this.animationState = 'open';\n \n // Only focus if this is the top modal\n if (ModalManager.isTopModal(this)) {\n this.keyboardController.focusFirstElement();\n }\n \n // Dispatch after open event\n this.dispatchEvent(new CustomEvent('modal-after-open', {\n bubbles: true,\n detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n }));\n });\n }\n\n private getAnimationKeyframes() {\n const backdropKeyframes = [\n { opacity: 0 },\n { opacity: 1 }\n ];\n\n let modalKeyframes;\n switch (this.animation) {\n case 'fade':\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.9)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n break;\n case 'zoom':\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.7)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n break;\n case 'slide-up':\n modalKeyframes = [\n { opacity: 0, transform: 'translateY(20px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ];\n break;\n case 'slide-down':\n modalKeyframes = [\n { opacity: 0, transform: 'translateY(-20px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ];\n break;\n default:\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.9)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n }\n\n return { modalKeyframes, backdropKeyframes };\n }\n\n private handleClose() {\n this.animationState = 'closing';\n \n // Unregister from modal manager\n ModalManager.closeModal(this);\n \n // Reset drag position\n this.dragController.resetPosition();\n \n // Wait for animation to complete\n setTimeout(() => {\n this.animationState = 'closed';\n }, 300);\n }\n\n /\n Opens the modal\n /\n openModal() {\n this.open = true;\n }\n\n /\n Closes the modal\n */\n closeModal() {\n if (!this.closable) return;\n\n // Dispatch before close event (cancelable)\n const beforeCloseEvent = new CustomEvent('modal-before-close', {\n bubbles: true,\n cancelable: true,\n detail: { \n modal: this,\n cancel: () => beforeCloseEvent.preventDefault()\n }\n });\n\n const dispatched = this.dispatchEvent(beforeCloseEvent);\n \n // Only close if event wasn't cancelled\n if (dispatched) {\n this.open = false;\n \n // Dispatch close event\n this.dispatchEvent(new CustomEvent('modal-close', {\n bubbles: true,\n detail: { modal: this }\n }));\n }\n }\n\n private handleBackdropClick = (event: MouseEvent) => {\n // Only allow backdrop close if this is the top modal and backdrop is closable\n if (this.backdrop === ModalBackdrop.Closable && \n event.target === event.currentTarget && \n ModalManager.handleBackdropClick(this)) {\n this.closeModal();\n }\n };\n\n private getBackdropClasses() {\n return {\n 'modal-backdrop': true,\n 'modal-backdrop--hidden': !this.open,\n [`modal-backdrop--position-${this.position}`]: true\n };\n }\n\n private getModalClasses() {\n return {\n 'modal': true,\n [`modal--size-${this.size}`]: !this.fullscreen,\n 'modal--fullscreen': this.fullscreen,\n [`modal--animation-${this.animation}`]: this.animationState === 'opening' \|\| this.animationState === 'open',\n 'modal--dragging': this.isDragging,\n 'modal--resizable': this.resizable\n };\n }\n\n private getModalStyles() {\n const styles: any = {};\n \n if (this.zIndex) {\n styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n }\n \n if (this.width) {\n styles.width = this.width;\n }\n \n if (this.height) {\n styles.height = this.height;\n }\n \n return styles;\n }\n\n private renderHeader() {\n const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n const hasTitle = this.modalTitle \|\| this.headerIcon;\n \n if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n return nothing;\n }\n\n return html`\n <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n ${hasCustomHeader ? html`\n <div class=\"modal-header-content\">\n <slot name=\"header\"></slot>\n </div>\n ` : hasTitle ? html`\n <div class=\"modal-header-content\">\n ${this.headerIcon ? html`\n <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n ` : nothing}\n ${this.modalTitle ? html`\n <h2 class=\"modal-title\">${this.modalTitle}</h2>\n ` : nothing}\n </div>\n ` : nothing}\n \n ${this.showCloseButton ? html`\n <button \n class=\"modal-close-button\"\n @click=${this.closeModal}\n aria-label=\"Close modal\"\n type=\"button\">\n <nr-icon class=\"modal-close-icon\" name=\"close\"></nr-icon>\n </button>\n ` : nothing}\n </div>\n `;\n }\n\n private renderFooter() {\n const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n \n if (!hasCustomFooter) {\n return nothing;\n }\n\n return html`\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n override updated() {\n this.updateDataTheme();\n }\n\n private updateDataTheme() {\n if (!this.closest('[data-theme]')) {\n this.setAttribute('data-theme', this.currentTheme);\n }\n }\n\n override render() {\n if (!this.open && this.animationState === 'closed') {\n return nothing;\n }\n\n return html`\n <div \n class=${classMap(this.getBackdropClasses())}\n @click=${this.handleBackdropClick}\n style=${styleMap(this.getModalStyles())}>\n \n <div \n class=${classMap(this.getModalClasses())}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n tabindex=\"-1\">\n \n ${this.renderHeader()}\n \n <div class=\"modal-body\">\n <slot></slot>\n </div>\n \n ${this.renderFooter()}\n \n ${this.resizable ? html`\n <div class=\"resize-handle\"></div>\n ` : nothing}\n </div>\n </div>\n `;\n }\n}\n"]}

package/modal.style.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * Modal component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-modal component with
+ * clean CSS variable usage and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=modal.style.d.ts.map

package/modal.style.js ADDED Viewed

@@ -0,0 +1,369 @@
+import { css } from 'lit';
+/**
+ * Modal component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-modal component with
+ * clean CSS variable usage and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: contents;
+    font-family: var(--nuraly-font-family);
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    /* Ensure theme variables are properly inherited */
+    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+  /* Modal backdrop */
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));
+    z-index: var(--nuraly-z-modal-backdrop, 1000);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));
+    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);
+    &.modal-backdrop--hidden {
+      display: none;
+    }
+    &.modal-backdrop--position-top {
+      align-items: flex-start;
+      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));
+    }
+    &.modal-backdrop--position-bottom {
+      align-items: flex-end;
+      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));
+    }
+  }
+  /* Nested modals support */
+  .modal-backdrop {
+    /* Ensure each modal backdrop has its own stacking context */
+    z-index: var(--nuraly-z-modal-backdrop, 1000);
+  }
+  /* Nested modal backdrop styling */
+  .modal-backdrop + .modal-backdrop {
+    /* Subsequent modals get slightly darker backdrop */
+    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));
+  }
+  /* Nested modal animation delay to avoid conflicts */
+  .modal-backdrop:not(:first-of-type) {
+    animation-delay: 0.1s;
+  }
+  /* Modal container */
+  .modal {
+    position: relative;
+    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--nuraly-shadow-modal,
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    );
+    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));
+    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    &:focus {
+      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
+      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    }
+  }
+  /* Modal sizes */
+  .modal--size-small {
+    width: var(--nuraly-modal-width-small, 400px);
+    min-height: var(--nuraly-modal-min-height-small, 200px);
+  }
+  .modal--size-medium {
+    width: var(--nuraly-modal-width-medium, 600px);
+    min-height: var(--nuraly-modal-min-height-medium, 300px);
+  }
+  .modal--size-large {
+    width: var(--nuraly-modal-width-large, 800px);
+    min-height: var(--nuraly-modal-min-height-large, 400px);
+  }
+  .modal--size-xl {
+    width: var(--nuraly-modal-width-xl, 1000px);
+    min-height: var(--nuraly-modal-min-height-xl, 500px);
+  }
+  .modal--fullscreen {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+  /* Modal header */
+  .modal-header {
+    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: var(--nuraly-modal-header-height);
+    flex-shrink: 0;
+    &.modal-header--draggable {
+      cursor: move;
+      user-select: none;
+    }
+  }
+  .modal-header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-03, 0.5rem);
+    flex: 1;
+    min-width: 0;
+  }
+  .modal-header-icon {
+    flex-shrink: 0;
+    width: var(--nuraly-modal-header-icon-size, 20px);
+    height: var(--nuraly-modal-header-icon-size, 20px);
+    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));
+  }
+  .modal-title {
+    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));
+    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));
+    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));
+    margin: 0;
+    line-height: var(--nuraly-line-height-02, 1.375);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .modal-close-button {
+    flex-shrink: 0;
+    width: var(--nuraly-modal-close-size, 32px);
+    height: var(--nuraly-modal-close-size, 32px);
+    border: none;
+    background: transparent;
+    border-radius: var(--nuraly-border-radius-sm, 4px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));
+    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    &:hover {
+      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));
+      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));
+    }
+    &:focus {
+      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
+      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    }
+    &:active {
+      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));
+    }
+  }
+  .modal-close-icon {
+    width: var(--nuraly-modal-close-icon-size, 16px);
+    height: var(--nuraly-modal-close-icon-size, 16px);
+  }
+  /* Carbon theme specific - sharp corners for close button */
+  :host([data-theme="carbon"]) .modal-close-button,
+  :host([data-theme="carbon-light"]) .modal-close-button,
+  :host([data-theme="carbon-dark"]) .modal-close-button {
+    border-radius: 0;
+  }
+  /* Modal body */
+  .modal-body {
+    flex: 1;
+    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    overflow-y: auto;
+    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));
+    line-height: var(--nuraly-line-height-03, 1.5);
+  }
+  /* Modal footer */
+  .modal-footer {
+    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
+    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nuraly-spacing-03, 0.5rem);
+    min-height: var(--nuraly-modal-footer-height, 48px);
+    flex-shrink: 0;
+  }
+  /* Animation keyframes */
+  @keyframes modalFadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes modalZoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes modalSlideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes modalSlideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  /* Animation classes */
+  .modal-backdrop--animation-fade {
+    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+  .modal--animation-fade {
+    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+  .modal--animation-zoom {
+    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;
+  }
+  .modal--animation-slide-up {
+    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;
+  }
+  .modal--animation-slide-down {
+    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;
+  }
+  /* Dragging state */
+  .modal--dragging {
+    user-select: none;
+    cursor: move;
+  }
+  /* Resizing handles (when resizable) */
+  .modal--resizable {
+    resize: both;
+    overflow: auto;
+  }
+  .resize-handle {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    cursor: se-resize;
+    background: linear-gradient(
+      -45deg,
+      transparent 40%,
+      var(--nuraly-color-border, #e0e0e0) 40%,
+      var(--nuraly-color-border, #e0e0e0) 60%,
+      transparent 60%
+    );
+  }
+  /* Responsive behavior */
+  @media (max-width: 768px) {
+    .modal-backdrop {
+      padding: var(--nuraly-spacing-02, 0.25rem);
+    }
+    .modal--size-small,
+    .modal--size-medium,
+    .modal--size-large,
+    .modal--size-xl {
+      width: 100%;
+      max-width: none;
+    }
+    .modal-header,
+    .modal-body,
+    .modal-footer {
+      padding-left: var(--nuraly-spacing-04, 0.75rem);
+      padding-right: var(--nuraly-spacing-04, 0.75rem);
+    }
+  }
+  /* Dark theme support through CSS custom properties */
+  @media (prefers-color-scheme: dark) {
+    :host(:not([data-theme])) {
+      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);
+    }
+  }
+`;
+//# sourceMappingURL=modal.style.js.map

package/modal.style.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: contents;\n font-family: var(--nuraly-font-family);\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n \n /* Ensure theme variables are properly inherited */\n --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n /* Modal backdrop */\n .modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n z-index: var(--nuraly-z-modal-backdrop, 1000);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n \n &.modal-backdrop--hidden {\n display: none;\n }\n \n &.modal-backdrop--position-top {\n align-items: flex-start;\n padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n }\n \n &.modal-backdrop--position-bottom {\n align-items: flex-end;\n padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n }\n }\n\n /* Nested modals support */\n .modal-backdrop {\n /* Ensure each modal backdrop has its own stacking context */\n z-index: var(--nuraly-z-modal-backdrop, 1000);\n }\n\n /* Nested modal backdrop styling */\n .modal-backdrop + .modal-backdrop {\n /* Subsequent modals get slightly darker backdrop */\n background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n }\n\n /* Nested modal animation delay to avoid conflicts */\n .modal-backdrop:not(:first-of-type) {\n animation-delay: 0.1s;\n }\n\n /* Modal container */\n .modal {\n position: relative;\n background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n border-radius: var(--modal-border-radius);\n box-shadow: var(--nuraly-shadow-modal, \n 0 6px 16px 0 rgba(0, 0, 0, 0.08), \n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n );\n border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n display: flex;\n flex-direction: column;\n outline: none;\n \n &:focus {\n outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n outline-offset: var(--nuraly-focus-outline-offset, 1px);\n }\n }\n\n\n /* Modal sizes */\n .modal--size-small {\n width: var(--nuraly-modal-width-small, 400px);\n min-height: var(--nuraly-modal-min-height-small, 200px);\n }\n\n .modal--size-medium {\n width: var(--nuraly-modal-width-medium, 600px);\n min-height: var(--nuraly-modal-min-height-medium, 300px);\n }\n\n .modal--size-large {\n width: var(--nuraly-modal-width-large, 800px);\n min-height: var(--nuraly-modal-min-height-large, 400px);\n }\n\n .modal--size-xl {\n width: var(--nuraly-modal-width-xl, 1000px);\n min-height: var(--nuraly-modal-min-height-xl, 500px);\n }\n\n .modal--fullscreen {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n }\n\n /* Modal header */\n .modal-header {\n padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: var(--nuraly-modal-header-height);\n flex-shrink: 0;\n \n &.modal-header--draggable {\n cursor: move;\n user-select: none;\n }\n }\n\n .modal-header-content {\n display: flex;\n align-items: center;\n gap: var(--nuraly-spacing-03, 0.5rem);\n flex: 1;\n min-width: 0;\n }\n\n .modal-header-icon {\n flex-shrink: 0;\n width: var(--nuraly-modal-header-icon-size, 20px);\n height: var(--nuraly-modal-header-icon-size, 20px);\n color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n }\n\n .modal-title {\n font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n margin: 0;\n line-height: var(--nuraly-line-height-02, 1.375);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .modal-close-button {\n flex-shrink: 0;\n width: var(--nuraly-modal-close-size, 32px);\n height: var(--nuraly-modal-close-size, 32px);\n border: none;\n background: transparent;\n border-radius: var(--nuraly-border-radius-sm, 4px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n \n &:hover {\n background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n }\n \n &:focus {\n outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n outline-offset: var(--nuraly-focus-outline-offset, 1px);\n }\n \n &:active {\n background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n }\n }\n\n .modal-close-icon {\n width: var(--nuraly-modal-close-icon-size, 16px);\n height: var(--nuraly-modal-close-icon-size, 16px);\n }\n\n /* Carbon theme specific - sharp corners for close button */\n :host([data-theme=\"carbon\"]) .modal-close-button,\n :host([data-theme=\"carbon-light\"]) .modal-close-button,\n :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n border-radius: 0;\n }\n\n /* Modal body */\n .modal-body {\n flex: 1;\n padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n overflow-y: auto;\n color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n line-height: var(--nuraly-line-height-03, 1.5);\n }\n\n /* Modal footer */\n .modal-footer {\n padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));\n border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--nuraly-spacing-03, 0.5rem);\n min-height: var(--nuraly-modal-footer-height, 48px);\n flex-shrink: 0;\n }\n\n /* Animation keyframes */\n @keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes modalZoomIn {\n from {\n opacity: 0;\n transform: scale(0.7);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes modalSlideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes modalSlideDown {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n /* Animation classes */\n .modal-backdrop--animation-fade {\n animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-fade {\n animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-zoom {\n animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-slide-up {\n animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-slide-down {\n animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n /* Dragging state */\n .modal--dragging {\n user-select: none;\n cursor: move;\n }\n\n /* Resizing handles (when resizable) */\n .modal--resizable {\n resize: both;\n overflow: auto;\n }\n\n .resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 20px;\n height: 20px;\n cursor: se-resize;\n background: linear-gradient(\n -45deg,\n transparent 40%,\n var(--nuraly-color-border, #e0e0e0) 40%,\n var(--nuraly-color-border, #e0e0e0) 60%,\n transparent 60%\n );\n }\n\n /* Responsive behavior */\n @media (max-width: 768px) {\n .modal-backdrop {\n padding: var(--nuraly-spacing-02, 0.25rem);\n }\n \n .modal--size-small,\n .modal--size-medium,\n .modal--size-large,\n .modal--size-xl {\n width: 100%;\n max-width: none;\n }\n \n .modal-header,\n .modal-body,\n .modal-footer {\n padding-left: var(--nuraly-spacing-04, 0.75rem);\n padding-right: var(--nuraly-spacing-04, 0.75rem);\n }\n }\n\n /* Dark theme support through CSS custom properties */\n @media (prefers-color-scheme: dark) {\n :host(:not([data-theme])) {\n --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n }\n }\n`;"]}

package/modal.types.d.ts ADDED Viewed

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal size options
+ */
+export declare enum ModalSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    ExtraLarge = "xl"
+}
+/**
+ * Modal position options
+ */
+export declare enum ModalPosition {
+    Center = "center",
+    Top = "top",
+    Bottom = "bottom"
+}
+/**
+ * Modal animation types
+ */
+export declare enum ModalAnimation {
+    Fade = "fade",
+    Zoom = "zoom",
+    SlideUp = "slide-up",
+    SlideDown = "slide-down",
+    None = "none"
+}
+/**
+ * Modal backdrop behavior
+ */
+export declare enum ModalBackdrop {
+    Static = "static",
+    Closable = "closable",
+    None = "none"
+}
+/**
+ * Modal events
+ */
+export interface ModalEvents {
+    'modal-open': CustomEvent<void>;
+    'modal-close': CustomEvent<void>;
+    'modal-before-close': CustomEvent<{
+        cancel: () => void;
+    }>;
+    'modal-after-open': CustomEvent<void>;
+    'modal-escape': CustomEvent<void>;
+}
+/**
+ * Modal configuration interface
+ */
+export interface ModalConfig {
+    size?: ModalSize;
+    position?: ModalPosition;
+    animation?: ModalAnimation;
+    backdrop?: ModalBackdrop;
+    closable?: boolean;
+    draggable?: boolean;
+    resizable?: boolean;
+    fullscreen?: boolean;
+    destroyOnClose?: boolean;
+    zIndex?: number;
+}
+/**
+ * Modal header configuration
+ */
+export interface ModalHeader {
+    title?: string;
+    showCloseButton?: boolean;
+    icon?: string;
+    draggable?: boolean;
+}
+/**
+ * Modal footer configuration
+ */
+export interface ModalFooter {
+    showCancelButton?: boolean;
+    showOkButton?: boolean;
+    cancelText?: string;
+    okText?: string;
+    okType?: 'primary' | 'secondary' | 'danger';
+}
+/**
+ * Constants
+ */
+export declare const EMPTY_STRING = "";
+export declare const DEFAULT_Z_INDEX = 1000;
+/**
+ * Type guards
+ */
+export declare const isModalSize: (value: string) => value is ModalSize;
+export declare const isModalPosition: (value: string) => value is ModalPosition;
+export declare const isModalAnimation: (value: string) => value is ModalAnimation;
+export declare const isModalBackdrop: (value: string) => value is ModalBackdrop;
+/**
+ * Default configurations
+ */
+export declare const DEFAULT_MODAL_CONFIG: Required<ModalConfig>;
+export declare const DEFAULT_MODAL_HEADER: Required<ModalHeader>;
+export declare const DEFAULT_MODAL_FOOTER: Required<ModalFooter>;
+//# sourceMappingURL=modal.types.d.ts.map

package/modal.types.js ADDED Viewed

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal size options
+ */
+export var ModalSize;
+(function (ModalSize) {
+    ModalSize["Small"] = "small";
+    ModalSize["Medium"] = "medium";
+    ModalSize["Large"] = "large";
+    ModalSize["ExtraLarge"] = "xl";
+})(ModalSize || (ModalSize = {}));
+/**
+ * Modal position options
+ */
+export var ModalPosition;
+(function (ModalPosition) {
+    ModalPosition["Center"] = "center";
+    ModalPosition["Top"] = "top";
+    ModalPosition["Bottom"] = "bottom";
+})(ModalPosition || (ModalPosition = {}));
+/**
+ * Modal animation types
+ */
+export var ModalAnimation;
+(function (ModalAnimation) {
+    ModalAnimation["Fade"] = "fade";
+    ModalAnimation["Zoom"] = "zoom";
+    ModalAnimation["SlideUp"] = "slide-up";
+    ModalAnimation["SlideDown"] = "slide-down";
+    ModalAnimation["None"] = "none";
+})(ModalAnimation || (ModalAnimation = {}));
+/**
+ * Modal backdrop behavior
+ */
+export var ModalBackdrop;
+(function (ModalBackdrop) {
+    ModalBackdrop["Static"] = "static";
+    ModalBackdrop["Closable"] = "closable";
+    ModalBackdrop["None"] = "none"; // no backdrop
+})(ModalBackdrop || (ModalBackdrop = {}));
+/**
+ * Constants
+ */
+export const EMPTY_STRING = '';
+export const DEFAULT_Z_INDEX = 1000;
+/**
+ * Type guards
+ */
+export const isModalSize = (value) => {
+    return Object.values(ModalSize).includes(value);
+};
+export const isModalPosition = (value) => {
+    return Object.values(ModalPosition).includes(value);
+};
+export const isModalAnimation = (value) => {
+    return Object.values(ModalAnimation).includes(value);
+};
+export const isModalBackdrop = (value) => {
+    return Object.values(ModalBackdrop).includes(value);
+};
+/**
+ * Default configurations
+ */
+export const DEFAULT_MODAL_CONFIG = {
+    size: ModalSize.Medium,
+    position: ModalPosition.Center,
+    animation: ModalAnimation.Fade,
+    backdrop: ModalBackdrop.Closable,
+    closable: true,
+    draggable: false,
+    resizable: false,
+    fullscreen: false,
+    destroyOnClose: false,
+    zIndex: DEFAULT_Z_INDEX
+};
+export const DEFAULT_MODAL_HEADER = {
+    title: EMPTY_STRING,
+    showCloseButton: true,
+    icon: EMPTY_STRING,
+    draggable: false
+};
+export const DEFAULT_MODAL_FOOTER = {
+    showCancelButton: false,
+    showOkButton: false,
+    cancelText: 'Cancel',
+    okText: 'OK',
+    okType: 'primary'
+};
+//# sourceMappingURL=modal.types.js.map