@frame-kit/ui-ng 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/fesm2022/frame-kit-ui-ng-forms.mjs +2 -2
  2. package/fesm2022/frame-kit-ui-ng-forms.mjs.map +1 -1
  3. package/fesm2022/frame-kit-ui-ng-layouts-content-split.mjs +15 -3
  4. package/fesm2022/frame-kit-ui-ng-layouts-content-split.mjs.map +1 -1
  5. package/fesm2022/frame-kit-ui-ng-ui-accordion.mjs +34 -4
  6. package/fesm2022/frame-kit-ui-ng-ui-accordion.mjs.map +1 -1
  7. package/layouts/content-split/README.md +9 -7
  8. package/package.json +1 -1
  9. package/types/frame-kit-ui-ng-layouts-content-split.d.ts +8 -1
  10. package/types/frame-kit-ui-ng-ui-accordion.d.ts +14 -2
  11. package/ui/accordion/README.md +3 -1
package/fesm2022/frame-kit-ui-ng-layouts-content-split.mjs CHANGED
@@ -16,6 +16,12 @@ class FkContentSplitComponent {
16
16
  railWidth = input('64px', ...(ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []));
17
17
  /** Host element pixel width below which the layout switches to narrow mode. */
18
18
  breakpoint = input(700, ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
19
+ /**
20
+ * Optional CSS max-width for the layout. When set, the split is capped at
21
+ * this width and centered in its container (via auto inline margins);
22
+ * unset (default), it fills the full available width as before.
23
+ */
24
+ maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
19
25
  /** Two-way binding for the collapsed state of the left panel. */
20
26
  collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
21
27
  // ===== INTERNAL STATE =====
@@ -46,6 +52,9 @@ class FkContentSplitComponent {
46
52
  get hostRailWidth() {
47
53
  return this.railWidth();
48
54
  }
55
+ get hostMaxWidth() {
56
+ return this.maxWidth();
57
+ }
49
58
  // ===== CONSTRUCTOR =====
50
59
  constructor() {
51
60
  // ResizeObserver is browser-only — the SSR pass has no live
@@ -108,12 +117,12 @@ class FkContentSplitComponent {
108
117
  this.close();
109
118
  }
110
119
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkContentSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkContentSplitComponent, isStandalone: true, selector: "fk-content-split", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, leftWidth: { classPropertyName: "leftWidth", publicName: "leftWidth", isSignal: true, isRequired: false, transformFunction: null }, railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "this.hostClass", "style.--fk-content-split-left-width": "this.hostLeftWidth", "style.--fk-content-split-rail-width": "this.hostRailWidth" } }, ngImport: i0, template: "@if (showOverlay()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n class=\"fk-content-split__left\"\n [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n <div class=\"fk-content-split__left-content\">\n <ng-content select=\"[contentSplitLeft]\" />\n </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n <button\n class=\"fk-content-split__rail-toggle\"\n type=\"button\"\n [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n (click)=\"toggle()\"\n >\n <span\n class=\"fk-content-split__rail-toggle-icon\"\n [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n aria-hidden=\"true\"\n >\n <span class=\"fk-content-split__rail-toggle-projected\">\n <ng-content select=\"[contentSplitToggleIcon]\" />\n </span>\n <svg\n class=\"fk-content-split__rail-toggle-fallback\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M15.25 9H2.75\" />\n <path d=\"M11 4.75L15.25 9L11 13.25\" />\n </svg>\n </span>\n </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n <ng-content select=\"[contentSplitRight]\" />\n</div>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden}.fk-content-split__left{width:var(--fk-content-split-left-width, 280px);flex-shrink:0;overflow:hidden;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}.fk-content-split__left-content{height:100%;overflow-y:auto;overscroll-behavior:contain}.fk-content-split__overlay,.fk-content-split__rail{display:none}.fk-content-split__right{flex:1;min-width:0;overflow-y:auto}:host(.fk-content-split--narrow) .fk-content-split__left{position:absolute;top:0;left:0;bottom:0;z-index:var(--fk-content-split-panel-z-index, 11);width:min(var(--fk-content-split-left-width, 280px),100% - var(--fk-content-split-rail-width, 64px));transform:translate(-100%);visibility:hidden;pointer-events:none;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}:host(.fk-content-split--narrow) .fk-content-split__left--open{transform:translate(var(--fk-content-split-rail-width, 64px));visibility:visible;pointer-events:auto}:host(.fk-content-split--narrow) .fk-content-split__overlay{display:block;position:absolute;inset:0;left:var(--fk-content-split-rail-width, 64px);z-index:var(--fk-content-split-overlay-z-index, 10);background:var(--fk-content-split-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}:host(.fk-content-split--narrow) .fk-content-split__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--fk-content-split-rail-width, 64px);background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0));overflow-y:auto;overscroll-behavior:contain}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--fk-content-split-rail-toggle-padding, var(--fk-rhythm-3, .75rem)) 0;border:none;background:transparent;color:var(--fk-content-split-rail-toggle-color, var(--fk-color-muted, #64748b));cursor:pointer;flex-shrink:0}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:hover{color:var(--fk-content-split-rail-toggle-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-content-split-rail-toggle-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:-2px}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s ease}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon--open{transform:rotate(180deg)}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected{display:contents}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected:empty+.fk-content-split__rail-toggle-fallback{display:block}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-fallback{display:none}:host(.fk-content-split--narrow) .fk-content-split__right{flex:1;min-width:0}:host(.fk-content-split--animate) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s}:host(.fk-content-split--animate.fk-content-split--open) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s}@media(prefers-reduced-motion:reduce){:host(.fk-content-split--animate) .fk-content-split__left{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
120
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkContentSplitComponent, isStandalone: true, selector: "fk-content-split", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, leftWidth: { classPropertyName: "leftWidth", publicName: "leftWidth", isSignal: true, isRequired: false, transformFunction: null }, railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "this.hostClass", "style.--fk-content-split-left-width": "this.hostLeftWidth", "style.--fk-content-split-rail-width": "this.hostRailWidth", "style.--fk-content-split-max-width": "this.hostMaxWidth" } }, ngImport: i0, template: "@if (showOverlay()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n class=\"fk-content-split__left\"\n [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n <div class=\"fk-content-split__left-content\">\n <ng-content select=\"[contentSplitLeft]\" />\n </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n <button\n class=\"fk-content-split__rail-toggle\"\n type=\"button\"\n [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n (click)=\"toggle()\"\n >\n <span\n class=\"fk-content-split__rail-toggle-icon\"\n [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n aria-hidden=\"true\"\n >\n <span class=\"fk-content-split__rail-toggle-projected\">\n <ng-content select=\"[contentSplitToggleIcon]\" />\n </span>\n <svg\n class=\"fk-content-split__rail-toggle-fallback\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M15.25 9H2.75\" />\n <path d=\"M11 4.75L15.25 9L11 13.25\" />\n </svg>\n </span>\n </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n <ng-content select=\"[contentSplitRight]\" />\n</div>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden;max-width:var(--fk-content-split-max-width, none);margin-inline:auto}.fk-content-split__left{width:var(--fk-content-split-left-width, 280px);flex-shrink:0;overflow:hidden;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}.fk-content-split__left-content{height:100%;overflow-y:auto;overscroll-behavior:contain}.fk-content-split__overlay,.fk-content-split__rail{display:none}.fk-content-split__right{flex:1;min-width:0;overflow-y:auto}:host(.fk-content-split--narrow) .fk-content-split__left{position:absolute;top:0;left:0;bottom:0;z-index:var(--fk-content-split-panel-z-index, 11);width:min(var(--fk-content-split-left-width, 280px),100% - var(--fk-content-split-rail-width, 64px));transform:translate(-100%);visibility:hidden;pointer-events:none;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}:host(.fk-content-split--narrow) .fk-content-split__left--open{transform:translate(var(--fk-content-split-rail-width, 64px));visibility:visible;pointer-events:auto}:host(.fk-content-split--narrow) .fk-content-split__overlay{display:block;position:absolute;inset:0;left:var(--fk-content-split-rail-width, 64px);z-index:var(--fk-content-split-overlay-z-index, 10);background:var(--fk-content-split-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}:host(.fk-content-split--narrow) .fk-content-split__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--fk-content-split-rail-width, 64px);background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0));overflow-y:auto;overscroll-behavior:contain}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--fk-content-split-rail-toggle-padding, var(--fk-rhythm-3, .75rem)) 0;border:none;background:transparent;color:var(--fk-content-split-rail-toggle-color, var(--fk-color-muted, #64748b));cursor:pointer;flex-shrink:0}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:hover{color:var(--fk-content-split-rail-toggle-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-content-split-rail-toggle-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:-2px}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s ease}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon--open{transform:rotate(180deg)}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected{display:contents}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected:empty+.fk-content-split__rail-toggle-fallback{display:block}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-fallback{display:none}:host(.fk-content-split--narrow) .fk-content-split__right{flex:1;min-width:0}:host(.fk-content-split--animate) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s}:host(.fk-content-split--animate.fk-content-split--open) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s}@media(prefers-reduced-motion:reduce){:host(.fk-content-split--animate) .fk-content-split__left{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
112
121
  }
