@kksdev/ds-angular 1.7.1 → 1.7.2
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.
|
@@ -9595,7 +9595,7 @@ class DsTimePickerPanelComponent {
|
|
|
9595
9595
|
const val = this.value();
|
|
9596
9596
|
const fmt = this.format();
|
|
9597
9597
|
this.parseAndSetValue(val, fmt);
|
|
9598
|
-
}
|
|
9598
|
+
});
|
|
9599
9599
|
}
|
|
9600
9600
|
ngAfterViewInit() {
|
|
9601
9601
|
this.initialized = true;
|
|
@@ -10494,10 +10494,12 @@ class DsTreeNodeComponent {
|
|
|
10494
10494
|
}, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
|
|
10495
10495
|
nodeIcon = computed(() => {
|
|
10496
10496
|
const node = this.node();
|
|
10497
|
-
// Custom icon
|
|
10497
|
+
// Custom icon with optional expanded variant
|
|
10498
10498
|
if (node.icon) {
|
|
10499
|
-
|
|
10500
|
-
|
|
10499
|
+
if (this.hasChildren() && this.isExpanded() && node.expandedIcon) {
|
|
10500
|
+
return node.expandedIcon;
|
|
10501
|
+
}
|
|
10502
|
+
return node.icon;
|
|
10501
10503
|
}
|
|
10502
10504
|
// Default folder/file icons
|
|
10503
10505
|
if (this.hasChildren()) {
|
|
@@ -12023,11 +12025,11 @@ class DsCalendar {
|
|
|
12023
12025
|
effect(() => {
|
|
12024
12026
|
const value = this.value();
|
|
12025
12027
|
this.displayDate.set(new Date(value));
|
|
12026
|
-
}
|
|
12028
|
+
});
|
|
12027
12029
|
// Synchroniser currentMode avec mode
|
|
12028
12030
|
effect(() => {
|
|
12029
12031
|
this.currentMode.set(this.mode());
|
|
12030
|
-
}
|
|
12032
|
+
});
|
|
12031
12033
|
}
|
|
12032
12034
|
// =========================================================================
|
|
12033
12035
|
// MÉTHODES PUBLIQUES
|
|
@@ -14987,11 +14989,11 @@ class DsSidebar {
|
|
|
14987
14989
|
}
|
|
14988
14990
|
}
|
|
14989
14991
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebar, isStandalone: true, selector: "ds-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, responsiveBreakpoint: { classPropertyName: "responsiveBreakpoint", publicName: "responsiveBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, autoCollapseOnMobile: { classPropertyName: "autoCollapseOnMobile", publicName: "autoCollapseOnMobile", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, collapsedTrigger: { classPropertyName: "collapsedTrigger", publicName: "collapsedTrigger", isSignal: true, isRequired: false, transformFunction: null }, initialActiveItemId: { classPropertyName: "initialActiveItemId", publicName: "initialActiveItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemExpand: "itemExpand", modeChange: "modeChange", overlayOpened: "overlayOpened", overlayClosed: "overlayClosed" }, viewQueries: [{ propertyName: "sidebarContainer", first: true, predicate: ["sidebarContainer"], descendants: true }, { propertyName: "itemComponents", predicate: DsSidebarItemComponent, descendants: true }], ngImport: i0, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n <div\n class=\"ds-sidebar__backdrop\"\n (click)=\"handleBackdropClick()\"\n aria-hidden=\"true\">\n </div>\n}\n\n<!-- Sidebar container -->\n<nav\n #sidebarContainer\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n (keydown)=\"handleKeyDown($event)\">\n\n <!-- Header -->\n <div class=\"ds-sidebar__header\">\n <ng-content select=\"[sidebar-header]\"></ng-content>\n\n <!-- Toggle button -->\n @if (collapsible() && internalMode() !== 'overlay') {\n <button\n type=\"button\"\n class=\"ds-sidebar__toggle-btn\"\n [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n [attr.aria-expanded]=\"internalMode() === 'full'\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n </button>\n }\n\n <!-- Close button (overlay mode) -->\n @if (internalMode() === 'overlay' && isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__close-btn\"\n aria-label=\"Fermer le menu\"\n (click)=\"closeOverlay()\">\n <fa-icon [icon]=\"collapseIcon\" />\n </button>\n }\n </div>\n\n <!-- Body (items) -->\n <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n @for (item of items(); track item.id) {\n <ds-sidebar-item\n [item]=\"item\"\n [level]=\"0\"\n [mode]=\"internalMode()\"\n [showTooltip]=\"showTooltips()\"\n [sidebarPosition]=\"position()\"\n [collapsedTrigger]=\"collapsedTrigger()\"\n [expandedItemIds]=\"expandedItemIds()\"\n [activeItemId]=\"activeItemId()\"\n (itemClick)=\"handleItemClick($event)\"\n (itemToggle)=\"handleItemToggle($event)\"\n (itemKeydown)=\"handleItemKeydown($event)\" />\n }\n </div>\n\n <!-- Footer -->\n <div class=\"ds-sidebar__footer\">\n <ng-content select=\"[sidebar-footer]\"></ng-content>\n </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n <button\n type=\"button\"\n class=\"ds-sidebar__expand-btn\"\n [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n aria-label=\"D\u00E9velopper la sidebar\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"expandIcon\" />\n </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__trigger\"\n [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n aria-label=\"Ouvrir le menu\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOverlayOpen()\"\n (click)=\"openOverlay()\">\n <fa-icon [icon]=\"menuIcon\" />\n </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay{width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: DsSidebarItemComponent, selector: "ds-sidebar-item", inputs: ["item", "level", "mode", "showTooltip", "expandedItemIds", "activeItemId", "sidebarPosition", "collapsedTrigger"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebar, isStandalone: true, selector: "ds-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, responsiveBreakpoint: { classPropertyName: "responsiveBreakpoint", publicName: "responsiveBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, autoCollapseOnMobile: { classPropertyName: "autoCollapseOnMobile", publicName: "autoCollapseOnMobile", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, collapsedTrigger: { classPropertyName: "collapsedTrigger", publicName: "collapsedTrigger", isSignal: true, isRequired: false, transformFunction: null }, initialActiveItemId: { classPropertyName: "initialActiveItemId", publicName: "initialActiveItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemExpand: "itemExpand", modeChange: "modeChange", overlayOpened: "overlayOpened", overlayClosed: "overlayClosed" }, viewQueries: [{ propertyName: "sidebarContainer", first: true, predicate: ["sidebarContainer"], descendants: true }, { propertyName: "itemComponents", predicate: DsSidebarItemComponent, descendants: true }], ngImport: i0, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n <div\n class=\"ds-sidebar__backdrop\"\n (click)=\"handleBackdropClick()\"\n aria-hidden=\"true\">\n </div>\n}\n\n<!-- Sidebar container -->\n<nav\n #sidebarContainer\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n (keydown)=\"handleKeyDown($event)\">\n\n <!-- Header -->\n <div class=\"ds-sidebar__header\">\n <ng-content select=\"[sidebar-header]\"></ng-content>\n\n <!-- Toggle button -->\n @if (collapsible() && internalMode() !== 'overlay') {\n <button\n type=\"button\"\n class=\"ds-sidebar__toggle-btn\"\n [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n [attr.aria-expanded]=\"internalMode() === 'full'\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n </button>\n }\n\n <!-- Close button (overlay mode) -->\n @if (internalMode() === 'overlay' && isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__close-btn\"\n aria-label=\"Fermer le menu\"\n (click)=\"closeOverlay()\">\n <fa-icon [icon]=\"collapseIcon\" />\n </button>\n }\n </div>\n\n <!-- Body (items) -->\n <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n @for (item of items(); track item.id) {\n <ds-sidebar-item\n [item]=\"item\"\n [level]=\"0\"\n [mode]=\"internalMode()\"\n [showTooltip]=\"showTooltips()\"\n [sidebarPosition]=\"position()\"\n [collapsedTrigger]=\"collapsedTrigger()\"\n [expandedItemIds]=\"expandedItemIds()\"\n [activeItemId]=\"activeItemId()\"\n (itemClick)=\"handleItemClick($event)\"\n (itemToggle)=\"handleItemToggle($event)\"\n (itemKeydown)=\"handleItemKeydown($event)\" />\n }\n </div>\n\n <!-- Footer -->\n <div class=\"ds-sidebar__footer\">\n <ng-content select=\"[sidebar-footer]\"></ng-content>\n </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n <button\n type=\"button\"\n class=\"ds-sidebar__expand-btn\"\n [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n aria-label=\"D\u00E9velopper la sidebar\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"expandIcon\" />\n </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__trigger\"\n [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n aria-label=\"Ouvrir le menu\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOverlayOpen()\"\n (click)=\"openOverlay()\">\n <fa-icon [icon]=\"menuIcon\" />\n </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%);width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: DsSidebarItemComponent, selector: "ds-sidebar-item", inputs: ["item", "level", "mode", "showTooltip", "expandedItemIds", "activeItemId", "sidebarPosition", "collapsedTrigger"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14991
14993
|
}
|
|
14992
14994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebar, decorators: [{
|
|
14993
14995
|
type: Component,
|
|
14994
|
-
args: [{ selector: 'ds-sidebar', standalone: true, imports: [CommonModule, FontAwesomeModule, DsSidebarItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n <div\n class=\"ds-sidebar__backdrop\"\n (click)=\"handleBackdropClick()\"\n aria-hidden=\"true\">\n </div>\n}\n\n<!-- Sidebar container -->\n<nav\n #sidebarContainer\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n (keydown)=\"handleKeyDown($event)\">\n\n <!-- Header -->\n <div class=\"ds-sidebar__header\">\n <ng-content select=\"[sidebar-header]\"></ng-content>\n\n <!-- Toggle button -->\n @if (collapsible() && internalMode() !== 'overlay') {\n <button\n type=\"button\"\n class=\"ds-sidebar__toggle-btn\"\n [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n [attr.aria-expanded]=\"internalMode() === 'full'\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n </button>\n }\n\n <!-- Close button (overlay mode) -->\n @if (internalMode() === 'overlay' && isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__close-btn\"\n aria-label=\"Fermer le menu\"\n (click)=\"closeOverlay()\">\n <fa-icon [icon]=\"collapseIcon\" />\n </button>\n }\n </div>\n\n <!-- Body (items) -->\n <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n @for (item of items(); track item.id) {\n <ds-sidebar-item\n [item]=\"item\"\n [level]=\"0\"\n [mode]=\"internalMode()\"\n [showTooltip]=\"showTooltips()\"\n [sidebarPosition]=\"position()\"\n [collapsedTrigger]=\"collapsedTrigger()\"\n [expandedItemIds]=\"expandedItemIds()\"\n [activeItemId]=\"activeItemId()\"\n (itemClick)=\"handleItemClick($event)\"\n (itemToggle)=\"handleItemToggle($event)\"\n (itemKeydown)=\"handleItemKeydown($event)\" />\n }\n </div>\n\n <!-- Footer -->\n <div class=\"ds-sidebar__footer\">\n <ng-content select=\"[sidebar-footer]\"></ng-content>\n </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n <button\n type=\"button\"\n class=\"ds-sidebar__expand-btn\"\n [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n aria-label=\"D\u00E9velopper la sidebar\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"expandIcon\" />\n </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__trigger\"\n [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n aria-label=\"Ouvrir le menu\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOverlayOpen()\"\n (click)=\"openOverlay()\">\n <fa-icon [icon]=\"menuIcon\" />\n </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay{width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"] }]
|
|
14996
|
+
args: [{ selector: 'ds-sidebar', standalone: true, imports: [CommonModule, FontAwesomeModule, DsSidebarItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n <div\n class=\"ds-sidebar__backdrop\"\n (click)=\"handleBackdropClick()\"\n aria-hidden=\"true\">\n </div>\n}\n\n<!-- Sidebar container -->\n<nav\n #sidebarContainer\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n (keydown)=\"handleKeyDown($event)\">\n\n <!-- Header -->\n <div class=\"ds-sidebar__header\">\n <ng-content select=\"[sidebar-header]\"></ng-content>\n\n <!-- Toggle button -->\n @if (collapsible() && internalMode() !== 'overlay') {\n <button\n type=\"button\"\n class=\"ds-sidebar__toggle-btn\"\n [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n [attr.aria-expanded]=\"internalMode() === 'full'\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n </button>\n }\n\n <!-- Close button (overlay mode) -->\n @if (internalMode() === 'overlay' && isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__close-btn\"\n aria-label=\"Fermer le menu\"\n (click)=\"closeOverlay()\">\n <fa-icon [icon]=\"collapseIcon\" />\n </button>\n }\n </div>\n\n <!-- Body (items) -->\n <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n @for (item of items(); track item.id) {\n <ds-sidebar-item\n [item]=\"item\"\n [level]=\"0\"\n [mode]=\"internalMode()\"\n [showTooltip]=\"showTooltips()\"\n [sidebarPosition]=\"position()\"\n [collapsedTrigger]=\"collapsedTrigger()\"\n [expandedItemIds]=\"expandedItemIds()\"\n [activeItemId]=\"activeItemId()\"\n (itemClick)=\"handleItemClick($event)\"\n (itemToggle)=\"handleItemToggle($event)\"\n (itemKeydown)=\"handleItemKeydown($event)\" />\n }\n </div>\n\n <!-- Footer -->\n <div class=\"ds-sidebar__footer\">\n <ng-content select=\"[sidebar-footer]\"></ng-content>\n </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n <button\n type=\"button\"\n class=\"ds-sidebar__expand-btn\"\n [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n aria-label=\"D\u00E9velopper la sidebar\"\n (click)=\"toggleMode()\">\n <fa-icon [icon]=\"expandIcon\" />\n </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n <button\n type=\"button\"\n class=\"ds-sidebar__trigger\"\n [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n aria-label=\"Ouvrir le menu\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOverlayOpen()\"\n (click)=\"openOverlay()\">\n <fa-icon [icon]=\"menuIcon\" />\n </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%);width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"] }]
|
|
14995
14997
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], responsiveBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveBreakpoint", required: false }] }], autoCollapseOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapseOnMobile", required: false }] }], showTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltips", required: false }] }], collapsedTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedTrigger", required: false }] }], initialActiveItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialActiveItemId", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemExpand: [{ type: i0.Output, args: ["itemExpand"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], overlayOpened: [{ type: i0.Output, args: ["overlayOpened"] }], overlayClosed: [{ type: i0.Output, args: ["overlayClosed"] }], sidebarContainer: [{
|
|
14996
14998
|
type: ViewChild,
|
|
14997
14999
|
args: ['sidebarContainer']
|
|
@@ -15542,11 +15544,11 @@ class DsListItem {
|
|
|
15542
15544
|
}
|
|
15543
15545
|
}
|
|
15544
15546
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsListItem, isStandalone: true, selector: "ds-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"itemClasses()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"tabindex()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-selected]=\"selected() || null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <!-- Indicateur de priorit\u00E9/statut -->\n @if (showIndicator()) {\n <span\n class=\"ds-list-item__indicator\"\n [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n [style.--indicator-color]=\"resolveIndicatorColor()\"\n aria-hidden=\"true\"\n ></span>\n }\n\n <!-- Checkbox -->\n
|
|
15547
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsListItem, isStandalone: true, selector: "ds-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"itemClasses()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"tabindex()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-selected]=\"selected() || null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <!-- Indicateur de priorit\u00E9/statut (toute la hauteur) -->\n @if (showIndicator()) {\n <span\n class=\"ds-list-item__indicator\"\n [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n [style.--indicator-color]=\"resolveIndicatorColor()\"\n aria-hidden=\"true\"\n ></span>\n }\n\n <!-- Wrapper des lignes -->\n <div class=\"ds-list-item__wrapper\">\n <!-- Ligne 1 : Checkbox + Titre + Meta + Actions -->\n <div class=\"ds-list-item__row ds-list-item__row--primary\">\n <!-- Checkbox -->\n @if (checkable()) {\n <primitive-checkbox\n class=\"ds-list-item__checkbox\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n size=\"sm\"\n (checkedChange)=\"handleCheckedChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n\n <!-- Contenu principal -->\n <div class=\"ds-list-item__content\">\n <span class=\"ds-list-item__title\">{{ title() }}</span>\n\n @if (subtitle()) {\n <span class=\"ds-list-item__subtitle\">{{ subtitle() }}</span>\n }\n\n <!-- Slot pour contenu additionnel inline (tags, badges) -->\n <ng-content select=\"[inline]\" />\n </div>\n\n <!-- Zone de m\u00E9tadonn\u00E9es (time, duration, etc.) -->\n <div class=\"ds-list-item__meta\">\n <ng-content select=\"[meta]\" />\n </div>\n\n <!-- Actions (boutons, menus) - visibles au hover -->\n <div class=\"ds-list-item__actions\">\n <ng-content select=\"[actions]\" />\n </div>\n </div>\n\n <!-- Ligne 2 : Contenu secondaire (optionnel) -->\n <div class=\"ds-list-item__row ds-list-item__row--secondary\">\n <ng-content select=\"[secondary]\" />\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ds-list-item{display:flex;align-items:stretch;gap:var(--space-2, 8px);padding:0 var(--space-3, 12px);border-radius:var(--radius-1, 4px);cursor:default;transition:background-color .15s ease}.ds-list-item__wrapper{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--space-2, 8px) 0}.ds-list-item__row{display:flex;align-items:center;gap:var(--space-2, 8px)}.ds-list-item__row--primary{min-height:24px}.ds-list-item__row--secondary{padding-left:calc(16px + var(--space-2, 8px));padding-top:var(--space-1, 4px)}.ds-list-item__row--secondary:empty{display:none}.ds-list-item--sm .ds-list-item__wrapper{padding:var(--space-1, 4px) 0}.ds-list-item--sm .ds-list-item__row--primary{min-height:20px}.ds-list-item--sm .ds-list-item__title{font-size:var(--font-size-1, 12px)}.ds-list-item--sm .ds-list-item__subtitle{font-size:var(--font-size-0, 11px)}.ds-list-item--sm .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--sm .ds-list-item__indicator--dot{width:6px;height:6px}.ds-list-item--sm .ds-list-item__row--secondary{padding-left:calc(14px + var(--space-1, 4px))}.ds-list-item--md .ds-list-item__row--primary{min-height:24px}.ds-list-item--md .ds-list-item__title{font-size:var(--font-size-2, 14px)}.ds-list-item--md .ds-list-item__subtitle{font-size:var(--font-size-1, 12px)}.ds-list-item--md .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--md .ds-list-item__indicator--dot{width:8px;height:8px}.ds-list-item--lg .ds-list-item__wrapper{padding:var(--space-3, 12px) 0}.ds-list-item--lg .ds-list-item__row--primary{min-height:28px}.ds-list-item--lg .ds-list-item__title{font-size:var(--font-size-3, 16px)}.ds-list-item--lg .ds-list-item__subtitle{font-size:var(--font-size-2, 14px)}.ds-list-item--lg .ds-list-item__indicator--bar{width:4px;align-self:stretch}.ds-list-item--lg .ds-list-item__indicator--dot{width:10px;height:10px}.ds-list-item--lg .ds-list-item__row--secondary{padding-left:calc(18px + var(--space-2, 8px))}.ds-list-item--clickable{cursor:pointer}.ds-list-item--clickable:hover{background-color:var(--background-hover, rgba(255, 255, 255, .08))}.ds-list-item--clickable:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-item--clickable:active{background-color:var(--background-active, rgba(255, 255, 255, .12))}.ds-list-item--completed .ds-list-item__title{color:var(--text-muted, #9ca3af);text-decoration:line-through}.ds-list-item--completed .ds-list-item__subtitle{text-decoration:line-through}.ds-list-item--completed .ds-list-item__meta{opacity:.5}.ds-list-item--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.ds-list-item--selected{background-color:var(--background-selected, rgba(59, 130, 246, .1))}.ds-list-item--selected:hover{background-color:var(--background-selected-hover, rgba(59, 130, 246, .15))}.ds-list-item__indicator{flex-shrink:0;background-color:var(--indicator-color, var(--color-neutral, #6b7280))}.ds-list-item__indicator--bar{width:3px;border-radius:2px;align-self:stretch}.ds-list-item__indicator--dot{border-radius:50%;align-self:center}.ds-list-item__checkbox{flex-shrink:0}.ds-list-item__content{flex:1;display:flex;align-items:center;gap:var(--space-2, 8px);min-width:0}.ds-list-item__title{font-weight:var(--font-weight-normal, 400);color:var(--text-default, #f3f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__subtitle{color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__meta{display:flex;align-items:center;gap:var(--space-2, 8px);flex-shrink:0;font-size:var(--font-size-1, 12px);color:var(--text-muted, #9ca3af)}.ds-list-item__actions{display:flex;align-items:center;gap:var(--space-1, 4px);flex-shrink:0;opacity:0;transition:opacity .15s ease}.ds-list-item:hover .ds-list-item__actions,.ds-list-item:focus-within .ds-list-item__actions{opacity:1}::ng-deep [inline]{flex-shrink:0}::ng-deep [meta]{display:inline-flex;align-items:center}::ng-deep [actions]{display:inline-flex;align-items:center}::ng-deep [secondary]{display:flex;align-items:center;gap:var(--space-1, 4px);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PrimitiveCheckbox, selector: "primitive-checkbox", inputs: ["checked", "indeterminate", "disabled", "size", "label", "checkboxId"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15546
15548
|
}
|
|
15547
15549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsListItem, decorators: [{
|
|
15548
15550
|
type: Component,
|
|
15549
|
-
args: [{ selector: 'ds-list-item', standalone: true, imports: [CommonModule, PrimitiveCheckbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"itemClasses()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"tabindex()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-selected]=\"selected() || null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <!-- Indicateur de priorit\u00E9/statut -->\n @if (showIndicator()) {\n <span\n class=\"ds-list-item__indicator\"\n [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n [style.--indicator-color]=\"resolveIndicatorColor()\"\n aria-hidden=\"true\"\n ></span>\n }\n\n <!-- Checkbox -->\n
|
|
15551
|
+
args: [{ selector: 'ds-list-item', standalone: true, imports: [CommonModule, PrimitiveCheckbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"itemClasses()\"\n [attr.role]=\"role()\"\n [attr.tabindex]=\"tabindex()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-selected]=\"selected() || null\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <!-- Indicateur de priorit\u00E9/statut (toute la hauteur) -->\n @if (showIndicator()) {\n <span\n class=\"ds-list-item__indicator\"\n [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n [style.--indicator-color]=\"resolveIndicatorColor()\"\n aria-hidden=\"true\"\n ></span>\n }\n\n <!-- Wrapper des lignes -->\n <div class=\"ds-list-item__wrapper\">\n <!-- Ligne 1 : Checkbox + Titre + Meta + Actions -->\n <div class=\"ds-list-item__row ds-list-item__row--primary\">\n <!-- Checkbox -->\n @if (checkable()) {\n <primitive-checkbox\n class=\"ds-list-item__checkbox\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n size=\"sm\"\n (checkedChange)=\"handleCheckedChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n\n <!-- Contenu principal -->\n <div class=\"ds-list-item__content\">\n <span class=\"ds-list-item__title\">{{ title() }}</span>\n\n @if (subtitle()) {\n <span class=\"ds-list-item__subtitle\">{{ subtitle() }}</span>\n }\n\n <!-- Slot pour contenu additionnel inline (tags, badges) -->\n <ng-content select=\"[inline]\" />\n </div>\n\n <!-- Zone de m\u00E9tadonn\u00E9es (time, duration, etc.) -->\n <div class=\"ds-list-item__meta\">\n <ng-content select=\"[meta]\" />\n </div>\n\n <!-- Actions (boutons, menus) - visibles au hover -->\n <div class=\"ds-list-item__actions\">\n <ng-content select=\"[actions]\" />\n </div>\n </div>\n\n <!-- Ligne 2 : Contenu secondaire (optionnel) -->\n <div class=\"ds-list-item__row ds-list-item__row--secondary\">\n <ng-content select=\"[secondary]\" />\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ds-list-item{display:flex;align-items:stretch;gap:var(--space-2, 8px);padding:0 var(--space-3, 12px);border-radius:var(--radius-1, 4px);cursor:default;transition:background-color .15s ease}.ds-list-item__wrapper{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--space-2, 8px) 0}.ds-list-item__row{display:flex;align-items:center;gap:var(--space-2, 8px)}.ds-list-item__row--primary{min-height:24px}.ds-list-item__row--secondary{padding-left:calc(16px + var(--space-2, 8px));padding-top:var(--space-1, 4px)}.ds-list-item__row--secondary:empty{display:none}.ds-list-item--sm .ds-list-item__wrapper{padding:var(--space-1, 4px) 0}.ds-list-item--sm .ds-list-item__row--primary{min-height:20px}.ds-list-item--sm .ds-list-item__title{font-size:var(--font-size-1, 12px)}.ds-list-item--sm .ds-list-item__subtitle{font-size:var(--font-size-0, 11px)}.ds-list-item--sm .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--sm .ds-list-item__indicator--dot{width:6px;height:6px}.ds-list-item--sm .ds-list-item__row--secondary{padding-left:calc(14px + var(--space-1, 4px))}.ds-list-item--md .ds-list-item__row--primary{min-height:24px}.ds-list-item--md .ds-list-item__title{font-size:var(--font-size-2, 14px)}.ds-list-item--md .ds-list-item__subtitle{font-size:var(--font-size-1, 12px)}.ds-list-item--md .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--md .ds-list-item__indicator--dot{width:8px;height:8px}.ds-list-item--lg .ds-list-item__wrapper{padding:var(--space-3, 12px) 0}.ds-list-item--lg .ds-list-item__row--primary{min-height:28px}.ds-list-item--lg .ds-list-item__title{font-size:var(--font-size-3, 16px)}.ds-list-item--lg .ds-list-item__subtitle{font-size:var(--font-size-2, 14px)}.ds-list-item--lg .ds-list-item__indicator--bar{width:4px;align-self:stretch}.ds-list-item--lg .ds-list-item__indicator--dot{width:10px;height:10px}.ds-list-item--lg .ds-list-item__row--secondary{padding-left:calc(18px + var(--space-2, 8px))}.ds-list-item--clickable{cursor:pointer}.ds-list-item--clickable:hover{background-color:var(--background-hover, rgba(255, 255, 255, .08))}.ds-list-item--clickable:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-item--clickable:active{background-color:var(--background-active, rgba(255, 255, 255, .12))}.ds-list-item--completed .ds-list-item__title{color:var(--text-muted, #9ca3af);text-decoration:line-through}.ds-list-item--completed .ds-list-item__subtitle{text-decoration:line-through}.ds-list-item--completed .ds-list-item__meta{opacity:.5}.ds-list-item--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.ds-list-item--selected{background-color:var(--background-selected, rgba(59, 130, 246, .1))}.ds-list-item--selected:hover{background-color:var(--background-selected-hover, rgba(59, 130, 246, .15))}.ds-list-item__indicator{flex-shrink:0;background-color:var(--indicator-color, var(--color-neutral, #6b7280))}.ds-list-item__indicator--bar{width:3px;border-radius:2px;align-self:stretch}.ds-list-item__indicator--dot{border-radius:50%;align-self:center}.ds-list-item__checkbox{flex-shrink:0}.ds-list-item__content{flex:1;display:flex;align-items:center;gap:var(--space-2, 8px);min-width:0}.ds-list-item__title{font-weight:var(--font-weight-normal, 400);color:var(--text-default, #f3f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__subtitle{color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__meta{display:flex;align-items:center;gap:var(--space-2, 8px);flex-shrink:0;font-size:var(--font-size-1, 12px);color:var(--text-muted, #9ca3af)}.ds-list-item__actions{display:flex;align-items:center;gap:var(--space-1, 4px);flex-shrink:0;opacity:0;transition:opacity .15s ease}.ds-list-item:hover .ds-list-item__actions,.ds-list-item:focus-within .ds-list-item__actions{opacity:1}::ng-deep [inline]{flex-shrink:0}::ng-deep [meta]{display:inline-flex;align-items:center}::ng-deep [actions]{display:inline-flex;align-items:center}::ng-deep [secondary]{display:flex;align-items:center;gap:var(--space-1, 4px);flex-wrap:wrap}\n"] }]
|
|
15550
15552
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
15551
15553
|
|
|
15552
15554
|
/**
|