@kanso-protocol/sidebar 2.0.2 → 3.0.0
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.
|
@@ -151,7 +151,7 @@ class KpSidebarComponent {
|
|
|
151
151
|
</button>
|
|
152
152
|
</div>
|
|
153
153
|
}
|
|
154
|
-
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--kp-sidebar-w, 240px);height:100%;min-height:100vh;background:var(--kp-color-sidebar-bg);border-inline-end:1px solid var(--kp-color-sidebar-border);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);transition:width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--expanded){--kp-sidebar-w: 240px}:host(.kp-sidebar--collapsed){--kp-sidebar-w: 64px}:host(.kp-sidebar--dark){background:var(--kp-color-sidebar-bg-dark);color:var(--kp-color-fg-on-dark-strong);border-right-color:var(--kp-color-border-on-dark-default)}.kp-sidebar__top{display:flex;flex-direction:column;gap:16px;padding:16px 16px 8px}.kp-sidebar__top-row{display:flex;align-items:center;gap:12px;min-height:40px}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row{position:relative;justify-content:center}:host(.kp-sidebar--collapsed) .kp-sidebar__logo,:host(.kp-sidebar--collapsed) .kp-sidebar__toggle{transition:opacity var(--kp-motion-duration-fast) ease}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo) .kp-sidebar__toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__logo{opacity:0}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__toggle{opacity:1;pointer-events:auto}.kp-sidebar__logo{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}.kp-sidebar__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--kp-color-primary-default-bg-rest);color:var(--kp-color-foreground-on-saturated);flex:0 0 auto}.kp-sidebar__logo-mark svg{width:60%;height:60%}.kp-sidebar__logo-text{font-size:16px;font-weight:600;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__logo-text--hidden{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--kp-color-text-muted);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-sidebar__toggle:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-sidebar__toggle svg{width:16px;height:16px}:host(.kp-sidebar--dark) .kp-sidebar__toggle{color:var(--kp-color-fg-on-dark-muted)}:host(.kp-sidebar--dark) .kp-sidebar__toggle:hover{background:var(--kp-color-surface-on-dark-muted);color:var(--kp-color-foreground-on-saturated)}:host(.kp-sidebar--collapsed) .kp-sidebar__logo{justify-content:center}.kp-sidebar__nav{display:flex;flex-direction:column;gap:16px;padding:8px;flex:1 1 auto;overflow-y:auto}.kp-sidebar__section{display:flex;flex-direction:column;gap:2px}.kp-sidebar__nav ::ng-deep [kpNavItemIcon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}.kp-sidebar__section-label{transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__section-label--hidden{opacity:0;pointer-events:none}.kp-sidebar__section-label{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--kp-color-sidebar-section-label)}.kp-sidebar__badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 8px;height:20px;border-radius:999px;background:var(--kp-color-surface-muted);color:var(--kp-color-text-default);font-size:11px;font-weight:500}.kp-sidebar__footer{display:flex;align-items:center;gap:12px;padding:16px;border-top:1px solid var(--kp-color-sidebar-border)}:host(.kp-sidebar--dark) .kp-sidebar__footer{border-top-color:var(--kp-color-border-on-dark-default)}.kp-sidebar__footer-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-text{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer-name{font-size:13px;font-weight:500;color:var(--kp-color-text-strong);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.kp-sidebar--dark) .kp-sidebar__footer-name{color:var(--kp-color-fg-on-dark-strong)}.kp-sidebar__footer-email{font-size:11px;color:var(--kp-color-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kp-sidebar__footer-menu{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--kp-color-text-muted);cursor:pointer;opacity:1;max-width:28px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),background var(--kp-motion-duration-fast) ease,color var(--kp-motion-duration-fast) ease}.kp-sidebar__footer-menu:hover{color:var(--kp-color-text-strong);background:var(--kp-color-surface-muted)}.kp-sidebar__footer-menu svg{width:18px;height:18px}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-menu{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer{transition:padding var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer{justify-content:center;padding-inline:0}\n"], dependencies: [{ kind: "component", type: KpAvatarComponent, selector: "kp-avatar", inputs: ["size", "shape", "appearance", "initials", "src", "alt", "showStatus", "status", "showRing", "ariaLabelOverride"] }, { kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }, { kind: "component", type: KpNavItemComponent, selector: "kp-nav-item", inputs: ["size", "depth", "label", "active", "disabled", "hasChildren", "expanded", "showIcon", "showBadge", "showActiveIndicator", "collapsed"], outputs: ["click$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
154
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--kp-sidebar-w, 240px);height:100%;min-height:100vh;background:var(--kp-color-sidebar-bg);border-inline-end:1px solid var(--kp-color-sidebar-border);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);transition:width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--expanded){--kp-sidebar-w: 240px}:host(.kp-sidebar--collapsed){--kp-sidebar-w: 64px}:host(.kp-sidebar--dark){background:var(--kp-color-sidebar-bg-dark);color:var(--kp-color-fg-on-dark-strong);border-right-color:var(--kp-color-border-on-dark-default)}:host(.kp-sidebar--dark) kp-nav-item{--kp-color-nav-item-fg-rest: var(--kp-color-fg-on-dark-default);--kp-color-nav-item-fg-hover: var(--kp-color-fg-on-dark-strong);--kp-color-nav-item-fg-active: var(--kp-color-foreground-on-dark-accent-primary);--kp-color-nav-item-bg-hover: var(--kp-color-surface-on-dark-muted);--kp-color-nav-item-bg-active: var(--kp-color-surface-on-dark-muted);--kp-color-nav-item-icon-rest: var(--kp-color-fg-on-dark-muted);--kp-color-nav-item-icon-hover: var(--kp-color-fg-on-dark-strong);--kp-color-nav-item-icon-active: var(--kp-color-foreground-on-dark-accent-primary)}:host(.kp-sidebar--dark) .kp-sidebar__footer-email{color:var(--kp-color-fg-on-dark-subtle)}:host(.kp-sidebar--dark) .kp-sidebar__section-label{color:var(--kp-color-fg-on-dark-muted)}.kp-sidebar__top{display:flex;flex-direction:column;gap:16px;padding:16px 16px 8px}.kp-sidebar__top-row{display:flex;align-items:center;gap:12px;min-height:40px}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row{position:relative;justify-content:center}:host(.kp-sidebar--collapsed) .kp-sidebar__logo,:host(.kp-sidebar--collapsed) .kp-sidebar__toggle{transition:opacity var(--kp-motion-duration-fast) ease}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo) .kp-sidebar__toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__logo{opacity:0}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__toggle{opacity:1;pointer-events:auto}.kp-sidebar__logo{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}.kp-sidebar__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--kp-color-primary-default-bg-rest);color:var(--kp-color-foreground-on-saturated);flex:0 0 auto}.kp-sidebar__logo-mark svg{width:60%;height:60%}.kp-sidebar__logo-text{font-size:16px;font-weight:600;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__logo-text--hidden{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--kp-color-text-muted);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-sidebar__toggle:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-sidebar__toggle svg{width:16px;height:16px}:host(.kp-sidebar--dark) .kp-sidebar__toggle{color:var(--kp-color-fg-on-dark-muted)}:host(.kp-sidebar--dark) .kp-sidebar__toggle:hover{background:var(--kp-color-surface-on-dark-muted);color:var(--kp-color-foreground-on-saturated)}:host(.kp-sidebar--collapsed) .kp-sidebar__logo{justify-content:center}.kp-sidebar__nav{display:flex;flex-direction:column;gap:16px;padding:8px;flex:1 1 auto;overflow-y:auto}.kp-sidebar__section{display:flex;flex-direction:column;gap:2px}.kp-sidebar__nav ::ng-deep [kpNavItemIcon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}.kp-sidebar__section-label{transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__section-label--hidden{opacity:0;pointer-events:none;visibility:hidden}.kp-sidebar__section-label{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--kp-color-sidebar-section-label)}.kp-sidebar__badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 8px;height:20px;border-radius:999px;background:var(--kp-color-surface-muted);color:var(--kp-color-text-default);font-size:11px;font-weight:500}.kp-sidebar__footer{display:flex;align-items:center;gap:12px;padding:16px;border-top:1px solid var(--kp-color-sidebar-border)}:host(.kp-sidebar--dark) .kp-sidebar__footer{border-top-color:var(--kp-color-border-on-dark-default)}.kp-sidebar__footer-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-text{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer-name{font-size:13px;font-weight:500;color:var(--kp-color-text-strong);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.kp-sidebar--dark) .kp-sidebar__footer-name{color:var(--kp-color-fg-on-dark-strong)}.kp-sidebar__footer-email{font-size:11px;color:var(--kp-color-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kp-sidebar__footer-menu{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--kp-color-text-muted);cursor:pointer;opacity:1;max-width:28px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),background var(--kp-motion-duration-fast) ease,color var(--kp-motion-duration-fast) ease}.kp-sidebar__footer-menu:hover{color:var(--kp-color-text-strong);background:var(--kp-color-surface-muted)}.kp-sidebar__footer-menu svg{width:18px;height:18px}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-menu{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer{transition:padding var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer{justify-content:center;padding-inline:0}\n"], dependencies: [{ kind: "component", type: KpAvatarComponent, selector: "kp-avatar", inputs: ["size", "shape", "appearance", "initials", "src", "alt", "showStatus", "status", "showRing", "ariaLabelOverride"] }, { kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }, { kind: "component", type: KpNavItemComponent, selector: "kp-nav-item", inputs: ["size", "depth", "label", "active", "disabled", "hasChildren", "expanded", "showIcon", "showBadge", "showActiveIndicator", "collapsed"], outputs: ["click$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
155
155
|
}
|
|
156
156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSidebarComponent, decorators: [{
|
|
157
157
|
type: Component,
|
|
@@ -251,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
251
251
|
</button>
|
|
252
252
|
</div>
|
|
253
253
|
}
|
|
254
|
-
`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--kp-sidebar-w, 240px);height:100%;min-height:100vh;background:var(--kp-color-sidebar-bg);border-inline-end:1px solid var(--kp-color-sidebar-border);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);transition:width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--expanded){--kp-sidebar-w: 240px}:host(.kp-sidebar--collapsed){--kp-sidebar-w: 64px}:host(.kp-sidebar--dark){background:var(--kp-color-sidebar-bg-dark);color:var(--kp-color-fg-on-dark-strong);border-right-color:var(--kp-color-border-on-dark-default)}.kp-sidebar__top{display:flex;flex-direction:column;gap:16px;padding:16px 16px 8px}.kp-sidebar__top-row{display:flex;align-items:center;gap:12px;min-height:40px}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row{position:relative;justify-content:center}:host(.kp-sidebar--collapsed) .kp-sidebar__logo,:host(.kp-sidebar--collapsed) .kp-sidebar__toggle{transition:opacity var(--kp-motion-duration-fast) ease}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo) .kp-sidebar__toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__logo{opacity:0}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__toggle{opacity:1;pointer-events:auto}.kp-sidebar__logo{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}.kp-sidebar__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--kp-color-primary-default-bg-rest);color:var(--kp-color-foreground-on-saturated);flex:0 0 auto}.kp-sidebar__logo-mark svg{width:60%;height:60%}.kp-sidebar__logo-text{font-size:16px;font-weight:600;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__logo-text--hidden{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--kp-color-text-muted);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-sidebar__toggle:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-sidebar__toggle svg{width:16px;height:16px}:host(.kp-sidebar--dark) .kp-sidebar__toggle{color:var(--kp-color-fg-on-dark-muted)}:host(.kp-sidebar--dark) .kp-sidebar__toggle:hover{background:var(--kp-color-surface-on-dark-muted);color:var(--kp-color-foreground-on-saturated)}:host(.kp-sidebar--collapsed) .kp-sidebar__logo{justify-content:center}.kp-sidebar__nav{display:flex;flex-direction:column;gap:16px;padding:8px;flex:1 1 auto;overflow-y:auto}.kp-sidebar__section{display:flex;flex-direction:column;gap:2px}.kp-sidebar__nav ::ng-deep [kpNavItemIcon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}.kp-sidebar__section-label{transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__section-label--hidden{opacity:0;pointer-events:none}.kp-sidebar__section-label{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--kp-color-sidebar-section-label)}.kp-sidebar__badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 8px;height:20px;border-radius:999px;background:var(--kp-color-surface-muted);color:var(--kp-color-text-default);font-size:11px;font-weight:500}.kp-sidebar__footer{display:flex;align-items:center;gap:12px;padding:16px;border-top:1px solid var(--kp-color-sidebar-border)}:host(.kp-sidebar--dark) .kp-sidebar__footer{border-top-color:var(--kp-color-border-on-dark-default)}.kp-sidebar__footer-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-text{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer-name{font-size:13px;font-weight:500;color:var(--kp-color-text-strong);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.kp-sidebar--dark) .kp-sidebar__footer-name{color:var(--kp-color-fg-on-dark-strong)}.kp-sidebar__footer-email{font-size:11px;color:var(--kp-color-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kp-sidebar__footer-menu{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--kp-color-text-muted);cursor:pointer;opacity:1;max-width:28px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),background var(--kp-motion-duration-fast) ease,color var(--kp-motion-duration-fast) ease}.kp-sidebar__footer-menu:hover{color:var(--kp-color-text-strong);background:var(--kp-color-surface-muted)}.kp-sidebar__footer-menu svg{width:18px;height:18px}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-menu{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer{transition:padding var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer{justify-content:center;padding-inline:0}\n"] }]
|
|
254
|
+
`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--kp-sidebar-w, 240px);height:100%;min-height:100vh;background:var(--kp-color-sidebar-bg);border-inline-end:1px solid var(--kp-color-sidebar-border);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);transition:width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--expanded){--kp-sidebar-w: 240px}:host(.kp-sidebar--collapsed){--kp-sidebar-w: 64px}:host(.kp-sidebar--dark){background:var(--kp-color-sidebar-bg-dark);color:var(--kp-color-fg-on-dark-strong);border-right-color:var(--kp-color-border-on-dark-default)}:host(.kp-sidebar--dark) kp-nav-item{--kp-color-nav-item-fg-rest: var(--kp-color-fg-on-dark-default);--kp-color-nav-item-fg-hover: var(--kp-color-fg-on-dark-strong);--kp-color-nav-item-fg-active: var(--kp-color-foreground-on-dark-accent-primary);--kp-color-nav-item-bg-hover: var(--kp-color-surface-on-dark-muted);--kp-color-nav-item-bg-active: var(--kp-color-surface-on-dark-muted);--kp-color-nav-item-icon-rest: var(--kp-color-fg-on-dark-muted);--kp-color-nav-item-icon-hover: var(--kp-color-fg-on-dark-strong);--kp-color-nav-item-icon-active: var(--kp-color-foreground-on-dark-accent-primary)}:host(.kp-sidebar--dark) .kp-sidebar__footer-email{color:var(--kp-color-fg-on-dark-subtle)}:host(.kp-sidebar--dark) .kp-sidebar__section-label{color:var(--kp-color-fg-on-dark-muted)}.kp-sidebar__top{display:flex;flex-direction:column;gap:16px;padding:16px 16px 8px}.kp-sidebar__top-row{display:flex;align-items:center;gap:12px;min-height:40px}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row{position:relative;justify-content:center}:host(.kp-sidebar--collapsed) .kp-sidebar__logo,:host(.kp-sidebar--collapsed) .kp-sidebar__toggle{transition:opacity var(--kp-motion-duration-fast) ease}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo) .kp-sidebar__toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__logo{opacity:0}:host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__toggle{opacity:1;pointer-events:auto}.kp-sidebar__logo{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}.kp-sidebar__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--kp-color-primary-default-bg-rest);color:var(--kp-color-foreground-on-saturated);flex:0 0 auto}.kp-sidebar__logo-mark svg{width:60%;height:60%}.kp-sidebar__logo-text{font-size:16px;font-weight:600;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__logo-text--hidden{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--kp-color-text-muted);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-sidebar__toggle:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-sidebar__toggle svg{width:16px;height:16px}:host(.kp-sidebar--dark) .kp-sidebar__toggle{color:var(--kp-color-fg-on-dark-muted)}:host(.kp-sidebar--dark) .kp-sidebar__toggle:hover{background:var(--kp-color-surface-on-dark-muted);color:var(--kp-color-foreground-on-saturated)}:host(.kp-sidebar--collapsed) .kp-sidebar__logo{justify-content:center}.kp-sidebar__nav{display:flex;flex-direction:column;gap:16px;padding:8px;flex:1 1 auto;overflow-y:auto}.kp-sidebar__section{display:flex;flex-direction:column;gap:2px}.kp-sidebar__nav ::ng-deep [kpNavItemIcon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}.kp-sidebar__section-label{transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}.kp-sidebar__section-label--hidden{opacity:0;pointer-events:none;visibility:hidden}.kp-sidebar__section-label{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--kp-color-sidebar-section-label)}.kp-sidebar__badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 8px;height:20px;border-radius:999px;background:var(--kp-color-surface-muted);color:var(--kp-color-text-default);font-size:11px;font-weight:500}.kp-sidebar__footer{display:flex;align-items:center;gap:12px;padding:16px;border-top:1px solid var(--kp-color-sidebar-border)}:host(.kp-sidebar--dark) .kp-sidebar__footer{border-top-color:var(--kp-color-border-on-dark-default)}.kp-sidebar__footer-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;opacity:1;max-width:200px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-text{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer-name{font-size:13px;font-weight:500;color:var(--kp-color-text-strong);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.kp-sidebar--dark) .kp-sidebar__footer-name{color:var(--kp-color-fg-on-dark-strong)}.kp-sidebar__footer-email{font-size:11px;color:var(--kp-color-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kp-sidebar__footer-menu{all:unset;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--kp-color-text-muted);cursor:pointer;opacity:1;max-width:28px;transition:opacity var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),max-width var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1),background var(--kp-motion-duration-fast) ease,color var(--kp-motion-duration-fast) ease}.kp-sidebar__footer-menu:hover{color:var(--kp-color-text-strong);background:var(--kp-color-surface-muted)}.kp-sidebar__footer-menu svg{width:18px;height:18px}:host(.kp-sidebar--collapsed) .kp-sidebar__footer-menu{opacity:0;max-width:0;pointer-events:none}.kp-sidebar__footer{transition:padding var(--kp-motion-duration-normal) cubic-bezier(.4,0,.2,1)}:host(.kp-sidebar--collapsed) .kp-sidebar__footer{justify-content:center;padding-inline:0}\n"] }]
|
|
255
255
|
}], propDecorators: { widthState: [{
|
|
256
256
|
type: Input
|
|
257
257
|
}], appearance: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-sidebar.mjs","sources":["../../../../../packages/patterns/sidebar/src/sidebar.component.ts","../../../../../packages/patterns/sidebar/src/kanso-protocol-sidebar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport { KpAvatarComponent } from '@kanso-protocol/avatar';\nimport { KpIconComponent } from '@kanso-protocol/icon';\nimport { KpNavItemComponent } from '@kanso-protocol/nav-item';\n\nexport type KpSidebarWidth = 'expanded' | 'collapsed';\nexport type KpSidebarAppearance = 'light' | 'dark';\n\nexport interface KpSidebarNavItem {\n label: string;\n icon?: string; // semantic icon key (consumer resolves)\n href?: string;\n active?: boolean;\n badge?: string;\n /** Nested children — rendered with depth=1 when parent is expanded */\n children?: KpSidebarNavItem[];\n expanded?: boolean;\n}\n\nexport interface KpSidebarSection {\n label?: string;\n items: KpSidebarNavItem[];\n}\n\n/**\n * Kanso Protocol — Sidebar\n *\n * App side navigation container. Expanded (240) or collapsed (64).\n * Data-driven sections, each with its own label and NavItems.\n * Optional logo, search slot, user footer with Avatar.\n *\n * Slots:\n * - `[kpSidebarLogo]` — custom logo area\n * - `[kpSidebarSearch]` — search field above sections\n * - each NavItem icon is rendered via `iconTemplateRef` if provided\n * (otherwise a generic placeholder)\n *\n * @example\n * <kp-sidebar\n * widthState=\"expanded\"\n * [sections]=\"nav\"\n * userName=\"Greg Black\"\n * userInitials=\"GB\"\n * userEmail=\"greg@example.com\"\n * />\n */\n@Component({\n selector: 'kp-sidebar',\n imports: [KpAvatarComponent, KpIconComponent, KpNavItemComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses', role: 'navigation' },\n template: `\n <div class=\"kp-sidebar__top\">\n <div class=\"kp-sidebar__top-row\">\n @if (showLogo) {\n <div class=\"kp-sidebar__logo\">\n <ng-content select=\"[kpSidebarLogo]\">\n <span class=\"kp-sidebar__logo-mark\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10\"/>\n </svg>\n </span>\n <span\n class=\"kp-sidebar__logo-text\"\n [class.kp-sidebar__logo-text--hidden]=\"widthState === 'collapsed'\"\n [attr.aria-hidden]=\"widthState === 'collapsed' || null\">{{ logoText }}</span>\n </ng-content>\n </div>\n }\n <button\n type=\"button\"\n class=\"kp-sidebar__toggle\"\n [attr.aria-label]=\"widthState === 'collapsed' ? 'Expand sidebar' : 'Collapse sidebar'\"\n (click)=\"onToggle()\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M9 5v14\"/></svg>\n </button>\n </div>\n @if (showSearch && widthState !== 'collapsed') {\n <ng-content select=\"[kpSidebarSearch]\"/>\n }\n </div>\n\n <nav class=\"kp-sidebar__nav\">\n @for (section of sections; track $index) {\n <div class=\"kp-sidebar__section\">\n @if (showSectionLabels && section.label) {\n <div\n class=\"kp-sidebar__section-label\"\n [class.kp-sidebar__section-label--hidden]=\"widthState === 'collapsed'\"\n [attr.aria-hidden]=\"widthState === 'collapsed' || null\">{{ section.label }}</div>\n }\n @for (item of section.items; track item.label) {\n <kp-nav-item\n size=\"md\"\n [label]=\"item.label\"\n [active]=\"!!item.active\"\n [showBadge]=\"!!item.badge\"\n [hasChildren]=\"!!item.children?.length\"\n [expanded]=\"!!item.expanded\"\n [collapsed]=\"widthState === 'collapsed'\"\n (click$)=\"onItemClick(item)\"\n >\n <span kpNavItemIcon>\n <kp-icon [name]=\"item.icon || 'circle'\" />\n </span>\n @if (item.badge) {\n <span kpNavItemBadge class=\"kp-sidebar__badge\">{{ item.badge }}</span>\n }\n </kp-nav-item>\n\n @if (item.children?.length && item.expanded && widthState !== 'collapsed') {\n @for (child of item.children; track child.label) {\n <kp-nav-item\n size=\"md\"\n [depth]=\"1\"\n [label]=\"child.label\"\n [active]=\"!!child.active\"\n [showIcon]=\"false\"\n style=\"--kp-nav-item-indent: 30px\"\n (click$)=\"onItemClick(child)\"\n />\n }\n }\n }\n </div>\n }\n </nav>\n\n @if (showUserFooter && (userName || userInitials)) {\n <div class=\"kp-sidebar__footer\" [class.kp-sidebar__footer--collapsed]=\"widthState === 'collapsed'\">\n <kp-avatar size=\"md\" [initials]=\"userInitials || null\" [showStatus]=\"true\" status=\"online\"/>\n <div class=\"kp-sidebar__footer-text\" [attr.aria-hidden]=\"widthState === 'collapsed' || null\">\n @if (userName) { <span class=\"kp-sidebar__footer-name\">{{ userName }}</span> }\n @if (userEmail) { <span class=\"kp-sidebar__footer-email\">{{ userEmail }}</span> }\n </div>\n <button\n type=\"button\"\n class=\"kp-sidebar__footer-menu\"\n aria-label=\"User options\"\n [attr.aria-hidden]=\"widthState === 'collapsed' || null\"\n [tabindex]=\"widthState === 'collapsed' ? -1 : 0\"\n (click)=\"userMenuClick.emit()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg>\n </button>\n </div>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--kp-sidebar-w, 240px);\n height: 100%;\n min-height: 100vh;\n background: var(--kp-color-sidebar-bg);\n border-inline-end: 1px solid var(--kp-color-sidebar-border);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n /* Width animates with the same cubic-bezier + duration that\n drives every inner element's collapse (labels fade + max-width\n to 0 in nav-item, logo text / footer chrome below). All pieces\n move in lockstep — no twitch. */\n transition: width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host(.kp-sidebar--expanded) { --kp-sidebar-w: 240px; }\n :host(.kp-sidebar--collapsed) { --kp-sidebar-w: 64px; }\n\n :host(.kp-sidebar--dark) {\n background: var(--kp-color-sidebar-bg-dark);\n color: var(--kp-color-fg-on-dark-strong);\n border-right-color: var(--kp-color-border-on-dark-default);\n }\n\n .kp-sidebar__top {\n display: flex;\n flex-direction: column;\n gap: 16px;\n /* Bottom padding tightened (16 → 8) to reduce the vertical gap\n between the collapse toggle and the first nav section — the\n original 16+nav-pad+label-pad stack felt too airy. */\n padding: 16px 16px 8px;\n }\n .kp-sidebar__top-row {\n display: flex;\n align-items: center;\n gap: 12px;\n min-height: 40px;\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row {\n position: relative;\n justify-content: center;\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__logo,\n :host(.kp-sidebar--collapsed) .kp-sidebar__toggle {\n transition: opacity var(--kp-motion-duration-fast) ease;\n }\n /* When collapsed AND logo is present, logo shows by default; toggle reveals on hover */\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo) .kp-sidebar__toggle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__logo { opacity: 0; }\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__toggle {\n opacity: 1;\n pointer-events: auto;\n }\n .kp-sidebar__logo {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1 1 auto;\n min-width: 0;\n }\n .kp-sidebar__logo-mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: var(--kp-color-primary-default-bg-rest);\n color: var(--kp-color-foreground-on-saturated);\n flex: 0 0 auto;\n }\n .kp-sidebar__logo-mark svg { width: 60%; height: 60%; }\n .kp-sidebar__logo-text {\n font-size: 16px;\n font-weight: 600;\n flex: 1 1 auto;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n opacity: 1;\n max-width: 200px;\n transition:\n opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n max-width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n .kp-sidebar__logo-text--hidden {\n opacity: 0;\n max-width: 0;\n pointer-events: none;\n }\n .kp-sidebar__toggle {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 6px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-sidebar__toggle:hover {\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-strong);\n }\n .kp-sidebar__toggle svg { width: 16px; height: 16px; }\n :host(.kp-sidebar--dark) .kp-sidebar__toggle { color: var(--kp-color-fg-on-dark-muted); }\n :host(.kp-sidebar--dark) .kp-sidebar__toggle:hover {\n background: var(--kp-color-surface-on-dark-muted);\n color: var(--kp-color-foreground-on-saturated);\n }\n\n :host(.kp-sidebar--collapsed) .kp-sidebar__logo { justify-content: center; }\n\n .kp-sidebar__nav {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 8px;\n flex: 1 1 auto;\n overflow-y: auto;\n }\n .kp-sidebar__section {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n /* The icon slot inside each nav-item ends up wrapped in a <span>\n (the directive carrier for [kpNavItemIcon]). Span defaults to\n inline display, which adds a baseline gap that visually shifts\n the icon down by ~1-2px relative to the label. Force inline-flex\n on the wrapper so the icon centers exactly with the row text. */\n .kp-sidebar__nav ::ng-deep [kpNavItemIcon] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n }\n /* In collapsed mode the label text fades out but the box still\n reserves vertical space, so nav-items stay at the same Y offset\n as in the expanded layout (no jumping when toggling). Opacity\n transitioned together with the host width animation. */\n .kp-sidebar__section-label {\n transition: opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n .kp-sidebar__section-label--hidden {\n opacity: 0;\n pointer-events: none;\n }\n .kp-sidebar__section-label {\n padding: 8px 12px 4px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n color: var(--kp-color-sidebar-section-label);\n }\n\n .kp-sidebar__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 8px;\n height: 20px;\n border-radius: 999px;\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-default);\n font-size: 11px;\n font-weight: 500;\n }\n\n .kp-sidebar__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-top: 1px solid var(--kp-color-sidebar-border);\n }\n :host(.kp-sidebar--dark) .kp-sidebar__footer { border-top-color: var(--kp-color-border-on-dark-default); }\n .kp-sidebar__footer-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1 1 auto;\n min-width: 0;\n opacity: 1;\n max-width: 200px;\n transition:\n opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n max-width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__footer-text {\n opacity: 0;\n max-width: 0;\n pointer-events: none;\n }\n .kp-sidebar__footer-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--kp-color-text-strong);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n :host(.kp-sidebar--dark) .kp-sidebar__footer-name { color: var(--kp-color-fg-on-dark-strong); }\n .kp-sidebar__footer-email {\n font-size: 11px;\n color: var(--kp-color-text-muted);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .kp-sidebar__footer-menu {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 4px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n opacity: 1;\n max-width: 28px;\n transition:\n opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n max-width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n background var(--kp-motion-duration-fast) ease,\n color var(--kp-motion-duration-fast) ease;\n }\n .kp-sidebar__footer-menu:hover { color: var(--kp-color-text-strong); background: var(--kp-color-surface-muted); }\n .kp-sidebar__footer-menu svg { width: 18px; height: 18px; }\n :host(.kp-sidebar--collapsed) .kp-sidebar__footer-menu {\n opacity: 0;\n max-width: 0;\n pointer-events: none;\n }\n\n .kp-sidebar__footer {\n transition: padding var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__footer { justify-content: center; padding-inline: 0; }\n `],\n})\nexport class KpSidebarComponent {\n @Input() widthState: KpSidebarWidth = 'expanded';\n @Input() appearance: KpSidebarAppearance = 'light';\n\n @Input() showLogo = true;\n @Input() logoText = 'Kanso Protocol';\n @Input() showSearch = false;\n @Input() showSectionLabels = true;\n @Input() showUserFooter = true;\n\n @Input() sections: KpSidebarSection[] = [];\n\n @Input() userName: string | null = null;\n @Input() userEmail: string | null = null;\n @Input() userInitials: string | null = null;\n\n @Output() toggle = new EventEmitter<KpSidebarWidth>();\n\n onToggle(): void {\n this.widthState = this.widthState === 'expanded' ? 'collapsed' : 'expanded';\n this.toggle.emit(this.widthState);\n }\n\n onItemClick(item: KpSidebarNavItem): void {\n if (item.children?.length) {\n item.expanded = !item.expanded;\n }\n this.itemClick.emit(item);\n }\n @Output() itemClick = new EventEmitter<KpSidebarNavItem>();\n @Output() userMenuClick = new EventEmitter<void>();\n\n get hostClasses(): string {\n return `kp-sidebar kp-sidebar--${this.widthState} kp-sidebar--${this.appearance}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kanso-protocol-sidebar.mjs","sources":["../../../../../packages/patterns/sidebar/src/sidebar.component.ts","../../../../../packages/patterns/sidebar/src/kanso-protocol-sidebar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport { KpAvatarComponent } from '@kanso-protocol/avatar';\nimport { KpIconComponent } from '@kanso-protocol/icon';\nimport { KpNavItemComponent } from '@kanso-protocol/nav-item';\n\nexport type KpSidebarWidth = 'expanded' | 'collapsed';\nexport type KpSidebarAppearance = 'light' | 'dark';\n\nexport interface KpSidebarNavItem {\n label: string;\n icon?: string; // semantic icon key (consumer resolves)\n href?: string;\n active?: boolean;\n badge?: string;\n /** Nested children — rendered with depth=1 when parent is expanded */\n children?: KpSidebarNavItem[];\n expanded?: boolean;\n}\n\nexport interface KpSidebarSection {\n label?: string;\n items: KpSidebarNavItem[];\n}\n\n/**\n * Kanso Protocol — Sidebar\n *\n * App side navigation container. Expanded (240) or collapsed (64).\n * Data-driven sections, each with its own label and NavItems.\n * Optional logo, search slot, user footer with Avatar.\n *\n * Slots:\n * - `[kpSidebarLogo]` — custom logo area\n * - `[kpSidebarSearch]` — search field above sections\n * - each NavItem icon is rendered via `iconTemplateRef` if provided\n * (otherwise a generic placeholder)\n *\n * @example\n * <kp-sidebar\n * widthState=\"expanded\"\n * [sections]=\"nav\"\n * userName=\"Greg Black\"\n * userInitials=\"GB\"\n * userEmail=\"greg@example.com\"\n * />\n */\n@Component({\n selector: 'kp-sidebar',\n imports: [KpAvatarComponent, KpIconComponent, KpNavItemComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses', role: 'navigation' },\n template: `\n <div class=\"kp-sidebar__top\">\n <div class=\"kp-sidebar__top-row\">\n @if (showLogo) {\n <div class=\"kp-sidebar__logo\">\n <ng-content select=\"[kpSidebarLogo]\">\n <span class=\"kp-sidebar__logo-mark\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10\"/>\n </svg>\n </span>\n <span\n class=\"kp-sidebar__logo-text\"\n [class.kp-sidebar__logo-text--hidden]=\"widthState === 'collapsed'\"\n [attr.aria-hidden]=\"widthState === 'collapsed' || null\">{{ logoText }}</span>\n </ng-content>\n </div>\n }\n <button\n type=\"button\"\n class=\"kp-sidebar__toggle\"\n [attr.aria-label]=\"widthState === 'collapsed' ? 'Expand sidebar' : 'Collapse sidebar'\"\n (click)=\"onToggle()\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M9 5v14\"/></svg>\n </button>\n </div>\n @if (showSearch && widthState !== 'collapsed') {\n <ng-content select=\"[kpSidebarSearch]\"/>\n }\n </div>\n\n <nav class=\"kp-sidebar__nav\">\n @for (section of sections; track $index) {\n <div class=\"kp-sidebar__section\">\n @if (showSectionLabels && section.label) {\n <div\n class=\"kp-sidebar__section-label\"\n [class.kp-sidebar__section-label--hidden]=\"widthState === 'collapsed'\"\n [attr.aria-hidden]=\"widthState === 'collapsed' || null\">{{ section.label }}</div>\n }\n @for (item of section.items; track item.label) {\n <kp-nav-item\n size=\"md\"\n [label]=\"item.label\"\n [active]=\"!!item.active\"\n [showBadge]=\"!!item.badge\"\n [hasChildren]=\"!!item.children?.length\"\n [expanded]=\"!!item.expanded\"\n [collapsed]=\"widthState === 'collapsed'\"\n (click$)=\"onItemClick(item)\"\n >\n <span kpNavItemIcon>\n <kp-icon [name]=\"item.icon || 'circle'\" />\n </span>\n @if (item.badge) {\n <span kpNavItemBadge class=\"kp-sidebar__badge\">{{ item.badge }}</span>\n }\n </kp-nav-item>\n\n @if (item.children?.length && item.expanded && widthState !== 'collapsed') {\n @for (child of item.children; track child.label) {\n <kp-nav-item\n size=\"md\"\n [depth]=\"1\"\n [label]=\"child.label\"\n [active]=\"!!child.active\"\n [showIcon]=\"false\"\n style=\"--kp-nav-item-indent: 30px\"\n (click$)=\"onItemClick(child)\"\n />\n }\n }\n }\n </div>\n }\n </nav>\n\n @if (showUserFooter && (userName || userInitials)) {\n <div class=\"kp-sidebar__footer\" [class.kp-sidebar__footer--collapsed]=\"widthState === 'collapsed'\">\n <kp-avatar size=\"md\" [initials]=\"userInitials || null\" [showStatus]=\"true\" status=\"online\"/>\n <div class=\"kp-sidebar__footer-text\" [attr.aria-hidden]=\"widthState === 'collapsed' || null\">\n @if (userName) { <span class=\"kp-sidebar__footer-name\">{{ userName }}</span> }\n @if (userEmail) { <span class=\"kp-sidebar__footer-email\">{{ userEmail }}</span> }\n </div>\n <button\n type=\"button\"\n class=\"kp-sidebar__footer-menu\"\n aria-label=\"User options\"\n [attr.aria-hidden]=\"widthState === 'collapsed' || null\"\n [tabindex]=\"widthState === 'collapsed' ? -1 : 0\"\n (click)=\"userMenuClick.emit()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg>\n </button>\n </div>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--kp-sidebar-w, 240px);\n height: 100%;\n min-height: 100vh;\n background: var(--kp-color-sidebar-bg);\n border-inline-end: 1px solid var(--kp-color-sidebar-border);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n /* Width animates with the same cubic-bezier + duration that\n drives every inner element's collapse (labels fade + max-width\n to 0 in nav-item, logo text / footer chrome below). All pieces\n move in lockstep — no twitch. */\n transition: width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host(.kp-sidebar--expanded) { --kp-sidebar-w: 240px; }\n :host(.kp-sidebar--collapsed) { --kp-sidebar-w: 64px; }\n\n :host(.kp-sidebar--dark) {\n background: var(--kp-color-sidebar-bg-dark);\n color: var(--kp-color-fg-on-dark-strong);\n border-right-color: var(--kp-color-border-on-dark-default);\n }\n /* In a dark-appearance sidebar, repoint nav-item fg tokens to the\n on-dark family so labels read against the dark sidebar bg. Without\n this nav-item-fg-rest stays at gray.700 light, which on the dark\n sidebar surface only hits ~1.7:1 — fails AA. */\n :host(.kp-sidebar--dark) kp-nav-item {\n --kp-color-nav-item-fg-rest: var(--kp-color-fg-on-dark-default);\n --kp-color-nav-item-fg-hover: var(--kp-color-fg-on-dark-strong);\n --kp-color-nav-item-fg-active: var(--kp-color-foreground-on-dark-accent-primary);\n --kp-color-nav-item-bg-hover: var(--kp-color-surface-on-dark-muted);\n /* bg-active also flips to the on-dark muted surface so the\n active fg reads against a dark bg (~7:1) instead of ~3:1\n against the default light blue.50 active bg. */\n --kp-color-nav-item-bg-active: var(--kp-color-surface-on-dark-muted);\n --kp-color-nav-item-icon-rest: var(--kp-color-fg-on-dark-muted);\n --kp-color-nav-item-icon-hover: var(--kp-color-fg-on-dark-strong);\n --kp-color-nav-item-icon-active: var(--kp-color-foreground-on-dark-accent-primary);\n }\n :host(.kp-sidebar--dark) .kp-sidebar__footer-email {\n color: var(--kp-color-fg-on-dark-subtle);\n }\n :host(.kp-sidebar--dark) .kp-sidebar__section-label {\n color: var(--kp-color-fg-on-dark-muted);\n }\n\n .kp-sidebar__top {\n display: flex;\n flex-direction: column;\n gap: 16px;\n /* Bottom padding tightened (16 → 8) to reduce the vertical gap\n between the collapse toggle and the first nav section — the\n original 16+nav-pad+label-pad stack felt too airy. */\n padding: 16px 16px 8px;\n }\n .kp-sidebar__top-row {\n display: flex;\n align-items: center;\n gap: 12px;\n min-height: 40px;\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row {\n position: relative;\n justify-content: center;\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__logo,\n :host(.kp-sidebar--collapsed) .kp-sidebar__toggle {\n transition: opacity var(--kp-motion-duration-fast) ease;\n }\n /* When collapsed AND logo is present, logo shows by default; toggle reveals on hover */\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo) .kp-sidebar__toggle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__logo { opacity: 0; }\n :host(.kp-sidebar--collapsed) .kp-sidebar__top-row:has(.kp-sidebar__logo):hover .kp-sidebar__toggle {\n opacity: 1;\n pointer-events: auto;\n }\n .kp-sidebar__logo {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1 1 auto;\n min-width: 0;\n }\n .kp-sidebar__logo-mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: var(--kp-color-primary-default-bg-rest);\n color: var(--kp-color-foreground-on-saturated);\n flex: 0 0 auto;\n }\n .kp-sidebar__logo-mark svg { width: 60%; height: 60%; }\n .kp-sidebar__logo-text {\n font-size: 16px;\n font-weight: 600;\n flex: 1 1 auto;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n opacity: 1;\n max-width: 200px;\n transition:\n opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n max-width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n .kp-sidebar__logo-text--hidden {\n opacity: 0;\n max-width: 0;\n pointer-events: none;\n }\n .kp-sidebar__toggle {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 6px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-sidebar__toggle:hover {\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-strong);\n }\n .kp-sidebar__toggle svg { width: 16px; height: 16px; }\n :host(.kp-sidebar--dark) .kp-sidebar__toggle { color: var(--kp-color-fg-on-dark-muted); }\n :host(.kp-sidebar--dark) .kp-sidebar__toggle:hover {\n background: var(--kp-color-surface-on-dark-muted);\n color: var(--kp-color-foreground-on-saturated);\n }\n\n :host(.kp-sidebar--collapsed) .kp-sidebar__logo { justify-content: center; }\n\n .kp-sidebar__nav {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 8px;\n flex: 1 1 auto;\n overflow-y: auto;\n }\n .kp-sidebar__section {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n /* The icon slot inside each nav-item ends up wrapped in a <span>\n (the directive carrier for [kpNavItemIcon]). Span defaults to\n inline display, which adds a baseline gap that visually shifts\n the icon down by ~1-2px relative to the label. Force inline-flex\n on the wrapper so the icon centers exactly with the row text. */\n .kp-sidebar__nav ::ng-deep [kpNavItemIcon] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n }\n /* In collapsed mode the label text fades out but the box still\n reserves vertical space, so nav-items stay at the same Y offset\n as in the expanded layout (no jumping when toggling). Opacity\n transitioned together with the host width animation. */\n .kp-sidebar__section-label {\n transition: opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n .kp-sidebar__section-label--hidden {\n opacity: 0;\n pointer-events: none;\n /* visibility:hidden so axe-core skips color-contrast on the\n collapsed-state section labels. */\n visibility: hidden;\n }\n .kp-sidebar__section-label {\n padding: 8px 12px 4px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n color: var(--kp-color-sidebar-section-label);\n }\n\n .kp-sidebar__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 8px;\n height: 20px;\n border-radius: 999px;\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-default);\n font-size: 11px;\n font-weight: 500;\n }\n\n .kp-sidebar__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-top: 1px solid var(--kp-color-sidebar-border);\n }\n :host(.kp-sidebar--dark) .kp-sidebar__footer { border-top-color: var(--kp-color-border-on-dark-default); }\n .kp-sidebar__footer-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1 1 auto;\n min-width: 0;\n opacity: 1;\n max-width: 200px;\n transition:\n opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n max-width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__footer-text {\n opacity: 0;\n max-width: 0;\n pointer-events: none;\n }\n .kp-sidebar__footer-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--kp-color-text-strong);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n :host(.kp-sidebar--dark) .kp-sidebar__footer-name { color: var(--kp-color-fg-on-dark-strong); }\n .kp-sidebar__footer-email {\n font-size: 11px;\n color: var(--kp-color-text-muted);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .kp-sidebar__footer-menu {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 4px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n opacity: 1;\n max-width: 28px;\n transition:\n opacity var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n max-width var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1),\n background var(--kp-motion-duration-fast) ease,\n color var(--kp-motion-duration-fast) ease;\n }\n .kp-sidebar__footer-menu:hover { color: var(--kp-color-text-strong); background: var(--kp-color-surface-muted); }\n .kp-sidebar__footer-menu svg { width: 18px; height: 18px; }\n :host(.kp-sidebar--collapsed) .kp-sidebar__footer-menu {\n opacity: 0;\n max-width: 0;\n pointer-events: none;\n }\n\n .kp-sidebar__footer {\n transition: padding var(--kp-motion-duration-normal) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host(.kp-sidebar--collapsed) .kp-sidebar__footer { justify-content: center; padding-inline: 0; }\n `],\n})\nexport class KpSidebarComponent {\n @Input() widthState: KpSidebarWidth = 'expanded';\n @Input() appearance: KpSidebarAppearance = 'light';\n\n @Input() showLogo = true;\n @Input() logoText = 'Kanso Protocol';\n @Input() showSearch = false;\n @Input() showSectionLabels = true;\n @Input() showUserFooter = true;\n\n @Input() sections: KpSidebarSection[] = [];\n\n @Input() userName: string | null = null;\n @Input() userEmail: string | null = null;\n @Input() userInitials: string | null = null;\n\n @Output() toggle = new EventEmitter<KpSidebarWidth>();\n\n onToggle(): void {\n this.widthState = this.widthState === 'expanded' ? 'collapsed' : 'expanded';\n this.toggle.emit(this.widthState);\n }\n\n onItemClick(item: KpSidebarNavItem): void {\n if (item.children?.length) {\n item.expanded = !item.expanded;\n }\n this.itemClick.emit(item);\n }\n @Output() itemClick = new EventEmitter<KpSidebarNavItem>();\n @Output() userMenuClick = new EventEmitter<void>();\n\n get hostClasses(): string {\n return `kp-sidebar kp-sidebar--${this.widthState} kp-sidebar--${this.appearance}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/sidebar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": ">=21.0.0",
|
|
7
7
|
"@angular/common": ">=21.0.0",
|
|
8
|
-
"@kanso-protocol/core": ">=
|
|
9
|
-
"@kanso-protocol/avatar": ">=
|
|
10
|
-
"@kanso-protocol/nav-item": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=3.0.0",
|
|
9
|
+
"@kanso-protocol/avatar": ">=3.0.0",
|
|
10
|
+
"@kanso-protocol/nav-item": ">=3.0.0"
|
|
11
11
|
},
|
|
12
12
|
"description": "Kanso Protocol — sidebar (pattern).",
|
|
13
13
|
"author": "GregNBlack",
|