113
122
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkContentSplitComponent, decorators: [{
114
123
  type: Component,
115
- args: [{ selector: 'fk-content-split', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showOverlay()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n class=\"fk-content-split__left\"\n [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n <div class=\"fk-content-split__left-content\">\n <ng-content select=\"[contentSplitLeft]\" />\n </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n <button\n class=\"fk-content-split__rail-toggle\"\n type=\"button\"\n [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n (click)=\"toggle()\"\n >\n <span\n class=\"fk-content-split__rail-toggle-icon\"\n [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n aria-hidden=\"true\"\n >\n <span class=\"fk-content-split__rail-toggle-projected\">\n <ng-content select=\"[contentSplitToggleIcon]\" />\n </span>\n <svg\n class=\"fk-content-split__rail-toggle-fallback\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M15.25 9H2.75\" />\n <path d=\"M11 4.75L15.25 9L11 13.25\" />\n </svg>\n </span>\n </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n <ng-content select=\"[contentSplitRight]\" />\n</div>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden}.fk-content-split__left{width:var(--fk-content-split-left-width, 280px);flex-shrink:0;overflow:hidden;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}.fk-content-split__left-content{height:100%;overflow-y:auto;overscroll-behavior:contain}.fk-content-split__overlay,.fk-content-split__rail{display:none}.fk-content-split__right{flex:1;min-width:0;overflow-y:auto}:host(.fk-content-split--narrow) .fk-content-split__left{position:absolute;top:0;left:0;bottom:0;z-index:var(--fk-content-split-panel-z-index, 11);width:min(var(--fk-content-split-left-width, 280px),100% - var(--fk-content-split-rail-width, 64px));transform:translate(-100%);visibility:hidden;pointer-events:none;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}:host(.fk-content-split--narrow) .fk-content-split__left--open{transform:translate(var(--fk-content-split-rail-width, 64px));visibility:visible;pointer-events:auto}:host(.fk-content-split--narrow) .fk-content-split__overlay{display:block;position:absolute;inset:0;left:var(--fk-content-split-rail-width, 64px);z-index:var(--fk-content-split-overlay-z-index, 10);background:var(--fk-content-split-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}:host(.fk-content-split--narrow) .fk-content-split__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--fk-content-split-rail-width, 64px);background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0));overflow-y:auto;overscroll-behavior:contain}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--fk-content-split-rail-toggle-padding, var(--fk-rhythm-3, .75rem)) 0;border:none;background:transparent;color:var(--fk-content-split-rail-toggle-color, var(--fk-color-muted, #64748b));cursor:pointer;flex-shrink:0}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:hover{color:var(--fk-content-split-rail-toggle-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-content-split-rail-toggle-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:-2px}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s ease}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon--open{transform:rotate(180deg)}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected{display:contents}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected:empty+.fk-content-split__rail-toggle-fallback{display:block}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-fallback{display:none}:host(.fk-content-split--narrow) .fk-content-split__right{flex:1;min-width:0}:host(.fk-content-split--animate) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s}:host(.fk-content-split--animate.fk-content-split--open) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s}@media(prefers-reduced-motion:reduce){:host(.fk-content-split--animate) .fk-content-split__left{transition:none}}\n"] }]
116
- }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], leftWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftWidth", required: false }] }], railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], hostClass: [{
124
+ args: [{ selector: 'fk-content-split', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showOverlay()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n class=\"fk-content-split__left\"\n [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n <div class=\"fk-content-split__left-content\">\n <ng-content select=\"[contentSplitLeft]\" />\n </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n <button\n class=\"fk-content-split__rail-toggle\"\n type=\"button\"\n [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n (click)=\"toggle()\"\n >\n <span\n class=\"fk-content-split__rail-toggle-icon\"\n [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n aria-hidden=\"true\"\n >\n <span class=\"fk-content-split__rail-toggle-projected\">\n <ng-content select=\"[contentSplitToggleIcon]\" />\n </span>\n <svg\n class=\"fk-content-split__rail-toggle-fallback\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M15.25 9H2.75\" />\n <path d=\"M11 4.75L15.25 9L11 13.25\" />\n </svg>\n </span>\n </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n <ng-content select=\"[contentSplitRight]\" />\n</div>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden;max-width:var(--fk-content-split-max-width, none);margin-inline:auto}.fk-content-split__left{width:var(--fk-content-split-left-width, 280px);flex-shrink:0;overflow:hidden;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}.fk-content-split__left-content{height:100%;overflow-y:auto;overscroll-behavior:contain}.fk-content-split__overlay,.fk-content-split__rail{display:none}.fk-content-split__right{flex:1;min-width:0;overflow-y:auto}:host(.fk-content-split--narrow) .fk-content-split__left{position:absolute;top:0;left:0;bottom:0;z-index:var(--fk-content-split-panel-z-index, 11);width:min(var(--fk-content-split-left-width, 280px),100% - var(--fk-content-split-rail-width, 64px));transform:translate(-100%);visibility:hidden;pointer-events:none;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}:host(.fk-content-split--narrow) .fk-content-split__left--open{transform:translate(var(--fk-content-split-rail-width, 64px));visibility:visible;pointer-events:auto}:host(.fk-content-split--narrow) .fk-content-split__overlay{display:block;position:absolute;inset:0;left:var(--fk-content-split-rail-width, 64px);z-index:var(--fk-content-split-overlay-z-index, 10);background:var(--fk-content-split-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}:host(.fk-content-split--narrow) .fk-content-split__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--fk-content-split-rail-width, 64px);background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0));overflow-y:auto;overscroll-behavior:contain}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--fk-content-split-rail-toggle-padding, var(--fk-rhythm-3, .75rem)) 0;border:none;background:transparent;color:var(--fk-content-split-rail-toggle-color, var(--fk-color-muted, #64748b));cursor:pointer;flex-shrink:0}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:hover{color:var(--fk-content-split-rail-toggle-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-content-split-rail-toggle-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:-2px}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s ease}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon--open{transform:rotate(180deg)}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected{display:contents}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected:empty+.fk-content-split__rail-toggle-fallback{display:block}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-fallback{display:none}:host(.fk-content-split--narrow) .fk-content-split__right{flex:1;min-width:0}:host(.fk-content-split--animate) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s}:host(.fk-content-split--animate.fk-content-split--open) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s}@media(prefers-reduced-motion:reduce){:host(.fk-content-split--animate) .fk-content-split__left{transition:none}}\n"] }]
125
+ }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], leftWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftWidth", required: false }] }], railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], hostClass: [{
117
126
  type: HostBinding,
118
127
  args: ['class']
119
128
  }], hostLeftWidth: [{
@@ -122,6 +131,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
122
131
  }], hostRailWidth: [{
123
132
  type: HostBinding,
124
133
  args: ['style.--fk-content-split-rail-width']
134
+ }], hostMaxWidth: [{
135
+ type: HostBinding,
136
+ args: ['style.--fk-content-split-max-width']
125
137
  }] } });
126
138
 
