@raintonic/formaui 0.9.0 → 0.9.3

package/fesm2022/raintonic-formaui-components-divider.mjs

@@ -16,7 +16,7 @@ class FuiDividerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDividerComponent, isStandalone: true, selector: "fui-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-divider--vertical": "orientation() === \"vertical\"", "class.fui-divider--inset": "inset()", "class.fui-divider--with-text": "hasContent()", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation()" }, classAttribute: "fui-divider" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "@if (orientation() === 'horizontal' && hasContent()) {\r\n  <div\r\n    class=\"fui-divider__wrapper\"\r\n    [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n    [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n    [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n  >\r\n    <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n    <span class=\"fui-divider__text\" #contentWrapper>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n  </div>\r\n} @else {\r\n  <span class=\"fui-divider__line\"></span>\r\n}\r\n", styles: [".fui-divider{display:block}.fui-divider--vertical{display:inline-flex;height:100%;width:auto;align-self:stretch}.fui-divider__line{display:block;border:0;border-top:1px solid var(--fui-border-default)}.fui-divider--vertical .fui-divider__line{border-top:0;border-left:1px solid var(--fui-border-default);height:100%;width:0}.fui-divider__wrapper{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem)}.fui-divider__wrapper--start .fui-divider__line--before{flex:0 0 1.5rem}.fui-divider__wrapper--start .fui-divider__line--after,.fui-divider__wrapper--center .fui-divider__line--before,.fui-divider__wrapper--center .fui-divider__line--after,.fui-divider__wrapper--end .fui-divider__line--before{flex:1}.fui-divider__wrapper--end .fui-divider__line--after{flex:0 0 1.5rem}.fui-divider__line--before,.fui-divider__line--after{border-top:1px solid var(--fui-border-default)}.fui-divider__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;padding:0}.fui-divider--inset{margin-left:var(--fui-spacing-9, 1.5rem);margin-right:var(--fui-spacing-9, 1.5rem)}@media(prefers-contrast:high){.fui-divider__line,.fui-divider__line--before,.fui-divider__line--after{border-color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDividerComponent, isStandalone: true, selector: "fui-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-divider--vertical": "orientation() === \"vertical\"", "class.fui-divider--inset": "inset()", "class.fui-divider--with-text": "hasContent()", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation()" }, classAttribute: "fui-divider" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "@if (orientation() === 'horizontal' && hasContent()) {\r\n  <div\r\n    class=\"fui-divider__wrapper\"\r\n    [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n    [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n    [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n  >\r\n    <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n    <span class=\"fui-divider__text\" #contentWrapper>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n  </div>\r\n} @else {\r\n  <span class=\"fui-divider__line\"></span>\r\n}\r\n", styles: [".fui-divider{display:block}.fui-divider--vertical{display:inline-flex;height:100%;width:auto;align-self:stretch}.fui-divider__line{display:block;border:0;border-top:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-divider--vertical .fui-divider__line{border-top:0;border-left:var(--fui-border-width-sm) solid var(--fui-border-default);height:100%;width:0}.fui-divider__wrapper{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem)}.fui-divider__wrapper--start .fui-divider__line--before{flex:0 0 1.5rem}.fui-divider__wrapper--start .fui-divider__line--after,.fui-divider__wrapper--center .fui-divider__line--before,.fui-divider__wrapper--center .fui-divider__line--after,.fui-divider__wrapper--end .fui-divider__line--before{flex:1}.fui-divider__wrapper--end .fui-divider__line--after{flex:0 0 1.5rem}.fui-divider__line--before,.fui-divider__line--after{border-top:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-divider__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;padding:0}.fui-divider--inset{margin-left:var(--fui-spacing-9, 1.5rem);margin-right:var(--fui-spacing-9, 1.5rem)}@media(prefers-contrast:high){.fui-divider__line,.fui-divider__line--before,.fui-divider__line--after{border-color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDividerComponent, decorators: [{
             type: Component,
@@ -27,7 +27,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-divider--with-text]': 'hasContent()',
                         '[attr.role]': '"separator"',
                         '[attr.aria-orientation]': 'orientation()',
-                    }, template: "@if (orientation() === 'horizontal' && hasContent()) {\r\n  <div\r\n    class=\"fui-divider__wrapper\"\r\n    [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n    [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n    [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n  >\r\n    <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n    <span class=\"fui-divider__text\" #contentWrapper>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n  </div>\r\n} @else {\r\n  <span class=\"fui-divider__line\"></span>\r\n}\r\n", styles: [".fui-divider{display:block}.fui-divider--vertical{display:inline-flex;height:100%;width:auto;align-self:stretch}.fui-divider__line{display:block;border:0;border-top:1px solid var(--fui-border-default)}.fui-divider--vertical .fui-divider__line{border-top:0;border-left:1px solid var(--fui-border-default);height:100%;width:0}.fui-divider__wrapper{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem)}.fui-divider__wrapper--start .fui-divider__line--before{flex:0 0 1.5rem}.fui-divider__wrapper--start .fui-divider__line--after,.fui-divider__wrapper--center .fui-divider__line--before,.fui-divider__wrapper--center .fui-divider__line--after,.fui-divider__wrapper--end .fui-divider__line--before{flex:1}.fui-divider__wrapper--end .fui-divider__line--after{flex:0 0 1.5rem}.fui-divider__line--before,.fui-divider__line--after{border-top:1px solid var(--fui-border-default)}.fui-divider__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;padding:0}.fui-divider--inset{margin-left:var(--fui-spacing-9, 1.5rem);margin-right:var(--fui-spacing-9, 1.5rem)}@media(prefers-contrast:high){.fui-divider__line,.fui-divider__line--before,.fui-divider__line--after{border-color:CanvasText}}\n"] }]
+                    }, template: "@if (orientation() === 'horizontal' && hasContent()) {\r\n  <div\r\n    class=\"fui-divider__wrapper\"\r\n    [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n    [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n    [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n  >\r\n    <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n    <span class=\"fui-divider__text\" #contentWrapper>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n  </div>\r\n} @else {\r\n  <span class=\"fui-divider__line\"></span>\r\n}\r\n", styles: [".fui-divider{display:block}.fui-divider--vertical{display:inline-flex;height:100%;width:auto;align-self:stretch}.fui-divider__line{display:block;border:0;border-top:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-divider--vertical .fui-divider__line{border-top:0;border-left:var(--fui-border-width-sm) solid var(--fui-border-default);height:100%;width:0}.fui-divider__wrapper{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem)}.fui-divider__wrapper--start .fui-divider__line--before{flex:0 0 1.5rem}.fui-divider__wrapper--start .fui-divider__line--after,.fui-divider__wrapper--center .fui-divider__line--before,.fui-divider__wrapper--center .fui-divider__line--after,.fui-divider__wrapper--end .fui-divider__line--before{flex:1}.fui-divider__wrapper--end .fui-divider__line--after{flex:0 0 1.5rem}.fui-divider__line--before,.fui-divider__line--after{border-top:var(--fui-border-width-sm) solid var(--fui-border-default)}.fui-divider__text{font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;padding:0}.fui-divider--inset{margin-left:var(--fui-spacing-9, 1.5rem);margin-right:var(--fui-spacing-9, 1.5rem)}@media(prefers-contrast:high){.fui-divider__line,.fui-divider__line--before,.fui-divider__line--after{border-color:CanvasText}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], contentWrapper: [{
                 type: ViewChild,
                 args: ['contentWrapper', { static: false }]

package/fesm2022/raintonic-formaui-components-divider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-divider.mjs","sources":["../../../lib/components/divider/divider.component.ts","../../../lib/components/divider/divider.component.html","../../../lib/components/divider/raintonic-formaui-components-divider.ts"],"sourcesContent":["import {\r\n  afterNextRender,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  input,\r\n  signal,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { FuiDividerOrientation, FuiDividerTextAlign } from './divider.types';\r\n\r\n@Component({\r\n  selector: 'fui-divider',\r\n  standalone: true,\r\n  templateUrl: './divider.component.html',\r\n  styleUrls: ['./divider.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-divider',\r\n    '[class.fui-divider--vertical]': 'orientation() === \"vertical\"',\r\n    '[class.fui-divider--inset]': 'inset()',\r\n    '[class.fui-divider--with-text]': 'hasContent()',\r\n    '[attr.role]': '\"separator\"',\r\n    '[attr.aria-orientation]': 'orientation()',\r\n  },\r\n})\r\nexport class FuiDividerComponent {\r\n  static nextId = 0;\r\n\r\n  readonly orientation = input<FuiDividerOrientation>('horizontal');\r\n  readonly textAlign = input<FuiDividerTextAlign>('center');\r\n  readonly inset = input(false);\r\n\r\n  readonly hasContent = signal(false);\r\n\r\n  @ViewChild('contentWrapper', { static: false }) contentWrapper?: ElementRef<HTMLElement>;\r\n\r\n  constructor() {\r\n    afterNextRender(() => {\r\n      if (this.contentWrapper) {\r\n        this.hasContent.set(this.contentWrapper.nativeElement.childNodes.length > 0);\r\n      }\r\n    });\r\n  }\r\n}\r\n","@if (orientation() === 'horizontal' && hasContent()) {\r\n  <div\r\n    class=\"fui-divider__wrapper\"\r\n    [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n    [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n    [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n  >\r\n    <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n    <span class=\"fui-divider__text\" #contentWrapper>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n  </div>\r\n} @else {\r\n  <span class=\"fui-divider__line\"></span>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MA4Ba,mBAAmB,CAAA;AAC9B,IAAA,OAAO,MAAM,GAAG,CAAC;AAER,IAAA,WAAW,GAAG,KAAK,CAAwB,YAAY,kFAAC;AACxD,IAAA,SAAS,GAAG,KAAK,CAAsB,QAAQ,gFAAC;AAChD,IAAA,KAAK,GAAG,KAAK,CAAC,KAAK,4EAAC;AAEpB,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;AAEa,IAAA,cAAc;AAE9D,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9E;AACF,QAAA,CAAC,CAAC;IACJ;uGAjBW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,o2BC5BhC,opBAgBA,EAAA,MAAA,EAAA,CAAA,yuCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,+BAA+B,EAAE,8BAA8B;AAC/D,wBAAA,4BAA4B,EAAE,SAAS;AACvC,wBAAA,gCAAgC,EAAE,cAAc;AAChD,wBAAA,aAAa,EAAE,aAAa;AAC5B,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA,EAAA,QAAA,EAAA,opBAAA,EAAA,MAAA,EAAA,CAAA,yuCAAA,CAAA,EAAA;;sBAWA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;AErChD;;AAEG;;;;"}
+{"version":3,"file":"raintonic-formaui-components-divider.mjs","sources":["../../../lib/components/divider/divider.component.ts","../../../lib/components/divider/divider.component.html","../../../lib/components/divider/raintonic-formaui-components-divider.ts"],"sourcesContent":["import {\r\n  afterNextRender,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  input,\r\n  signal,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { FuiDividerOrientation, FuiDividerTextAlign } from './divider.types';\r\n\r\n@Component({\r\n  selector: 'fui-divider',\r\n  standalone: true,\r\n  templateUrl: './divider.component.html',\r\n  styleUrls: ['./divider.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-divider',\r\n    '[class.fui-divider--vertical]': 'orientation() === \"vertical\"',\r\n    '[class.fui-divider--inset]': 'inset()',\r\n    '[class.fui-divider--with-text]': 'hasContent()',\r\n    '[attr.role]': '\"separator\"',\r\n    '[attr.aria-orientation]': 'orientation()',\r\n  },\r\n})\r\nexport class FuiDividerComponent {\r\n  static nextId = 0;\r\n\r\n  readonly orientation = input<FuiDividerOrientation>('horizontal');\r\n  readonly textAlign = input<FuiDividerTextAlign>('center');\r\n  readonly inset = input(false);\r\n\r\n  readonly hasContent = signal(false);\r\n\r\n  @ViewChild('contentWrapper', { static: false }) contentWrapper?: ElementRef<HTMLElement>;\r\n\r\n  constructor() {\r\n    afterNextRender(() => {\r\n      if (this.contentWrapper) {\r\n        this.hasContent.set(this.contentWrapper.nativeElement.childNodes.length > 0);\r\n      }\r\n    });\r\n  }\r\n}\r\n","@if (orientation() === 'horizontal' && hasContent()) {\r\n  <div\r\n    class=\"fui-divider__wrapper\"\r\n    [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n    [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n    [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n  >\r\n    <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n    <span class=\"fui-divider__text\" #contentWrapper>\r\n      <ng-content></ng-content>\r\n    </span>\r\n    <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n  </div>\r\n} @else {\r\n  <span class=\"fui-divider__line\"></span>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MA4Ba,mBAAmB,CAAA;AAC9B,IAAA,OAAO,MAAM,GAAG,CAAC;AAER,IAAA,WAAW,GAAG,KAAK,CAAwB,YAAY,kFAAC;AACxD,IAAA,SAAS,GAAG,KAAK,CAAsB,QAAQ,gFAAC;AAChD,IAAA,KAAK,GAAG,KAAK,CAAC,KAAK,4EAAC;AAEpB,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;AAEa,IAAA,cAAc;AAE9D,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9E;AACF,QAAA,CAAC,CAAC;IACJ;uGAjBW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,o2BC5BhC,opBAgBA,EAAA,MAAA,EAAA,CAAA,8yCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,+BAA+B,EAAE,8BAA8B;AAC/D,wBAAA,4BAA4B,EAAE,SAAS;AACvC,wBAAA,gCAAgC,EAAE,cAAc;AAChD,wBAAA,aAAa,EAAE,aAAa;AAC5B,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA,EAAA,QAAA,EAAA,opBAAA,EAAA,MAAA,EAAA,CAAA,8yCAAA,CAAA,EAAA;;sBAWA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;AErChD;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-drawer.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ChangeDetectorRef, input, booleanAttribute, output, signal, viewChild, computed, effect, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, Directive, inject, ChangeDetectorRef, input, booleanAttribute, output, signal, viewChild, contentChild, computed, effect, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
@@ -22,6 +22,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Marker directive for projecting custom markup into the drawer header title
+ * area. Apply the `fuiDrawerTitle` attribute to the element you want rendered
+ * as the title. When present, it visually replaces the string `title`, which
+ * still provides the drawer's accessible name.
+ *
+ * @example
+ * <fui-drawer title="Details">
+ *   <span fuiDrawerTitle>Custom <em>title</em> markup</span>
+ * </fui-drawer>
+ */
+class FuiDrawerTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: FuiDrawerTitle, isStandalone: true, selector: "[fuiDrawerTitle]", host: { classAttribute: "fui-drawer__title-slot" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuiDrawerTitle]',
+                    standalone: true,
+                    host: {
+                        class: 'fui-drawer__title-slot',
+                    },
+                }]
+        }] });
+
 class FuiDrawerComponent {
     _document = inject(DOCUMENT);
     intl = inject(FuiDrawerIntl);
@@ -52,6 +78,9 @@ class FuiDrawerComponent {
     _previouslyFocusedElement = null;
     // ViewChild
     drawerPanel = viewChild('drawerPanel', ...(ngDevMode ? [{ debugName: "drawerPanel" }] : /* istanbul ignore next */ []));
+    // Projected title detection — true when a [fuiDrawerTitle] element is provided.
+    _projectedTitle = contentChild(FuiDrawerTitle, ...(ngDevMode ? [{ debugName: "_projectedTitle" }] : /* istanbul ignore next */ []));
+    _hasProjectedTitle = computed(() => !!this._projectedTitle(), ...(ngDevMode ? [{ debugName: "_hasProjectedTitle" }] : /* istanbul ignore next */ []));
     // Computed
     _sizeValue = computed(() => {
         const size = this.size();
@@ -75,7 +104,9 @@ class FuiDrawerComponent {
                 }
             }
         });
-        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._cdr.markForCheck();
+        });
     }
     onKeydown(event) {
         if (!this._opened())
@@ -174,7 +205,7 @@ class FuiDrawerComponent {
         return Array.from(panel.querySelectorAll(selectors)).filter((el) => el.offsetParent !== null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDrawerComponent, isStandalone: true, selector: "fui-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class.fui-drawer--open": "_opened()", "class.fui-drawer--left": "position() === \"left\"", "class.fui-drawer--right": "position() === \"right\"", "class.fui-drawer--top": "position() === \"top\"", "class.fui-drawer--bottom": "position() === \"bottom\"", "class.fui-drawer--overlay": "mode() === \"overlay\"", "class.fui-drawer--push": "mode() === \"push\"", "attr.role": "\"dialog\"", "attr.aria-modal": "_opened() ? \"true\" : null", "attr.aria-label": "ariaLabel() || (!ariaLabelledBy() ? title() : null)", "attr.aria-labelledby": "ariaLabelledBy()" }, classAttribute: "fui-drawer" }, viewQueries: [{ propertyName: "drawerPanel", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (_opened() && hasBackdrop()) {\r\n  <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n  @if (title() || showCloseButton()) {\r\n    <div class=\"fui-drawer__header\">\r\n      @if (title()) {\r\n        <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n      }\r\n      @if (showCloseButton()) {\r\n        <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer__footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer{--fui-drawer-z-index: var(--fui-z-index-modal, 1050);--fui-drawer-bg: var(--fui-bg-default);--fui-drawer-border-color: var(--fui-border-default);--fui-drawer-shadow: -4px 0 24px rgba(0, 0, 0, .1);--fui-drawer-backdrop-color: rgba(0, 0, 0, .3);--fui-drawer-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-drawer-content-padding: var(--fui-spacing-7);--fui-drawer-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;inset:0;pointer-events:none;z-index:var(--fui-drawer-z-index);overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fui-duration-base)}.fui-drawer--open{pointer-events:auto;visibility:visible;transition-delay:0s}.fui-drawer__backdrop{position:fixed;inset:0;background-color:var(--fui-drawer-backdrop-color);z-index:1;opacity:0;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--open .fui-drawer__backdrop{opacity:1}.fui-drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--fui-drawer-bg);z-index:2;pointer-events:auto;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--right .fui-drawer__panel{top:0;right:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-left:1px solid var(--fui-drawer-border-color);box-shadow:var(--fui-drawer-shadow);transform:translate(100%)}.fui-drawer--right.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--left .fui-drawer__panel{top:0;left:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-right:1px solid var(--fui-drawer-border-color);box-shadow:4px 0 24px #0000001a;transform:translate(-100%)}.fui-drawer--left.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--top .fui-drawer__panel{top:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-bottom:1px solid var(--fui-drawer-border-color);box-shadow:0 4px 24px #0000001a;transform:translateY(-100%)}.fui-drawer--top.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer--bottom .fui-drawer__panel{bottom:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-top:1px solid var(--fui-drawer-border-color);box-shadow:0 -4px 24px #0000001a;transform:translateY(100%)}.fui-drawer--bottom.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-drawer-header-padding);border-bottom:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-drawer__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-drawer__close:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-drawer__content{flex:1;overflow-y:auto;padding:var(--fui-drawer-content-padding)}.fui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-drawer-footer-padding);border-top:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer__backdrop,.fui-drawer__panel,.fui-drawer__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDrawerComponent, isStandalone: true, selector: "fui-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class.fui-drawer--open": "_opened()", "class.fui-drawer--left": "position() === \"left\"", "class.fui-drawer--right": "position() === \"right\"", "class.fui-drawer--top": "position() === \"top\"", "class.fui-drawer--bottom": "position() === \"bottom\"", "class.fui-drawer--overlay": "mode() === \"overlay\"", "class.fui-drawer--push": "mode() === \"push\"", "attr.role": "\"dialog\"", "attr.aria-modal": "_opened() ? \"true\" : null", "attr.aria-label": "ariaLabel() || (!ariaLabelledBy() ? title() : null)", "attr.aria-labelledby": "ariaLabelledBy()" }, classAttribute: "fui-drawer" }, queries: [{ propertyName: "_projectedTitle", first: true, predicate: FuiDrawerTitle, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "drawerPanel", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (_opened() && hasBackdrop()) {\r\n  <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n  @if (title() || showCloseButton() || _hasProjectedTitle()) {\r\n    <div class=\"fui-drawer__header\">\r\n      @if (_hasProjectedTitle()) {\r\n        <div class=\"fui-drawer__title\"><ng-content select=\"[fuiDrawerTitle]\"></ng-content></div>\r\n      } @else if (title()) {\r\n        <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n      }\r\n      @if (showCloseButton()) {\r\n        <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer__footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer{--fui-drawer-z-index: var(--fui-z-modal);--fui-drawer-bg: var(--fui-bg-default);--fui-drawer-border-color: var(--fui-border-default);--fui-drawer-shadow: -4px 0 24px rgba(0, 0, 0, .1);--fui-drawer-backdrop-color: rgba(0, 0, 0, .3);--fui-drawer-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-drawer-content-padding: var(--fui-spacing-7);--fui-drawer-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;inset:0;pointer-events:none;z-index:var(--fui-drawer-z-index);overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fui-duration-base)}.fui-drawer--open{pointer-events:auto;visibility:visible;transition-delay:0s}.fui-drawer__backdrop{position:fixed;inset:0;background-color:var(--fui-drawer-backdrop-color);z-index:1;opacity:0;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--open .fui-drawer__backdrop{opacity:1}.fui-drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--fui-drawer-bg);z-index:2;pointer-events:auto;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--right .fui-drawer__panel{top:0;right:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-left:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:var(--fui-drawer-shadow);transform:translate(100%)}.fui-drawer--right.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--left .fui-drawer__panel{top:0;left:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-right:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:4px 0 24px #0000001a;transform:translate(-100%)}.fui-drawer--left.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--top .fui-drawer__panel{top:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-bottom:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:0 4px 24px #0000001a;transform:translateY(-100%)}.fui-drawer--top.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer--bottom .fui-drawer__panel{bottom:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-top:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:0 -4px 24px #0000001a;transform:translateY(100%)}.fui-drawer--bottom.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-drawer-header-padding);border-bottom:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-drawer__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-drawer__close:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-drawer__content{flex:1;overflow-y:auto;padding:var(--fui-drawer-content-padding)}.fui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-drawer-footer-padding);border-top:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer__backdrop,.fui-drawer__panel,.fui-drawer__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerComponent, decorators: [{
             type: Component,
@@ -191,8 +222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[attr.aria-modal]': '_opened() ? "true" : null',
                         '[attr.aria-label]': 'ariaLabel() || (!ariaLabelledBy() ? title() : null)',
                         '[attr.aria-labelledby]': 'ariaLabelledBy()',
-                    }, template: "@if (_opened() && hasBackdrop()) {\r\n  <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n  @if (title() || showCloseButton()) {\r\n    <div class=\"fui-drawer__header\">\r\n      @if (title()) {\r\n        <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n      }\r\n      @if (showCloseButton()) {\r\n        <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer__footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer{--fui-drawer-z-index: var(--fui-z-index-modal, 1050);--fui-drawer-bg: var(--fui-bg-default);--fui-drawer-border-color: var(--fui-border-default);--fui-drawer-shadow: -4px 0 24px rgba(0, 0, 0, .1);--fui-drawer-backdrop-color: rgba(0, 0, 0, .3);--fui-drawer-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-drawer-content-padding: var(--fui-spacing-7);--fui-drawer-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;inset:0;pointer-events:none;z-index:var(--fui-drawer-z-index);overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fui-duration-base)}.fui-drawer--open{pointer-events:auto;visibility:visible;transition-delay:0s}.fui-drawer__backdrop{position:fixed;inset:0;background-color:var(--fui-drawer-backdrop-color);z-index:1;opacity:0;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--open .fui-drawer__backdrop{opacity:1}.fui-drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--fui-drawer-bg);z-index:2;pointer-events:auto;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--right .fui-drawer__panel{top:0;right:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-left:1px solid var(--fui-drawer-border-color);box-shadow:var(--fui-drawer-shadow);transform:translate(100%)}.fui-drawer--right.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--left .fui-drawer__panel{top:0;left:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-right:1px solid var(--fui-drawer-border-color);box-shadow:4px 0 24px #0000001a;transform:translate(-100%)}.fui-drawer--left.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--top .fui-drawer__panel{top:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-bottom:1px solid var(--fui-drawer-border-color);box-shadow:0 4px 24px #0000001a;transform:translateY(-100%)}.fui-drawer--top.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer--bottom .fui-drawer__panel{bottom:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-top:1px solid var(--fui-drawer-border-color);box-shadow:0 -4px 24px #0000001a;transform:translateY(100%)}.fui-drawer--bottom.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-drawer-header-padding);border-bottom:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-drawer__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-drawer__close:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-drawer__content{flex:1;overflow-y:auto;padding:var(--fui-drawer-content-padding)}.fui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-drawer-footer-padding);border-top:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer__backdrop,.fui-drawer__panel,.fui-drawer__close{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], drawerPanel: [{ type: i0.ViewChild, args: ['drawerPanel', { isSignal: true }] }], onKeydown: [{
+                    }, template: "@if (_opened() && hasBackdrop()) {\r\n  <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n  @if (title() || showCloseButton() || _hasProjectedTitle()) {\r\n    <div class=\"fui-drawer__header\">\r\n      @if (_hasProjectedTitle()) {\r\n        <div class=\"fui-drawer__title\"><ng-content select=\"[fuiDrawerTitle]\"></ng-content></div>\r\n      } @else if (title()) {\r\n        <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n      }\r\n      @if (showCloseButton()) {\r\n        <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer__footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer{--fui-drawer-z-index: var(--fui-z-modal);--fui-drawer-bg: var(--fui-bg-default);--fui-drawer-border-color: var(--fui-border-default);--fui-drawer-shadow: -4px 0 24px rgba(0, 0, 0, .1);--fui-drawer-backdrop-color: rgba(0, 0, 0, .3);--fui-drawer-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-drawer-content-padding: var(--fui-spacing-7);--fui-drawer-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;inset:0;pointer-events:none;z-index:var(--fui-drawer-z-index);overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fui-duration-base)}.fui-drawer--open{pointer-events:auto;visibility:visible;transition-delay:0s}.fui-drawer__backdrop{position:fixed;inset:0;background-color:var(--fui-drawer-backdrop-color);z-index:1;opacity:0;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--open .fui-drawer__backdrop{opacity:1}.fui-drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--fui-drawer-bg);z-index:2;pointer-events:auto;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer--right .fui-drawer__panel{top:0;right:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-left:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:var(--fui-drawer-shadow);transform:translate(100%)}.fui-drawer--right.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--left .fui-drawer__panel{top:0;left:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-right:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:4px 0 24px #0000001a;transform:translate(-100%)}.fui-drawer--left.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--top .fui-drawer__panel{top:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-bottom:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:0 4px 24px #0000001a;transform:translateY(-100%)}.fui-drawer--top.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer--bottom .fui-drawer__panel{bottom:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-top:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);box-shadow:0 -4px 24px #0000001a;transform:translateY(100%)}.fui-drawer--bottom.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-drawer-header-padding);border-bottom:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-drawer__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-drawer__close:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-drawer__content{flex:1;overflow-y:auto;padding:var(--fui-drawer-content-padding)}.fui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-drawer-footer-padding);border-top:var(--fui-border-width-sm) solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer__backdrop,.fui-drawer__panel,.fui-drawer__close{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], drawerPanel: [{ type: i0.ViewChild, args: ['drawerPanel', { isSignal: true }] }], _projectedTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FuiDrawerTitle), { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -201,5 +232,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DRAWER_SIZES, FuiDrawerComponent, FuiDrawerIntl };
+export { DRAWER_SIZES, FuiDrawerComponent, FuiDrawerIntl, FuiDrawerTitle };
 //# sourceMappingURL=raintonic-formaui-components-drawer.mjs.map

package/fesm2022/raintonic-formaui-components-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-drawer.mjs","sources":["../../../lib/components/drawer/drawer.types.ts","../../../lib/components/drawer/drawer.intl.ts","../../../lib/components/drawer/drawer.component.ts","../../../lib/components/drawer/drawer.component.html","../../../lib/components/drawer/raintonic-formaui-components-drawer.ts"],"sourcesContent":["export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';\r\nexport type DrawerMode = 'overlay' | 'push';\r\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\r\n\r\nexport const DRAWER_SIZES: Record<DrawerSize, string> = {\r\n  sm: '320px',\r\n  md: '480px',\r\n  lg: '640px',\r\n  full: '100%',\r\n};\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiDrawerIntl extends FuiIntlBase {\r\n  closeAriaLabel = 'Close drawer';\r\n}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  ViewEncapsulation,\r\n  input,\r\n  output,\r\n  signal,\r\n  computed,\r\n  effect,\r\n  booleanAttribute,\r\n  HostListener,\r\n  ElementRef,\r\n  inject,\r\n  viewChild,\r\n  Signal,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DrawerPosition, DrawerMode, DrawerSize, DRAWER_SIZES } from './drawer.types';\r\nimport { FuiDrawerIntl } from './drawer.intl';\r\n\r\n@Component({\r\n  selector: 'fui-drawer',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './drawer.component.html',\r\n  styleUrls: ['./drawer.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-drawer',\r\n    '[class.fui-drawer--open]': '_opened()',\r\n    '[class.fui-drawer--left]': 'position() === \"left\"',\r\n    '[class.fui-drawer--right]': 'position() === \"right\"',\r\n    '[class.fui-drawer--top]': 'position() === \"top\"',\r\n    '[class.fui-drawer--bottom]': 'position() === \"bottom\"',\r\n    '[class.fui-drawer--overlay]': 'mode() === \"overlay\"',\r\n    '[class.fui-drawer--push]': 'mode() === \"push\"',\r\n    '[attr.role]': '\"dialog\"',\r\n    '[attr.aria-modal]': '_opened() ? \"true\" : null',\r\n    '[attr.aria-label]': 'ariaLabel() || (!ariaLabelledBy() ? title() : null)',\r\n    '[attr.aria-labelledby]': 'ariaLabelledBy()',\r\n  },\r\n})\r\nexport class FuiDrawerComponent {\r\n  private readonly _document = inject(DOCUMENT);\r\n  readonly intl = inject(FuiDrawerIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  // Inputs\r\n  readonly position = input<DrawerPosition>('right');\r\n  readonly mode = input<DrawerMode>('overlay');\r\n  readonly size = input('md');\r\n  readonly opened = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly hasBackdrop = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly closeOnBackdropClick = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly closeOnEsc = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly title = input('');\r\n  readonly showCloseButton = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n\r\n  /** ARIA label for the drawer, used when no visible title is present */\r\n  readonly ariaLabel = input<string | null>(null);\r\n\r\n  /** ID of an element that labels the drawer */\r\n  readonly ariaLabelledBy = input<string | null>(null);\r\n\r\n  // Outputs\r\n  readonly openedChange = output<boolean>();\r\n  readonly closed = output();\r\n\r\n  // Internal state\r\n  readonly _opened: WritableSignal<boolean> = signal(false);\r\n  readonly _animating: WritableSignal<boolean> = signal(false);\r\n\r\n  // Track the last input value to avoid effect re-triggering on programmatic changes\r\n  private _lastInputValue = false;\r\n\r\n  // Focus management\r\n  private _previouslyFocusedElement: HTMLElement | null = null;\r\n\r\n  // ViewChild\r\n  readonly drawerPanel: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('drawerPanel');\r\n\r\n  // Computed\r\n  readonly _sizeValue: Signal<string> = computed(() => {\r\n    const size = this.size();\r\n    return DRAWER_SIZES[size as DrawerSize] ?? size;\r\n  });\r\n\r\n  readonly _isHorizontal: Signal<boolean> = computed(() => {\r\n    const pos = this.position();\r\n    return pos === 'left' || pos === 'right';\r\n  });\r\n\r\n  constructor() {\r\n    // Sync opened input with internal state — only react when the input actually changes\r\n    effect(() => {\r\n      const inputValue = this.opened();\r\n      if (inputValue !== this._lastInputValue) {\r\n        this._lastInputValue = inputValue;\r\n        if (inputValue) {\r\n          this._openInternal();\r\n        } else {\r\n          this._closeInternal();\r\n        }\r\n      }\r\n    });\r\n\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n  }\r\n\r\n  @HostListener('document:keydown', ['$event'])\r\n  onKeydown(event: KeyboardEvent): void {\r\n    if (!this._opened()) return;\r\n\r\n    if (event.key === 'Escape' && this.closeOnEsc()) {\r\n      this.close();\r\n      return;\r\n    }\r\n\r\n    // Focus trap cycling\r\n    if (event.key === 'Tab') {\r\n      const focusableElements = this._getAllFocusableElements();\r\n      if (focusableElements.length === 0) {\r\n        event.preventDefault();\r\n        return;\r\n      }\r\n\r\n      const firstFocusable = focusableElements[0];\r\n      const lastFocusable = focusableElements[focusableElements.length - 1];\r\n      const activeElement = this._document.activeElement;\r\n\r\n      if (event.shiftKey) {\r\n        if (activeElement === firstFocusable) {\r\n          event.preventDefault();\r\n          lastFocusable.focus();\r\n        }\r\n      } else {\r\n        if (activeElement === lastFocusable) {\r\n          event.preventDefault();\r\n          firstFocusable.focus();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  open(): void {\r\n    if (!this._opened()) {\r\n      this._openInternal();\r\n      this.openedChange.emit(true);\r\n    }\r\n  }\r\n\r\n  close(): void {\r\n    if (this._opened()) {\r\n      this._closeInternal();\r\n      this.openedChange.emit(false);\r\n      this.closed.emit();\r\n    }\r\n  }\r\n\r\n  toggle(): void {\r\n    if (this._opened()) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  }\r\n\r\n  private _openInternal(): void {\r\n    this._previouslyFocusedElement = document.activeElement as HTMLElement;\r\n    this._opened.set(true);\r\n\r\n    // Focus the panel after it renders\r\n    setTimeout(() => {\r\n      this._focusFirstTabbable();\r\n    });\r\n  }\r\n\r\n  private _closeInternal(): void {\r\n    this._opened.set(false);\r\n\r\n    // Restore focus\r\n    if (this._previouslyFocusedElement) {\r\n      this._previouslyFocusedElement.focus();\r\n      this._previouslyFocusedElement = null;\r\n    }\r\n  }\r\n\r\n  private _focusFirstTabbable(): void {\r\n    const panel = this.drawerPanel()?.nativeElement;\r\n    if (!panel) return;\r\n\r\n    const focusable = this._getAllFocusableElements();\r\n\r\n    if (focusable.length > 0) {\r\n      focusable[0].focus();\r\n    } else {\r\n      panel.setAttribute('tabindex', '-1');\r\n      panel.focus();\r\n    }\r\n  }\r\n\r\n  private _getAllFocusableElements(): HTMLElement[] {\r\n    const panel = this.drawerPanel()?.nativeElement;\r\n    if (!panel) return [];\r\n\r\n    const selectors = [\r\n      'a[href]',\r\n      'button:not([disabled])',\r\n      'textarea:not([disabled])',\r\n      'input:not([disabled])',\r\n      'select:not([disabled])',\r\n      '[tabindex]:not([tabindex=\"-1\"])',\r\n      '[contenteditable=\"true\"]',\r\n    ].join(',');\r\n\r\n    return Array.from(panel.querySelectorAll<HTMLElement>(selectors)).filter((el) => el.offsetParent !== null);\r\n  }\r\n}\r\n","@if (_opened() && hasBackdrop()) {\r\n  <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n  @if (title() || showCloseButton()) {\r\n    <div class=\"fui-drawer__header\">\r\n      @if (title()) {\r\n        <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n      }\r\n      @if (showCloseButton()) {\r\n        <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer__footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-drawer.mjs","sources":["../../../lib/components/drawer/drawer.types.ts","../../../lib/components/drawer/drawer.intl.ts","../../../lib/components/drawer/drawer-title.directive.ts","../../../lib/components/drawer/drawer.component.ts","../../../lib/components/drawer/drawer.component.html","../../../lib/components/drawer/raintonic-formaui-components-drawer.ts"],"sourcesContent":["export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';\r\nexport type DrawerMode = 'overlay' | 'push';\r\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\r\n\r\nexport const DRAWER_SIZES: Record<DrawerSize, string> = {\r\n  sm: '320px',\r\n  md: '480px',\r\n  lg: '640px',\r\n  full: '100%',\r\n};\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiDrawerIntl extends FuiIntlBase {\r\n  closeAriaLabel = 'Close drawer';\r\n}\r\n","import { Directive } from '@angular/core';\r\n\r\n/**\r\n * Marker directive for projecting custom markup into the drawer header title\r\n * area. Apply the `fuiDrawerTitle` attribute to the element you want rendered\r\n * as the title. When present, it visually replaces the string `title`, which\r\n * still provides the drawer's accessible name.\r\n *\r\n * @example\r\n * <fui-drawer title=\"Details\">\r\n *   <span fuiDrawerTitle>Custom <em>title</em> markup</span>\r\n * </fui-drawer>\r\n */\r\n@Directive({\r\n  selector: '[fuiDrawerTitle]',\r\n  standalone: true,\r\n  host: {\r\n    class: 'fui-drawer__title-slot',\r\n  },\r\n})\r\nexport class FuiDrawerTitle {}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  ViewEncapsulation,\r\n  input,\r\n  output,\r\n  signal,\r\n  computed,\r\n  contentChild,\r\n  effect,\r\n  booleanAttribute,\r\n  HostListener,\r\n  ElementRef,\r\n  inject,\r\n  viewChild,\r\n  Signal,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DrawerPosition, DrawerMode, DrawerSize, DRAWER_SIZES } from './drawer.types';\r\nimport { FuiDrawerIntl } from './drawer.intl';\r\nimport { FuiDrawerTitle } from './drawer-title.directive';\r\n\r\n@Component({\r\n  selector: 'fui-drawer',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './drawer.component.html',\r\n  styleUrls: ['./drawer.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-drawer',\r\n    '[class.fui-drawer--open]': '_opened()',\r\n    '[class.fui-drawer--left]': 'position() === \"left\"',\r\n    '[class.fui-drawer--right]': 'position() === \"right\"',\r\n    '[class.fui-drawer--top]': 'position() === \"top\"',\r\n    '[class.fui-drawer--bottom]': 'position() === \"bottom\"',\r\n    '[class.fui-drawer--overlay]': 'mode() === \"overlay\"',\r\n    '[class.fui-drawer--push]': 'mode() === \"push\"',\r\n    '[attr.role]': '\"dialog\"',\r\n    '[attr.aria-modal]': '_opened() ? \"true\" : null',\r\n    '[attr.aria-label]': 'ariaLabel() || (!ariaLabelledBy() ? title() : null)',\r\n    '[attr.aria-labelledby]': 'ariaLabelledBy()',\r\n  },\r\n})\r\nexport class FuiDrawerComponent {\r\n  private readonly _document = inject(DOCUMENT);\r\n  readonly intl = inject(FuiDrawerIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  // Inputs\r\n  readonly position = input<DrawerPosition>('right');\r\n  readonly mode = input<DrawerMode>('overlay');\r\n  readonly size = input('md');\r\n  readonly opened = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly hasBackdrop = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly closeOnBackdropClick = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly closeOnEsc = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly title = input('');\r\n  readonly showCloseButton = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n\r\n  /** ARIA label for the drawer, used when no visible title is present */\r\n  readonly ariaLabel = input<string | null>(null);\r\n\r\n  /** ID of an element that labels the drawer */\r\n  readonly ariaLabelledBy = input<string | null>(null);\r\n\r\n  // Outputs\r\n  readonly openedChange = output<boolean>();\r\n  readonly closed = output();\r\n\r\n  // Internal state\r\n  readonly _opened: WritableSignal<boolean> = signal(false);\r\n  readonly _animating: WritableSignal<boolean> = signal(false);\r\n\r\n  // Track the last input value to avoid effect re-triggering on programmatic changes\r\n  private _lastInputValue = false;\r\n\r\n  // Focus management\r\n  private _previouslyFocusedElement: HTMLElement | null = null;\r\n\r\n  // ViewChild\r\n  readonly drawerPanel: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('drawerPanel');\r\n\r\n  // Projected title detection — true when a [fuiDrawerTitle] element is provided.\r\n  private readonly _projectedTitle = contentChild(FuiDrawerTitle);\r\n  readonly _hasProjectedTitle: Signal<boolean> = computed(() => !!this._projectedTitle());\r\n\r\n  // Computed\r\n  readonly _sizeValue: Signal<string> = computed(() => {\r\n    const size = this.size();\r\n    return DRAWER_SIZES[size as DrawerSize] ?? size;\r\n  });\r\n\r\n  readonly _isHorizontal: Signal<boolean> = computed(() => {\r\n    const pos = this.position();\r\n    return pos === 'left' || pos === 'right';\r\n  });\r\n\r\n  constructor() {\r\n    // Sync opened input with internal state — only react when the input actually changes\r\n    effect(() => {\r\n      const inputValue = this.opened();\r\n      if (inputValue !== this._lastInputValue) {\r\n        this._lastInputValue = inputValue;\r\n        if (inputValue) {\r\n          this._openInternal();\r\n        } else {\r\n          this._closeInternal();\r\n        }\r\n      }\r\n    });\r\n\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n      this._cdr.markForCheck();\r\n    });\r\n  }\r\n\r\n  @HostListener('document:keydown', ['$event'])\r\n  onKeydown(event: KeyboardEvent): void {\r\n    if (!this._opened()) return;\r\n\r\n    if (event.key === 'Escape' && this.closeOnEsc()) {\r\n      this.close();\r\n      return;\r\n    }\r\n\r\n    // Focus trap cycling\r\n    if (event.key === 'Tab') {\r\n      const focusableElements = this._getAllFocusableElements();\r\n      if (focusableElements.length === 0) {\r\n        event.preventDefault();\r\n        return;\r\n      }\r\n\r\n      const firstFocusable = focusableElements[0];\r\n      const lastFocusable = focusableElements[focusableElements.length - 1];\r\n      const activeElement = this._document.activeElement;\r\n\r\n      if (event.shiftKey) {\r\n        if (activeElement === firstFocusable) {\r\n          event.preventDefault();\r\n          lastFocusable.focus();\r\n        }\r\n      } else {\r\n        if (activeElement === lastFocusable) {\r\n          event.preventDefault();\r\n          firstFocusable.focus();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  open(): void {\r\n    if (!this._opened()) {\r\n      this._openInternal();\r\n      this.openedChange.emit(true);\r\n    }\r\n  }\r\n\r\n  close(): void {\r\n    if (this._opened()) {\r\n      this._closeInternal();\r\n      this.openedChange.emit(false);\r\n      this.closed.emit();\r\n    }\r\n  }\r\n\r\n  toggle(): void {\r\n    if (this._opened()) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  }\r\n\r\n  private _openInternal(): void {\r\n    this._previouslyFocusedElement = document.activeElement as HTMLElement;\r\n    this._opened.set(true);\r\n\r\n    // Focus the panel after it renders\r\n    setTimeout(() => {\r\n      this._focusFirstTabbable();\r\n    });\r\n  }\r\n\r\n  private _closeInternal(): void {\r\n    this._opened.set(false);\r\n\r\n    // Restore focus\r\n    if (this._previouslyFocusedElement) {\r\n      this._previouslyFocusedElement.focus();\r\n      this._previouslyFocusedElement = null;\r\n    }\r\n  }\r\n\r\n  private _focusFirstTabbable(): void {\r\n    const panel = this.drawerPanel()?.nativeElement;\r\n    if (!panel) return;\r\n\r\n    const focusable = this._getAllFocusableElements();\r\n\r\n    if (focusable.length > 0) {\r\n      focusable[0].focus();\r\n    } else {\r\n      panel.setAttribute('tabindex', '-1');\r\n      panel.focus();\r\n    }\r\n  }\r\n\r\n  private _getAllFocusableElements(): HTMLElement[] {\r\n    const panel = this.drawerPanel()?.nativeElement;\r\n    if (!panel) return [];\r\n\r\n    const selectors = [\r\n      'a[href]',\r\n      'button:not([disabled])',\r\n      'textarea:not([disabled])',\r\n      'input:not([disabled])',\r\n      'select:not([disabled])',\r\n      '[tabindex]:not([tabindex=\"-1\"])',\r\n      '[contenteditable=\"true\"]',\r\n    ].join(',');\r\n\r\n    return Array.from(panel.querySelectorAll<HTMLElement>(selectors)).filter((el) => el.offsetParent !== null);\r\n  }\r\n}\r\n","@if (_opened() && hasBackdrop()) {\r\n  <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n  @if (title() || showCloseButton() || _hasProjectedTitle()) {\r\n    <div class=\"fui-drawer__header\">\r\n      @if (_hasProjectedTitle()) {\r\n        <div class=\"fui-drawer__title\"><ng-content select=\"[fuiDrawerTitle]\"></ng-content></div>\r\n      } @else if (title()) {\r\n        <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n      }\r\n      @if (showCloseButton()) {\r\n        <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer__footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs

@@ -126,7 +126,7 @@ class FuiDropdownMenuItemComponent {
         this._elementRef.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiDropdownMenuItemComponent, isStandalone: true, selector: "fui-dropdown-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "computedClasses()", "attr.role": "\"menuitem\"", "attr.tabindex": "disabled() ? \"-1\" : tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-dropdown-menu-item{transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;display:flex;align-items:center;gap:var(--fui-spacing-4);width:100%;padding:var(--fui-spacing-4) var(--fui-spacing-6);margin:0;background-color:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);letter-spacing:.56px;font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-dropdown-menu-item:focus-visible{background-color:var(--fui-bg-subtle);outline:2px solid var(--fui-border-primary);outline-offset:-2px}:host.fui-dropdown-menu-item:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-subtle)}:host.fui-dropdown-menu-item:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-muted)}:host.fui-dropdown-menu-item--danger{color:var(--fui-error-100)}:host.fui-dropdown-menu-item--danger:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-10);color:var(--fui-error-70)}:host.fui-dropdown-menu-item--danger:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-20);color:var(--fui-error-80)}:host.fui-dropdown-menu-item--danger:focus-visible{background-color:var(--fui-error-10);outline-color:var(--fui-error-60)}:host.fui-dropdown-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}:host.fui-dropdown-menu-item--disabled:hover,:host.fui-dropdown-menu-item--disabled:active,:host.fui-dropdown-menu-item--disabled:focus{background-color:transparent}:host.fui-dropdown-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);font-size:var(--fui-icon-md)}:host.fui-dropdown-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-2)}:host.fui-dropdown-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-dropdown-menu-item .fui-dropdown-menu-item__shortcut{margin-left:auto;font-size:var(--fui-text-sm);color:var(--fui-text-secondary);font-family:var(--fui-font-mono)}@media(prefers-contrast:more){:host.fui-dropdown-menu-item:focus-visible{outline-width:3px}:host.fui-dropdown-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-dropdown-menu-item{transition:none}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiDropdownMenuItemComponent, isStandalone: true, selector: "fui-dropdown-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "computedClasses()", "attr.role": "\"menuitem\"", "attr.tabindex": "disabled() ? \"-1\" : tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-dropdown-menu-item{transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;display:flex;align-items:center;gap:var(--fui-spacing-4);width:100%;padding:var(--fui-spacing-4) var(--fui-spacing-6);margin:0;background-color:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);letter-spacing:.56px;font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-dropdown-menu-item:focus-visible{background-color:var(--fui-bg-subtle);outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:-2px}:host.fui-dropdown-menu-item:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-subtle)}:host.fui-dropdown-menu-item:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-muted)}:host.fui-dropdown-menu-item--danger{color:var(--fui-error-100)}:host.fui-dropdown-menu-item--danger:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-10);color:var(--fui-error-70)}:host.fui-dropdown-menu-item--danger:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-20);color:var(--fui-error-80)}:host.fui-dropdown-menu-item--danger:focus-visible{background-color:var(--fui-error-10);outline-color:var(--fui-error-60)}:host.fui-dropdown-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}:host.fui-dropdown-menu-item--disabled:hover,:host.fui-dropdown-menu-item--disabled:active,:host.fui-dropdown-menu-item--disabled:focus{background-color:transparent}:host.fui-dropdown-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);font-size:var(--fui-icon-md)}:host.fui-dropdown-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-2)}:host.fui-dropdown-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-dropdown-menu-item .fui-dropdown-menu-item__shortcut{margin-left:auto;font-size:var(--fui-text-sm);color:var(--fui-text-secondary);font-family:var(--fui-font-mono)}@media(prefers-contrast:more){:host.fui-dropdown-menu-item:focus-visible{outline-width:3px}:host.fui-dropdown-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-dropdown-menu-item{transition:none}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropdownMenuItemComponent, decorators: [{
             type: Component,
@@ -135,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[attr.role]': '"menuitem"',
                         '[attr.tabindex]': 'disabled() ? "-1" : tabIndex()',
                         '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                    }, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-dropdown-menu-item{transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;display:flex;align-items:center;gap:var(--fui-spacing-4);width:100%;padding:var(--fui-spacing-4) var(--fui-spacing-6);margin:0;background-color:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);letter-spacing:.56px;font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-dropdown-menu-item:focus-visible{background-color:var(--fui-bg-subtle);outline:2px solid var(--fui-border-primary);outline-offset:-2px}:host.fui-dropdown-menu-item:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-subtle)}:host.fui-dropdown-menu-item:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-muted)}:host.fui-dropdown-menu-item--danger{color:var(--fui-error-100)}:host.fui-dropdown-menu-item--danger:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-10);color:var(--fui-error-70)}:host.fui-dropdown-menu-item--danger:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-20);color:var(--fui-error-80)}:host.fui-dropdown-menu-item--danger:focus-visible{background-color:var(--fui-error-10);outline-color:var(--fui-error-60)}:host.fui-dropdown-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}:host.fui-dropdown-menu-item--disabled:hover,:host.fui-dropdown-menu-item--disabled:active,:host.fui-dropdown-menu-item--disabled:focus{background-color:transparent}:host.fui-dropdown-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);font-size:var(--fui-icon-md)}:host.fui-dropdown-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-2)}:host.fui-dropdown-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-dropdown-menu-item .fui-dropdown-menu-item__shortcut{margin-left:auto;font-size:var(--fui-text-sm);color:var(--fui-text-secondary);font-family:var(--fui-font-mono)}@media(prefers-contrast:more){:host.fui-dropdown-menu-item:focus-visible{outline-width:3px}:host.fui-dropdown-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-dropdown-menu-item{transition:none}}\n"] }]
+                    }, template: "<ng-content></ng-content>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host.fui-dropdown-menu-item{transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;display:flex;align-items:center;gap:var(--fui-spacing-4);width:100%;padding:var(--fui-spacing-4) var(--fui-spacing-6);margin:0;background-color:transparent;border:none;border-radius:var(--fui-radius-sm);font-family:var(--fui-font-sans);letter-spacing:.56px;font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);text-align:left;text-decoration:none;color:var(--fui-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:host.fui-dropdown-menu-item:focus-visible{background-color:var(--fui-bg-subtle);outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:-2px}:host.fui-dropdown-menu-item:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-subtle)}:host.fui-dropdown-menu-item:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-bg-muted)}:host.fui-dropdown-menu-item--danger{color:var(--fui-error-100)}:host.fui-dropdown-menu-item--danger:hover:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-10);color:var(--fui-error-70)}:host.fui-dropdown-menu-item--danger:active:not(.fui-dropdown-menu-item--disabled){background-color:var(--fui-error-20);color:var(--fui-error-80)}:host.fui-dropdown-menu-item--danger:focus-visible{background-color:var(--fui-error-10);outline-color:var(--fui-error-60)}:host.fui-dropdown-menu-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}:host.fui-dropdown-menu-item--disabled:hover,:host.fui-dropdown-menu-item--disabled:active,:host.fui-dropdown-menu-item--disabled:focus{background-color:transparent}:host.fui-dropdown-menu-item .fui-icon{flex-shrink:0;width:var(--fui-icon-xs);height:var(--fui-icon-xs);font-size:var(--fui-icon-md)}:host.fui-dropdown-menu-item .fui-icon[fuiPrefix]{margin-right:var(--fui-spacing-2)}:host.fui-dropdown-menu-item .fui-icon[fuiSuffix]{margin-left:auto;margin-right:0}:host.fui-dropdown-menu-item .fui-dropdown-menu-item__shortcut{margin-left:auto;font-size:var(--fui-text-sm);color:var(--fui-text-secondary);font-family:var(--fui-font-mono)}@media(prefers-contrast:more){:host.fui-dropdown-menu-item:focus-visible{outline-width:3px}:host.fui-dropdown-menu-item--danger:focus-visible{outline-width:3px}}@media(prefers-reduced-motion:reduce){:host.fui-dropdown-menu-item{transition:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]