@nuralyui/modal 0.0.4 → 0.0.6

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 (7) hide show
  1. package/bundle.js +37 -886
  2. package/modal.component.d.ts +1 -3
  3. package/modal.component.js +1 -4
  4. package/modal.component.js.map +1 -1
  5. package/modal.style.js +2 -2
  6. package/modal.style.js.map +1 -1
  7. package/package.json +1 -1
package/modal.component.d.ts CHANGED
@@ -5,10 +5,8 @@
5
5
  */
6
6
  import { LitElement, nothing, PropertyValues } from 'lit';
7
7
  import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop } from './modal.types.js';
8
- import '../icon/icon.component.js';
9
- import '../button/button.component.js';
10
8
  import { ModalDragHost, ModalKeyboardHost } from './controllers/index.js';
11
- declare const NrModalElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
9
+ declare const NrModalElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
12
10
  /**
13
11
  * Versatile modal component with multiple sizes, animations, and enhanced functionality.
14
12
  *
package/modal.component.js CHANGED
@@ -15,11 +15,8 @@ import { classMap } from 'lit/directives/class-map.js';
15
15
  import { styleMap } from 'lit/directives/style-map.js';
16
16
  import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop, EMPTY_STRING } from './modal.types.js';
17
17
  import { styles } from './modal.style.js';
18
- import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
18
+ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
19
19
  import { ModalManager } from './modal-manager.js';
20
- // Import icon component
21
- import '../icon/icon.component.js';
22
- import '../button/button.component.js';
23
20
  // Import controllers
24
21
  import { ModalDragController, ModalKeyboardController } from './controllers/index.js';
25
22
  /**
package/modal.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EACL,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,YAAY,EACb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,wBAAwB;AACxB,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AAEvC,qBAAqB;AACrB,OAAO,EACL,mBAAmB,EAEnB,uBAAuB,EAExB,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAjE;;QAIE,gCAAgC;QAEhC,SAAI,GAAG,KAAK,CAAC;QAEb,4CAA4C;QAE5C,SAAI,GAAc,SAAS,CAAC,MAAM,CAAC;QAEnC,2CAA2C;QAE3C,aAAQ,GAAkB,aAAa,CAAC,MAAM,CAAC;QAE/C,qBAAqB;QAErB,cAAS,GAAmB,cAAc,CAAC,IAAI,CAAC;QAEhD,wBAAwB;QAExB,aAAQ,GAAkB,aAAa,CAAC,QAAQ,CAAC;QAEjD,sCAAsC;QAEtC,aAAQ,GAAG,IAAI,CAAC;QAEhB,uCAAuC;QAEvC,mBAAc,GAAG,KAAK,CAAC;QAEvB,qCAAqC;QAErC,cAAS,GAAG,KAAK,CAAC;QAElB,sCAAsC;QAEtC,eAAU,GAAG,KAAK,CAAC;QAEnB,kBAAkB;QAElB,eAAU,GAAG,YAAY,CAAC;QAE1B,kCAAkC;QAElC,oBAAe,GAAG,IAAI,CAAC;QAEvB,kBAAkB;QAElB,eAAU,GAAG,YAAY,CAAC;QAE1B,4BAA4B;QAE5B,WAAM,GAAG,IAAI,CAAC;QAEd,mBAAmB;QAEnB,UAAK,GAAG,YAAY,CAAC;QAErB,oBAAoB;QAEpB,WAAM,GAAG,YAAY,CAAC;QAEtB,qBAAqB;QAErB,eAAU,GAAG,KAAK,CAAC;QAEnB,oCAAoC;QAEpC,YAAO,GAAG,CAAC,CAAC;QAEZ,oCAAoC;QAEpC,YAAO,GAAG,CAAC,CAAC;QAEZ,sBAAsB;QAEd,mBAAc,GAA8C,QAAQ,CAAC;QAE7E,6BAA6B;QACrB,0BAAqB,GAAmB,IAAI,CAAC;QAE5C,uBAAkB,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QAEvD,cAAc;QACN,mBAAc,GAAG,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC/C,uBAAkB,GAAG,IAAI,uBAAuB,CAAC,IAAI,CAAC,CAAC;QA+KvD,wBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAClD,8EAA8E;YAC9E,IAAI,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,QAAQ;gBACxC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa;gBACpC,YAAY,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE;gBAC1C,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;IAsIJ,CAAC;IA1TU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,wCAAwC;QACxC,IAAI,IAAI,CAAC,qBAAqB,YAAY,WAAW,EAAE;YACrD,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,CAAC;SACpC;IACH,CAAC;IAEQ,UAAU,CAAC,iBAAiC;QACnD,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QAEpC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;SACF;IACH,CAAC;IAEO,UAAU;QAChB,8CAA8C;QAC9C,MAAM,cAAc,GAAG,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC;QAE7B,iCAAiC;QACjC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAEhC,6BAA6B;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE;YAC/C,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,CAAC,aAAa,EAAE,EAAE;SAClE,CAAC,CAAC,CAAC;QAEJ,uDAAuD;QACvD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB;;QACxB,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAgB,CAAC;QAC7E,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAgB,CAAC;QAEzF,IAAI,CAAC,YAAY,IAAI,CAAC,eAAe;YAAE,OAAO;QAE9C,kDAAkD;QAClD,MAAM,EAAE,cAAc,EAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEvD,mBAAmB;QACnB,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE;YAC1D,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC;QAGH,2BAA2B;QAC3B,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAC7C,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;YAE7B,sCAAsC;YACtC,IAAI,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;gBACjC,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,EAAE,CAAC;aAC7C;YAED,4BAA4B;YAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE;gBACrD,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,CAAC,aAAa,EAAE,EAAE;aAClE,CAAC,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,qBAAqB;QAC3B,MAAM,iBAAiB,GAAG;YACxB,EAAE,OAAO,EAAE,CAAC,EAAE;YACd,EAAE,OAAO,EAAE,CAAC,EAAE;SACf,CAAC;QAEF,IAAI,cAAc,CAAC;QACnB,QAAQ,IAAI,CAAC,SAAS,EAAE;YACtB,KAAK,MAAM;gBACT,cAAc,GAAG;oBACf,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE;oBACvC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;iBACtC,CAAC;gBACF,MAAM;YACR,KAAK,MAAM;gBACT,cAAc,GAAG;oBACf,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE;oBACvC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;iBACtC,CAAC;gBACF,MAAM;YACR,KAAK,UAAU;gBACb,cAAc,GAAG;oBACf,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE;oBAC7C,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE;iBAC3C,CAAC;gBACF,MAAM;YACR,KAAK,YAAY;gBACf,cAAc,GAAG;oBACf,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE;oBAC9C,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE;iBAC3C,CAAC;gBACF,MAAM;YACR;gBACE,cAAc,GAAG;oBACf,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE;oBACvC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;iBACtC,CAAC;SACL;QAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;IAC/C,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAEhC,gCAAgC;QAChC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAE9B,sBAAsB;QACtB,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;QAEpC,iCAAiC;QACjC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QACjC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;OAEG;IACH,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,2CAA2C;QAC3C,MAAM,gBAAgB,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAC7D,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,cAAc,EAAE;aAChD;SACF,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAExD,uCAAuC;QACvC,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAElB,uBAAuB;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE;gBAChD,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;aACxB,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAWO,kBAAkB;QACxB,OAAO;YACL,gBAAgB,EAAE,IAAI;YACtB,wBAAwB,EAAE,CAAC,IAAI,CAAC,IAAI;YACpC,CAAC,4BAA4B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SACpD,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO;YACL,OAAO,EAAE,IAAI;YACb,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU;YAC9C,mBAAmB,EAAE,IAAI,CAAC,UAAU;YACpC,CAAC,oBAAoB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM;YAC3G,iBAAiB,EAAE,IAAI,CAAC,UAAU;YAClC,kBAAkB,EAAE,IAAI,CAAC,SAAS;SACnC,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,MAAM,MAAM,GAAQ,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,CAAC,2BAA2B,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;SAC9D;QAED,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;SAC7B;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,YAAY;QAClB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC;QAEpD,IAAI,CAAC,eAAe,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YAC1D,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;UAC3E,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;;;;SAIvB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;cAEb,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;yDACqB,IAAI,CAAC,UAAU;aAC3D,CAAC,CAAC,CAAC,OAAO;cACT,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;wCACI,IAAI,CAAC,UAAU;aAC1C,CAAC,CAAC,CAAC,OAAO;;SAEd,CAAC,CAAC,CAAC,OAAO;;UAET,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;;;qBAGhB,IAAI,CAAC,UAAU;;;;;SAK3B,CAAC,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAE9D,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAES,OAAO;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEM,eAAe;QAClB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;YAC/B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SACtD;IACL,CAAC;IAEM,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE;YAClD,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;iBAClC,IAAI,CAAC,mBAAmB;gBACzB,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;;;kBAG7B,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;;;4BAGtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;YAGzD,IAAI,CAAC,YAAY,EAAE;;;;;;YAMnB,IAAI,CAAC,YAAY,EAAE;;YAEnB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;WAEtB,CAAC,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;CACF,CAAA;AAjZiB,qBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC9B;AAIb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACQ;AAInC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACoB;AAI/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACqB;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACsB;AAIjD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACZ;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACL;AAIvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACV;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACT;AAInB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uDACrC;AAIvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACN;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACL;AAItB;IADC,KAAK,EAAE;kDACW;AAInB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACf;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACf;AAIZ;IADC,KAAK,EAAE;sDACqE;AA9ElE,cAAc;IAD1B,aAAa,CAAC,UAAU,CAAC;GACb,cAAc,CAmZ1B;SAnZY,cAAc","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 '../../shared/base-mixin.js';\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"]}
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\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.js CHANGED
@@ -224,13 +224,13 @@ export const styles = css `
224
224
 
225
225
  /* Modal footer */
226
226
  .modal-footer {
227
- padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
227
+ padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
228
228
  border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
229
229
  display: flex;
230
230
  align-items: center;
231
231
  justify-content: flex-end;
232
232
  gap: var(--nuraly-spacing-03, 0.5rem);
233
- min-height: var(--nuraly-modal-footer-height, 64px);
233
+ min-height: var(--nuraly-modal-footer-height, 48px);
234
234
  flex-shrink: 0;
235
235
  }
236
236
 
package/modal.style.js.map CHANGED
@@ -1 +1 @@
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-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\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, 64px);\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`;"]}
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/modal",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",