@inera/ids-angular 8.1.0 → 9.0.0

package/fesm2022/inera-ids-angular-components-dialog.mjs

@@ -1,78 +1,240 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewEncapsulation, Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import '@inera/ids-core/components/dialog/register';
+import { Component, EventEmitter, HostListener, Output, inject, DestroyRef, booleanAttribute, ViewChild, ContentChildren, Input, ContentChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { IDUseIdService, IDClickOutsideDirective } from '@inera/ids-angular/common';
+import { FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
+
+class IDDialogTriggerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDialogTriggerComponent, isStandalone: true, selector: "id-dialog-trigger", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'id-dialog-trigger',
+                    template: '<ng-content></ng-content>',
+                    standalone: true
+                }]
+        }] });
+
+class IDDialogCloseComponent {
+    closed = new EventEmitter();
+    onClick = (e) => {
+        this.closed.emit(e);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDialogCloseComponent, isStandalone: true, selector: "id-dialog-close", outputs: { closed: "closed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogCloseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'id-dialog-close',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], propDecorators: { closed: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 class IDDialogComponent {
-    constructor() { }
+    onEsc(event) {
+        if (this.show && !this.persistent) {
+            this.hideDialog(event);
+        }
+    }
+    trigger;
     dismissible = false;
-    srclosetext = '';
-    nofocustrap = false;
-    keepscrollbar = false;
-    nooverlay = false;
+    srCloseText = '';
+    noFocusTrap = false;
+    keepScrollbar = false;
+    noOverlay = false;
     persistent = false;
     show = false;
     width = '';
-    maxwidth = '';
-    onClosed = new EventEmitter();
-    onOpened = new EventEmitter();
+    maxWidth = '';
+    closed = new EventEmitter();
+    opened = new EventEmitter();
     showChange = new EventEmitter();
+    closeComponents;
+    idService = inject(IDUseIdService);
+    destroyRef = inject(DestroyRef);
+    contentId = this.idService.generateId('dialog-content');
+    headingId = this.idService.generateId('dialog-heading');
+    ngAfterContentInit() {
+        this.closeComponents.forEach((closeComponent) => {
+            closeComponent.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.hideDialog(event);
+            });
+        });
+    }
+    /* Focus trap */
+    dialogContent;
+    focusTrap;
+    focusTrapFactory = inject(FocusTrapFactory);
+    get focusableElements() {
+        return Array.from(this.dialogContent.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]'));
+    }
+    createFocusTrap() {
+        if (this.noFocusTrap || this.focusTrap)
+            return;
+        queueMicrotask(() => {
+            this.focusTrap = this.focusTrapFactory.create(this.dialogContent.nativeElement);
+            this.focusTrap.focusInitialElement();
+        });
+    }
+    destroyFocusTrap() {
+        if (!this.focusTrap)
+            return;
+        const firstFocusable = this.focusableElements[0];
+        firstFocusable?.removeEventListener('keydown', this.handleBackTab);
+        this.focusTrap.destroy();
+        this.focusTrap = undefined;
+    }
+    handleBackTab = (e) => {
+        if (e.key !== 'Tab')
+            return;
+        if (e.target !== this.focusableElements[0])
+            return;
+        if (e.shiftKey) {
+            e.preventDefault();
+            this.focusableElements[this.focusableElements.length - 1].focus();
+        }
+    };
+    resetFocusTrap = () => {
+        this.focusableElements[0].removeEventListener('keydown', this.handleBackTab);
+    };
+    /* */
+    toggleDialog(event) {
+        if (this.show) {
+            this.hideDialog(event);
+        }
+        else {
+            this.showDialog(event);
+        }
+    }
+    overlayClicked(event) {
+        if (!this.persistent) {
+            this.hideDialog(event);
+        }
+    }
+    showDialog(event) {
+        if (!this.noOverlay) {
+            document.body.classList.add('ids-hide-overflow');
+        }
+        this.hasOpened(event);
+        this.createFocusTrap();
+    }
+    hideDialog(event) {
+        if (!this.noOverlay) {
+            document.body.classList.remove('ids-hide-overflow');
+        }
+        this.resetFocusTrap();
+        this.hasClosed(event);
+    }
     hasClosed(event) {
         this.show = false;
-        this.onClosed.emit(event);
+        this.closed.emit(event);
         this.showChange.emit(this.show);
     }
     hasOpened(event) {
         this.show = true;
-        this.onOpened.emit(event);
+        this.opened.emit(event);
         this.showChange.emit(this.show);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDialogComponent, selector: "id-dialog", inputs: { dismissible: "dismissible", srclosetext: "srclosetext", nofocustrap: "nofocustrap", keepscrollbar: "keepscrollbar", nooverlay: "nooverlay", persistent: "persistent", show: "show", width: "width", maxwidth: "maxwidth" }, outputs: { onClosed: "onClosed", onOpened: "onOpened", showChange: "showChange" }, ngImport: i0, template: "<ids-dialog \n  [attr.dismissible]=\"dismissible ? true : null\"\n  [attr.nooverlay]=\"nooverlay ? true : null\"\n  [attr.nofocustrap]=\"nofocustrap ? true : null\"\n  [attr.persistent]=\"persistent ? true : null\"\n  [attr.keepscrollbar]=\"keepscrollbar ? true : null\"\n  [attr.show]=\"show ? 'true' : 'false'\"\n  [width]=\"width\"\n  [maxwidth]=\"maxwidth\"\n  nofocustrap=\"nofocustrap\"\n  [srclosetext]=\"srclosetext\"\n  (closed)=\"hasClosed($event)\"\n  (opened)=\"hasOpened($event)\">\n  <ng-content></ng-content>\n</ids-dialog>", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDDialogComponent, isStandalone: true, selector: "id-dialog", inputs: { dismissible: ["dismissible", "dismissible", booleanAttribute], srCloseText: "srCloseText", noFocusTrap: ["noFocusTrap", "noFocusTrap", booleanAttribute], keepScrollbar: ["keepScrollbar", "keepScrollbar", booleanAttribute], noOverlay: ["noOverlay", "noOverlay", booleanAttribute], persistent: ["persistent", "persistent", booleanAttribute], show: ["show", "show", booleanAttribute], width: "width", maxWidth: "maxWidth" }, outputs: { closed: "closed", opened: "opened", showChange: "showChange" }, host: { listeners: { "document:keydown.escape": "onEsc($event)" } }, queries: [{ propertyName: "trigger", first: true, predicate: IDDialogTriggerComponent, descendants: true }, { propertyName: "closeComponents", predicate: IDDialogCloseComponent, descendants: true }], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #triggerContent>\n  <span (click)=\"toggleDialog($event)\">\n    <ng-content select=\"id-dialog-trigger\"></ng-content>\n  </span>\n</ng-template>\n\n@if(trigger !== undefined) {\n  <ng-container *ngTemplateOutlet=\"triggerContent\"></ng-container>\n}\n\n<div\n  class=\"ids-dialog-overlay\"\n  [class.ids-dialog-overlay--hidden]=\"noOverlay || !show\">\n</div>\n<div\n  idClickOutside\n  (idClickOutside)=\"overlayClicked($event)\"\n  class=\"ids-dialog ids-focus-trap\"\n  [class.ids-dialog--hidden]=\"!show\"\n  [class.ids-dialog--dismissible]=\"!!dismissible\"\n  [style.width]=\"width\"\n  [style.max-width]=\"maxWidth\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"headingId\"\n  [attr.aria-describedby]=\"contentId\">\n  <div #dialogContent style=\"display: contents\">\n  @if(dismissible) {\n    <div class=\"ids-dialog__dismissible\">\n      <button\n        [attr.aria-label]=\"srCloseText\"\n        class=\"ids-dialog__close-button\"\n        (click)=\"hideDialog($event)\">\n      </button>\n    </div>\n  }\n  <div\n    class=\"ids-dialog__body ids-dialog__body--scroll-area-focus\"\n    tabindex=\"0\">\n    <div \n      tabindex=\"-1\" \n      cdkFocusInitial \n      [attr.id]=\"headingId\" \n      class=\"ids-dialog__body-headline\">\n      <ng-content select=\"id-dialog-header\"></ng-content>\n    </div>\n    <div\n      [attr.id]=\"contentId\" \n      class=\"ids-dialog__body-content\">\n      <ng-content select=\"id-dialog-content\"></ng-content>\n    </div>\n      <ng-content select=\"id-dialog-footer\"></ng-content>\n  </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'id-dialog', encapsulation: ViewEncapsulation.None, template: "<ids-dialog \n  [attr.dismissible]=\"dismissible ? true : null\"\n  [attr.nooverlay]=\"nooverlay ? true : null\"\n  [attr.nofocustrap]=\"nofocustrap ? true : null\"\n  [attr.persistent]=\"persistent ? true : null\"\n  [attr.keepscrollbar]=\"keepscrollbar ? true : null\"\n  [attr.show]=\"show ? 'true' : 'false'\"\n  [width]=\"width\"\n  [maxwidth]=\"maxwidth\"\n  nofocustrap=\"nofocustrap\"\n  [srclosetext]=\"srclosetext\"\n  (closed)=\"hasClosed($event)\"\n  (opened)=\"hasOpened($event)\">\n  <ng-content></ng-content>\n</ids-dialog>" }]
-        }], ctorParameters: () => [], propDecorators: { dismissible: [{
-                type: Input
-            }], srclosetext: [{
-                type: Input
-            }], nofocustrap: [{
-                type: Input
-            }], keepscrollbar: [{
-                type: Input
-            }], nooverlay: [{
+            args: [{ selector: 'id-dialog', standalone: true, imports: [CommonModule, A11yModule, IDClickOutsideDirective], template: "<ng-template #triggerContent>\n  <span (click)=\"toggleDialog($event)\">\n    <ng-content select=\"id-dialog-trigger\"></ng-content>\n  </span>\n</ng-template>\n\n@if(trigger !== undefined) {\n  <ng-container *ngTemplateOutlet=\"triggerContent\"></ng-container>\n}\n\n<div\n  class=\"ids-dialog-overlay\"\n  [class.ids-dialog-overlay--hidden]=\"noOverlay || !show\">\n</div>\n<div\n  idClickOutside\n  (idClickOutside)=\"overlayClicked($event)\"\n  class=\"ids-dialog ids-focus-trap\"\n  [class.ids-dialog--hidden]=\"!show\"\n  [class.ids-dialog--dismissible]=\"!!dismissible\"\n  [style.width]=\"width\"\n  [style.max-width]=\"maxWidth\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"headingId\"\n  [attr.aria-describedby]=\"contentId\">\n  <div #dialogContent style=\"display: contents\">\n  @if(dismissible) {\n    <div class=\"ids-dialog__dismissible\">\n      <button\n        [attr.aria-label]=\"srCloseText\"\n        class=\"ids-dialog__close-button\"\n        (click)=\"hideDialog($event)\">\n      </button>\n    </div>\n  }\n  <div\n    class=\"ids-dialog__body ids-dialog__body--scroll-area-focus\"\n    tabindex=\"0\">\n    <div \n      tabindex=\"-1\" \n      cdkFocusInitial \n      [attr.id]=\"headingId\" \n      class=\"ids-dialog__body-headline\">\n      <ng-content select=\"id-dialog-header\"></ng-content>\n    </div>\n    <div\n      [attr.id]=\"contentId\" \n      class=\"ids-dialog__body-content\">\n      <ng-content select=\"id-dialog-content\"></ng-content>\n    </div>\n      <ng-content select=\"id-dialog-footer\"></ng-content>\n  </div>\n  </div>\n</div>" }]
+        }], propDecorators: { onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], trigger: [{
+                type: ContentChild,
+                args: [IDDialogTriggerComponent]
+            }], dismissible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], srCloseText: [{
                 type: Input
+            }], noFocusTrap: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], keepScrollbar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], noOverlay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], persistent: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], show: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], width: [{
                 type: Input
-            }], maxwidth: [{
+            }], maxWidth: [{
                 type: Input
-            }], onClosed: [{
+            }], closed: [{
                 type: Output
-            }], onOpened: [{
+            }], opened: [{
                 type: Output
             }], showChange: [{
                 type: Output
+            }], closeComponents: [{
+                type: ContentChildren,
+                args: [IDDialogCloseComponent, { descendants: true }]
+            }], dialogContent: [{
+                type: ViewChild,
+                args: ['dialogContent', { static: true }]
             }] } });
 