127
139
  /**
package/fesm2022/frame-kit-ui-ng-layouts-content-split.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"frame-kit-ui-ng-layouts-content-split.mjs","sources":["../../../../packages/ui-ng/layouts/content-split/content-split.component.ts","../../../../packages/ui-ng/layouts/content-split/content-split.component.html","../../../../packages/ui-ng/layouts/content-split/frame-kit-ui-ng-layouts-content-split.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n HostBinding,\n inject,\n input,\n model,\n NgZone,\n PLATFORM_ID,\n signal,\n} from '@angular/core';\n\nimport type { ContentSplitLayout } from './content-split.types';\n\n@Component({\n selector: 'fk-content-split',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './content-split.component.html',\n styleUrl: './content-split.component.scss',\n})\nexport class FkContentSplitComponent {\n private readonly el = inject(ElementRef<HTMLElement>);\n private readonly ngZone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n private readonly platformId = inject(PLATFORM_ID);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n\n // ===== INPUTS =====\n /** Width of the left panel when the layout is in wide mode. */\n readonly leftWidth = input<string>('280px');\n /** Width of the left panel when collapsed to a narrow icon rail. */\n readonly railWidth = input<string>('64px');\n /** Host element pixel width below which the layout switches to narrow mode. */\n readonly breakpoint = input<number>(700);\n /** Two-way binding for the collapsed state of the left panel. */\n readonly collapsed = model<boolean>(false);\n\n // ===== INTERNAL STATE =====\n readonly layout = signal<ContentSplitLayout>('wide');\n readonly animate = signal(false);\n\n private observer: ResizeObserver | null = null;\n\n // ===== COMPUTED =====\n readonly isNarrow = computed(() => this.layout() === 'narrow');\n readonly isWide = computed(() => this.layout() === 'wide');\n readonly showOverlay = computed(() => this.isNarrow() && !this.collapsed());\n\n readonly classes = computed(() =>\n [\n 'fk-content-split',\n this.isNarrow() ? 'fk-content-split--narrow' : 'fk-content-split--wide',\n this.isNarrow() && !this.collapsed() ? 'fk-content-split--open' : '',\n this.isNarrow() && this.collapsed() ? 'fk-content-split--closed' : '',\n this.animate() ? 'fk-content-split--animate' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n // ===== HOST BINDINGS =====\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n @HostBinding('style.--fk-content-split-left-width')\n get hostLeftWidth() {\n return this.leftWidth();\n }\n\n @HostBinding('style.--fk-content-split-rail-width')\n get hostRailWidth() {\n return this.railWidth();\n }\n\n // ===== CONSTRUCTOR =====\n\n constructor() {\n // ResizeObserver is browser-only — the SSR pass has no live\n // layout to observe, so the initial layout signal stays at its\n // default (\"wide\") and the browser pass wires the observer once\n // hydration mounts the element.\n if (isPlatformBrowser(this.platformId)) {\n this.ngZone.runOutsideAngular(() => {\n this.observer = new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (!entry) {\n return;\n }\n\n const hostWidth = entry.contentRect.width;\n const bp = this.breakpoint();\n\n if (hostWidth < bp && this.layout() !== 'narrow') {\n this.ngZone.run(() => {\n this.layout.set('narrow');\n this.animate.set(false);\n this.collapsed.set(true);\n });\n } else if (hostWidth >= bp && this.layout() !== 'wide') {\n this.ngZone.run(() => {\n this.layout.set('wide');\n this.animate.set(false);\n this.collapsed.set(true);\n });\n }\n });\n\n this.observer.observe(this.el.nativeElement);\n });\n }\n\n this.destroyRef.onDestroy(() => {\n this.observer?.disconnect();\n });\n }\n\n // ===== PUBLIC METHODS =====\n\n /** Expand the left panel. */\n open(): void {\n this.animate.set(true);\n this.collapsed.set(false);\n }\n\n /** Collapse the left panel. */\n close(): void {\n this.animate.set(true);\n this.collapsed.set(true);\n }\n\n /** Toggle the left panel between expanded and collapsed. */\n toggle(): void {\n if (this.collapsed()) {\n this.open();\n } else {\n this.close();\n }\n }\n\n /** Dismiss the left panel overlay on narrow viewports (alias for `close`). */\n dismiss(): void {\n this.close();\n }\n}\n","@if (showOverlay()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n class=\"fk-content-split__left\"\n [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n <div class=\"fk-content-split__left-content\">\n <ng-content select=\"[contentSplitLeft]\" />\n </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n <button\n class=\"fk-content-split__rail-toggle\"\n type=\"button\"\n [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n (click)=\"toggle()\"\n >\n <span\n class=\"fk-content-split__rail-toggle-icon\"\n [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n aria-hidden=\"true\"\n >\n <span class=\"fk-content-split__rail-toggle-projected\">\n <ng-content select=\"[contentSplitToggleIcon]\" />\n </span>\n <svg\n class=\"fk-content-split__rail-toggle-fallback\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M15.25 9H2.75\" />\n <path d=\"M11 4.75L15.25 9L11 13.25\" />\n </svg>\n </span>\n </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n <ng-content select=\"[contentSplitRight]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"frame-kit-ui-ng-layouts-content-split.mjs","sources":["../../../../packages/ui-ng/layouts/content-split/content-split.component.ts","../../../../packages/ui-ng/layouts/content-split/content-split.component.html","../../../../packages/ui-ng/layouts/content-split/frame-kit-ui-ng-layouts-content-split.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n HostBinding,\n inject,\n input,\n model,\n NgZone,\n PLATFORM_ID,\n signal,\n} from '@angular/core';\n\nimport type { ContentSplitLayout } from './content-split.types';\n\n@Component({\n selector: 'fk-content-split',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './content-split.component.html',\n styleUrl: './content-split.component.scss',\n})\nexport class FkContentSplitComponent {\n private readonly el = inject(ElementRef<HTMLElement>);\n private readonly ngZone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n private readonly platformId = inject(PLATFORM_ID);\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n\n // ===== INPUTS =====\n /** Width of the left panel when the layout is in wide mode. */\n readonly leftWidth = input<string>('280px');\n /** Width of the left panel when collapsed to a narrow icon rail. */\n readonly railWidth = input<string>('64px');\n /** Host element pixel width below which the layout switches to narrow mode. */\n readonly breakpoint = input<number>(700);\n /**\n * Optional CSS max-width for the layout. When set, the split is capped at\n * this width and centered in its container (via auto inline margins);\n * unset (default), it fills the full available width as before.\n */\n readonly maxWidth = input<string | null>(null);\n /** Two-way binding for the collapsed state of the left panel. */\n readonly collapsed = model<boolean>(false);\n\n // ===== INTERNAL STATE =====\n readonly layout = signal<ContentSplitLayout>('wide');\n readonly animate = signal(false);\n\n private observer: ResizeObserver | null = null;\n\n // ===== COMPUTED =====\n readonly isNarrow = computed(() => this.layout() === 'narrow');\n readonly isWide = computed(() => this.layout() === 'wide');\n readonly showOverlay = computed(() => this.isNarrow() && !this.collapsed());\n\n readonly classes = computed(() =>\n [\n 'fk-content-split',\n this.isNarrow() ? 'fk-content-split--narrow' : 'fk-content-split--wide',\n this.isNarrow() && !this.collapsed() ? 'fk-content-split--open' : '',\n this.isNarrow() && this.collapsed() ? 'fk-content-split--closed' : '',\n this.animate() ? 'fk-content-split--animate' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n // ===== HOST BINDINGS =====\n\n @HostBinding('class')\n get hostClass() {\n return this.classes();\n }\n\n @HostBinding('style.--fk-content-split-left-width')\n get hostLeftWidth() {\n return this.leftWidth();\n }\n\n @HostBinding('style.--fk-content-split-rail-width')\n get hostRailWidth() {\n return this.railWidth();\n }\n\n @HostBinding('style.--fk-content-split-max-width')\n get hostMaxWidth() {\n return this.maxWidth();\n }\n\n // ===== CONSTRUCTOR =====\n\n constructor() {\n // ResizeObserver is browser-only — the SSR pass has no live\n // layout to observe, so the initial layout signal stays at its\n // default (\"wide\") and the browser pass wires the observer once\n // hydration mounts the element.\n if (isPlatformBrowser(this.platformId)) {\n this.ngZone.runOutsideAngular(() => {\n this.observer = new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (!entry) {\n return;\n }\n\n const hostWidth = entry.contentRect.width;\n const bp = this.breakpoint();\n\n if (hostWidth < bp && this.layout() !== 'narrow') {\n this.ngZone.run(() => {\n this.layout.set('narrow');\n this.animate.set(false);\n this.collapsed.set(true);\n });\n } else if (hostWidth >= bp && this.layout() !== 'wide') {\n this.ngZone.run(() => {\n this.layout.set('wide');\n this.animate.set(false);\n this.collapsed.set(true);\n });\n }\n });\n\n this.observer.observe(this.el.nativeElement);\n });\n }\n\n this.destroyRef.onDestroy(() => {\n this.observer?.disconnect();\n });\n }\n\n // ===== PUBLIC METHODS =====\n\n /** Expand the left panel. */\n open(): void {\n this.animate.set(true);\n this.collapsed.set(false);\n }\n\n /** Collapse the left panel. */\n close(): void {\n this.animate.set(true);\n this.collapsed.set(true);\n }\n\n /** Toggle the left panel between expanded and collapsed. */\n toggle(): void {\n if (this.collapsed()) {\n this.open();\n } else {\n this.close();\n }\n }\n\n /** Dismiss the left panel overlay on narrow viewports (alias for `close`). */\n dismiss(): void {\n this.close();\n }\n}\n","@if (showOverlay()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n class=\"fk-content-split__left\"\n [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n <div class=\"fk-content-split__left-content\">\n <ng-content select=\"[contentSplitLeft]\" />\n </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n <button\n class=\"fk-content-split__rail-toggle\"\n type=\"button\"\n [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n (click)=\"toggle()\"\n >\n <span\n class=\"fk-content-split__rail-toggle-icon\"\n [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n aria-hidden=\"true\"\n >\n <span class=\"fk-content-split__rail-toggle-projected\">\n <ng-content select=\"[contentSplitToggleIcon]\" />\n </span>\n <svg\n class=\"fk-content-split__rail-toggle-fallback\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M15.25 9H2.75\" />\n <path d=\"M11 4.75L15.25 9L11 13.25\" />\n </svg>\n </span>\n </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n <ng-content select=\"[contentSplitRight]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/frame-kit-ui-ng-ui-accordion.mjs CHANGED
@@ -92,6 +92,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
92
92
  }]
93
93
  }] });
94
94
 
95
+ const FK_ACCORDION_TRAILING = new InjectionToken('FK_ACCORDION_TRAILING');
96
+ /**
97
+ * Projects content into the accordion trigger's trailing region, between the
98
+ * optional leading text and the chevron — a right-aligned slot for a badge,
99
+ * count, or status pill.
100
+ */
101
+ class FkAccordionTrailingDirective {
102
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkAccordionTrailingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
103
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkAccordionTrailingDirective, isStandalone: true, selector: "[fkAccordionTrailing]", providers: [
104
+ {
105
+ provide: FK_ACCORDION_TRAILING,
106
+ useExisting: FkAccordionTrailingDirective,
107
+ },
108
+ ], ngImport: i0 });
109
+ }
110
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkAccordionTrailingDirective, decorators: [{
111
+ type: Directive,
112
+ args: [{
113
+ selector: '[fkAccordionTrailing]',
114
+ standalone: true,
115
+ providers: [
116
+ {
117
+ provide: FK_ACCORDION_TRAILING,
118
+ useExisting: FkAccordionTrailingDirective,
119
+ },
120
+ ],
121
+ }]
122
+ }] });
123
+
95
124
  let uid = 0;
