@ngbase/adk 0.1.6 → 0.1.7

package/breadcrumb/breadcrumb-separator.d.ts

@@ -1,10 +1,6 @@
 import * as i0 from "@angular/core";
-export declare class NgbBreadcrumbSeparatorAria {
-    readonly dir: import("@ngbase/adk/bidi").Directionality;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgbBreadcrumbSeparatorAria, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBreadcrumbSeparatorAria, "[ngbBreadcrumbSeparatorAria]", never, {}, {}, never, never, true, never>;
-}
 export declare class NgbBreadcrumbSeparator {
+    readonly dir: import("@ngbase/adk/bidi").Directionality;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbBreadcrumbSeparator, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBreadcrumbSeparator, "[ngbBreadcrumbsSeparator]", never, {}, {}, never, never, true, never>;
 }

package/breadcrumb/breadcrumb.d.ts

@@ -2,6 +2,7 @@ import * as i0 from "@angular/core";
 export declare class NgbBreadcrumb {
     private breadcrumbs;
     readonly active: import("@angular/core").Signal<boolean>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbBreadcrumb, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBreadcrumb, "[ngbBreadcrumb]", never, {}, {}, never, never, true, never>;
 }

package/breadcrumb/breadcrumbs.d.ts

@@ -1,7 +1,9 @@
+import { TemplateRef } from '@angular/core';
 import { NgbBreadcrumb } from './breadcrumb';
 import * as i0 from "@angular/core";
 export declare class NgbBreadcrumbs {
     readonly items: import("@angular/core").Signal<readonly NgbBreadcrumb[]>;
+    readonly separator: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbBreadcrumbs, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBreadcrumbs, "[ngbBreadcrumbs]", never, {}, {}, ["items"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBreadcrumbs, "[ngbBreadcrumbs]", never, {}, {}, ["items", "separator"], never, true, never>;
 }

package/breadcrumb/public-api.d.ts

@@ -1,4 +1,4 @@
 export { NgbBreadcrumbs } from './breadcrumbs';
 export { NgbBreadcrumb, aliasBreadcrumb } from './breadcrumb';
 export { NgbBreadcrumbLink } from './breadcrumb-link';
-export { NgbBreadcrumbSeparatorAria, NgbBreadcrumbSeparator } from './breadcrumb-separator';
+export { NgbBreadcrumbSeparator } from './breadcrumb-separator';

package/fesm2022/ngbase-adk-breadcrumb.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, computed, Directive, contentChildren } from '@angular/core';
+import { inject, computed, ViewContainerRef, effect, Directive, contentChildren, contentChild, TemplateRef } from '@angular/core';
 import { injectDirectionality } from '@ngbase/adk/bidi';
 
 class NgbBreadcrumb {
@@ -9,6 +9,14 @@ class NgbBreadcrumb {
             const items = this.breadcrumbs.items();
             return items.indexOf(this) === items.length - 1;
         });
+        const vcRef = inject(ViewContainerRef);
+        effect(cleanup => {
+            const separator = this.breadcrumbs.separator();
+            if (separator && !this.active()) {
+                vcRef.createEmbeddedView(separator);
+                cleanup(() => vcRef.clear());
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbBreadcrumb, isStandalone: true, selector: "[ngbBreadcrumb]", host: { attributes: { "role": "link" }, properties: { "attr.aria-current": "active() ? 'page' : null", "attr.aria-disabled": "active()" } }, ngImport: i0 }); }
@@ -23,17 +31,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         role: 'link',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 function aliasBreadcrumb(breadcrumb) {
     return { provide: NgbBreadcrumb, useExisting: breadcrumb };
 }
 
