@frame-ui-ng/components 0.5.0-beta.0 → 0.6.0-beta.0

package/fesm2022/frame-ui-ng-components-collapsible.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, Directive, linkedSignal, input, booleanAttribute, output, computed, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, effect, Directive, linkedSignal, input, booleanAttribute, output, computed, NgModule } from '@angular/core';
 
 const FR_COLLAPSIBLE = new InjectionToken('FrCollapsible');
 
@@ -7,25 +7,34 @@ const FR_COLLAPSIBLE = new InjectionToken('FrCollapsible');
 class FrCollapsibleContent {
     host = inject(ElementRef);
     collapsible = inject(FR_COLLAPSIBLE);
+    animationFrameId = -1;
     initialized = false;
     lastOpen = false;
-    rafId = -1;
+    mutationObserver;
+    resizeFrameId = -1;
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            const open = this.collapsible.open();
+            if (!this.initialized || open === this.lastOpen) {
+                this.lastOpen = open;
+                return;
+            }
+            this.lastOpen = open;
+            this.animate(open);
+        });
+    }
     ngAfterViewInit() {
         this.lastOpen = this.collapsible.open();
         this.applyStaticState(this.lastOpen);
+        this.observeContentSize();
         this.initialized = true;
     }
-    ngDoCheck() {
-        const open = this.collapsible.open();
-        if (!this.initialized || open === this.lastOpen) {
-            return;
-        }
-        this.cancelAnimationFrame();
-        this.lastOpen = open;
-        this.animate(open);
-    }
     ngOnDestroy() {
         this.cancelAnimationFrame();
+        this.cancelResizeFrame();
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
     }
     onTransitionEnd(event) {
         if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {
@@ -35,26 +44,27 @@ class FrCollapsibleContent {
             this.host.nativeElement.style.visibility = 'hidden';
             return;
         }
-        this.host.nativeElement.style.height = 'auto';
+        this.setOpenHeight();
     }
     animate(open) {
         const element = this.host.nativeElement;
+        this.cancelAnimationFrame();
+        this.cancelResizeFrame();
         if (open) {
             element.style.visibility = 'visible';
             element.style.height = '0px';
             element.style.opacity = '0';
-            this.rafId = requestAnimationFrame(() => {
+            this.animationFrameId = requestAnimationFrame(() => {
                 element.style.height = `${element.scrollHeight}px`;
                 element.style.opacity = '1';
             });
             return;
         }
-        element.style.height = `${element.scrollHeight}px`;
+        element.style.height = `${element.getBoundingClientRect().height || element.scrollHeight}px`;
         element.style.opacity = '1';
-        this.rafId = requestAnimationFrame(() => {
-            element.style.height = '0px';
-            element.style.opacity = '0';
-        });
+        void element.offsetHeight;
+        element.style.height = '0px';
+        element.style.opacity = '0';
     }
     applyStaticState(open) {
         const element = this.host.nativeElement;
@@ -63,11 +73,59 @@ class FrCollapsibleContent {
         element.style.visibility = open ? 'visible' : 'hidden';
     }
     cancelAnimationFrame() {
-        if (this.rafId === -1) {
+        if (this.animationFrameId === -1) {
+            return;
+        }
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = -1;
+    }
+    cancelResizeFrame() {
+        if (this.resizeFrameId === -1) {
             return;
         }
-        cancelAnimationFrame(this.rafId);
-        this.rafId = -1;
+        cancelAnimationFrame(this.resizeFrameId);
+        this.resizeFrameId = -1;
+    }
+    observeContentSize() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.scheduleOpenHeightSync());
+        this.observeResizeTargets();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.mutationObserver = new MutationObserver(() => {
+            this.observeResizeTargets();
+            this.scheduleOpenHeightSync();
+        });
+        this.mutationObserver.observe(this.host.nativeElement, { childList: true });
+    }
+    observeResizeTargets() {
+        if (!this.resizeObserver) {
+            return;
+        }
+        const element = this.host.nativeElement;
+        const targets = Array.from(element.children);
+        this.resizeObserver.disconnect();
+        if (targets.length === 0) {
+            this.resizeObserver.observe(element);
+            return;
+        }
+        targets.forEach((target) => this.resizeObserver?.observe(target));
+    }
+    scheduleOpenHeightSync() {
+        if (!this.initialized || !this.collapsible.open()) {
+            return;
+        }
+        this.cancelResizeFrame();
+        this.resizeFrameId = requestAnimationFrame(() => this.setOpenHeight());
+    }
+    setOpenHeight() {
+        if (!this.collapsible.open()) {
+            return;
+        }
+        this.host.nativeElement.style.height = `${this.host.nativeElement.scrollHeight}px`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCollapsibleContent, isStandalone: true, selector: "[frCollapsibleContent]", host: { attributes: { "role": "region" }, listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "attr.aria-hidden": "collapsible.open() ? \"false\" : \"true\"", "attr.aria-labelledby": "collapsible.triggerId()", "attr.data-state": "collapsible.open() ? \"open\" : \"closed\"", "attr.id": "collapsible.contentId()" }, classAttribute: "frame-collapsible__content" }, ngImport: i0 });
@@ -87,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         role: 'region',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 let collapsibleId = 0;
 /** Root controller for expandable collapsible content. */

package/fesm2022/frame-ui-ng-components-collapsible.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frame-ui-ng-components-collapsible.mjs","sources":["../../../projects/components/collapsible/src/collapsible.tokens.ts","../../../projects/components/collapsible/src/collapsible.content.ts","../../../projects/components/collapsible/src/collapsible.root.ts","../../../projects/components/collapsible/src/collapsible.trigger.ts","../../../projects/components/collapsible/collapsible.module.ts","../../../projects/components/collapsible/frame-ui-ng-components-collapsible.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\nexport interface FrCollapsibleContext {\n  readonly contentId: Signal<string>;\n  readonly disabled: Signal<boolean>;\n  readonly open: Signal<boolean>;\n  readonly triggerId: Signal<string>;\n  toggle(): void;\n}\n\nexport const FR_COLLAPSIBLE = new InjectionToken<FrCollapsibleContext>('FrCollapsible');\n","import { AfterViewInit, Directive, DoCheck, ElementRef, OnDestroy, inject } from '@angular/core';\r\n\r\nimport { FR_COLLAPSIBLE } from './collapsible.tokens';\r\n\r\n/** Content slot for collapsible. */\r\n@Directive({\r\n  selector: '[frCollapsibleContent]',\r\n  standalone: true,\r\n  host: {\r\n    class: 'frame-collapsible__content',\r\n    '[attr.aria-hidden]': 'collapsible.open() ? \"false\" : \"true\"',\r\n    '[attr.aria-labelledby]': 'collapsible.triggerId()',\r\n    '[attr.data-state]': 'collapsible.open() ? \"open\" : \"closed\"',\r\n    '[attr.id]': 'collapsible.contentId()',\r\n    '(transitionend)': 'onTransitionEnd($event)',\r\n    role: 'region',\r\n  },\r\n})\r\nexport class FrCollapsibleContent implements AfterViewInit, DoCheck, OnDestroy {\r\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  protected readonly collapsible = inject(FR_COLLAPSIBLE);\r\n  private initialized = false;\r\n  private lastOpen = false;\r\n  private rafId = -1;\r\n\r\n  ngAfterViewInit(): void {\r\n    this.lastOpen = this.collapsible.open();\r\n    this.applyStaticState(this.lastOpen);\r\n    this.initialized = true;\r\n  }\r\n\r\n  ngDoCheck(): void {\r\n    const open = this.collapsible.open();\r\n\r\n    if (!this.initialized || open === this.lastOpen) {\r\n      return;\r\n    }\r\n\r\n    this.cancelAnimationFrame();\r\n    this.lastOpen = open;\r\n    this.animate(open);\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.cancelAnimationFrame();\r\n  }\r\n\r\n  onTransitionEnd(event: TransitionEvent): void {\r\n    if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {\r\n      return;\r\n    }\r\n\r\n    if (!this.collapsible.open()) {\r\n      this.host.nativeElement.style.visibility = 'hidden';\r\n      return;\r\n    }\r\n\r\n    this.host.nativeElement.style.height = 'auto';\r\n  }\r\n\r\n  private animate(open: boolean): void {\r\n    const element = this.host.nativeElement;\r\n\r\n    if (open) {\r\n      element.style.visibility = 'visible';\r\n      element.style.height = '0px';\r\n      element.style.opacity = '0';\r\n\r\n      this.rafId = requestAnimationFrame(() => {\r\n        element.style.height = `${element.scrollHeight}px`;\r\n        element.style.opacity = '1';\r\n      });\r\n      return;\r\n    }\r\n\r\n    element.style.height = `${element.scrollHeight}px`;\r\n    element.style.opacity = '1';\r\n\r\n    this.rafId = requestAnimationFrame(() => {\r\n      element.style.height = '0px';\r\n      element.style.opacity = '0';\r\n    });\r\n  }\r\n\r\n  private applyStaticState(open: boolean): void {\r\n    const element = this.host.nativeElement;\r\n\r\n    element.style.height = open ? 'auto' : '0px';\r\n    element.style.opacity = open ? '1' : '0';\r\n    element.style.visibility = open ? 'visible' : 'hidden';\r\n  }\r\n\r\n  private cancelAnimationFrame(): void {\r\n    if (this.rafId === -1) {\r\n      return;\r\n    }\r\n\r\n    cancelAnimationFrame(this.rafId);\r\n    this.rafId = -1;\r\n  }\r\n}\r\n","import {\r\n  Directive,\r\n  booleanAttribute,\r\n  computed,\r\n  input,\r\n  linkedSignal,\r\n  output,\r\n} from '@angular/core';\r\n\r\nimport { FR_COLLAPSIBLE } from './collapsible.tokens';\r\n\r\nlet collapsibleId = 0;\r\n\r\n/** Root controller for expandable collapsible content. */\r\n@Directive({\r\n  selector: '[frCollapsible], frame-collapsible',\r\n  exportAs: 'frCollapsible',\r\n  standalone: true,\r\n  providers: [{ provide: FR_COLLAPSIBLE, useExisting: FrCollapsible }],\r\n  host: {\r\n    class: 'frame-collapsible',\r\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\r\n    '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\r\n  },\r\n})\r\nexport class FrCollapsible {\r\n  private readonly collapsibleId = ++collapsibleId;\r\n  private readonly internalOpen = linkedSignal(() => this.defaultOpen());\r\n\r\n  readonly defaultOpen = input(false, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly openInput = input<boolean | undefined>(undefined, { alias: 'open' });\r\n  readonly openChange = output<boolean>();\r\n\r\n  readonly open = computed(() => this.openInput() ?? this.internalOpen());\r\n  readonly triggerId = computed(() => `frame-collapsible-trigger-${this.collapsibleId}`);\r\n  readonly contentId = computed(() => `frame-collapsible-content-${this.collapsibleId}`);\r\n\r\n  toggle(): void {\r\n    if (this.disabled()) {\r\n      return;\r\n    }\r\n\r\n    this.setOpen(!this.open());\r\n  }\r\n\r\n  setOpen(open: boolean): void {\r\n    if (this.disabled() || open === this.open()) {\r\n      return;\r\n    }\r\n\r\n    if (this.openInput() === undefined) {\r\n      this.internalOpen.set(open);\r\n    }\r\n\r\n    this.openChange.emit(open);\r\n  }\r\n}\r\n\r\n","import { Directive, inject } from '@angular/core';\r\n\r\nimport { FR_COLLAPSIBLE } from './collapsible.tokens';\r\n\r\n/** Trigger control for collapsible. */\r\n@Directive({\r\n  selector: 'button[frCollapsibleTrigger]',\r\n  standalone: true,\r\n  host: {\r\n    class: 'frame-collapsible__trigger',\r\n    '[attr.aria-controls]': 'collapsible.contentId()',\r\n    '[attr.aria-expanded]': 'collapsible.open() ? \"true\" : \"false\"',\r\n    '[attr.data-disabled]': 'collapsible.disabled() ? \"\" : null',\r\n    '[attr.data-state]': 'collapsible.open() ? \"open\" : \"closed\"',\r\n    '[attr.disabled]': 'collapsible.disabled() ? \"\" : null',\r\n    '[attr.id]': 'collapsible.triggerId()',\r\n    type: 'button',\r\n    '(click)': 'collapsible.toggle()',\r\n  },\r\n})\r\nexport class FrCollapsibleTrigger {\r\n  protected readonly collapsible = inject(FR_COLLAPSIBLE);\r\n}\r\n","import { NgModule } from '@angular/core';\nimport {\n  FrCollapsible,\n  FrCollapsibleContent,\n  FrCollapsibleTrigger,\n} from './src/collapsible';\n\n@NgModule({\n  imports: [\n    FrCollapsible,\n    FrCollapsibleContent,\n    FrCollapsibleTrigger,\n  ],\n  exports: [\n    FrCollapsible,\n    FrCollapsibleContent,\n    FrCollapsibleTrigger,\n  ],\n})\nexport class FrCollapsibleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"frame-ui-ng-components-collapsible.mjs","sources":["../../../projects/components/collapsible/src/collapsible.tokens.ts","../../../projects/components/collapsible/src/collapsible.content.ts","../../../projects/components/collapsible/src/collapsible.root.ts","../../../projects/components/collapsible/src/collapsible.trigger.ts","../../../projects/components/collapsible/collapsible.module.ts","../../../projects/components/collapsible/frame-ui-ng-components-collapsible.ts"],"sourcesContent":["import { InjectionToken, Signal } from '@angular/core';\n\nexport interface FrCollapsibleContext {\n  readonly contentId: Signal<string>;\n  readonly disabled: Signal<boolean>;\n  readonly open: Signal<boolean>;\n  readonly triggerId: Signal<string>;\n  toggle(): void;\n}\n\nexport const FR_COLLAPSIBLE = new InjectionToken<FrCollapsibleContext>('FrCollapsible');\n","import { AfterViewInit, Directive, ElementRef, OnDestroy, effect, inject } from '@angular/core';\r\n\r\nimport { FR_COLLAPSIBLE } from './collapsible.tokens';\r\n\r\n/** Content slot for collapsible. */\r\n@Directive({\r\n  selector: '[frCollapsibleContent]',\r\n  standalone: true,\r\n  host: {\r\n    class: 'frame-collapsible__content',\r\n    '[attr.aria-hidden]': 'collapsible.open() ? \"false\" : \"true\"',\r\n    '[attr.aria-labelledby]': 'collapsible.triggerId()',\r\n    '[attr.data-state]': 'collapsible.open() ? \"open\" : \"closed\"',\r\n    '[attr.id]': 'collapsible.contentId()',\r\n    '(transitionend)': 'onTransitionEnd($event)',\r\n    role: 'region',\r\n  },\r\n})\r\nexport class FrCollapsibleContent implements AfterViewInit, OnDestroy {\r\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  protected readonly collapsible = inject(FR_COLLAPSIBLE);\r\n  private animationFrameId = -1;\r\n  private initialized = false;\r\n  private lastOpen = false;\r\n  private mutationObserver?: MutationObserver;\r\n  private resizeFrameId = -1;\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const open = this.collapsible.open();\r\n\r\n      if (!this.initialized || open === this.lastOpen) {\r\n        this.lastOpen = open;\r\n        return;\r\n      }\r\n\r\n      this.lastOpen = open;\r\n      this.animate(open);\r\n    });\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.lastOpen = this.collapsible.open();\r\n    this.applyStaticState(this.lastOpen);\r\n    this.observeContentSize();\r\n    this.initialized = true;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.cancelAnimationFrame();\r\n    this.cancelResizeFrame();\r\n    this.mutationObserver?.disconnect();\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  onTransitionEnd(event: TransitionEvent): void {\r\n    if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {\r\n      return;\r\n    }\r\n\r\n    if (!this.collapsible.open()) {\r\n      this.host.nativeElement.style.visibility = 'hidden';\r\n      return;\r\n    }\r\n\r\n    this.setOpenHeight();\r\n  }\r\n\r\n  private animate(open: boolean): void {\r\n    const element = this.host.nativeElement;\r\n\r\n    this.cancelAnimationFrame();\r\n    this.cancelResizeFrame();\r\n\r\n    if (open) {\r\n      element.style.visibility = 'visible';\r\n      element.style.height = '0px';\r\n      element.style.opacity = '0';\r\n\r\n      this.animationFrameId = requestAnimationFrame(() => {\r\n        element.style.height = `${element.scrollHeight}px`;\r\n        element.style.opacity = '1';\r\n      });\r\n      return;\r\n    }\r\n\r\n    element.style.height = `${element.getBoundingClientRect().height || element.scrollHeight}px`;\r\n    element.style.opacity = '1';\r\n\r\n    void element.offsetHeight;\r\n\r\n    element.style.height = '0px';\r\n    element.style.opacity = '0';\r\n  }\r\n\r\n  private applyStaticState(open: boolean): void {\r\n    const element = this.host.nativeElement;\r\n\r\n    element.style.height = open ? 'auto' : '0px';\r\n    element.style.opacity = open ? '1' : '0';\r\n    element.style.visibility = open ? 'visible' : 'hidden';\r\n  }\r\n\r\n  private cancelAnimationFrame(): void {\r\n    if (this.animationFrameId === -1) {\r\n      return;\r\n    }\r\n\r\n    cancelAnimationFrame(this.animationFrameId);\r\n    this.animationFrameId = -1;\r\n  }\r\n\r\n  private cancelResizeFrame(): void {\r\n    if (this.resizeFrameId === -1) {\r\n      return;\r\n    }\r\n\r\n    cancelAnimationFrame(this.resizeFrameId);\r\n    this.resizeFrameId = -1;\r\n  }\r\n\r\n  private observeContentSize(): void {\r\n    if (typeof ResizeObserver === 'undefined') {\r\n      return;\r\n    }\r\n\r\n    this.resizeObserver = new ResizeObserver(() => this.scheduleOpenHeightSync());\r\n    this.observeResizeTargets();\r\n\r\n    if (typeof MutationObserver === 'undefined') {\r\n      return;\r\n    }\r\n\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      this.observeResizeTargets();\r\n      this.scheduleOpenHeightSync();\r\n    });\r\n    this.mutationObserver.observe(this.host.nativeElement, { childList: true });\r\n  }\r\n\r\n  private observeResizeTargets(): void {\r\n    if (!this.resizeObserver) {\r\n      return;\r\n    }\r\n\r\n    const element = this.host.nativeElement;\r\n    const targets = Array.from(element.children);\r\n\r\n    this.resizeObserver.disconnect();\r\n\r\n    if (targets.length === 0) {\r\n      this.resizeObserver.observe(element);\r\n      return;\r\n    }\r\n\r\n    targets.forEach((target) => this.resizeObserver?.observe(target));\r\n  }\r\n\r\n  private scheduleOpenHeightSync(): void {\r\n    if (!this.initialized || !this.collapsible.open()) {\r\n      return;\r\n    }\r\n\r\n    this.cancelResizeFrame();\r\n    this.resizeFrameId = requestAnimationFrame(() => this.setOpenHeight());\r\n  }\r\n\r\n  private setOpenHeight(): void {\r\n    if (!this.collapsible.open()) {\r\n      return;\r\n    }\r\n\r\n    this.host.nativeElement.style.height = `${this.host.nativeElement.scrollHeight}px`;\r\n  }\r\n}\r\n","import {\r\n  Directive,\r\n  booleanAttribute,\r\n  computed,\r\n  input,\r\n  linkedSignal,\r\n  output,\r\n} from '@angular/core';\r\n\r\nimport { FR_COLLAPSIBLE } from './collapsible.tokens';\r\n\r\nlet collapsibleId = 0;\r\n\r\n/** Root controller for expandable collapsible content. */\r\n@Directive({\r\n  selector: '[frCollapsible], frame-collapsible',\r\n  exportAs: 'frCollapsible',\r\n  standalone: true,\r\n  providers: [{ provide: FR_COLLAPSIBLE, useExisting: FrCollapsible }],\r\n  host: {\r\n    class: 'frame-collapsible',\r\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\r\n    '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\r\n  },\r\n})\r\nexport class FrCollapsible {\r\n  private readonly collapsibleId = ++collapsibleId;\r\n  private readonly internalOpen = linkedSignal(() => this.defaultOpen());\r\n\r\n  readonly defaultOpen = input(false, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly openInput = input<boolean | undefined>(undefined, { alias: 'open' });\r\n  readonly openChange = output<boolean>();\r\n\r\n  readonly open = computed(() => this.openInput() ?? this.internalOpen());\r\n  readonly triggerId = computed(() => `frame-collapsible-trigger-${this.collapsibleId}`);\r\n  readonly contentId = computed(() => `frame-collapsible-content-${this.collapsibleId}`);\r\n\r\n  toggle(): void {\r\n    if (this.disabled()) {\r\n      return;\r\n    }\r\n\r\n    this.setOpen(!this.open());\r\n  }\r\n\r\n  setOpen(open: boolean): void {\r\n    if (this.disabled() || open === this.open()) {\r\n      return;\r\n    }\r\n\r\n    if (this.openInput() === undefined) {\r\n      this.internalOpen.set(open);\r\n    }\r\n\r\n    this.openChange.emit(open);\r\n  }\r\n}\r\n\r\n","import { Directive, inject } from '@angular/core';\r\n\r\nimport { FR_COLLAPSIBLE } from './collapsible.tokens';\r\n\r\n/** Trigger control for collapsible. */\r\n@Directive({\r\n  selector: 'button[frCollapsibleTrigger]',\r\n  standalone: true,\r\n  host: {\r\n    class: 'frame-collapsible__trigger',\r\n    '[attr.aria-controls]': 'collapsible.contentId()',\r\n    '[attr.aria-expanded]': 'collapsible.open() ? \"true\" : \"false\"',\r\n    '[attr.data-disabled]': 'collapsible.disabled() ? \"\" : null',\r\n    '[attr.data-state]': 'collapsible.open() ? \"open\" : \"closed\"',\r\n    '[attr.disabled]': 'collapsible.disabled() ? \"\" : null',\r\n    '[attr.id]': 'collapsible.triggerId()',\r\n    type: 'button',\r\n    '(click)': 'collapsible.toggle()',\r\n  },\r\n})\r\nexport class FrCollapsibleTrigger {\r\n  protected readonly collapsible = inject(FR_COLLAPSIBLE);\r\n}\r\n","import { NgModule } from '@angular/core';\nimport {\n  FrCollapsible,\n  FrCollapsibleContent,\n  FrCollapsibleTrigger,\n} from './src/collapsible';\n\n@NgModule({\n  imports: [\n    FrCollapsible,\n    FrCollapsibleContent,\n    FrCollapsibleTrigger,\n  ],\n  exports: [\n    FrCollapsible,\n    FrCollapsibleContent,\n    FrCollapsibleTrigger,\n  ],\n})\nexport class FrCollapsibleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-ui-ng-components-combobox.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, DestroyRef, ElementRef, signal, viewChild, contentChild, input, booleanAttribute, model, computed, Component, afterNextRender, Renderer2, NgModule } from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, DestroyRef, signal, viewChild, contentChild, input, booleanAttribute, model, computed, Component, afterNextRender, Renderer2, NgModule } from '@angular/core';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import { FrControlValueAccessor, provideDsValueAccessor } from '@frame-ui-ng/components/forms';
@@ -67,8 +67,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** Group slot for combobox. */
 class FrComboboxGroup {
+    elementRef = inject(ElementRef);
+    root = inject(FrComboboxRootLookup);
+    hidden() {
+        this.root.visibleCount();
+        const items = Array.from(this.elementRef.nativeElement.querySelectorAll('.frame-combobox__item'));
+        return items.length > 0 && items.every((item) => item.hasAttribute('data-hidden'));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxGroup, isStandalone: true, selector: "[frComboboxGroup], frame-combobox-group", host: { classAttribute: "frame-combobox__group" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxGroup, isStandalone: true, selector: "[frComboboxGroup], frame-combobox-group", host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "frame-combobox__group" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxGroup, decorators: [{
             type: Directive,
@@ -76,6 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     selector: '[frComboboxGroup], frame-combobox-group',
                     host: {
                         class: 'frame-combobox__group',
+                        '[attr.hidden]': 'hidden() ? "" : null',
                     },
                 }]
         }] });
@@ -150,6 +158,7 @@ class FrCombobox extends FrControlValueAccessor {
     items = new Set();
     itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
     selectedLabels = new Map();
+    selectedLabelsVersion = signal(0, ...(ngDevMode ? [{ debugName: "selectedLabelsVersion" }] : /* istanbul ignore next */ []));
     lastAutoHighlight = false;
     lastItemsVersion = -1;
     lastQuery = '';
@@ -168,6 +177,7 @@ class FrCombobox extends FrControlValueAccessor {
     invalid = computed(() => this.invalidInput() || this.formInvalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    queryActive = signal(false, ...(ngDevMode ? [{ debugName: "queryActive" }] : /* istanbul ignore next */ []));
     anchorWidth = signal(null, ...(ngDevMode ? [{ debugName: "anchorWidth" }] : /* istanbul ignore next */ []));
     highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
     overlaySide = signal('bottom', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
@@ -181,7 +191,8 @@ class FrCombobox extends FrControlValueAccessor {
             return this.query();
         }
         const value = this.value();
-        if (value === null || Array.isArray(value)) {
+        this.selectedLabelsVersion();
+        if (this.queryActive() || value === null || Array.isArray(value)) {
             return this.query();
         }
         return this.query() || this.selectedLabels.get(value) || this.itemToStringValue()(value);
@@ -251,7 +262,11 @@ class FrCombobox extends FrControlValueAccessor {
         return this.visibleItems()[this.highlightedIndex()] === item;
     }
     rememberItemLabel(value, label) {
+        if (this.selectedLabels.get(value) === label) {
+            return;
+        }
         this.selectedLabels.set(value, label);
+        this.selectedLabelsVersion.update((version) => version + 1);
     }
     itemVisible(label) {
         const query = this.query().trim().toLowerCase();
@@ -269,6 +284,9 @@ class FrCombobox extends FrControlValueAccessor {
             return;
         }
         this.isOpen.set(false);
+        if (!this.query()) {
+            this.queryActive.set(false);
+        }
         this.markAsTouched();
     }
     touch() {
@@ -276,12 +294,13 @@ class FrCombobox extends FrControlValueAccessor {
     }
     clear() {
         this.query.set('');
+        this.queryActive.set(false);
         this.value.set(this.multiple() ? [] : null);
         this.notifyValueChange(this.value());
         this.markAsTouched();
     }
     selectItem(value, label) {
-        this.selectedLabels.set(value, label);
+        this.rememberItemLabel(value, label);
         if (this.multiple()) {
             const current = this.selectedValues();
             const exists = current.some((item) => Object.is(item, value));
@@ -289,12 +308,14 @@ class FrCombobox extends FrControlValueAccessor {
             this.value.set(next);
             this.notifyValueChange(next);
             this.query.set('');
+            this.queryActive.set(false);
             this.open();
             return;
         }
         this.value.set(value);
         this.notifyValueChange(value);
         this.query.set('');
+        this.queryActive.set(false);
         this.close();
     }
     removeItem(value) {
@@ -309,6 +330,7 @@ class FrCombobox extends FrControlValueAccessor {
     }
     updateQuery(value) {
         this.query.set(value);
+        this.queryActive.set(true);
         this.highlightedIndex.set(0);
         this.open();
     }
@@ -319,6 +341,7 @@ class FrCombobox extends FrControlValueAccessor {
             return;
         }
         this.highlightedIndex.set((this.highlightedIndex() + delta + count) % count);
+        this.scrollHighlightedItemIntoView();
     }
     selectHighlighted() {
         const item = this.visibleItems()[this.highlightedIndex()];
@@ -330,10 +353,16 @@ class FrCombobox extends FrControlValueAccessor {
     setViewValue(value) {
         this.value.set(value);
         this.query.set('');
+        this.queryActive.set(false);
     }
     bumpItems() {
         this.itemsVersion.update((value) => value + 1);
     }
+    scrollHighlightedItemIntoView() {
+        queueMicrotask(() => {
+            this.visibleItems()[this.highlightedIndex()]?.scrollIntoView();
+        });
+    }
     measureAnchor() {
         const element = this.origin()?.elementRef.nativeElement ?? this.elementRef.nativeElement;
         if (typeof element?.getBoundingClientRect !== 'function') {
@@ -576,6 +605,9 @@ class FrComboboxItem {
             this.root.selectItem(this.value(), this.label());
         }
     }
+    scrollIntoView() {
+        this.elementRef.nativeElement.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }
     highlightSelf() {
         const index = this.root.visibleItems().indexOf(this);
         if (index >= 0) {
@@ -696,12 +728,12 @@ class FrComboboxChip {
             return;
         }
         const button = this.renderer.createElement('button');
-        const label = this.renderer.createText('×');
+        const icon = this.createRemoveIcon();
         this.renderer.setAttribute(button, 'type', 'button');
         this.renderer.setAttribute(button, 'aria-label', 'Remove selected item');
         this.renderer.setAttribute(button, 'data-default-remove', '');
         this.renderer.addClass(button, 'frame-combobox__chip-remove');
-        this.renderer.appendChild(button, label);
+        this.renderer.appendChild(button, icon);
         this.renderer.listen(button, 'click', (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -709,6 +741,24 @@ class FrComboboxChip {
         });
         this.renderer.appendChild(element, button);
     }
+    createRemoveIcon() {
+        const svg = this.renderer.createElement('svg', 'svg');
+        const firstPath = this.renderer.createElement('path', 'svg');
+        const secondPath = this.renderer.createElement('path', 'svg');
+        this.renderer.setAttribute(svg, 'aria-hidden', 'true');
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'stroke', 'currentColor');
+        this.renderer.setAttribute(svg, 'stroke-width', '2');
+        this.renderer.setAttribute(svg, 'stroke-linecap', 'round');
+        this.renderer.setAttribute(svg, 'stroke-linejoin', 'round');
+        this.renderer.addClass(svg, 'frame-combobox__chip-remove-icon');
+        this.renderer.setAttribute(firstPath, 'd', 'M18 6 6 18');
+        this.renderer.setAttribute(secondPath, 'd', 'm6 6 12 12');
+        this.renderer.appendChild(svg, firstPath);
+        this.renderer.appendChild(svg, secondPath);
+        return svg;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrComboboxChip, isStandalone: true, selector: "[frComboboxChip], frame-combobox-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-combobox__chip" }, exportAs: ["frComboboxChip"], ngImport: i0 });
 }
@@ -763,6 +813,11 @@ class FrComboboxChipsInput {
             this.root.open();
             this.root.moveHighlight(1);
         }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.root.open();
+            this.root.moveHighlight(-1);
+        }
         if (event.key === 'Enter') {
             event.preventDefault();
             this.root.selectHighlighted();