@cocoar/ui-components 0.1.0-beta.100 → 0.1.0-beta.109

package/fesm2022/cocoar-ui-components.mjs

@@ -3933,6 +3933,61 @@ function cryptoRandomId() {
     return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
 }
 
+/**
+ * CoarSidebar: A three-part layout component for navigation sidebars.
+ *
+ * Provides three distinct slots via content projection:
+ * - **Header** (`[coar-sidebar-header]`): Fixed at top, for logo/title/branding
+ * - **Content** (default slot): Scrollable area for navigation menu or other content
+ * - **Footer** (`[coar-sidebar-footer]`): Fixed at bottom, for actions/settings/user info
+ *
+ * Responsibilities:
+ * - Provide consistent sidebar layout structure
+ * - Apply design tokens for width, spacing, colors
+ * - Handle scrolling behavior (only content area scrolls)
+ * - Support left/right positioning
+ *
+ * @example
+ * ```html
+ * <coar-sidebar>
+ *   <div coar-sidebar-header>
+ *     <h2>Navigation</h2>
+ *   </div>
+ *
+ *   <coar-menu borderless>
+ *     <coar-menu-item routerLink="/home" routerLinkActive="active">Home</coar-menu-item>
+ *     <coar-menu-item routerLink="/about" routerLinkActive="active">About</coar-menu-item>
+ *   </coar-menu>
+ *
+ *   <div coar-sidebar-footer>
+ *     <button>Settings</button>
+ *   </div>
+ * </coar-sidebar>
+ * ```
+ */
+class CoarSidebarComponent {
+    /**
+     * Sidebar position: left or right side of screen.
+     * Default is 'left'.
+     */
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Collapsed state for narrow/icon-only sidebar.
+     * Use as boolean attribute: `<coar-sidebar collapsed>` or `[collapsed]="true"`
+     */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CoarSidebarComponent, isStandalone: true, selector: "coar-sidebar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.coar-sidebar--collapsed": "collapsed()", "class.coar-sidebar--position-right": "position() === \"right\"" }, classAttribute: "coar-sidebar" }, ngImport: i0, template: "<div class=\"coar-sidebar__header\">\n  <ng-content select=\"[coar-sidebar-header]\" />\n</div>\n\n<div class=\"coar-sidebar__content\" coarScrollbar [overflowX]=\"'hidden'\">\n  <ng-content />\n</div>\n\n<div class=\"coar-sidebar__footer\">\n  <ng-content select=\"[coar-sidebar-footer]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:var(--coar-sidebar-width, 16rem);min-width:var(--coar-sidebar-min-width, 12rem);max-width:var(--coar-sidebar-max-width, 20rem);background:var(--coar-sidebar-background, var(--coar-background-neutral-primary, #ffffff));border-right:var(--coar-sidebar-border, 1px solid var(--coar-border-neutral-tertiary, #d0d0d0))}:host(.coar-sidebar--position-right){border-right:none;border-left:var(--coar-sidebar-border, 1px solid var(--coar-border-neutral-tertiary, #d0d0d0))}:host(.coar-sidebar--collapsed){width:var(--coar-sidebar-collapsed-width, 4rem);min-width:var(--coar-sidebar-collapsed-width, 4rem)}:host(.coar-sidebar--collapsed) .coar-sidebar__header,:host(.coar-sidebar--collapsed) .coar-sidebar__content,:host(.coar-sidebar--collapsed) .coar-sidebar__footer{display:flex;align-items:center;justify-content:center;text-align:center}.coar-sidebar__header{flex-shrink:0}.coar-sidebar__header:empty{display:none}.coar-sidebar__content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--coar-sidebar-content-padding, var(--coar-spacing-s, 8px))}.coar-sidebar__content ::ng-deep coar-menu{padding:0}.coar-sidebar__content ::ng-deep coar-menu-heading{margin-top:var(--coar-spacing-l, 16px);font-size:var(--coar-font-size-xs, 12px)}.coar-sidebar__content ::ng-deep coar-menu-item{border-radius:var(--coar-radius-xxs);margin:var(--coar-spacing-3xs, 2px) 0}.coar-sidebar__content ::ng-deep coar-menu-item:hover{background:var(--coar-background-neutral-tertiary)}.coar-sidebar__content ::ng-deep coar-menu-item.active{background:var(--coar-background-neutral-tertiary)}.coar-sidebar__footer{flex-shrink:0}.coar-sidebar__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-sidebar', standalone: true, imports: [CoarScrollbarDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'coar-sidebar',
+                        '[class.coar-sidebar--collapsed]': 'collapsed()',
+                        '[class.coar-sidebar--position-right]': 'position() === "right"',
+                    }, template: "<div class=\"coar-sidebar__header\">\n  <ng-content select=\"[coar-sidebar-header]\" />\n</div>\n\n<div class=\"coar-sidebar__content\" coarScrollbar [overflowX]=\"'hidden'\">\n  <ng-content />\n</div>\n\n<div class=\"coar-sidebar__footer\">\n  <ng-content select=\"[coar-sidebar-footer]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:var(--coar-sidebar-width, 16rem);min-width:var(--coar-sidebar-min-width, 12rem);max-width:var(--coar-sidebar-max-width, 20rem);background:var(--coar-sidebar-background, var(--coar-background-neutral-primary, #ffffff));border-right:var(--coar-sidebar-border, 1px solid var(--coar-border-neutral-tertiary, #d0d0d0))}:host(.coar-sidebar--position-right){border-right:none;border-left:var(--coar-sidebar-border, 1px solid var(--coar-border-neutral-tertiary, #d0d0d0))}:host(.coar-sidebar--collapsed){width:var(--coar-sidebar-collapsed-width, 4rem);min-width:var(--coar-sidebar-collapsed-width, 4rem)}:host(.coar-sidebar--collapsed) .coar-sidebar__header,:host(.coar-sidebar--collapsed) .coar-sidebar__content,:host(.coar-sidebar--collapsed) .coar-sidebar__footer{display:flex;align-items:center;justify-content:center;text-align:center}.coar-sidebar__header{flex-shrink:0}.coar-sidebar__header:empty{display:none}.coar-sidebar__content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--coar-sidebar-content-padding, var(--coar-spacing-s, 8px))}.coar-sidebar__content ::ng-deep coar-menu{padding:0}.coar-sidebar__content ::ng-deep coar-menu-heading{margin-top:var(--coar-spacing-l, 16px);font-size:var(--coar-font-size-xs, 12px)}.coar-sidebar__content ::ng-deep coar-menu-item{border-radius:var(--coar-radius-xxs);margin:var(--coar-spacing-3xs, 2px) 0}.coar-sidebar__content ::ng-deep coar-menu-item:hover{background:var(--coar-background-neutral-tertiary)}.coar-sidebar__content ::ng-deep coar-menu-item.active{background:var(--coar-background-neutral-tertiary)}.coar-sidebar__footer{flex-shrink:0}.coar-sidebar__footer:empty{display:none}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+
 /**
  * Standalone label component for consistent form labeling across the design system.
  *
@@ -4852,5 +4907,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, COAR_LOCALE_SERVICE, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
+export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, COAR_LOCALE_SERVICE, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSidebarComponent, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
 //# sourceMappingURL=cocoar-ui-components.mjs.map