+class NgbBreadcrumbSeparator {
+    constructor() {
+        this.dir = injectDirectionality();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbBreadcrumbSeparator, isStandalone: true, selector: "[ngbBreadcrumbsSeparator]", host: { attributes: { "tabindex": "-1", "aria-hidden": "true", "role": "presentation" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbBreadcrumbsSeparator]',
+                    host: {
+                        tabindex: '-1',
+                        'aria-hidden': 'true',
+                        role: 'presentation',
+                    },
+                }]
+        }] });
+
 class NgbBreadcrumbs {
     constructor() {
         this.items = contentChildren(NgbBreadcrumb);
+        this.separator = contentChild(NgbBreadcrumbSeparator, { read: TemplateRef });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.0", type: NgbBreadcrumbs, isStandalone: true, selector: "[ngbBreadcrumbs]", host: { attributes: { "aria-label": "breadcrumb" } }, queries: [{ propertyName: "items", predicate: NgbBreadcrumb, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.0", type: NgbBreadcrumbs, isStandalone: true, selector: "[ngbBreadcrumbs]", host: { attributes: { "aria-label": "breadcrumb" } }, queries: [{ propertyName: "items", predicate: NgbBreadcrumb, isSignal: true }, { propertyName: "separator", first: true, predicate: NgbBreadcrumbSeparator, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbs, decorators: [{
             type: Directive,
@@ -65,39 +93,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }] });
 
-class NgbBreadcrumbSeparatorAria {
-    constructor() {
-        this.dir = injectDirectionality();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbSeparatorAria, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbBreadcrumbSeparatorAria, isStandalone: true, selector: "[ngbBreadcrumbSeparatorAria]", host: { attributes: { "tabindex": "-1", "aria-hidden": "true", "role": "presentation" }, properties: { "style.transform": "dir.isRtl() ? \"rotate(180deg)\" : \"\"" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbSeparatorAria, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngbBreadcrumbSeparatorAria]',
-                    host: {
-                        tabindex: '-1',
-                        'aria-hidden': 'true',
-                        role: 'presentation',
-                        '[style.transform]': 'dir.isRtl() ? "rotate(180deg)" : ""',
-                    },
-                }]
-        }] });
-class NgbBreadcrumbSeparator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbBreadcrumbSeparator, isStandalone: true, selector: "[ngbBreadcrumbsSeparator]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbBreadcrumbSeparator, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngbBreadcrumbsSeparator]',
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgbBreadcrumb, NgbBreadcrumbLink, NgbBreadcrumbSeparator, NgbBreadcrumbSeparatorAria, NgbBreadcrumbs, aliasBreadcrumb };
+export { NgbBreadcrumb, NgbBreadcrumbLink, NgbBreadcrumbSeparator, NgbBreadcrumbs, aliasBreadcrumb };
 //# sourceMappingURL=ngbase-adk-breadcrumb.mjs.map