-class IDDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDDialogModule, declarations: [IDDialogComponent], exports: [IDDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogModule });
+class IDDialogHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDialogHeaderComponent, isStandalone: true, selector: "id-dialog-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'id-dialog-header',
+                    template: '<ng-content></ng-content>',
+                    standalone: true,
+                }]
+        }] });
+
+class IDDialogContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDialogContentComponent, isStandalone: true, selector: "id-dialog-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'id-dialog-content',
+                    template: '<ng-content></ng-content>',
+                    standalone: true
+                }]
+        }] });
+
+class IDDialogFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDialogFooterComponent, isStandalone: true, selector: "id-dialog-footer", host: { classAttribute: "ids-dialog__footer" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDialogFooterComponent, decorators: [{
+            type: Component,
             args: [{
-                    declarations: [
-                        IDDialogComponent
-                    ],
-                    exports: [
-                        IDDialogComponent
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    selector: 'id-dialog-footer',
+                    template: '<ng-content></ng-content>',
+                    standalone: true,
+                    host: {
+                        class: 'ids-dialog__footer'
+                    }
                 }]
         }] });
 
@@ -80,5 +242,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IDDialogComponent, IDDialogModule };
+export { IDDialogCloseComponent, IDDialogComponent, IDDialogContentComponent, IDDialogFooterComponent, IDDialogHeaderComponent, IDDialogTriggerComponent };
 //# sourceMappingURL=inera-ids-angular-components-dialog.mjs.map