96
125
  class AccordionComponent {
97
126
  group = inject(AccordionGroupCoordinator, {
@@ -114,6 +143,7 @@ class AccordionComponent {
114
143
  // ===== CONTENT CHILDREN =====
115
144
  leadingIconRef = contentChild(FK_ACCORDION_LEADING_ICON, ...(ngDevMode ? [{ debugName: "leadingIconRef" }] : /* istanbul ignore next */ []));
116
145
  chevronRef = contentChild(FK_ACCORDION_CHEVRON, ...(ngDevMode ? [{ debugName: "chevronRef" }] : /* istanbul ignore next */ []));
146
+ trailingRef = contentChild(FK_ACCORDION_TRAILING, ...(ngDevMode ? [{ debugName: "trailingRef" }] : /* istanbul ignore next */ []));
117
147
  // ===== OUTPUTS =====
118
148
  /** Fires whenever the panel opens or closes, emitting the new expanded state. */
119
149
  expandedChange = output();
@@ -175,12 +205,12 @@ class AccordionComponent {
175
205
  this.expandedChange.emit(expanded);
176
206
  }
177
207
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
178
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AccordionComponent, isStandalone: true, selector: "fk-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, leadingText: { classPropertyName: "leadingText", publicName: "leadingText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "leadingIconRef", first: true, predicate: FK_ACCORDION_LEADING_ICON, descendants: true, isSignal: true }, { propertyName: "chevronRef", first: true, predicate: FK_ACCORDION_CHEVRON, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"fk-accordion__header\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n @if (leadingIconRef()) {\n <span class=\"fk-accordion__leading-icon\">\n <ng-content select=\"[fkAccordionLeadingIcon]\" />\n </span>\n }\n\n <span class=\"fk-accordion__text\">\n @if (title()) {\n <span class=\"fk-accordion__title\">{{ title() }}</span>\n }\n\n @if (description()) {\n <span class=\"fk-accordion__description\">{{ description() }}</span>\n }\n </span>\n\n <span class=\"fk-accordion__trailing\">\n @if (leadingText()) {\n <span class=\"fk-accordion__leading-text\">{{ leadingText() }}</span>\n }\n\n @if (chevronRef()) {\n <ng-content select=\"[fkAccordionChevron]\" />\n } @else {\n <span\n class=\"fk-accordion__chevron\"\n [class.fk-accordion__chevron--open]=\"expanded()\"\n aria-hidden=\"true\"\n >\n <svg\n class=\"fk-accordion__chevron-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n }\n </span>\n</button>\n\n@if (expanded()) {\n <div\n class=\"fk-accordion__panel\"\n role=\"region\"\n [id]=\"panelId()\"\n [attr.aria-labelledby]=\"triggerId()\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block;color:var(--fk-accordion-color, var(--fk-color-text, #121926));border:var(--fk-accordion-border-width, 1px) solid var(--fk-accordion-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem))}.fk-accordion__header{display:flex;align-items:center;width:100%;padding:var(--fk-accordion-header-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-header-padding-inline, var(--fk-rhythm-4, 1rem));background:var(--fk-accordion-header-bg, transparent);border:none;border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem));font-family:inherit;color:inherit;text-align:left;cursor:pointer}.fk-accordion__header:hover:not(:disabled){background:var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa))}.fk-accordion__header:focus-visible{outline:none;box-shadow:var(--fk-accordion-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-accordion__header:disabled{cursor:not-allowed;opacity:.6}.fk-accordion__leading-icon{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:var(--fk-accordion-leading-icon-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.fk-accordion__title{font-size:var(--fk-accordion-title-font-size, var(--fk-typography-body-font-size, .9375rem));font-weight:var(--fk-accordion-title-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-title-color, var(--fk-color-text, #121926));line-height:1.4}.fk-accordion__description{margin-top:var(--fk-accordion-description-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-accordion-description-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-accordion-description-color, var(--fk-color-muted, #64748b));line-height:1.5}.fk-accordion__trailing{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:var(--fk-accordion-trailing-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__leading-text{margin-right:var(--fk-accordion-leading-text-gap, var(--fk-rhythm-2, .5rem));font-size:var(--fk-accordion-leading-text-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-accordion-leading-text-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-leading-text-color, var(--fk-color-muted, #64748b));letter-spacing:.02em}.fk-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--fk-accordion-chevron-color, var(--fk-color-muted, #64748b));transition:transform .15s ease}.fk-accordion__chevron--open{transform:rotate(180deg)}.fk-accordion__chevron-svg{display:block}.fk-accordion__panel{margin-top:var(--fk-accordion-panel-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-accordion-panel-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-panel-padding-inline, var(--fk-rhythm-4, 1rem));color:var(--fk-accordion-panel-color, var(--fk-color-text, #121926))}:host.fk-accordion--expanded .fk-accordion__header{background:var(--fk-accordion-header-bg-expanded, var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa)))}:host.fk-accordion--sm .fk-accordion__header{padding:var(--fk-accordion-sm-header-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-accordion-sm-header-padding-inline, var(--fk-rhythm-3, .75rem))}:host.fk-accordion--sm .fk-accordion__title{font-size:var(--fk-accordion-sm-title-font-size, var(--fk-typography-small-font-size, .8125rem))}:host.fk-accordion--sm .fk-accordion__description{font-size:var(--fk-accordion-sm-description-font-size, .75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
208
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AccordionComponent, isStandalone: true, selector: "fk-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, leadingText: { classPropertyName: "leadingText", publicName: "leadingText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "leadingIconRef", first: true, predicate: FK_ACCORDION_LEADING_ICON, descendants: true, isSignal: true }, { propertyName: "chevronRef", first: true, predicate: FK_ACCORDION_CHEVRON, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: FK_ACCORDION_TRAILING, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"fk-accordion__header\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n @if (leadingIconRef()) {\n <span class=\"fk-accordion__leading-icon\">\n <ng-content select=\"[fkAccordionLeadingIcon]\" />\n </span>\n }\n\n <span class=\"fk-accordion__text\">\n @if (title()) {\n <span class=\"fk-accordion__title\">{{ title() }}</span>\n }\n\n @if (description()) {\n <span class=\"fk-accordion__description\">{{ description() }}</span>\n }\n </span>\n\n <span class=\"fk-accordion__trailing\">\n @if (leadingText()) {\n <span class=\"fk-accordion__leading-text\">{{ leadingText() }}</span>\n }\n\n @if (trailingRef()) {\n <span class=\"fk-accordion__trailing-content\">\n <ng-content select=\"[fkAccordionTrailing]\" />\n </span>\n }\n\n @if (chevronRef()) {\n <ng-content select=\"[fkAccordionChevron]\" />\n } @else {\n <span\n class=\"fk-accordion__chevron\"\n [class.fk-accordion__chevron--open]=\"expanded()\"\n aria-hidden=\"true\"\n >\n <svg\n class=\"fk-accordion__chevron-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n }\n </span>\n</button>\n\n@if (expanded()) {\n <div\n class=\"fk-accordion__panel\"\n role=\"region\"\n [id]=\"panelId()\"\n [attr.aria-labelledby]=\"triggerId()\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block;color:var(--fk-accordion-color, var(--fk-color-text, #121926));border:var(--fk-accordion-border-width, 1px) solid var(--fk-accordion-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem))}.fk-accordion__header{display:flex;align-items:center;width:100%;padding:var(--fk-accordion-header-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-header-padding-inline, var(--fk-rhythm-4, 1rem));background:var(--fk-accordion-header-bg, transparent);border:none;border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem));font-family:inherit;color:inherit;text-align:left;cursor:pointer}.fk-accordion__header:hover:not(:disabled){background:var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa))}.fk-accordion__header:focus-visible{outline:none;box-shadow:var(--fk-accordion-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-accordion__header:disabled{cursor:not-allowed;opacity:.6}.fk-accordion__leading-icon{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:var(--fk-accordion-leading-icon-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.fk-accordion__title{font-size:var(--fk-accordion-title-font-size, var(--fk-typography-body-font-size, .9375rem));font-weight:var(--fk-accordion-title-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-title-color, var(--fk-color-text, #121926));line-height:1.4}.fk-accordion__description{margin-top:var(--fk-accordion-description-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-accordion-description-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-accordion-description-color, var(--fk-color-muted, #64748b));line-height:1.5}.fk-accordion__trailing{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:var(--fk-accordion-trailing-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__trailing-content{display:inline-flex;align-items:center;margin-right:var(--fk-accordion-trailing-content-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__leading-text{margin-right:var(--fk-accordion-leading-text-gap, var(--fk-rhythm-2, .5rem));font-size:var(--fk-accordion-leading-text-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-accordion-leading-text-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-leading-text-color, var(--fk-color-muted, #64748b));letter-spacing:.02em}.fk-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--fk-accordion-chevron-color, var(--fk-color-muted, #64748b));transition:transform .15s ease}.fk-accordion__chevron--open{transform:rotate(180deg)}.fk-accordion__chevron-svg{display:block}.fk-accordion__panel{margin-top:var(--fk-accordion-panel-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-accordion-panel-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-panel-padding-inline, var(--fk-rhythm-4, 1rem));color:var(--fk-accordion-panel-color, var(--fk-color-text, #121926))}:host.fk-accordion--expanded .fk-accordion__header{background:var(--fk-accordion-header-bg-expanded, var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa)))}:host.fk-accordion--sm .fk-accordion__header{padding:var(--fk-accordion-sm-header-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-accordion-sm-header-padding-inline, var(--fk-rhythm-3, .75rem))}:host.fk-accordion--sm .fk-accordion__title{font-size:var(--fk-accordion-sm-title-font-size, var(--fk-typography-small-font-size, .8125rem))}:host.fk-accordion--sm .fk-accordion__description{font-size:var(--fk-accordion-sm-description-font-size, .75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
179
209
  }
180
210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AccordionComponent, decorators: [{
181
211
  type: Component,
182
- args: [{ selector: 'fk-accordion', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"fk-accordion__header\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n @if (leadingIconRef()) {\n <span class=\"fk-accordion__leading-icon\">\n <ng-content select=\"[fkAccordionLeadingIcon]\" />\n </span>\n }\n\n <span class=\"fk-accordion__text\">\n @if (title()) {\n <span class=\"fk-accordion__title\">{{ title() }}</span>\n }\n\n @if (description()) {\n <span class=\"fk-accordion__description\">{{ description() }}</span>\n }\n </span>\n\n <span class=\"fk-accordion__trailing\">\n @if (leadingText()) {\n <span class=\"fk-accordion__leading-text\">{{ leadingText() }}</span>\n }\n\n @if (chevronRef()) {\n <ng-content select=\"[fkAccordionChevron]\" />\n } @else {\n <span\n class=\"fk-accordion__chevron\"\n [class.fk-accordion__chevron--open]=\"expanded()\"\n aria-hidden=\"true\"\n >\n <svg\n class=\"fk-accordion__chevron-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n }\n </span>\n</button>\n\n@if (expanded()) {\n <div\n class=\"fk-accordion__panel\"\n role=\"region\"\n [id]=\"panelId()\"\n [attr.aria-labelledby]=\"triggerId()\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block;color:var(--fk-accordion-color, var(--fk-color-text, #121926));border:var(--fk-accordion-border-width, 1px) solid var(--fk-accordion-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem))}.fk-accordion__header{display:flex;align-items:center;width:100%;padding:var(--fk-accordion-header-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-header-padding-inline, var(--fk-rhythm-4, 1rem));background:var(--fk-accordion-header-bg, transparent);border:none;border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem));font-family:inherit;color:inherit;text-align:left;cursor:pointer}.fk-accordion__header:hover:not(:disabled){background:var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa))}.fk-accordion__header:focus-visible{outline:none;box-shadow:var(--fk-accordion-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-accordion__header:disabled{cursor:not-allowed;opacity:.6}.fk-accordion__leading-icon{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:var(--fk-accordion-leading-icon-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.fk-accordion__title{font-size:var(--fk-accordion-title-font-size, var(--fk-typography-body-font-size, .9375rem));font-weight:var(--fk-accordion-title-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-title-color, var(--fk-color-text, #121926));line-height:1.4}.fk-accordion__description{margin-top:var(--fk-accordion-description-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-accordion-description-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-accordion-description-color, var(--fk-color-muted, #64748b));line-height:1.5}.fk-accordion__trailing{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:var(--fk-accordion-trailing-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__leading-text{margin-right:var(--fk-accordion-leading-text-gap, var(--fk-rhythm-2, .5rem));font-size:var(--fk-accordion-leading-text-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-accordion-leading-text-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-leading-text-color, var(--fk-color-muted, #64748b));letter-spacing:.02em}.fk-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--fk-accordion-chevron-color, var(--fk-color-muted, #64748b));transition:transform .15s ease}.fk-accordion__chevron--open{transform:rotate(180deg)}.fk-accordion__chevron-svg{display:block}.fk-accordion__panel{margin-top:var(--fk-accordion-panel-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-accordion-panel-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-panel-padding-inline, var(--fk-rhythm-4, 1rem));color:var(--fk-accordion-panel-color, var(--fk-color-text, #121926))}:host.fk-accordion--expanded .fk-accordion__header{background:var(--fk-accordion-header-bg-expanded, var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa)))}:host.fk-accordion--sm .fk-accordion__header{padding:var(--fk-accordion-sm-header-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-accordion-sm-header-padding-inline, var(--fk-rhythm-3, .75rem))}:host.fk-accordion--sm .fk-accordion__title{font-size:var(--fk-accordion-sm-title-font-size, var(--fk-typography-small-font-size, .8125rem))}:host.fk-accordion--sm .fk-accordion__description{font-size:var(--fk-accordion-sm-description-font-size, .75rem)}\n"] }]
183
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], leadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], leadingIconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_ACCORDION_LEADING_ICON), { isSignal: true }] }], chevronRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_ACCORDION_CHEVRON), { isSignal: true }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
212
+ args: [{ selector: 'fk-accordion', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"fk-accordion__header\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n @if (leadingIconRef()) {\n <span class=\"fk-accordion__leading-icon\">\n <ng-content select=\"[fkAccordionLeadingIcon]\" />\n </span>\n }\n\n <span class=\"fk-accordion__text\">\n @if (title()) {\n <span class=\"fk-accordion__title\">{{ title() }}</span>\n }\n\n @if (description()) {\n <span class=\"fk-accordion__description\">{{ description() }}</span>\n }\n </span>\n\n <span class=\"fk-accordion__trailing\">\n @if (leadingText()) {\n <span class=\"fk-accordion__leading-text\">{{ leadingText() }}</span>\n }\n\n @if (trailingRef()) {\n <span class=\"fk-accordion__trailing-content\">\n <ng-content select=\"[fkAccordionTrailing]\" />\n </span>\n }\n\n @if (chevronRef()) {\n <ng-content select=\"[fkAccordionChevron]\" />\n } @else {\n <span\n class=\"fk-accordion__chevron\"\n [class.fk-accordion__chevron--open]=\"expanded()\"\n aria-hidden=\"true\"\n >\n <svg\n class=\"fk-accordion__chevron-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n }\n </span>\n</button>\n\n@if (expanded()) {\n <div\n class=\"fk-accordion__panel\"\n role=\"region\"\n [id]=\"panelId()\"\n [attr.aria-labelledby]=\"triggerId()\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block;color:var(--fk-accordion-color, var(--fk-color-text, #121926));border:var(--fk-accordion-border-width, 1px) solid var(--fk-accordion-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem))}.fk-accordion__header{display:flex;align-items:center;width:100%;padding:var(--fk-accordion-header-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-header-padding-inline, var(--fk-rhythm-4, 1rem));background:var(--fk-accordion-header-bg, transparent);border:none;border-radius:var(--fk-accordion-radius, var(--fk-radius-md, .375rem));font-family:inherit;color:inherit;text-align:left;cursor:pointer}.fk-accordion__header:hover:not(:disabled){background:var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa))}.fk-accordion__header:focus-visible{outline:none;box-shadow:var(--fk-accordion-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-accordion__header:disabled{cursor:not-allowed;opacity:.6}.fk-accordion__leading-icon{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:var(--fk-accordion-leading-icon-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.fk-accordion__title{font-size:var(--fk-accordion-title-font-size, var(--fk-typography-body-font-size, .9375rem));font-weight:var(--fk-accordion-title-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-title-color, var(--fk-color-text, #121926));line-height:1.4}.fk-accordion__description{margin-top:var(--fk-accordion-description-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-accordion-description-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-accordion-description-color, var(--fk-color-muted, #64748b));line-height:1.5}.fk-accordion__trailing{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:var(--fk-accordion-trailing-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__trailing-content{display:inline-flex;align-items:center;margin-right:var(--fk-accordion-trailing-content-gap, var(--fk-rhythm-3, .75rem))}.fk-accordion__leading-text{margin-right:var(--fk-accordion-leading-text-gap, var(--fk-rhythm-2, .5rem));font-size:var(--fk-accordion-leading-text-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-accordion-leading-text-font-weight, var(--fk-font-weight-semibold, 600));color:var(--fk-accordion-leading-text-color, var(--fk-color-muted, #64748b));letter-spacing:.02em}.fk-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--fk-accordion-chevron-color, var(--fk-color-muted, #64748b));transition:transform .15s ease}.fk-accordion__chevron--open{transform:rotate(180deg)}.fk-accordion__chevron-svg{display:block}.fk-accordion__panel{margin-top:var(--fk-accordion-panel-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-accordion-panel-padding-block, var(--fk-rhythm-3, .75rem)) var(--fk-accordion-panel-padding-inline, var(--fk-rhythm-4, 1rem));color:var(--fk-accordion-panel-color, var(--fk-color-text, #121926))}:host.fk-accordion--expanded .fk-accordion__header{background:var(--fk-accordion-header-bg-expanded, var(--fk-accordion-header-bg-hover, var(--fk-color-surface-muted, #f5f7fa)))}:host.fk-accordion--sm .fk-accordion__header{padding:var(--fk-accordion-sm-header-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-accordion-sm-header-padding-inline, var(--fk-rhythm-3, .75rem))}:host.fk-accordion--sm .fk-accordion__title{font-size:var(--fk-accordion-sm-title-font-size, var(--fk-typography-small-font-size, .8125rem))}:host.fk-accordion--sm .fk-accordion__description{font-size:var(--fk-accordion-sm-description-font-size, .75rem)}\n"] }]
213
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], leadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], leadingIconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_ACCORDION_LEADING_ICON), { isSignal: true }] }], chevronRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_ACCORDION_CHEVRON), { isSignal: true }] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_ACCORDION_TRAILING), { isSignal: true }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
184
214
  type: HostBinding,