package/fesm2022/ngbase-adk-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngbase-adk-breadcrumb.mjs","sources":["../../../projects/adk/breadcrumb/breadcrumb.ts","../../../projects/adk/breadcrumb/breadcrumbs.ts","../../../projects/adk/breadcrumb/breadcrumb-link.ts","../../../projects/adk/breadcrumb/breadcrumb-separator.ts","../../../projects/adk/breadcrumb/ngbase-adk-breadcrumb.ts"],"sourcesContent":["import { computed, Directive, inject } from '@angular/core';\nimport { NgbBreadcrumbs } from './breadcrumbs';\n\n@Directive({\n  selector: '[ngbBreadcrumb]',\n  host: {\n    '[attr.aria-current]': \"active() ? 'page' : null\",\n    '[attr.aria-disabled]': 'active()',\n    role: 'link',\n  },\n})\nexport class NgbBreadcrumb {\n  private breadcrumbs = inject(NgbBreadcrumbs);\n  readonly active = computed(() => {\n    const items = this.breadcrumbs.items();\n    return items.indexOf(this) === items.length - 1;\n  });\n}\n\nexport function aliasBreadcrumb(breadcrumb: typeof NgbBreadcrumb) {\n  return { provide: NgbBreadcrumb, useExisting: breadcrumb };\n}\n","import { contentChildren, Directive } from '@angular/core';\nimport { NgbBreadcrumb } from './breadcrumb';\n\n@Directive({\n  selector: '[ngbBreadcrumbs]',\n  host: {\n    'aria-label': 'breadcrumb',\n  },\n})\nexport class NgbBreadcrumbs {\n  readonly items = contentChildren(NgbBreadcrumb);\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgbBreadcrumb } from './public-api';\n\n@Directive({\n  selector: '[ngbBreadcrumbLink]',\n  host: {\n    '[tabIndex]': 'breadcrumb.active() ? -1 : 0',\n    '[attr.aria-current]': \"breadcrumb.active() ? 'page' : null\",\n    '[attr.aria-disabled]': 'breadcrumb.active() || null',\n    role: 'link',\n  },\n})\nexport class NgbBreadcrumbLink {\n  readonly breadcrumb = inject(NgbBreadcrumb);\n}\n","import { Directive } from '@angular/core';\nimport { injectDirectionality } from '@ngbase/adk/bidi';\n\n@Directive({\n  selector: '[ngbBreadcrumbSeparatorAria]',\n  host: {\n    tabindex: '-1',\n    'aria-hidden': 'true',\n    role: 'presentation',\n    '[style.transform]': 'dir.isRtl() ? \"rotate(180deg)\" : \"\"',\n  },\n})\nexport class NgbBreadcrumbSeparatorAria {\n  readonly dir = injectDirectionality();\n}\n\n@Directive({\n  selector: '[ngbBreadcrumbsSeparator]',\n})\nexport class NgbBreadcrumbSeparator {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngbase-adk-breadcrumb.mjs","sources":["../../../projects/adk/breadcrumb/breadcrumb.ts","../../../projects/adk/breadcrumb/breadcrumb-separator.ts","../../../projects/adk/breadcrumb/breadcrumbs.ts","../../../projects/adk/breadcrumb/breadcrumb-link.ts","../../../projects/adk/breadcrumb/ngbase-adk-breadcrumb.ts"],"sourcesContent":["import { computed, Directive, effect, inject, ViewContainerRef } from '@angular/core';\nimport { NgbBreadcrumbs } from './breadcrumbs';\n\n@Directive({\n  selector: '[ngbBreadcrumb]',\n  host: {\n    '[attr.aria-current]': \"active() ? 'page' : null\",\n    '[attr.aria-disabled]': 'active()',\n    role: 'link',\n  },\n})\nexport class NgbBreadcrumb {\n  private breadcrumbs = inject(NgbBreadcrumbs);\n  readonly active = computed(() => {\n    const items = this.breadcrumbs.items();\n    return items.indexOf(this) === items.length - 1;\n  });\n\n  constructor() {\n    const vcRef = inject(ViewContainerRef);\n    effect(cleanup => {\n      const separator = this.breadcrumbs.separator();\n      if (separator && !this.active()) {\n        vcRef.createEmbeddedView(separator);\n        cleanup(() => vcRef.clear());\n      }\n    });\n  }\n}\n\nexport function aliasBreadcrumb(breadcrumb: typeof NgbBreadcrumb) {\n  return { provide: NgbBreadcrumb, useExisting: breadcrumb };\n}\n","import { Directive } from '@angular/core';\nimport { injectDirectionality } from '@ngbase/adk/bidi';\n\n@Directive({\n  selector: '[ngbBreadcrumbsSeparator]',\n  host: {\n    tabindex: '-1',\n    'aria-hidden': 'true',\n    role: 'presentation',\n  },\n})\nexport class NgbBreadcrumbSeparator {\n  readonly dir = injectDirectionality();\n}\n","import { contentChild, contentChildren, Directive, TemplateRef } from '@angular/core';\nimport { NgbBreadcrumb } from './breadcrumb';\nimport { NgbBreadcrumbSeparator } from './breadcrumb-separator';\n\n@Directive({\n  selector: '[ngbBreadcrumbs]',\n  host: {\n    'aria-label': 'breadcrumb',\n  },\n})\nexport class NgbBreadcrumbs {\n  readonly items = contentChildren(NgbBreadcrumb);\n  readonly separator = contentChild(NgbBreadcrumbSeparator, { read: TemplateRef });\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgbBreadcrumb } from './public-api';\n\n@Directive({\n  selector: '[ngbBreadcrumbLink]',\n  host: {\n    '[tabIndex]': 'breadcrumb.active() ? -1 : 0',\n    '[attr.aria-current]': \"breadcrumb.active() ? 'page' : null\",\n    '[attr.aria-disabled]': 'breadcrumb.active() || null',\n    role: 'link',\n  },\n})\nexport class NgbBreadcrumbLink {\n  readonly breadcrumb = inject(NgbBreadcrumb);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAWa,aAAa,CAAA;AAOxB,IAAA,WAAA,GAAA;AANQ,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC;AACnC,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;YAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AACtC,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACjD,SAAC,CAAC;AAGA,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC;QACtC,MAAM,CAAC,OAAO,IAAG;YACf,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE;YAC9C,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAC/B,gBAAA,KAAK,CAAC,kBAAkB,CAAC,SAAS,CAAC;gBACnC,OAAO,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;;AAEhC,SAAC,CAAC;;8GAfO,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,0BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,0BAA0B;AACjD,wBAAA,sBAAsB,EAAE,UAAU;AAClC,wBAAA,IAAI,EAAE,MAAM;AACb,qBAAA;AACF,iBAAA;;AAoBK,SAAU,eAAe,CAAC,UAAgC,EAAA;IAC9D,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE;AAC5D;;MCrBa,sBAAsB,CAAA;AARnC,IAAA,WAAA,GAAA;QASW,IAAG,CAAA,GAAA,GAAG,oBAAoB,EAAE;AACtC;8GAFY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,IAAI,EAAE;AACJ,wBAAA,QAAQ,EAAE,IAAI;AACd,wBAAA,aAAa,EAAE,MAAM;AACrB,wBAAA,IAAI,EAAE,cAAc;AACrB,qBAAA;AACF,iBAAA;;;MCAY,cAAc,CAAA;AAN3B,IAAA,WAAA,GAAA;AAOW,QAAA,IAAA,CAAA,KAAK,GAAG,eAAe,CAAC,aAAa,CAAC;QACtC,IAAS,CAAA,SAAA,GAAG,YAAY,CAAC,sBAAsB,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;AACjF;8GAHY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EACQ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAa,EACZ,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,sBAAsB,2BAAU,WAAW,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAFlE,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,YAAY,EAAE,YAAY;AAC3B,qBAAA;AACF,iBAAA;;;MCGY,iBAAiB,CAAA;AAT9B,IAAA,WAAA,GAAA;AAUW,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC;AAC5C;8GAFY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,mBAAA,EAAA,qCAAA,EAAA,oBAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,IAAI,EAAE;AACJ,wBAAA,YAAY,EAAE,8BAA8B;AAC5C,wBAAA,qBAAqB,EAAE,qCAAqC;AAC5D,wBAAA,sBAAsB,EAAE,6BAA6B;AACrD,wBAAA,IAAI,EAAE,MAAM;AACb,qBAAA;AACF,iBAAA;;;ACXD;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -44,10 +44,6 @@
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/ngbase-adk-avatar.mjs"
     },
-    "./bidi": {
-      "types": "./bidi/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-bidi.mjs"
-    },
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
@@ -60,6 +56,10 @@
       "types": "./cache/index.d.ts",
       "default": "./fesm2022/ngbase-adk-cache.mjs"
     },
+    "./bidi": {
+      "types": "./bidi/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-bidi.mjs"
+    },
     "./carousel": {
       "types": "./carousel/index.d.ts",
       "default": "./fesm2022/ngbase-adk-carousel.mjs"
@@ -96,6 +96,10 @@
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/ngbase-adk-dialog.mjs"
     },
+    "./drag": {
+      "types": "./drag/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-drag.mjs"
+    },
     "./form-field": {
       "types": "./form-field/index.d.ts",
       "default": "./fesm2022/ngbase-adk-form-field.mjs"
@@ -104,10 +108,6 @@
       "types": "./hover-card/index.d.ts",
       "default": "./fesm2022/ngbase-adk-hover-card.mjs"
     },
-    "./drag": {
-      "types": "./drag/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-drag.mjs"
-    },
     "./icon": {
       "types": "./icon/index.d.ts",
       "default": "./fesm2022/ngbase-adk-icon.mjs"
@@ -220,14 +220,14 @@
       "types": "./test/index.d.ts",
       "default": "./fesm2022/ngbase-adk-test.mjs"
     },
-    "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
-    },
     "./toggle": {
       "types": "./toggle/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle.mjs"
     },
+    "./toggle-group": {
+      "types": "./toggle-group/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
+    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tooltip.mjs"

package/schematics/components/files/accordion/accordion-llm.md.template

@@ -0,0 +1,35 @@
+# MEE Accordion
+
+```typescript
+import { Accordion, AccordionGroup, AccordionHeader } from '@/ui/accordion';
+```
+
+## Components
+
+### `<<%= name %>-accordion-group>`
+
+- **Input:** `[multiple]`: boolean = false - Allow multiple open items
+
+### `<<%= name %>-accordion>`
+
+- **Inputs:**
+  - `[expanded]`: boolean = false - Item expanded state (2way)
+  - `[disabled]`: boolean = false - Disable interaction
+- **Output:** `(expandedChange)`: EventEmitter<boolean> - On state change
+- **Method:** `toggle()` - Toggle expanded state
+- **Export:** `#accordion="<%= name %>Accordion"` - Template reference
+
+### `[<%= name %>AccordionHeader]`
+
+- Directive for header element
+
+## Examples
+
+```html
+<<%= name %>-accordion-group>
+  <<%= name %>-accordion>
+    <div <%= name %>AccordionHeader>Title</div>
+    <p>Content</p>
+  </<%= name %>-accordion>
+</<%= name %>-accordion-group>
+```

package/schematics/components/files/alert/alert-llm.md.template

@@ -0,0 +1,34 @@
+# MEE Alert
+
+```typescript
+import { alertPortal } from '@/ui/alert';
+```
+
+## Usage
+
+```ts
+const alert = alertPortal();
+alert.open({
+  title: 'Alert',
+  description: 'This is an alert',
+  actions: [
+    {
+      text: 'Cancel',
+      type: 'secondary', // ButtonVariant
+      handler: close => close(),
+    },
+    {
+      text: 'OK',
+      type: 'primary', // ButtonVariant
+      handler: close => {
+        okHandler();
+        close();
+      },
+    },
+  ],
+});
+
+function okHandler() {
+  console.log('OK');
+}
+```

package/schematics/components/files/autocomplete/autocomplete-llm.md.template

@@ -0,0 +1,76 @@
+# MEE Autocomplete
+
+```typescript
+import { FormField, Label } from '@/ui/form-field';
+import { Autocomplete, AutocompleteInput } from '@/ui/autocomplete';
+import { Option } from '@/ui/select';
+```
+
+## Components
+
+### `<<%= name %>-autocomplete>`
+
+- **Inputs:**
+
+  - `value`: any[] | any - Selected value (2way)
+  - `disabled`: boolean = false - Disable the autocomplete (2way)
+  - `multiple`: boolean = false - Allow multiple selection
+  - `noAutoClose`: boolean = false - Prevent auto close
+  - `options`: any[] - Options
+  - `placeholder`: string = ' ' - Placeholder text
+  - `size`: 'target' | 'free' = 'free' - Size of the autocomplete
+  - `filterFn`: (option: any) => boolean = (option: any) => true - Filter function
+  - `queryFn`: (query: string, option: any) => boolean = (query: string, option: any) => true - Query function
+  - `filterOptions`: FilterOptions<any> - Filter options
+
+- **Outputs:**
+
+  - `opened`: boolean - Open state
+  - `closed`: boolean - Close state
+
+- **Methods:**
+
+  - `open()`: void - Open the autocomplete
+  - `close()`: void - Close the autocomplete
+
+- **Export:** `#autocomplete="<%= name %>Autocomplete"` - Template reference
+
+### `[<%= name %>AutocompleteInput]`
+
+- **Inputs:**
+
+  - `isChip`: boolean = false - Use chip style
+  - `placeholder`: string = ' ' - Placeholder text
+  - `value`: string = '' - Value (2way)
+
+- **Outputs:**
+
+  - `ngbAutocompleteInput: <%= name %>AutocompleteInput` - Autocomplete input event (2way)
+
+- **Export:** `#autocompleteInput="<%= name %>AutocompleteInput"` - Template reference
+
+### `<<%= name %>-option>`
+
+- **Inputs:**
+
+  - `value`: any - Option value
+
+- **Export:** `#option="<%= name %>Option"` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-form-field class="w-72 md:w-96">
+  <label <%= name %>Label>Autocomplete</label>
+  <<%= name %>-autocomplete [(ngModel)]="selectValue2.value" class="w-72 md:w-96">
+    <input
+      placeholder="Search options"
+      [(ngModel)]="selectValue2.optionsFilter.search"
+      <%= name %>AutocompleteInput
+    />
+    @for (item of selectValue2.optionsFilter.filteredList(); track item) {
+    <<%= name %>-option [value]="item">{{ item }}</<%= name %>-option>
+    }
+  </<%= name %>-autocomplete>
+</<%= name %>-form-field>
+```

package/schematics/components/files/avatar/avatar-llm.md.template

@@ -0,0 +1,37 @@
+# MEE Avatar
+
+```typescript
+import { Avatar, AvatarGroup } from '@/ui/avatar';
+```
+
+## Components
+
+### `<<%= name %>-avatar-group>`
+
+- **Inputs:**
+
+  - `reverse`: boolean = false - Reverse the avatar group
+  - `left`: boolean = false - Left the avatar group
+
+- **Export:** `#avatarGroup="<%= name %>AvatarGroup"` - Template reference
+
+### `<<%= name %>-avatar>, [<%= name %>Avatar]`
+
+- **Inputs:**
+
+  - `src`: string = '' - Avatar image source
+  - `name`: string = '' - Avatar name
+  - `text`: string = '' - Avatar text
+  - `size`: 'sm' | 'md' | 'lg' = 'md' - Avatar size
+
+- **Export:** `#avatar="<%= name %>Avatar"` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-avatar name="John Doe" src="https://x.me/0.jpg" />
+<<%= name %>-avatar-group>
+  <<%= name %>-avatar src="https://x.me/0.jpg" size="lg" />
+  <button <%= name %>Avatar src="https://x.me/1.jpg" size="lg" />
+</<%= name %>-avatar-group>
+```

package/schematics/components/files/avatar/avatar.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { NgbAvatar, NgbAvatarGroup, aliasAvatar } from '@ngbase/adk/avatar';
 
 @Component({
@@ -26,6 +26,9 @@ export class AvatarGroup {}
   host: {
     class:
       'inline-flex aspect-square rounded-full overflow-hidden border-2 border-muted relative bg-background text-muted-foreground items-center justify-center',
+    '[class]': `size() === 'sm' ? 'h-6 w-6' : size() === 'md' ? 'h-8 w-8' : size() === 'lg' ? 'h-10 w-10' : ''`,
   },
 })
-export class Avatar extends NgbAvatar {}
+export class Avatar extends NgbAvatar {
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+}

package/schematics/components/files/badge/badge-llm.md.template

@@ -0,0 +1,21 @@
+# MEE Badge
+
+```typescript
+import { Badge } from '@/ui/badge';
+```
+
+## Components
+
+### `<<%= name %>-badge>, [<%= name %>Badge]`
+
+- **Inputs:**
+
+  - `variant`: 'info' | 'success' | 'warning' | 'danger' = 'info' - Badge variant
+
+- **Export:** `<%= name %>Badge`
+
+## Usage
+
+```html
+<<%= name %>-badge>Badge</<%= name %>-badge> <button <%= name %>Badge variant="success">Badge</button>
+```

package/schematics/components/files/badge/badge.ts.template

@@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<ng-content />`,
   host: {
-    class: 'inline-block rounded-full px-2 py-1 text-xs font-semibold',
+    class: 'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold',
     '[class]': `variant() === 'success' ? 'bg-green-100 text-green-700' : variant() === 'warning' ? 'bg-yellow-100 text-yellow-700' : variant() === 'danger' ? 'bg-red-100 text-red-700' : 'bg-muted'`,
   },
 })