package/fesm2022/inera-ids-angular-components-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inera-ids-angular-components-dialog.mjs","sources":["../../../projects/ids-angular/components/dialog/dialog.component.ts","../../../projects/ids-angular/components/dialog/dialog.component.html","../../../projects/ids-angular/components/dialog/dialog.module.ts","../../../projects/ids-angular/components/dialog/inera-ids-angular-components-dialog.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'id-dialog',\n  templateUrl: './dialog.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class IDDialogComponent {\n\n  constructor() { }\n\n  @Input()\n  dismissible: boolean = false;\n\n  @Input()\n  srclosetext: string = '';\n\n  @Input()\n  nofocustrap: boolean = false;\n\n  @Input()\n  keepscrollbar: boolean = false;\n\n  @Input()\n  nooverlay: boolean = false;\n\n  @Input()\n  persistent: boolean = false;\n\n  @Input()\n  show: boolean = false;\n\n  @Input()\n  width: string = '';\n\n  @Input()\n  maxwidth: string = '';\n\n  @Output()\n  onClosed: EventEmitter<Event> = new EventEmitter();\n\n  @Output()\n  onOpened: EventEmitter<Event> = new EventEmitter();\n\n  @Output()\n  showChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  hasClosed (event: Event) {\n    this.show = false;\n    this.onClosed.emit(event)\n    this.showChange.emit(this.show);\n  }\n  hasOpened (event: Event) {\n    this.show = true;\n    this.onOpened.emit(event)\n    this.showChange.emit(this.show);\n  }\n\n}\n","<ids-dialog \n  [attr.dismissible]=\"dismissible ? true : null\"\n  [attr.nooverlay]=\"nooverlay ? true : null\"\n  [attr.nofocustrap]=\"nofocustrap ? true : null\"\n  [attr.persistent]=\"persistent ? true : null\"\n  [attr.keepscrollbar]=\"keepscrollbar ? true : null\"\n  [attr.show]=\"show ? 'true' : 'false'\"\n  [width]=\"width\"\n  [maxwidth]=\"maxwidth\"\n  nofocustrap=\"nofocustrap\"\n  [srclosetext]=\"srclosetext\"\n  (closed)=\"hasClosed($event)\"\n  (opened)=\"hasOpened($event)\">\n  <ng-content></ng-content>\n</ids-dialog>","import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { IDDialogComponent } from './dialog.component';\nimport '@inera/ids-core/components/dialog/register';\n\n@NgModule({\n  declarations: [\n    IDDialogComponent\n  ],\n  exports: [\n    IDDialogComponent\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class IDDialogModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAOa,iBAAiB,CAAA;AAE5B,IAAA,WAAA,GAAA,EAAgB;IAGhB,WAAW,GAAY,KAAK;IAG5B,WAAW,GAAW,EAAE;IAGxB,WAAW,GAAY,KAAK;IAG5B,aAAa,GAAY,KAAK;IAG9B,SAAS,GAAY,KAAK;IAG1B,UAAU,GAAY,KAAK;IAG3B,IAAI,GAAY,KAAK;IAGrB,KAAK,GAAW,EAAE;IAGlB,QAAQ,GAAW,EAAE;AAGrB,IAAA,QAAQ,GAAwB,IAAI,YAAY,EAAE;AAGlD,IAAA,QAAQ,GAAwB,IAAI,YAAY,EAAE;AAGlD,IAAA,UAAU,GAA0B,IAAI,YAAY,EAAW;AAE/D,IAAA,SAAS,CAAE,KAAY,EAAA;AACrB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACjC;AACA,IAAA,SAAS,CAAE,KAAY,EAAA;AACrB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACjC;wGAjDW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,0WCP9B,4hBAca,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FDPA,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACE,WAAW,EAAA,aAAA,EAEN,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,4hBAAA,EAAA;wDAOrC,WAAW,EAAA,CAAA;sBADV;gBAID,WAAW,EAAA,CAAA;sBADV;gBAID,WAAW,EAAA,CAAA;sBADV;gBAID,aAAa,EAAA,CAAA;sBADZ;gBAID,SAAS,EAAA,CAAA;sBADR;gBAID,UAAU,EAAA,CAAA;sBADT;gBAID,IAAI,EAAA,CAAA;sBADH;gBAID,KAAK,EAAA,CAAA;sBADJ;gBAID,QAAQ,EAAA,CAAA;sBADP;gBAID,QAAQ,EAAA,CAAA;sBADP;gBAID,QAAQ,EAAA,CAAA;sBADP;gBAID,UAAU,EAAA,CAAA;sBADT;;;ME/BU,cAAc,CAAA;wGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;yGAAd,cAAc,EAAA,YAAA,EAAA,CAPvB,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAGjB,iBAAiB,CAAA,EAAA,CAAA;yGAIR,cAAc,EAAA,CAAA;;4FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAT1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA;;;ACZD;;AAEG;;;;"}
+{"version":3,"file":"inera-ids-angular-components-dialog.mjs","sources":["../../../projects/ids-angular/components/dialog/dialog-trigger.component.ts","../../../projects/ids-angular/components/dialog/dialog-close.component.ts","../../../projects/ids-angular/components/dialog/dialog.component.ts","../../../projects/ids-angular/components/dialog/dialog.component.html","../../../projects/ids-angular/components/dialog/dialog-header.component.ts","../../../projects/ids-angular/components/dialog/dialog-content.component.ts","../../../projects/ids-angular/components/dialog/dialog-footer.component.ts","../../../projects/ids-angular/components/dialog/inera-ids-angular-components-dialog.ts"],"sourcesContent":["import { Component} from '@angular/core';\n\n@Component({\n  selector: 'id-dialog-trigger',\n  template: '<ng-content></ng-content>',\n  standalone: true\n})\nexport class IDDialogTriggerComponent {}\n","import { Component, EventEmitter, HostListener, Output } from '@angular/core';\n\n@Component({\n  selector: 'id-dialog-close',\n  standalone: true,\n  template: `<ng-content></ng-content>`,\n})\nexport class IDDialogCloseComponent {\n  @Output() closed = new EventEmitter<Event>();\n\n  @HostListener('click')\n  onClick = (e:Event) => {\n    this.closed.emit(e);\n  }\n}","import { AfterContentInit, Component, ContentChild, ContentChildren, DestroyRef, ElementRef, EventEmitter, HostListener, Input, Output, QueryList, ViewChild, booleanAttribute, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { CommonModule } from '@angular/common';\nimport { IDDialogTriggerComponent } from './dialog-trigger.component';\nimport { IDClickOutsideDirective, IDUseIdService } from '@inera/ids-angular/common';\n\nimport { FocusTrap, FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';\nimport { IDDialogCloseComponent } from './dialog-close.component';\n\n@Component({\n  selector: 'id-dialog',\n  templateUrl: './dialog.component.html',\n  standalone: true,\n  imports:[CommonModule, A11yModule, IDClickOutsideDirective],\n})\n\nexport class IDDialogComponent implements AfterContentInit {\n\n  @HostListener('document:keydown.escape', ['$event'])\n  onEsc(event: Event) {\n    if (this.show && !this.persistent) {\n      this.hideDialog(event);\n    }\n  }\n\n  @ContentChild(IDDialogTriggerComponent)\n  trigger:IDDialogTriggerComponent;\n\n  @Input({ transform: booleanAttribute }) dismissible: boolean = false;\n  @Input() srCloseText: string = '';\n  @Input({ transform: booleanAttribute }) noFocusTrap: boolean = false;\n  @Input({ transform: booleanAttribute }) keepScrollbar: boolean = false;\n  @Input({ transform: booleanAttribute }) noOverlay: boolean = false;\n  @Input({ transform: booleanAttribute }) persistent: boolean = false;\n  @Input({ transform: booleanAttribute }) show: boolean = false;\n  @Input() width: string = '';\n  @Input() maxWidth: string = '';\n\n  @Output() closed: EventEmitter<Event> = new EventEmitter();\n  @Output() opened: EventEmitter<Event> = new EventEmitter();\n  @Output() showChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @ContentChildren(IDDialogCloseComponent, {descendants: true})\n  closeComponents: QueryList<IDDialogCloseComponent>;\n  \n  private idService = inject(IDUseIdService);\n  private destroyRef = inject(DestroyRef);\n  contentId = this.idService.generateId('dialog-content');\n  headingId = this.idService.generateId('dialog-heading');\n\n  ngAfterContentInit(): void {\n    this.closeComponents.forEach((closeComponent) => {\n      closeComponent.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event: Event) => {\n        this.hideDialog(event);\n      })\n    });\n  }\n\n  /* Focus trap */\n  @ViewChild('dialogContent', { static: true })\n  dialogContent!: ElementRef\n  private focusTrap: FocusTrap | undefined;\n  focusTrapFactory = inject(FocusTrapFactory);\n  get focusableElements (): HTMLElement[] {\n    return Array.from(\n      this.dialogContent.nativeElement.querySelectorAll(\n        'button, [href], input, select, textarea, [tabindex]'\n      )\n    ) as HTMLElement[]\n  }\n  \ncreateFocusTrap() {\n  if (this.noFocusTrap || this.focusTrap) return;\n\n  queueMicrotask(() => {\n    this.focusTrap = this.focusTrapFactory.create(\n      this.dialogContent.nativeElement\n    );\n\n    this.focusTrap.focusInitialElement();\n  });\n}\n\n destroyFocusTrap() {\n    if (!this.focusTrap) return;\n    const firstFocusable = this.focusableElements[0];\n    firstFocusable?.removeEventListener('keydown', this.handleBackTab);\n    this.focusTrap.destroy();\n    this.focusTrap = undefined;\n  }\n\n  handleBackTab = (e: KeyboardEvent) => {\n    if (e.key !== 'Tab') return;\n    if (e.target !== this.focusableElements[0]) return;\n    if (e.shiftKey)  {\n      e.preventDefault();\n      this.focusableElements[this.focusableElements.length-1].focus();\n    }\n  }\n\n  resetFocusTrap = () => {\n    this.focusableElements[0].removeEventListener('keydown', this.handleBackTab);\n  }\n  /* */\n\n  protected toggleDialog(event: Event):void {\n    if(this.show) {\n      this.hideDialog(event);\n    } else {\n      this.showDialog(event);\n    }\n  }\n  protected overlayClicked(event: Event):void {\n    if (!this.persistent) {\n      this.hideDialog(event);\n    }\n  }\n\n  showDialog(event: Event):void {\n    if(!this.noOverlay) {\n      document.body.classList.add('ids-hide-overflow');\n    }\n    this.hasOpened(event);\n    this.createFocusTrap();\n  }\n\n  hideDialog(event: Event):void {\n    if(!this.noOverlay) {\n      document.body.classList.remove('ids-hide-overflow');\n    }\n    this.resetFocusTrap();\n    this.hasClosed(event);\n  }\n  \n  hasClosed(event: Event):void {\n    this.show = false;\n    this.closed.emit(event)\n    this.showChange.emit(this.show);\n  }\n  hasOpened(event: Event):void {\n    this.show = true;\n    this.opened.emit(event)\n    this.showChange.emit(this.show);\n  }\n\n}\n","<ng-template #triggerContent>\n  <span (click)=\"toggleDialog($event)\">\n    <ng-content select=\"id-dialog-trigger\"></ng-content>\n  </span>\n</ng-template>\n\n@if(trigger !== undefined) {\n  <ng-container *ngTemplateOutlet=\"triggerContent\"></ng-container>\n}\n\n<div\n  class=\"ids-dialog-overlay\"\n  [class.ids-dialog-overlay--hidden]=\"noOverlay || !show\">\n</div>\n<div\n  idClickOutside\n  (idClickOutside)=\"overlayClicked($event)\"\n  class=\"ids-dialog ids-focus-trap\"\n  [class.ids-dialog--hidden]=\"!show\"\n  [class.ids-dialog--dismissible]=\"!!dismissible\"\n  [style.width]=\"width\"\n  [style.max-width]=\"maxWidth\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"headingId\"\n  [attr.aria-describedby]=\"contentId\">\n  <div #dialogContent style=\"display: contents\">\n  @if(dismissible) {\n    <div class=\"ids-dialog__dismissible\">\n      <button\n        [attr.aria-label]=\"srCloseText\"\n        class=\"ids-dialog__close-button\"\n        (click)=\"hideDialog($event)\">\n      </button>\n    </div>\n  }\n  <div\n    class=\"ids-dialog__body ids-dialog__body--scroll-area-focus\"\n    tabindex=\"0\">\n    <div \n      tabindex=\"-1\" \n      cdkFocusInitial \n      [attr.id]=\"headingId\" \n      class=\"ids-dialog__body-headline\">\n      <ng-content select=\"id-dialog-header\"></ng-content>\n    </div>\n    <div\n      [attr.id]=\"contentId\" \n      class=\"ids-dialog__body-content\">\n      <ng-content select=\"id-dialog-content\"></ng-content>\n    </div>\n      <ng-content select=\"id-dialog-footer\"></ng-content>\n  </div>\n  </div>\n</div>","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'id-dialog-header',\n  template: '<ng-content></ng-content>',\n  standalone: true,\n})\nexport class IDDialogHeaderComponent {}\n","import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'id-dialog-content',\n  template: '<ng-content></ng-content>',\n  standalone: true\n})\nexport class IDDialogContentComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'id-dialog-footer',\n  template: '<ng-content></ng-content>',\n  standalone: true,\n  host: {\n    class: 'ids-dialog__footer'\n  }\n})\nexport class IDDialogFooterComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/inera-ids-angular-components-dropdown.mjs

@@ -1,88 +1,166 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, Component, EventEmitter, Output, ContentChild, Input } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import '@inera/ids-core/components/dropdown/register';
-
-class IDDropdownContentComponent {
-    constructor() { }
-    template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDropdownContentComponent, isStandalone: true, selector: "id-dropdown-content", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ` <ng-template>
-    <ng-content></ng-content>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "id-dropdown-content",
-                    template: ` <ng-template>
-    <ng-content></ng-content>
-  </ng-template>`,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    imports: [CommonModule]
-                }]
-        }], ctorParameters: () => [], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+import { EventEmitter, inject, ElementRef, booleanAttribute, HostListener, Output, Input, Component, Directive, NgModule } from '@angular/core';
+import { IDUseIdService } from '@inera/ids-angular/common';
+import * as i1 from 'dist/ids-angular/common';
+import { IDClickOutsideDirective } from 'dist/ids-angular/common';
 
 class IDDropdownComponent {
-    constructor() { }
-    sblock = false;
-    mblock = false;
+    sBlock = false;
+    mBlock = false;
+    minWidth;
+    maxHeight;
     persistent = false;
     expanded = false;
-    maxheight = "";
-    position = "right";
-    dropdownContent;
-    onClosed = new EventEmitter();
-    onOpen = new EventEmitter();
-    showChange = new EventEmitter();
-    hasClosed(event) {
+    position = 'right';
+    closed = new EventEmitter();
+    opened = new EventEmitter();
+    useId = inject(IDUseIdService);
+    host = inject(ElementRef);
+    contentId = this.useId.generateId('dropdown');
+    trigger;
+    ngAfterViewInit() {
+        this.setupTrigger();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.expanded) {
+            this.closeIfNotPersistent();
+        }
+    }
+    closeIfNotPersistent() {
+        if (!this.persistent) {
+            this.hasClosed();
+        }
+    }
+    setupTrigger() {
+        const hostEl = this.host.nativeElement;
+        this.trigger = hostEl.querySelector('id-dropdown-trigger > *');
+        if (this.trigger) {
+            this.trigger.addEventListener('click', () => this.toggleDropdown());
+            this.trigger.setAttribute('aria-controls', this.contentId);
+        }
+    }
+    toggleDropdown() {
+        if (this.expanded) {
+            this.hasClosed();
+            this.trigger?.removeAttribute('aria-expanded');
+        }
+        else {
+            this.hasOpened();
+            this.trigger?.setAttribute('aria-expanded', 'true');
+        }
+    }
+    get baseAndPositionClasses() {
+        const dropdownClass = 'ids-dropdown';
+        const positionClass = `${dropdownClass}--position-${this.position}`;
+        return `${dropdownClass} ${positionClass}`;
+    }
+    hasClosed() {
         this.expanded = false;
-        this.onClosed.emit(event);
-        this.showChange.emit(this.expanded);
+        this.closed.emit();
     }
-    hasOpened(event) {
+    hasOpened() {
         this.expanded = true;
-        this.onOpen.emit(event);
-        this.showChange.emit(this.expanded);
+        this.opened.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDropdownComponent, isStandalone: true, selector: "id-dropdown", inputs: { sblock: "sblock", mblock: "mblock", persistent: "persistent", expanded: "expanded", maxheight: "maxheight", position: "position" }, outputs: { onClosed: "onClosed", onOpen: "onOpen", showChange: "showChange" }, queries: [{ propertyName: "dropdownContent", first: true, predicate: IDDropdownContentComponent, descendants: true }], ngImport: i0, template: "<ids-dropdown\n  [attr.persistent]=\"persistent ? true : null\"\n  [attr.position]=\"position\"\n  [expanded]=\"expanded ? 'true' : null\"\n  [sblock]=\"sblock\"\n  [mblock]=\"mblock\"\n  (closed)=\"hasClosed($event)\"\n  (open)=\"hasOpened($event)\">\n  <ng-content></ng-content>\n  <ids-dropdown-content *ngIf=\"dropdownContent\" [maxheight]=\"maxheight\">\n    <ng-container *ngTemplateOutlet=\"dropdownContent.template\"></ng-container>\n  </ids-dropdown-content>\n</ids-dropdown>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDDropdownComponent, isStandalone: true, selector: "id-dropdown", inputs: { sBlock: ["sBlock", "sBlock", booleanAttribute], mBlock: ["mBlock", "mBlock", booleanAttribute], minWidth: "minWidth", maxHeight: "maxHeight", persistent: ["persistent", "persistent", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], position: "position" }, outputs: { closed: "closed", opened: "opened" }, host: { listeners: { "idClickOutside": "closeIfNotPersistent()", "window:keydown": "handleKeyDown($event)" }, properties: { "class": "baseAndPositionClasses", "class.ids-dropdown--s-block": "sBlock", "class.ids-dropdown--m-block": "mBlock" } }, hostDirectives: [{ directive: i1.IDClickOutsideDirective, outputs: ["idClickOutside", "idClickOutside"] }], ngImport: i0, template: "<ng-content select=\"id-dropdown-trigger\"></ng-content>\n@if (expanded) {\n  <div\n    class=\"ids-dropdown-content\"\n    [class.ids-dropdown-content--position-right]=\"position === 'right'\"\n    [class.ids-dropdown-content--position-left]=\"position === 'left'\"\n    [class.ids-dropdown-content--sblock]=\"sBlock\"\n    [class.ids-dropdown-content--mblock]=\"mBlock\"\n    [class.ids-dropdown-content--show]=\"expanded\"\n    [class.ids-dropdown-content--scrollable]=\"!!maxHeight\"\n    [attr.aria-labelledby]=\"contentId\"\n    [style.min-width]=\"minWidth\"\n    role=\"menu\"\n  >\n    <div\n      class=\"ids-dropdown-content__scroll-area\"\n      role=\"presentation\"\n      [style.max-height]=\"maxHeight\"\n      [attr.tabindex]=\"maxHeight ? 0 : -1\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-dropdown", encapsulation: ViewEncapsulation.None, standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], template: "<ids-dropdown\n  [attr.persistent]=\"persistent ? true : null\"\n  [attr.position]=\"position\"\n  [expanded]=\"expanded ? 'true' : null\"\n  [sblock]=\"sblock\"\n  [mblock]=\"mblock\"\n  (closed)=\"hasClosed($event)\"\n  (open)=\"hasOpened($event)\">\n  <ng-content></ng-content>\n  <ids-dropdown-content *ngIf=\"dropdownContent\" [maxheight]=\"maxheight\">\n    <ng-container *ngTemplateOutlet=\"dropdownContent.template\"></ng-container>\n  </ids-dropdown-content>\n</ids-dropdown>\n" }]
-        }], ctorParameters: () => [], propDecorators: { sblock: [{
+            args: [{ selector: 'id-dropdown', standalone: true, host: {
+                        '[class]': 'baseAndPositionClasses',
+                        '[class.ids-dropdown--s-block]': 'sBlock',
+                        '[class.ids-dropdown--m-block]': 'mBlock',
+                        '(idClickOutside)': 'closeIfNotPersistent()'
+                    }, hostDirectives: [{
+                            directive: IDClickOutsideDirective,
+                            outputs: ['idClickOutside']
+                        }], template: "<ng-content select=\"id-dropdown-trigger\"></ng-content>\n@if (expanded) {\n  <div\n    class=\"ids-dropdown-content\"\n    [class.ids-dropdown-content--position-right]=\"position === 'right'\"\n    [class.ids-dropdown-content--position-left]=\"position === 'left'\"\n    [class.ids-dropdown-content--sblock]=\"sBlock\"\n    [class.ids-dropdown-content--mblock]=\"mBlock\"\n    [class.ids-dropdown-content--show]=\"expanded\"\n    [class.ids-dropdown-content--scrollable]=\"!!maxHeight\"\n    [attr.aria-labelledby]=\"contentId\"\n    [style.min-width]=\"minWidth\"\n    role=\"menu\"\n  >\n    <div\n      class=\"ids-dropdown-content__scroll-area\"\n      role=\"presentation\"\n      [style.max-height]=\"maxHeight\"\n      [attr.tabindex]=\"maxHeight ? 0 : -1\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { sBlock: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], mBlock: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], minWidth: [{
                 type: Input
-            }], mblock: [{
+            }], maxHeight: [{
                 type: Input
             }], persistent: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], expanded: [{
-                type: Input
-            }], maxheight: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], position: [{
                 type: Input
-            }], dropdownContent: [{
-                type: ContentChild,
-                args: [IDDropdownContentComponent]
-            }], onClosed: [{
+            }], closed: [{
                 type: Output
-            }], onOpen: [{
-                type: Output
-            }], showChange: [{
+            }], opened: [{
                 type: Output
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
             }] } });
 
+class IDDropdownTriggerComponent {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDDropdownTriggerComponent, isStandalone: true, selector: "id-dropdown-trigger", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-dropdown-trigger",
+                    template: `<ng-content></ng-content>`,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class IDDropdownItemDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: IDDropdownItemDirective, isStandalone: true, selector: "[idDropdownItem]", host: { attributes: { "role": "menuitem" }, classAttribute: "ids-dropdown-content__link" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[idDropdownItem]",
+                    standalone: true,
+                    host: {
+                        class: 'ids-dropdown-content__link',
+                        role: 'menuitem'
+                    },
+                }]
+        }] });
+
+class IDDropdownModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownModule, imports: [IDDropdownItemDirective,
+            IDDropdownComponent,
+            IDDropdownTriggerComponent], exports: [IDDropdownItemDirective,
+            IDDropdownComponent,
+            IDDropdownTriggerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        IDDropdownItemDirective,
+                        IDDropdownComponent,
+                        IDDropdownTriggerComponent,
+                    ],
+                    exports: [
+                        IDDropdownItemDirective,
+                        IDDropdownComponent,
+                        IDDropdownTriggerComponent,
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDDropdownComponent, IDDropdownContentComponent };
+export { IDDropdownComponent, IDDropdownItemDirective, IDDropdownModule, IDDropdownTriggerComponent };
 //# sourceMappingURL=inera-ids-angular-components-dropdown.mjs.map