@kaufmann-lab/ui 0.1.15 → 0.1.16
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.
|
@@ -7428,11 +7428,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
7428
7428
|
*/
|
|
7429
7429
|
class SectionNav {
|
|
7430
7430
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SectionNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: SectionNav, isStandalone: true, selector: "kf-section-nav", ngImport: i0, template: "<div class=\"kf-section-nav\">\n <ng-content />\n</div>\n", styles: [":host{display:block}.kf-section-nav{display:grid;grid-template-columns:minmax(220px,280px) 1fr;column-gap:var(--kf-space-lg);align-items:start}@media(max-width:1023px){.kf-section-nav{display:flex;flex-direction:column;gap:var(--kf-space-sm);align-items:stretch}}\n"] });
|
|
7431
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: SectionNav, isStandalone: true, selector: "kf-section-nav", ngImport: i0, template: "<div class=\"kf-section-nav\">\n <ng-content />\n</div>\n", styles: [":host{display:block}.kf-section-nav{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);column-gap:var(--kf-space-lg);align-items:start}@media(max-width:1023px){.kf-section-nav{display:flex;flex-direction:column;gap:var(--kf-space-sm);align-items:stretch}}\n"] });
|
|
7432
7432
|
}
|
|
7433
7433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SectionNav, decorators: [{
|
|
7434
7434
|
type: Component,
|
|
7435
|
-
args: [{ selector: 'kf-section-nav', template: "<div class=\"kf-section-nav\">\n <ng-content />\n</div>\n", styles: [":host{display:block}.kf-section-nav{display:grid;grid-template-columns:minmax(220px,280px) 1fr;column-gap:var(--kf-space-lg);align-items:start}@media(max-width:1023px){.kf-section-nav{display:flex;flex-direction:column;gap:var(--kf-space-sm);align-items:stretch}}\n"] }]
|
|
7435
|
+
args: [{ selector: 'kf-section-nav', template: "<div class=\"kf-section-nav\">\n <ng-content />\n</div>\n", styles: [":host{display:block}.kf-section-nav{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);column-gap:var(--kf-space-lg);align-items:start}@media(max-width:1023px){.kf-section-nav{display:flex;flex-direction:column;gap:var(--kf-space-sm);align-items:stretch}}\n"] }]
|
|
7436
7436
|
}] });
|
|
7437
7437
|
|
|
7438
7438
|
/**
|
|
@@ -7486,11 +7486,11 @@ class SectionNavItem {
|
|
|
7486
7486
|
this.subsectionSelected.emit(key);
|
|
7487
7487
|
}
|
|
7488
7488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SectionNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SectionNavItem, isStandalone: true, selector: "kf-section-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, subsections: { classPropertyName: "subsections", publicName: "subsections", isSignal: true, isRequired: false, transformFunction: null }, activeSubsection: { classPropertyName: "activeSubsection", publicName: "activeSubsection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", subsectionSelected: "subsectionSelected" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"kf-section-nav-item__header\"\n [class.kf-section-nav-item__header--active]=\"active()\"\n [attr.aria-expanded]=\"active()\"\n (click)=\"toggled.emit()\"\n>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--desktop\"\n name=\"chevron-right\"\n size=\"sm\"\n />\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-section-nav-item__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n <span class=\"kf-section-nav-item__label\">{{ label() }}</span>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--mobile\"\n name=\"chevron-down\"\n size=\"sm\"\n />\n</button>\n\n@if (showSubsections()) {\n <div class=\"kf-section-nav-item__subsections\" role=\"group\" [attr.aria-label]=\"label()\">\n @for (sub of subsections(); track sub.key) {\n <button\n type=\"button\"\n class=\"kf-section-nav-item__subsection\"\n [class.kf-section-nav-item__subsection--active]=\"activeSubsection() === sub.key\"\n [disabled]=\"!!sub.disabled\"\n [attr.aria-current]=\"activeSubsection() === sub.key ? 'true' : null\"\n (click)=\"onSubsectionClick(sub.key, sub.disabled, $event)\"\n >\n <kf-icon [name]=\"sub.icon\" size=\"sm\" />\n <span>{{ sub.label }}</span>\n </button>\n }\n </div>\n}\n\n<div class=\"kf-section-nav-item__content\" [hidden]=\"!active()\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.kf-section-nav-item__header{grid-column:1;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;font:inherit;font-weight:600;color:var(--kf-color-text);background:none;border:none;border-radius:var(--kf-radius-sm);padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__header:hover:not(.kf-section-nav-item__header--active){background:var(--kf-color-surface)}.kf-section-nav-item__header:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__header--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__icon{flex:none}.kf-section-nav-item__label{flex:1}.kf-section-nav-item__chevron{flex:none;color:var(--kf-color-text-muted)}.kf-section-nav-item__header--active .kf-section-nav-item__icon,.kf-section-nav-item__header--active .kf-section-nav-item__chevron{color:var(--kf-color-primary-active)}.kf-section-nav-item__chevron--mobile{display:none}.kf-section-nav-item__subsections{grid-column:1;display:flex;flex-direction:column;gap:2px;margin:2px 0 var(--kf-space-xs) var(--kf-space-lg)}.kf-section-nav-item__subsection{display:flex;align-items:center;gap:var(--kf-space-sm);border:none;border-radius:var(--kf-radius-sm);background:none;color:var(--kf-color-text-muted);font:inherit;font-size:.875rem;font-weight:600;padding:var(--kf-space-xs) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__subsection:hover:not(.kf-section-nav-item__subsection--active):not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-text)}.kf-section-nav-item__subsection:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__subsection:disabled{opacity:.5;cursor:not-allowed}.kf-section-nav-item__subsection--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__content{grid-column:2;grid-row:1/span 20;align-self:start;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white)}@media(max-width:1023px){:host{display:block;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-section-nav-item__header{justify-content:space-between;padding:var(--kf-space-md)}.kf-section-nav-item__chevron--desktop{display:none}.kf-section-nav-item__chevron--mobile{display:flex;transition:transform .18s ease}.kf-section-nav-item__header--active .kf-section-nav-item__chevron--mobile{transform:rotate(180deg)}.kf-section-nav-item__subsections{margin-inline:var(--kf-space-md)}.kf-section-nav-item__content{border:none;border-radius:0;padding:var(--kf-space-md)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
7489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SectionNavItem, isStandalone: true, selector: "kf-section-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, subsections: { classPropertyName: "subsections", publicName: "subsections", isSignal: true, isRequired: false, transformFunction: null }, activeSubsection: { classPropertyName: "activeSubsection", publicName: "activeSubsection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", subsectionSelected: "subsectionSelected" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"kf-section-nav-item__header\"\n [class.kf-section-nav-item__header--active]=\"active()\"\n [attr.aria-expanded]=\"active()\"\n (click)=\"toggled.emit()\"\n>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--desktop\"\n name=\"chevron-right\"\n size=\"sm\"\n />\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-section-nav-item__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n <span class=\"kf-section-nav-item__label\">{{ label() }}</span>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--mobile\"\n name=\"chevron-down\"\n size=\"sm\"\n />\n</button>\n\n@if (showSubsections()) {\n <div class=\"kf-section-nav-item__subsections\" role=\"group\" [attr.aria-label]=\"label()\">\n @for (sub of subsections(); track sub.key) {\n <button\n type=\"button\"\n class=\"kf-section-nav-item__subsection\"\n [class.kf-section-nav-item__subsection--active]=\"activeSubsection() === sub.key\"\n [disabled]=\"!!sub.disabled\"\n [attr.aria-current]=\"activeSubsection() === sub.key ? 'true' : null\"\n (click)=\"onSubsectionClick(sub.key, sub.disabled, $event)\"\n >\n <kf-icon [name]=\"sub.icon\" size=\"sm\" />\n <span>{{ sub.label }}</span>\n </button>\n }\n </div>\n}\n\n<div class=\"kf-section-nav-item__content\" [hidden]=\"!active()\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.kf-section-nav-item__header{grid-column:1;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;font:inherit;font-weight:600;color:var(--kf-color-text);background:none;border:none;border-radius:var(--kf-radius-sm);padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__header:hover:not(.kf-section-nav-item__header--active){background:var(--kf-color-surface)}.kf-section-nav-item__header:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__header--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__icon{flex:none}.kf-section-nav-item__label{flex:1}.kf-section-nav-item__chevron{flex:none;color:var(--kf-color-text-muted)}.kf-section-nav-item__header--active .kf-section-nav-item__icon,.kf-section-nav-item__header--active .kf-section-nav-item__chevron{color:var(--kf-color-primary-active)}.kf-section-nav-item__chevron--mobile{display:none}.kf-section-nav-item__subsections{grid-column:1;display:flex;flex-direction:column;gap:2px;margin:2px 0 var(--kf-space-xs) var(--kf-space-lg)}.kf-section-nav-item__subsection{display:flex;align-items:center;gap:var(--kf-space-sm);border:none;border-radius:var(--kf-radius-sm);background:none;color:var(--kf-color-text-muted);font:inherit;font-size:.875rem;font-weight:600;padding:var(--kf-space-xs) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__subsection:hover:not(.kf-section-nav-item__subsection--active):not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-text)}.kf-section-nav-item__subsection:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__subsection:disabled{opacity:.5;cursor:not-allowed}.kf-section-nav-item__subsection--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__content{grid-column:2;grid-row:1/span 20;min-width:0;align-self:start;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);animation:kf-section-nav-item-reveal .16s ease-out}@keyframes kf-section-nav-item-reveal{0%{opacity:0;transform:translateY(-6px)}}@media(max-width:1023px){:host{display:block;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-section-nav-item__header{justify-content:space-between;padding:var(--kf-space-md)}.kf-section-nav-item__chevron--desktop{display:none}.kf-section-nav-item__chevron--mobile{display:flex;transition:transform .18s ease}.kf-section-nav-item__header--active .kf-section-nav-item__chevron--mobile{transform:rotate(180deg)}.kf-section-nav-item__subsections{margin-inline:var(--kf-space-md)}.kf-section-nav-item__content{border:none;border-radius:0;padding:var(--kf-space-md)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
7490
7490
|
}
|
|
7491
7491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SectionNavItem, decorators: [{
|
|
7492
7492
|
type: Component,
|
|
7493
|
-
args: [{ selector: 'kf-section-nav-item', imports: [Icon], template: "<button\n type=\"button\"\n class=\"kf-section-nav-item__header\"\n [class.kf-section-nav-item__header--active]=\"active()\"\n [attr.aria-expanded]=\"active()\"\n (click)=\"toggled.emit()\"\n>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--desktop\"\n name=\"chevron-right\"\n size=\"sm\"\n />\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-section-nav-item__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n <span class=\"kf-section-nav-item__label\">{{ label() }}</span>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--mobile\"\n name=\"chevron-down\"\n size=\"sm\"\n />\n</button>\n\n@if (showSubsections()) {\n <div class=\"kf-section-nav-item__subsections\" role=\"group\" [attr.aria-label]=\"label()\">\n @for (sub of subsections(); track sub.key) {\n <button\n type=\"button\"\n class=\"kf-section-nav-item__subsection\"\n [class.kf-section-nav-item__subsection--active]=\"activeSubsection() === sub.key\"\n [disabled]=\"!!sub.disabled\"\n [attr.aria-current]=\"activeSubsection() === sub.key ? 'true' : null\"\n (click)=\"onSubsectionClick(sub.key, sub.disabled, $event)\"\n >\n <kf-icon [name]=\"sub.icon\" size=\"sm\" />\n <span>{{ sub.label }}</span>\n </button>\n }\n </div>\n}\n\n<div class=\"kf-section-nav-item__content\" [hidden]=\"!active()\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.kf-section-nav-item__header{grid-column:1;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;font:inherit;font-weight:600;color:var(--kf-color-text);background:none;border:none;border-radius:var(--kf-radius-sm);padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__header:hover:not(.kf-section-nav-item__header--active){background:var(--kf-color-surface)}.kf-section-nav-item__header:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__header--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__icon{flex:none}.kf-section-nav-item__label{flex:1}.kf-section-nav-item__chevron{flex:none;color:var(--kf-color-text-muted)}.kf-section-nav-item__header--active .kf-section-nav-item__icon,.kf-section-nav-item__header--active .kf-section-nav-item__chevron{color:var(--kf-color-primary-active)}.kf-section-nav-item__chevron--mobile{display:none}.kf-section-nav-item__subsections{grid-column:1;display:flex;flex-direction:column;gap:2px;margin:2px 0 var(--kf-space-xs) var(--kf-space-lg)}.kf-section-nav-item__subsection{display:flex;align-items:center;gap:var(--kf-space-sm);border:none;border-radius:var(--kf-radius-sm);background:none;color:var(--kf-color-text-muted);font:inherit;font-size:.875rem;font-weight:600;padding:var(--kf-space-xs) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__subsection:hover:not(.kf-section-nav-item__subsection--active):not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-text)}.kf-section-nav-item__subsection:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__subsection:disabled{opacity:.5;cursor:not-allowed}.kf-section-nav-item__subsection--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__content{grid-column:2;grid-row:1/span 20;align-self:start;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white)}@media(max-width:1023px){:host{display:block;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-section-nav-item__header{justify-content:space-between;padding:var(--kf-space-md)}.kf-section-nav-item__chevron--desktop{display:none}.kf-section-nav-item__chevron--mobile{display:flex;transition:transform .18s ease}.kf-section-nav-item__header--active .kf-section-nav-item__chevron--mobile{transform:rotate(180deg)}.kf-section-nav-item__subsections{margin-inline:var(--kf-space-md)}.kf-section-nav-item__content{border:none;border-radius:0;padding:var(--kf-space-md)}}\n"] }]
|
|
7493
|
+
args: [{ selector: 'kf-section-nav-item', imports: [Icon], template: "<button\n type=\"button\"\n class=\"kf-section-nav-item__header\"\n [class.kf-section-nav-item__header--active]=\"active()\"\n [attr.aria-expanded]=\"active()\"\n (click)=\"toggled.emit()\"\n>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--desktop\"\n name=\"chevron-right\"\n size=\"sm\"\n />\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-section-nav-item__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n <span class=\"kf-section-nav-item__label\">{{ label() }}</span>\n <kf-icon\n class=\"kf-section-nav-item__chevron kf-section-nav-item__chevron--mobile\"\n name=\"chevron-down\"\n size=\"sm\"\n />\n</button>\n\n@if (showSubsections()) {\n <div class=\"kf-section-nav-item__subsections\" role=\"group\" [attr.aria-label]=\"label()\">\n @for (sub of subsections(); track sub.key) {\n <button\n type=\"button\"\n class=\"kf-section-nav-item__subsection\"\n [class.kf-section-nav-item__subsection--active]=\"activeSubsection() === sub.key\"\n [disabled]=\"!!sub.disabled\"\n [attr.aria-current]=\"activeSubsection() === sub.key ? 'true' : null\"\n (click)=\"onSubsectionClick(sub.key, sub.disabled, $event)\"\n >\n <kf-icon [name]=\"sub.icon\" size=\"sm\" />\n <span>{{ sub.label }}</span>\n </button>\n }\n </div>\n}\n\n<div class=\"kf-section-nav-item__content\" [hidden]=\"!active()\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.kf-section-nav-item__header{grid-column:1;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;font:inherit;font-weight:600;color:var(--kf-color-text);background:none;border:none;border-radius:var(--kf-radius-sm);padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__header:hover:not(.kf-section-nav-item__header--active){background:var(--kf-color-surface)}.kf-section-nav-item__header:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__header--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__icon{flex:none}.kf-section-nav-item__label{flex:1}.kf-section-nav-item__chevron{flex:none;color:var(--kf-color-text-muted)}.kf-section-nav-item__header--active .kf-section-nav-item__icon,.kf-section-nav-item__header--active .kf-section-nav-item__chevron{color:var(--kf-color-primary-active)}.kf-section-nav-item__chevron--mobile{display:none}.kf-section-nav-item__subsections{grid-column:1;display:flex;flex-direction:column;gap:2px;margin:2px 0 var(--kf-space-xs) var(--kf-space-lg)}.kf-section-nav-item__subsection{display:flex;align-items:center;gap:var(--kf-space-sm);border:none;border-radius:var(--kf-radius-sm);background:none;color:var(--kf-color-text-muted);font:inherit;font-size:.875rem;font-weight:600;padding:var(--kf-space-xs) var(--kf-space-md);cursor:pointer;text-align:left}.kf-section-nav-item__subsection:hover:not(.kf-section-nav-item__subsection--active):not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-text)}.kf-section-nav-item__subsection:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-section-nav-item__subsection:disabled{opacity:.5;cursor:not-allowed}.kf-section-nav-item__subsection--active{background:var(--kf-color-primary-soft);color:var(--kf-color-primary-active)}.kf-section-nav-item__content{grid-column:2;grid-row:1/span 20;min-width:0;align-self:start;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);animation:kf-section-nav-item-reveal .16s ease-out}@keyframes kf-section-nav-item-reveal{0%{opacity:0;transform:translateY(-6px)}}@media(max-width:1023px){:host{display:block;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-section-nav-item__header{justify-content:space-between;padding:var(--kf-space-md)}.kf-section-nav-item__chevron--desktop{display:none}.kf-section-nav-item__chevron--mobile{display:flex;transition:transform .18s ease}.kf-section-nav-item__header--active .kf-section-nav-item__chevron--mobile{transform:rotate(180deg)}.kf-section-nav-item__subsections{margin-inline:var(--kf-space-md)}.kf-section-nav-item__content{border:none;border-radius:0;padding:var(--kf-space-md)}}\n"] }]
|
|
7494
7494
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], subsections: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsections", required: false }] }], activeSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSubsection", required: false }] }], subsectionSelected: [{ type: i0.Output, args: ["subsectionSelected"] }] } });
|
|
7495
7495
|
|
|
7496
7496
|
/**
|