package/schematics/components/files/breadcrumb/breadcrumb-llm.md.template

@@ -0,0 +1,26 @@
+# MEE Breadcrumb
+
+```typescript
+import { Breadcrumb, Breadcrumbs, BreadcrumbsSeparator } from '@/ui/breadcrumb';
+```
+
+## Components
+
+### `<<%= name %>-breadcrumbs>`
+
+### `<<%= name %>-breadcrumb>`
+
+### `<<%= name %>-breadcrumbs-separator>` - Optional
+
+## Usage
+
+```html
+<<%= name %>-breadcrumbs>
+  <ng-template <%= name %>BreadcrumbsSeparator>
+    <<%= name %>-icon name="lucideChevronRight"></<%= name %>-icon>
+  </ng-template>
+
+  <a <%= name %>Breadcrumb routerLink="/home">Home</a>
+  <<%= name %>-breadcrumb>Contact</<%= name %>-breadcrumb>
+</<%= name %>-breadcrumbs>
+```

package/schematics/components/files/breadcrumb/breadcrumb.ts.template

@@ -8,14 +8,16 @@ import {
   NgbBreadcrumbLink,
   NgbBreadcrumbs,
   NgbBreadcrumbSeparator,
-  NgbBreadcrumbSeparatorAria,
 } from '@ngbase/adk/breadcrumb';
 
 @Component({
   selector: '<%= name %>-breadcrumbs',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideChevronRight })],
   hostDirectives: [NgbBreadcrumbs],