185
215
  args: ['class']
186
216
  }] } });
@@ -210,5 +240,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
210
240
  * Generated bundle index. Do not edit.
211
241
  */
212
242
 
213
- export { AccordionComponent, AccordionGroupComponent, AccordionGroupCoordinator, FK_ACCORDION_CHEVRON, FK_ACCORDION_LEADING_ICON, FkAccordionChevronDirective, FkAccordionLeadingIconDirective };
243
+ export { AccordionComponent, AccordionGroupComponent, AccordionGroupCoordinator, FK_ACCORDION_CHEVRON, FK_ACCORDION_LEADING_ICON, FK_ACCORDION_TRAILING, FkAccordionChevronDirective, FkAccordionLeadingIconDirective, FkAccordionTrailingDirective };
214
244
  //# sourceMappingURL=frame-kit-ui-ng-ui-accordion.mjs.map
package/fesm2022/frame-kit-ui-ng-ui-accordion.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"frame-kit-ui-ng-ui-accordion.mjs","sources":["../../../../packages/ui-ng/ui/accordion/accordion-chevron.directive.ts","../../../../packages/ui-ng/ui/accordion/accordion-group.service.ts","../../../../packages/ui-ng/ui/accordion/accordion-leading-icon.directive.ts","../../../../packages/ui-ng/ui/accordion/accordion.component.ts","../../../../packages/ui-ng/ui/accordion/accordion.component.html","../../../../packages/ui-ng/ui/accordion/accordion-group.component.ts","../../../../packages/ui-ng/ui/accordion/accordion-group.component.html","../../../../packages/ui-ng/ui/accordion/frame-kit-ui-ng-ui-accordion.ts"],"sourcesContent":["import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_ACCORDION_CHEVRON =\n new InjectionToken<FkAccordionChevronDirective>('FK_ACCORDION_CHEVRON');\n\n@Directive({\n selector: '[fkAccordionChevron]',\n standalone: true,\n providers: [\n { provide: FK_ACCORDION_CHEVRON, useExisting: FkAccordionChevronDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkAccordionChevronDirective {}\n","import { Injectable } from '@angular/core';\n\nimport type { AccordionComponent } from './accordion.component';\n\n/**\n * Coordinator scoped to a single `<fk-accordion-group>`. Any\n * `<fk-accordion>` rendered inside a group picks this up via DI and\n * reports its toggle state. The coordinator enforces single-open:\n * when a new accordion opens, the previously active one is collapsed.\n */\n@Injectable()\nexport class AccordionGroupCoordinator {\n private active: AccordionComponent | null = null;\n\n register(accordion: AccordionComponent): void {\n if (accordion.expanded()) {\n if (this.active && this.active !== accordion) {\n accordion.setExpanded(false);\n } else {\n this.active = accordion;\n }\n }\n }\n\n unregister(accordion: AccordionComponent): void {\n if (this.active === accordion) {\n this.active = null;\n }\n }\n\n notifyExpandedChange(\n accordion: AccordionComponent,\n nextExpanded: boolean,\n ): void {\n if (nextExpanded) {\n const prev = this.active;\n\n this.active = accordion;\n\n if (prev && prev !== accordion) {\n prev.setExpanded(false);\n }\n\n return;\n }\n\n if (this.active === accordion) {\n this.active = null;\n }\n }\n}\n","import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_ACCORDION_LEADING_ICON =\n new InjectionToken<FkAccordionLeadingIconDirective>(\n 'FK_ACCORDION_LEADING_ICON',\n );\n\n@Directive({\n selector: '[fkAccordionLeadingIcon]',\n standalone: true,\n providers: [\n {\n provide: FK_ACCORDION_LEADING_ICON,\n useExisting: FkAccordionLeadingIconDirective,\n },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkAccordionLeadingIconDirective {}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n DestroyRef,\n HostBinding,\n inject,\n input,\n linkedSignal,\n OnInit,\n output,\n} from '@angular/core';\n\nimport type { AccordionSize } from './accordion.types';\nimport { FK_ACCORDION_CHEVRON } from './accordion-chevron.directive';\nimport { AccordionGroupCoordinator } from './accordion-group.service';\nimport { FK_ACCORDION_LEADING_ICON } from './accordion-leading-icon.directive';\n\nlet uid = 0;\n\n@Component({\n selector: 'fk-accordion',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './accordion.component.html',\n styleUrl: './accordion.component.scss',\n})\nexport class AccordionComponent implements OnInit {\n private readonly group = inject(AccordionGroupCoordinator, {\n optional: true,\n });\n\n private readonly destroyRef = inject(DestroyRef);\n\n // ===== INPUTS =====\n /** Heading text shown in the trigger row. */\n readonly title = input<string>('');\n /** Optional supporting text rendered beneath the title. */\n readonly description = input<string | null>(null);\n /** Short label rendered to the leading side of the trigger row. */\n readonly leadingText = input<string | null>(null);\n /** Controls the size variant of the accordion trigger and content. */\n readonly size = input<AccordionSize>('md');\n /** When true the accordion cannot be opened or closed by the user. */\n readonly disabled = input<boolean>(false);\n /** Whether the panel starts in the expanded state on first render. */\n readonly defaultExpanded = input<boolean>(false);\n\n // ===== CONTENT CHILDREN =====\n readonly leadingIconRef = contentChild(FK_ACCORDION_LEADING_ICON);\n readonly chevronRef = contentChild(FK_ACCORDION_CHEVRON);\n\n // ===== OUTPUTS =====\n /** Fires whenever the panel opens or closes, emitting the new expanded state. */\n readonly expandedChange = output<boolean>();\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== INTERNAL STATE =====\n private readonly _expanded = linkedSignal<boolean>(() =>\n this.defaultExpanded(),\n );\n\n private readonly uid = ++uid;\n\n readonly expanded = computed(() => this._expanded());\n\n protected readonly triggerId = computed(\n () => `fk-accordion-${this.uid}-trigger`,\n );\n\n protected readonly panelId = computed(() => `fk-accordion-${this.uid}-panel`);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return [\n 'fk-accordion',\n `fk-accordion--${this.size()}`,\n this._expanded() ? 'fk-accordion--expanded' : '',\n this.disabled() ? 'fk-accordion--disabled' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n\n // ===== LIFECYCLE =====\n ngOnInit(): void {\n if (!this.group) {\n return;\n }\n\n this.group.register(this);\n this.destroyRef.onDestroy(() => this.group?.unregister(this));\n }\n\n // ===== ACTIONS =====\n /** Toggles the expanded state if the accordion is not disabled. */\n toggle(): void {\n if (this.disabled()) {\n return;\n }\n\n const next = !this._expanded();\n\n this._expanded.set(next);\n this.expandedChange.emit(next);\n this.group?.notifyExpandedChange(this, next);\n }\n\n /**\n * Set the expanded state imperatively. Reserved for\n * `AccordionGroupCoordinator` to force-collapse siblings when a new\n * accordion opens within the same group. Does not notify the\n * coordinator (to avoid re-entrance loops).\n */\n setExpanded(expanded: boolean): void {\n if (this._expanded() === expanded) {\n return;\n }\n\n this._expanded.set(expanded);\n this.expandedChange.emit(expanded);\n }\n}\n","<button\n type=\"button\"\n class=\"fk-accordion__header\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n @if (leadingIconRef()) {\n <span class=\"fk-accordion__leading-icon\">\n <ng-content select=\"[fkAccordionLeadingIcon]\" />\n </span>\n }\n\n <span class=\"fk-accordion__text\">\n @if (title()) {\n <span class=\"fk-accordion__title\">{{ title() }}</span>\n }\n\n @if (description()) {\n <span class=\"fk-accordion__description\">{{ description() }}</span>\n }\n </span>\n\n <span class=\"fk-accordion__trailing\">\n @if (leadingText()) {\n <span class=\"fk-accordion__leading-text\">{{ leadingText() }}</span>\n }\n\n @if (chevronRef()) {\n <ng-content select=\"[fkAccordionChevron]\" />\n } @else {\n <span\n class=\"fk-accordion__chevron\"\n [class.fk-accordion__chevron--open]=\"expanded()\"\n aria-hidden=\"true\"\n >\n <svg\n class=\"fk-accordion__chevron-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n }\n </span>\n</button>\n\n@if (expanded()) {\n <div\n class=\"fk-accordion__panel\"\n role=\"region\"\n [id]=\"panelId()\"\n [attr.aria-labelledby]=\"triggerId()\"\n >\n <ng-content />\n </div>\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport { AccordionGroupCoordinator } from './accordion-group.service';\n\n@Component({\n selector: 'fk-accordion-group',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [AccordionGroupCoordinator],\n templateUrl: './accordion-group.component.html',\n styleUrl: './accordion-group.component.scss',\n})\nexport class AccordionGroupComponent {\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-accordion-group', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n}\n","<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"frame-kit-ui-ng-ui-accordion.mjs","sources":["../../../../packages/ui-ng/ui/accordion/accordion-chevron.directive.ts","../../../../packages/ui-ng/ui/accordion/accordion-group.service.ts","../../../../packages/ui-ng/ui/accordion/accordion-leading-icon.directive.ts","../../../../packages/ui-ng/ui/accordion/accordion-trailing.directive.ts","../../../../packages/ui-ng/ui/accordion/accordion.component.ts","../../../../packages/ui-ng/ui/accordion/accordion.component.html","../../../../packages/ui-ng/ui/accordion/accordion-group.component.ts","../../../../packages/ui-ng/ui/accordion/accordion-group.component.html","../../../../packages/ui-ng/ui/accordion/frame-kit-ui-ng-ui-accordion.ts"],"sourcesContent":["import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_ACCORDION_CHEVRON =\n new InjectionToken<FkAccordionChevronDirective>('FK_ACCORDION_CHEVRON');\n\n@Directive({\n selector: '[fkAccordionChevron]',\n standalone: true,\n providers: [\n { provide: FK_ACCORDION_CHEVRON, useExisting: FkAccordionChevronDirective },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkAccordionChevronDirective {}\n","import { Injectable } from '@angular/core';\n\nimport type { AccordionComponent } from './accordion.component';\n\n/**\n * Coordinator scoped to a single `<fk-accordion-group>`. Any\n * `<fk-accordion>` rendered inside a group picks this up via DI and\n * reports its toggle state. The coordinator enforces single-open:\n * when a new accordion opens, the previously active one is collapsed.\n */\n@Injectable()\nexport class AccordionGroupCoordinator {\n private active: AccordionComponent | null = null;\n\n register(accordion: AccordionComponent): void {\n if (accordion.expanded()) {\n if (this.active && this.active !== accordion) {\n accordion.setExpanded(false);\n } else {\n this.active = accordion;\n }\n }\n }\n\n unregister(accordion: AccordionComponent): void {\n if (this.active === accordion) {\n this.active = null;\n }\n }\n\n notifyExpandedChange(\n accordion: AccordionComponent,\n nextExpanded: boolean,\n ): void {\n if (nextExpanded) {\n const prev = this.active;\n\n this.active = accordion;\n\n if (prev && prev !== accordion) {\n prev.setExpanded(false);\n }\n\n return;\n }\n\n if (this.active === accordion) {\n this.active = null;\n }\n }\n}\n","import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_ACCORDION_LEADING_ICON =\n new InjectionToken<FkAccordionLeadingIconDirective>(\n 'FK_ACCORDION_LEADING_ICON',\n );\n\n@Directive({\n selector: '[fkAccordionLeadingIcon]',\n standalone: true,\n providers: [\n {\n provide: FK_ACCORDION_LEADING_ICON,\n useExisting: FkAccordionLeadingIconDirective,\n },\n ],\n host: {\n 'aria-hidden': 'true',\n },\n})\nexport class FkAccordionLeadingIconDirective {}\n","import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_ACCORDION_TRAILING =\n new InjectionToken<FkAccordionTrailingDirective>('FK_ACCORDION_TRAILING');\n\n/**\n * Projects content into the accordion trigger's trailing region, between the\n * optional leading text and the chevron — a right-aligned slot for a badge,\n * count, or status pill.\n */\n@Directive({\n selector: '[fkAccordionTrailing]',\n standalone: true,\n providers: [\n {\n provide: FK_ACCORDION_TRAILING,\n useExisting: FkAccordionTrailingDirective,\n },\n ],\n})\nexport class FkAccordionTrailingDirective {}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n DestroyRef,\n HostBinding,\n inject,\n input,\n linkedSignal,\n OnInit,\n output,\n} from '@angular/core';\n\nimport type { AccordionSize } from './accordion.types';\nimport { FK_ACCORDION_CHEVRON } from './accordion-chevron.directive';\nimport { AccordionGroupCoordinator } from './accordion-group.service';\nimport { FK_ACCORDION_LEADING_ICON } from './accordion-leading-icon.directive';\nimport { FK_ACCORDION_TRAILING } from './accordion-trailing.directive';\n\nlet uid = 0;\n\n@Component({\n selector: 'fk-accordion',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './accordion.component.html',\n styleUrl: './accordion.component.scss',\n})\nexport class AccordionComponent implements OnInit {\n private readonly group = inject(AccordionGroupCoordinator, {\n optional: true,\n });\n\n private readonly destroyRef = inject(DestroyRef);\n\n // ===== INPUTS =====\n /** Heading text shown in the trigger row. */\n readonly title = input<string>('');\n /** Optional supporting text rendered beneath the title. */\n readonly description = input<string | null>(null);\n /** Short label rendered to the leading side of the trigger row. */\n readonly leadingText = input<string | null>(null);\n /** Controls the size variant of the accordion trigger and content. */\n readonly size = input<AccordionSize>('md');\n /** When true the accordion cannot be opened or closed by the user. */\n readonly disabled = input<boolean>(false);\n /** Whether the panel starts in the expanded state on first render. */\n readonly defaultExpanded = input<boolean>(false);\n\n // ===== CONTENT CHILDREN =====\n readonly leadingIconRef = contentChild(FK_ACCORDION_LEADING_ICON);\n readonly chevronRef = contentChild(FK_ACCORDION_CHEVRON);\n readonly trailingRef = contentChild(FK_ACCORDION_TRAILING);\n\n // ===== OUTPUTS =====\n /** Fires whenever the panel opens or closes, emitting the new expanded state. */\n readonly expandedChange = output<boolean>();\n\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n readonly id = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null);\n\n // ===== INTERNAL STATE =====\n private readonly _expanded = linkedSignal<boolean>(() =>\n this.defaultExpanded(),\n );\n\n private readonly uid = ++uid;\n\n readonly expanded = computed(() => this._expanded());\n\n protected readonly triggerId = computed(\n () => `fk-accordion-${this.uid}-trigger`,\n );\n\n protected readonly panelId = computed(() => `fk-accordion-${this.uid}-panel`);\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return [\n 'fk-accordion',\n `fk-accordion--${this.size()}`,\n this._expanded() ? 'fk-accordion--expanded' : '',\n this.disabled() ? 'fk-accordion--disabled' : '',\n this.className(),\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n\n // ===== LIFECYCLE =====\n ngOnInit(): void {\n if (!this.group) {\n return;\n }\n\n this.group.register(this);\n this.destroyRef.onDestroy(() => this.group?.unregister(this));\n }\n\n // ===== ACTIONS =====\n /** Toggles the expanded state if the accordion is not disabled. */\n toggle(): void {\n if (this.disabled()) {\n return;\n }\n\n const next = !this._expanded();\n\n this._expanded.set(next);\n this.expandedChange.emit(next);\n this.group?.notifyExpandedChange(this, next);\n }\n\n /**\n * Set the expanded state imperatively. Reserved for\n * `AccordionGroupCoordinator` to force-collapse siblings when a new\n * accordion opens within the same group. Does not notify the\n * coordinator (to avoid re-entrance loops).\n */\n setExpanded(expanded: boolean): void {\n if (this._expanded() === expanded) {\n return;\n }\n\n this._expanded.set(expanded);\n this.expandedChange.emit(expanded);\n }\n}\n","<button\n type=\"button\"\n class=\"fk-accordion__header\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n @if (leadingIconRef()) {\n <span class=\"fk-accordion__leading-icon\">\n <ng-content select=\"[fkAccordionLeadingIcon]\" />\n </span>\n }\n\n <span class=\"fk-accordion__text\">\n @if (title()) {\n <span class=\"fk-accordion__title\">{{ title() }}</span>\n }\n\n @if (description()) {\n <span class=\"fk-accordion__description\">{{ description() }}</span>\n }\n </span>\n\n <span class=\"fk-accordion__trailing\">\n @if (leadingText()) {\n <span class=\"fk-accordion__leading-text\">{{ leadingText() }}</span>\n }\n\n @if (trailingRef()) {\n <span class=\"fk-accordion__trailing-content\">\n <ng-content select=\"[fkAccordionTrailing]\" />\n </span>\n }\n\n @if (chevronRef()) {\n <ng-content select=\"[fkAccordionChevron]\" />\n } @else {\n <span\n class=\"fk-accordion__chevron\"\n [class.fk-accordion__chevron--open]=\"expanded()\"\n aria-hidden=\"true\"\n >\n <svg\n class=\"fk-accordion__chevron-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </span>\n }\n </span>\n</button>\n\n@if (expanded()) {\n <div\n class=\"fk-accordion__panel\"\n role=\"region\"\n [id]=\"panelId()\"\n [attr.aria-labelledby]=\"triggerId()\"\n >\n <ng-content />\n </div>\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n HostBinding,\n input,\n} from '@angular/core';\n\nimport { AccordionGroupCoordinator } from './accordion-group.service';\n\n@Component({\n selector: 'fk-accordion-group',\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [AccordionGroupCoordinator],\n templateUrl: './accordion-group.component.html',\n styleUrl: './accordion-group.component.scss',\n})\nexport class AccordionGroupComponent {\n // ===== BASE PROPS =====\n readonly className = input<string>('');\n\n // ===== COMPUTED =====\n readonly classes = computed(() => {\n return ['fk-accordion-group', this.className()].filter(Boolean).join(' ');\n });\n\n @HostBinding('class')\n get hostClass(): string {\n return this.classes();\n }\n}\n","<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/layouts/content-split/README.md CHANGED
@@ -8,13 +8,14 @@ A container-aware split-pane layout component for Angular. In wide containers, r
8
8
 
9
9
  ### Inputs
10
10
 
11
- | Input | Type | Default | Description |
12
- | ------------ | ---------------- | --------- | ------------------------------------------------- |
13
- | `leftWidth` | `string` | `'280px'` | CSS width of the left panel |
14
- | `railWidth` | `string` | `'64px'` | Width of the rail strip in narrow mode |
15
- | `breakpoint` | `number` | `700` | Host width (px) below which drawer mode activates |
16
- | `collapsed` | `model<boolean>` | `false` | Two-way binding for drawer open/closed state |
17
- | `className` | `string` | `''` | Additional CSS classes for the host |
11
+ | Input | Type | Default | Description |
12
+ | ------------ | ---------------- | --------- | -------------------------------------------------------------------- |
13
+ | `leftWidth` | `string` | `'280px'` | CSS width of the left panel |
14
+ | `railWidth` | `string` | `'64px'` | Width of the rail strip in narrow mode |
15
+ | `breakpoint` | `number` | `700` | Host width (px) below which drawer mode activates |
16
+ | `maxWidth` | `string \| null` | `null` | Caps the layout at this width and centers it; unset fills full width |
17
+ | `collapsed` | `model<boolean>` | `false` | Two-way binding for drawer open/closed state |
18
+ | `className` | `string` | `''` | Additional CSS classes for the host |
18
19
 
19
20
  ### Methods
20
21
 
@@ -139,6 +140,7 @@ export class ExampleComponent {}
139
140
  | -------------------------------------------- | ---------------------------------- | ---------------------------------------- |
140
141
  | `--fk-content-split-left-width` | `280px` | Left panel width (capped in narrow mode) |
141
142
  | `--fk-content-split-rail-width` | `64px` | Rail strip width in narrow mode |
143
+ | `--fk-content-split-max-width` | `none` | Caps + centers the whole layout |
142
144
  | `--fk-content-split-left-bg` | `var(--fk-color-surface)` | Left panel / rail background |
143
145
  | `--fk-content-split-left-border` | `1px solid var(--fk-color-border)` | Left panel / rail border |
144
146
  | `--fk-content-split-overlay-bg` | `rgba(0, 0, 0, 0.5)` | Overlay backdrop color |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frame-kit/ui-ng",
3
- "version": "0.1.12",
3
+ "version": "0.1.14",
4
4
  "description": "Style-agnostic, token-driven Angular UI component library for FrameKit.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/types/frame-kit-ui-ng-layouts-content-split.d.ts CHANGED
@@ -14,6 +14,12 @@ declare class FkContentSplitComponent {
14
14
  readonly railWidth: _angular_core.InputSignal<string>;
15
15
  /** Host element pixel width below which the layout switches to narrow mode. */
16
16
  readonly breakpoint: _angular_core.InputSignal<number>;
17
+ /**
18
+ * Optional CSS max-width for the layout. When set, the split is capped at
19
+ * this width and centered in its container (via auto inline margins);
20
+ * unset (default), it fills the full available width as before.
21
+ */
22
+ readonly maxWidth: _angular_core.InputSignal<string | null>;
17
23
  /** Two-way binding for the collapsed state of the left panel. */
18
24
  readonly collapsed: _angular_core.ModelSignal<boolean>;
19
25
  readonly layout: _angular_core.WritableSignal<ContentSplitLayout>;
@@ -26,6 +32,7 @@ declare class FkContentSplitComponent {
26
32
  get hostClass(): string;
27
33
  get hostLeftWidth(): string;
28
34
  get hostRailWidth(): string;
35
+ get hostMaxWidth(): string | null;
29
36
  constructor();
30
37
  /** Expand the left panel. */
31
38
  open(): void;
@@ -36,7 +43,7 @@ declare class FkContentSplitComponent {
36
43
  /** Dismiss the left panel overlay on narrow viewports (alias for `close`). */
37
44
  dismiss(): void;
38
45
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkContentSplitComponent, never>;
39
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkContentSplitComponent, "fk-content-split", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "leftWidth": { "alias": "leftWidth"; "required": false; "isSignal": true; }; "railWidth": { "alias": "railWidth"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[contentSplitLeft]", "[contentSplitToggleIcon]", "[contentSplitRight]"], true, never>;
46
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkContentSplitComponent, "fk-content-split", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "leftWidth": { "alias": "leftWidth"; "required": false; "isSignal": true; }; "railWidth": { "alias": "railWidth"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[contentSplitLeft]", "[contentSplitToggleIcon]", "[contentSplitRight]"], true, never>;
40
47
  }
41
48
 
42
49
  export { FkContentSplitComponent };
package/types/frame-kit-ui-ng-ui-accordion.d.ts CHANGED
@@ -21,6 +21,7 @@ declare class AccordionComponent implements OnInit {
21
21
  readonly defaultExpanded: _angular_core.InputSignal<boolean>;
22
22
  readonly leadingIconRef: _angular_core.Signal<_frame_kit_ui_ng_ui_accordion.FkAccordionLeadingIconDirective | undefined>;
23
23
  readonly chevronRef: _angular_core.Signal<_frame_kit_ui_ng_ui_accordion.FkAccordionChevronDirective | undefined>;
24
+ readonly trailingRef: _angular_core.Signal<_frame_kit_ui_ng_ui_accordion.FkAccordionTrailingDirective | undefined>;
24
25
  /** Fires whenever the panel opens or closes, emitting the new expanded state. */
25
26
  readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
26
27
  readonly className: _angular_core.InputSignal<string>;
@@ -44,7 +45,7 @@ declare class AccordionComponent implements OnInit {
44
45
  */
45
46
  setExpanded(expanded: boolean): void;
46
47
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
47
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "fk-accordion", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "leadingText": { "alias": "leadingText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, ["leadingIconRef", "chevronRef"], ["[fkAccordionLeadingIcon]", "[fkAccordionChevron]", "*"], true, never>;
48
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "fk-accordion", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "leadingText": { "alias": "leadingText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, ["leadingIconRef", "chevronRef", "trailingRef"], ["[fkAccordionLeadingIcon]", "[fkAccordionTrailing]", "[fkAccordionChevron]", "*"], true, never>;
48
49
  }
49
50
 
50
51
  declare const FK_ACCORDION_CHEVRON: InjectionToken<FkAccordionChevronDirective>;
@@ -82,5 +83,16 @@ declare class FkAccordionLeadingIconDirective {
82
83
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkAccordionLeadingIconDirective, "[fkAccordionLeadingIcon]", never, {}, {}, never, never, true, never>;
83
84
  }
84
85
 
85
- export { AccordionComponent, AccordionGroupComponent, AccordionGroupCoordinator, FK_ACCORDION_CHEVRON, FK_ACCORDION_LEADING_ICON, FkAccordionChevronDirective, FkAccordionLeadingIconDirective };
86
+ declare const FK_ACCORDION_TRAILING: InjectionToken<FkAccordionTrailingDirective>;
87
+ /**
88
+ * Projects content into the accordion trigger's trailing region, between the
89
+ * optional leading text and the chevron — a right-aligned slot for a badge,
90
+ * count, or status pill.
91
+ */
92
+ declare class FkAccordionTrailingDirective {
93
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkAccordionTrailingDirective, never>;
94
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkAccordionTrailingDirective, "[fkAccordionTrailing]", never, {}, {}, never, never, true, never>;
95
+ }
96
+
97
+ export { AccordionComponent, AccordionGroupComponent, AccordionGroupCoordinator, FK_ACCORDION_CHEVRON, FK_ACCORDION_LEADING_ICON, FK_ACCORDION_TRAILING, FkAccordionChevronDirective, FkAccordionLeadingIconDirective, FkAccordionTrailingDirective };
86
98
  export type { AccordionSize };
package/ui/accordion/README.md CHANGED
@@ -26,15 +26,17 @@ A token-driven accordion/disclosure component for collapsible sections. A single
26
26
 
27
27
  ### Content
28
28
 
29
- Three projection targets:
29
+ Four projection targets:
30
30
 
31
31
  - **Default slot** — panel body (rendered only while expanded).
32
32
  - **`[fkAccordionLeadingIcon]`** — icon slot before the title/description stack.
33
+ - **`[fkAccordionTrailing]`** — trailing region between the optional leading text and the chevron; a right-aligned slot for a badge, count, or status pill.
33
34
  - **`[fkAccordionChevron]`** — replaces the default chevron SVG.
34
35
 
35
36
  ```html
36
37
  <fk-accordion title="API key" description="Management API key" leadingText="Scopes">
37
38
  <fk-icon fkAccordionLeadingIcon name="law-shield" size="md" />
39
+ <fk-badge fkAccordionTrailing>3 / 5</fk-badge>
38
40
  <p>read:users, write:users</p>
39
41
  </fk-accordion>
40
42
  ```