-  template: `<ng-content />`,
+  imports: [Icon, NgbBreadcrumbSeparator],
+  template: `<ng-content />
+    <<%= name %>-icon *ngbBreadcrumbsSeparator name="lucideChevronRight" class="text-muted-foreground" /> `,
   host: {
     class: 'flex items-center gap-2',
   },
@@ -23,25 +25,14 @@ import {
 export class Breadcrumbs {}
 
 @Component({
-  selector: '<%= name %>-breadcrumb',
+  selector: '<%= name %>-breadcrumb, [<%= name %>Breadcrumb]',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [aliasBreadcrumb(Breadcrumb)],
-  viewProviders: [provideIcons({ lucideChevronRight })],
-  imports: [Icon, NgbBreadcrumbLink, NgbBreadcrumbSeparatorAria],
-  template: `
-    <a class='hover:text-primary aria-[current="page"]:text-primary' ngbBreadcrumbLink>
-      <ng-content />
-    </a>
-    @if (!active()) {
-      <<%= name %>-icon
-        ngbBreadcrumbSeparatorAria
-        name="lucideChevronRight"
-        class="text-muted-foreground"
-      />
-    }
-  `,
+  hostDirectives: [NgbBreadcrumbLink],
+  template: `<ng-content />`,
   host: {
-    class: 'flex items-center gap-2 text-muted-foreground',
+    class:
+      'flex items-center gap-2 text-muted-foreground aria-[current="page"]:text-primary hover:text-primary cursor-pointer',
   },
 })
 export class Breadcrumb extends NgbBreadcrumb {}

package/schematics/components/files/button/button-llm.md.template

@@ -0,0 +1,22 @@
+# MEE Button
+
+```typescript
+import { Button } from '@/ui/button';
+```
+
+## Components
+
+### `[<%= name %>Button]`
+
+- ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon'
+- **Inputs:**
+
+  - `variant`: ButtonVariant = 'primary'
+
+- **Export:** `#button="<%= name %>Button"` - Template reference
+
+## Usage
+
+```html
+<button <%= name %>Button>Button</button> <button <%= name %>Button variant="ghost">Button</button>
+```

package/schematics/components/files/card/card-llm.md.template

@@ -0,0 +1,16 @@
+# MEE Card
+
+```typescript
+import { Card } from '@/ui/card';
+```
+
+## Components
+
+### `<<%= name %>-card>, [<%= name %>Card]`
+
+## Usage
+
+```html
+<<%= name %>-card>Card</<%= name %>-card>
+<div <%= name %>Card>Card</div>
+```

package/schematics/components/files/carousel/carousel-llm.md.template

@@ -0,0 +1,38 @@
+# MEE Carousel
+
+```typescript
+import { Carousel, CarouselItem, CarouselButton } from '@/ui/carousel';
+```
+
+## Components
+
+### `<<%= name %>-carousel>, [<%= name %>Carousel]`
+
+- **Export:** `#carousel="<%= name %>Carousel"` - Template reference
+
+### `[<%= name %>CarouselItem]`
+
+- **Export:** `#carouselItem="<%= name %>CarouselItem"` - Template reference
+
+### `<<%= name %>-carousel-button>, [<%= name %>CarouselButton]`
+
+- **Inputs:**
+
+  - `<%= name %>CarouselButton`: 'next' | 'prev' | number - Carousel button
+
+- **Export:** `#carouselButton="<%= name %>CarouselButton"` - Template reference
+
+## Usage
+
+```html
+<<%= name %>-carousel>
+  <div <%= name %>CarouselItem class="pl-4lg:basis-1/3 aspect-square shrink-0 grow-0 basis-full">
+    Item 1
+  </div>
+  <div <%= name %>CarouselItem class="pl-4lg:basis-1/3 aspect-square shrink-0 grow-0 basis-full">
+    Item 2
+  </div>
+  <button <%= name %>CarouselButton="next">Next</button>
+  <button <%= name %>CarouselButton="prev">Prev</button>
+</<%= name %>-carousel>
+```