@kksdev/ds-angular 1.7.0 → 1.7.1
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.
- package/fesm2022/kksdev-ds-angular.mjs +434 -106
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +108 -52
- package/package.json +2 -2
- package/src/styles/storybook.scss +0 -58
|
@@ -2254,11 +2254,11 @@ class PrimitiveToggle {
|
|
|
2254
2254
|
}
|
|
2255
2255
|
}
|
|
2256
2256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveToggle, isStandalone: true, selector: "primitive-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, toggleId: { classPropertyName: "toggleId", publicName: "toggleId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChange: "checkedChange" }, ngImport: i0, template: "<div [ngClass]=\"cssClasses()\">\n @if (label() && labelPosition() === 'left') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n\n <div\n class=\"primitive-toggle__switch\"\n (click)=\"onToggle()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.role]=\"'switch'\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"label() ? toggleId() + '-label' : null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n >\n <div class=\"primitive-toggle__track\">\n <div class=\"primitive-toggle__thumb\"></div>\n </div>\n </div>\n\n @if (label() && labelPosition() === 'right') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n</div>\n", styles: [".primitive-toggle{display:inline-flex;align-items:center;gap:var(--space-2)}.primitive-toggle--label-left,.primitive-toggle--label-right{flex-direction:row}.primitive-toggle__switch{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.primitive-toggle--disabled .primitive-toggle__switch{cursor:not-allowed;opacity:.6}.primitive-toggle__track{position:relative;border-radius:var(--toggle-track-radius);background-color:var(--toggle-track-bg);transition:background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__track{width:var(--toggle-width-sm);height:var(--toggle-height-sm)}.primitive-toggle--md .primitive-toggle__track{width:var(--toggle-width-md);height:var(--toggle-height-md)}.primitive-toggle--lg .primitive-toggle__track{width:var(--toggle-width-lg);height:var(--toggle-height-lg)}.primitive-toggle__thumb{position:absolute;top:2px;left:2px;border-radius:50%;background-color:var(--toggle-thumb-bg);box-shadow:var(--toggle-thumb-shadow);transition:transform var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__thumb{width:var(--toggle-thumb-size-sm);height:var(--toggle-thumb-size-sm)}.primitive-toggle--md .primitive-toggle__thumb{width:var(--toggle-thumb-size-md);height:var(--toggle-thumb-size-md)}.primitive-toggle--lg .primitive-toggle__thumb{width:var(--toggle-thumb-size-lg);height:var(--toggle-thumb-size-lg)}.primitive-toggle__label{font-size:var(--font-size-3);color:var(--text-default);line-height:var(--line-height-normal);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--duration-fast) var(--easing-default)}.primitive-toggle__label--disabled{color:var(--text-disabled);cursor:not-allowed}.primitive-toggle--checked .primitive-toggle__track{background-color:var(--toggle-track-checked-bg)}.primitive-toggle--
|
|
2257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveToggle, isStandalone: true, selector: "primitive-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, toggleId: { classPropertyName: "toggleId", publicName: "toggleId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChange: "checkedChange" }, ngImport: i0, template: "<div [ngClass]=\"cssClasses()\">\n @if (label() && labelPosition() === 'left') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n\n <div\n class=\"primitive-toggle__switch\"\n (click)=\"onToggle()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.role]=\"'switch'\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"label() ? toggleId() + '-label' : null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n >\n <div class=\"primitive-toggle__track\">\n <div class=\"primitive-toggle__thumb\"></div>\n </div>\n </div>\n\n @if (label() && labelPosition() === 'right') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n</div>\n", styles: [".primitive-toggle{display:inline-flex;align-items:center;gap:var(--space-2)}.primitive-toggle--label-left,.primitive-toggle--label-right{flex-direction:row}.primitive-toggle__switch{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.primitive-toggle--disabled .primitive-toggle__switch{cursor:not-allowed;opacity:.6}.primitive-toggle__track{position:relative;border-radius:var(--toggle-track-radius);background-color:var(--toggle-track-bg);transition:background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__track{width:var(--toggle-width-sm);height:var(--toggle-height-sm)}.primitive-toggle--md .primitive-toggle__track{width:var(--toggle-width-md);height:var(--toggle-height-md)}.primitive-toggle--lg .primitive-toggle__track{width:var(--toggle-width-lg);height:var(--toggle-height-lg)}.primitive-toggle__thumb{position:absolute;top:2px;left:2px;border-radius:50%;background-color:var(--toggle-thumb-bg);box-shadow:var(--toggle-thumb-shadow);transition:transform var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__thumb{width:var(--toggle-thumb-size-sm);height:var(--toggle-thumb-size-sm)}.primitive-toggle--md .primitive-toggle__thumb{width:var(--toggle-thumb-size-md);height:var(--toggle-thumb-size-md)}.primitive-toggle--lg .primitive-toggle__thumb{width:var(--toggle-thumb-size-lg);height:var(--toggle-thumb-size-lg)}.primitive-toggle__label{font-size:var(--font-size-3);color:var(--text-default);line-height:var(--line-height-normal);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--duration-fast) var(--easing-default)}.primitive-toggle__label--disabled{color:var(--text-disabled);cursor:not-allowed}.primitive-toggle--checked .primitive-toggle__track{background-color:var(--toggle-track-checked-bg)}.primitive-toggle--checked.primitive-toggle--sm .primitive-toggle__thumb{transform:translate(calc(var(--toggle-width-sm) - var(--toggle-thumb-size-sm) - 4px))}.primitive-toggle--checked.primitive-toggle--md .primitive-toggle__thumb{transform:translate(calc(var(--toggle-width-md) - var(--toggle-thumb-size-md) - 4px))}.primitive-toggle--checked.primitive-toggle--lg .primitive-toggle__thumb{transform:translate(calc(var(--toggle-width-lg) - var(--toggle-thumb-size-lg) - 4px))}.primitive-toggle:hover:not(.primitive-toggle--disabled) .primitive-toggle__track{background-color:var(--toggle-hover-track-bg)}.primitive-toggle--checked:hover:not(.primitive-toggle--disabled) .primitive-toggle__track{background-color:var(--toggle-hover-track-checked-bg)}.primitive-toggle--focused .primitive-toggle__track{box-shadow:var(--toggle-focus-ring)}.primitive-toggle--disabled .primitive-toggle__track{background-color:var(--toggle-disabled-track-bg)}.primitive-toggle--disabled .primitive-toggle__thumb{background-color:var(--toggle-disabled-thumb-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2258
2258
|
}
|
|
2259
2259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveToggle, decorators: [{
|
|
2260
2260
|
type: Component,
|
|
2261
|
-
args: [{ selector: 'primitive-toggle', standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"cssClasses()\">\n @if (label() && labelPosition() === 'left') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n\n <div\n class=\"primitive-toggle__switch\"\n (click)=\"onToggle()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.role]=\"'switch'\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"label() ? toggleId() + '-label' : null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n >\n <div class=\"primitive-toggle__track\">\n <div class=\"primitive-toggle__thumb\"></div>\n </div>\n </div>\n\n @if (label() && labelPosition() === 'right') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n</div>\n", styles: [".primitive-toggle{display:inline-flex;align-items:center;gap:var(--space-2)}.primitive-toggle--label-left,.primitive-toggle--label-right{flex-direction:row}.primitive-toggle__switch{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.primitive-toggle--disabled .primitive-toggle__switch{cursor:not-allowed;opacity:.6}.primitive-toggle__track{position:relative;border-radius:var(--toggle-track-radius);background-color:var(--toggle-track-bg);transition:background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__track{width:var(--toggle-width-sm);height:var(--toggle-height-sm)}.primitive-toggle--md .primitive-toggle__track{width:var(--toggle-width-md);height:var(--toggle-height-md)}.primitive-toggle--lg .primitive-toggle__track{width:var(--toggle-width-lg);height:var(--toggle-height-lg)}.primitive-toggle__thumb{position:absolute;top:2px;left:2px;border-radius:50%;background-color:var(--toggle-thumb-bg);box-shadow:var(--toggle-thumb-shadow);transition:transform var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__thumb{width:var(--toggle-thumb-size-sm);height:var(--toggle-thumb-size-sm)}.primitive-toggle--md .primitive-toggle__thumb{width:var(--toggle-thumb-size-md);height:var(--toggle-thumb-size-md)}.primitive-toggle--lg .primitive-toggle__thumb{width:var(--toggle-thumb-size-lg);height:var(--toggle-thumb-size-lg)}.primitive-toggle__label{font-size:var(--font-size-3);color:var(--text-default);line-height:var(--line-height-normal);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--duration-fast) var(--easing-default)}.primitive-toggle__label--disabled{color:var(--text-disabled);cursor:not-allowed}.primitive-toggle--checked .primitive-toggle__track{background-color:var(--toggle-track-checked-bg)}.primitive-toggle--
|
|
2261
|
+
args: [{ selector: 'primitive-toggle', standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"cssClasses()\">\n @if (label() && labelPosition() === 'left') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n\n <div\n class=\"primitive-toggle__switch\"\n (click)=\"onToggle()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.role]=\"'switch'\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"label() ? toggleId() + '-label' : null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n >\n <div class=\"primitive-toggle__track\">\n <div class=\"primitive-toggle__thumb\"></div>\n </div>\n </div>\n\n @if (label() && labelPosition() === 'right') {\n <label\n [id]=\"toggleId() + '-label'\"\n class=\"primitive-toggle__label\"\n [class.primitive-toggle__label--disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n >\n {{ label() }}\n </label>\n }\n</div>\n", styles: [".primitive-toggle{display:inline-flex;align-items:center;gap:var(--space-2)}.primitive-toggle--label-left,.primitive-toggle--label-right{flex-direction:row}.primitive-toggle__switch{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.primitive-toggle--disabled .primitive-toggle__switch{cursor:not-allowed;opacity:.6}.primitive-toggle__track{position:relative;border-radius:var(--toggle-track-radius);background-color:var(--toggle-track-bg);transition:background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__track{width:var(--toggle-width-sm);height:var(--toggle-height-sm)}.primitive-toggle--md .primitive-toggle__track{width:var(--toggle-width-md);height:var(--toggle-height-md)}.primitive-toggle--lg .primitive-toggle__track{width:var(--toggle-width-lg);height:var(--toggle-height-lg)}.primitive-toggle__thumb{position:absolute;top:2px;left:2px;border-radius:50%;background-color:var(--toggle-thumb-bg);box-shadow:var(--toggle-thumb-shadow);transition:transform var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.primitive-toggle--sm .primitive-toggle__thumb{width:var(--toggle-thumb-size-sm);height:var(--toggle-thumb-size-sm)}.primitive-toggle--md .primitive-toggle__thumb{width:var(--toggle-thumb-size-md);height:var(--toggle-thumb-size-md)}.primitive-toggle--lg .primitive-toggle__thumb{width:var(--toggle-thumb-size-lg);height:var(--toggle-thumb-size-lg)}.primitive-toggle__label{font-size:var(--font-size-3);color:var(--text-default);line-height:var(--line-height-normal);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--duration-fast) var(--easing-default)}.primitive-toggle__label--disabled{color:var(--text-disabled);cursor:not-allowed}.primitive-toggle--checked .primitive-toggle__track{background-color:var(--toggle-track-checked-bg)}.primitive-toggle--checked.primitive-toggle--sm .primitive-toggle__thumb{transform:translate(calc(var(--toggle-width-sm) - var(--toggle-thumb-size-sm) - 4px))}.primitive-toggle--checked.primitive-toggle--md .primitive-toggle__thumb{transform:translate(calc(var(--toggle-width-md) - var(--toggle-thumb-size-md) - 4px))}.primitive-toggle--checked.primitive-toggle--lg .primitive-toggle__thumb{transform:translate(calc(var(--toggle-width-lg) - var(--toggle-thumb-size-lg) - 4px))}.primitive-toggle:hover:not(.primitive-toggle--disabled) .primitive-toggle__track{background-color:var(--toggle-hover-track-bg)}.primitive-toggle--checked:hover:not(.primitive-toggle--disabled) .primitive-toggle__track{background-color:var(--toggle-hover-track-checked-bg)}.primitive-toggle--focused .primitive-toggle__track{box-shadow:var(--toggle-focus-ring)}.primitive-toggle--disabled .primitive-toggle__track{background-color:var(--toggle-disabled-track-bg)}.primitive-toggle--disabled .primitive-toggle__thumb{background-color:var(--toggle-disabled-thumb-bg)}\n"] }]
|
|
2262
2262
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], toggleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleId", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
|
|
2263
2263
|
|
|
2264
2264
|
/*
|
|
@@ -3038,6 +3038,44 @@ const AUTOCOMPLETE_POSITIONS = [
|
|
|
3038
3038
|
offsetY: -4,
|
|
3039
3039
|
},
|
|
3040
3040
|
];
|
|
3041
|
+
/**
|
|
3042
|
+
* Positions pour popover sidebar (sidebar à gauche → popover à droite)
|
|
3043
|
+
*
|
|
3044
|
+
* Utilise DROPDOWN_POSITIONS_RIGHT existant.
|
|
3045
|
+
* Alias exporté pour clarté sémantique.
|
|
3046
|
+
*/
|
|
3047
|
+
const SIDEBAR_POPOVER_POSITIONS_RIGHT = DROPDOWN_POSITIONS_RIGHT;
|
|
3048
|
+
/**
|
|
3049
|
+
* Positions pour popover sidebar (sidebar à droite → popover à gauche)
|
|
3050
|
+
*
|
|
3051
|
+
* Stratégie :
|
|
3052
|
+
* 1. Position préférée : à gauche, aligné en haut
|
|
3053
|
+
* 2. Fallback : à gauche, aligné au centre
|
|
3054
|
+
* 3. Fallback : à droite si pas d'espace à gauche
|
|
3055
|
+
*/
|
|
3056
|
+
const SIDEBAR_POPOVER_POSITIONS_LEFT = [
|
|
3057
|
+
{
|
|
3058
|
+
originX: 'start',
|
|
3059
|
+
originY: 'top',
|
|
3060
|
+
overlayX: 'end',
|
|
3061
|
+
overlayY: 'top',
|
|
3062
|
+
offsetX: -6,
|
|
3063
|
+
},
|
|
3064
|
+
{
|
|
3065
|
+
originX: 'start',
|
|
3066
|
+
originY: 'center',
|
|
3067
|
+
overlayX: 'end',
|
|
3068
|
+
overlayY: 'center',
|
|
3069
|
+
offsetX: -6,
|
|
3070
|
+
},
|
|
3071
|
+
{
|
|
3072
|
+
originX: 'end',
|
|
3073
|
+
originY: 'top',
|
|
3074
|
+
overlayX: 'start',
|
|
3075
|
+
overlayY: 'top',
|
|
3076
|
+
offsetX: 6,
|
|
3077
|
+
},
|
|
3078
|
+
];
|
|
3041
3079
|
|
|
3042
3080
|
class DsDropdown {
|
|
3043
3081
|
// Inputs
|
|
@@ -3988,7 +4026,7 @@ class DsModalComponent {
|
|
|
3988
4026
|
body.classList.remove('modal-open');
|
|
3989
4027
|
}
|
|
3990
4028
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3991
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ["icon"], descendants: true }], viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (shouldRenderOverlay()) {\n <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n <div #modalContainer\n class=\"modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"modalTitleId\"\n [attr.aria-describedby]=\"modalDescId\"\n [ngClass]=\"modalClasses()\"\n >\n <header class=\"modal-header\">\n @if (showIcon()) {\n <div class=\"modal-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n }\n </div>\n }\n <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n @if (closable()) {\n <primitive-button\n #closeButton\n class=\"close-btn\"\n variant=\"ghost\"\n appearance=\"outline\"\n size=\"sm\"\n (clicked)=\"close()\"\n aria-label=\"Fermer la fen\u00EAtre\"\n >\u2715</primitive-button>\n }\n </header>\n <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n </div>\n <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n <ng-content select=\"[footer]\"></ng-content>\n </footer>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:var(--space-1);line-height:var(--line-height-tight);border-radius:var(--radius-1);transition:color var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),transform var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default);background-color:rgba(var(--black-rgb),.05)}.modal-header .close-btn button:active{transform:scale(.92)}.modal-header .close-btn button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background-main, #fff),0 0 0 4px var(--color-primary)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media
|
|
4029
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ["icon"], descendants: true }], viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (shouldRenderOverlay()) {\n <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n <div #modalContainer\n class=\"modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"modalTitleId\"\n [attr.aria-describedby]=\"modalDescId\"\n [ngClass]=\"modalClasses()\"\n >\n <header class=\"modal-header\">\n @if (showIcon()) {\n <div class=\"modal-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n }\n </div>\n }\n <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n @if (closable()) {\n <primitive-button\n #closeButton\n class=\"close-btn\"\n variant=\"ghost\"\n appearance=\"outline\"\n size=\"sm\"\n (clicked)=\"close()\"\n aria-label=\"Fermer la fen\u00EAtre\"\n >\u2715</primitive-button>\n }\n </header>\n <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n </div>\n <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n <ng-content select=\"[footer]\"></ng-content>\n </footer>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:var(--space-1);line-height:var(--line-height-tight);border-radius:var(--radius-1);transition:color var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),transform var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default);background-color:rgba(var(--black-rgb),.05)}.modal-header .close-btn button:active{transform:scale(.92)}.modal-header .close-btn button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background-main, #fff),0 0 0 4px var(--color-primary)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media(max-width:576px){.modal-footer{flex-direction:column;align-items:stretch;justify-content:center}.modal-footer ds-button{width:100%}}.modal-footer.with-shadow{box-shadow:var(--modal-footer-shadow, inset 0 1px 0 var(--modal-divider))}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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: PrimitiveButton, selector: "primitive-button", inputs: ["type", "variant", "size", "disabled", "iconStart", "iconEnd", "appearance", "block"], outputs: ["clicked"] }] });
|
|
3992
4030
|
}
|
|
3993
4031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsModalComponent, decorators: [{
|
|
3994
4032
|
type: Component,
|
|
@@ -3996,7 +4034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3996
4034
|
NgClass,
|
|
3997
4035
|
FaIconComponent,
|
|
3998
4036
|
PrimitiveButton
|
|
3999
|
-
], template: "@if (shouldRenderOverlay()) {\n <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n <div #modalContainer\n class=\"modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"modalTitleId\"\n [attr.aria-describedby]=\"modalDescId\"\n [ngClass]=\"modalClasses()\"\n >\n <header class=\"modal-header\">\n @if (showIcon()) {\n <div class=\"modal-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n }\n </div>\n }\n <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n @if (closable()) {\n <primitive-button\n #closeButton\n class=\"close-btn\"\n variant=\"ghost\"\n appearance=\"outline\"\n size=\"sm\"\n (clicked)=\"close()\"\n aria-label=\"Fermer la fen\u00EAtre\"\n >\u2715</primitive-button>\n }\n </header>\n <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n </div>\n <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n <ng-content select=\"[footer]\"></ng-content>\n </footer>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:var(--space-1);line-height:var(--line-height-tight);border-radius:var(--radius-1);transition:color var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),transform var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default);background-color:rgba(var(--black-rgb),.05)}.modal-header .close-btn button:active{transform:scale(.92)}.modal-header .close-btn button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background-main, #fff),0 0 0 4px var(--color-primary)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media
|
|
4037
|
+
], template: "@if (shouldRenderOverlay()) {\n <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n <div #modalContainer\n class=\"modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"modalTitleId\"\n [attr.aria-describedby]=\"modalDescId\"\n [ngClass]=\"modalClasses()\"\n >\n <header class=\"modal-header\">\n @if (showIcon()) {\n <div class=\"modal-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n }\n </div>\n }\n <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n @if (closable()) {\n <primitive-button\n #closeButton\n class=\"close-btn\"\n variant=\"ghost\"\n appearance=\"outline\"\n size=\"sm\"\n (clicked)=\"close()\"\n aria-label=\"Fermer la fen\u00EAtre\"\n >\u2715</primitive-button>\n }\n </header>\n <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n </div>\n <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n <ng-content select=\"[footer]\"></ng-content>\n </footer>\n </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:var(--space-1);line-height:var(--line-height-tight);border-radius:var(--radius-1);transition:color var(--duration-fast) var(--easing-default),background-color var(--duration-fast) var(--easing-default),transform var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default);background-color:rgba(var(--black-rgb),.05)}.modal-header .close-btn button:active{transform:scale(.92)}.modal-header .close-btn button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background-main, #fff),0 0 0 4px var(--color-primary)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media(max-width:576px){.modal-footer{flex-direction:column;align-items:stretch;justify-content:center}.modal-footer ds-button{width:100%}}.modal-footer.with-shadow{box-shadow:var(--modal-footer-shadow, inset 0 1px 0 var(--modal-divider))}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
4000
4038
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{
|
|
4001
4039
|
type: Output
|
|
4002
4040
|
}], closed: [{
|
|
@@ -6684,7 +6722,7 @@ class DsContainer {
|
|
|
6684
6722
|
<div [class]="containerClasses()" [style]="containerStyle()">
|
|
6685
6723
|
<ng-content />
|
|
6686
6724
|
</div>
|
|
6687
|
-
`, isInline: true, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media
|
|
6725
|
+
`, isInline: true, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media(min-width: var(--breakpoint-sm, 576px))and (max-width: var(--breakpoint-md, 767.98px)){.ds-container--gutter-lg{padding-left:var(--space-5);padding-right:var(--space-5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6688
6726
|
}
|
|
6689
6727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsContainer, decorators: [{
|
|
6690
6728
|
type: Component,
|
|
@@ -6692,7 +6730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6692
6730
|
<div [class]="containerClasses()" [style]="containerStyle()">
|
|
6693
6731
|
<ng-content />
|
|
6694
6732
|
</div>
|
|
6695
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media
|
|
6733
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media(min-width: var(--breakpoint-sm, 576px))and (max-width: var(--breakpoint-md, 767.98px)){.ds-container--gutter-lg{padding-left:var(--space-5);padding-right:var(--space-5)}}\n"] }]
|
|
6696
6734
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }] } });
|
|
6697
6735
|
|
|
6698
6736
|
/**
|
|
@@ -11612,11 +11650,11 @@ class DsCarousel {
|
|
|
11612
11650
|
}
|
|
11613
11651
|
}
|
|
11614
11652
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsCarousel, isStandalone: true, selector: "ds-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplaySpeed: { classPropertyName: "autoplaySpeed", publicName: "autoplaySpeed", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, dotsPosition: { classPropertyName: "dotsPosition", publicName: "dotsPosition", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange" }, viewQueries: [{ propertyName: "trackElement", first: true, predicate: ["track"], descendants: true }, { propertyName: "slideElements", predicate: ["slideElement"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (keydown)=\"onKeydown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n tabindex=\"0\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"'Carousel with ' + slides().length + ' slides'\"\n>\n <!-- Arrows -->\n @if (arrows() && slides().length > 1) {\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--left\"\n (click)=\"prev()\"\n [attr.aria-label]=\"'Previous slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.left\" />\n </button>\n\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--right\"\n (click)=\"next()\"\n [attr.aria-label]=\"'Next slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.right\" />\n </button>\n }\n\n <!-- Slides container -->\n <div class=\"ds-carousel__container\">\n <div\n class=\"ds-carousel__track\"\n #track\n [ngStyle]=\"trackStyle()\"\n role=\"list\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <div\n class=\"{{ slideClasses(i) }}\"\n #slideElement\n role=\"listitem\"\n [attr.aria-hidden]=\"i !== internalActiveIndex()\"\n [attr.aria-label]=\"'Slide ' + (i + 1) + ' of ' + slides().length\"\n >\n @if (slide.image) {\n <img\n [src]=\"slide.image\"\n [alt]=\"slide.alt || slide.title || 'Slide ' + (i + 1)\"\n class=\"ds-carousel__image\"\n />\n }\n\n @if (slide.title || slide.description) {\n <div class=\"ds-carousel__content\">\n @if (slide.title) {\n <h3 class=\"ds-carousel__title\">{{ slide.title }}</h3>\n }\n @if (slide.description) {\n <p class=\"ds-carousel__description\">{{ slide.description }}</p>\n }\n </div>\n }\n\n <!-- Content projection for custom slides -->\n <ng-content select=\"[carousel-slide]\" />\n </div>\n }\n </div>\n </div>\n\n <!-- Dots -->\n @if (dots() && slides().length > 1) {\n <div\n class=\"ds-carousel__dots\"\n role=\"tablist\"\n [attr.aria-label]=\"'Carousel navigation'\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <button\n type=\"button\"\n [class]=\"dotClasses(i)\"\n (click)=\"goTo(i)\"\n role=\"tab\"\n [attr.aria-selected]=\"i === internalActiveIndex()\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n [attr.aria-controls]=\"'carousel-slide-' + i\"\n >\n <span class=\"ds-carousel__dot-inner\"></span>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ds-carousel{position:relative;width:100%;overflow:hidden;background-color:var(--carousel-bg, var(--gray-50));border-radius:var(--carousel-radius, var(--radius-2));outline:none}.ds-carousel__container{position:relative;width:100%;height:400px;overflow:hidden}.ds-carousel__track{display:flex;height:100%;transition:transform .3s ease-in-out}.ds-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease-in-out}.ds-carousel__slide--fade{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease-in-out}.ds-carousel__slide--fade.ds-carousel__slide--active{opacity:1;z-index:1}.ds-carousel__image{width:100%;height:100%;object-fit:cover;display:block}.ds-carousel__content{position:absolute;bottom:0;left:0;right:0;padding:var(--carousel-content-padding, var(--space-6));background:var(--carousel-content-bg, linear-gradient(to top, rgba(0, 0, 0, .7), transparent));color:var(--carousel-content-text, var(--white))}.ds-carousel__title{margin:0 0 var(--space-2) 0;font-size:var(--carousel-title-size, var(--font-size-5));font-weight:var(--font-weight-bold, 700);line-height:1.2}.ds-carousel__description{margin:0;font-size:var(--carousel-description-size, var(--font-size-3));line-height:1.5;opacity:.95}.ds-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--carousel-arrow-size, 40px);height:var(--carousel-arrow-size, 40px);padding:0;background-color:var(--carousel-arrow-bg, rgba(255, 255, 255, .9));color:var(--carousel-arrow-color, var(--gray-800));border:none;border-radius:var(--carousel-arrow-radius, 50%);cursor:pointer;transition:all .2s ease;box-shadow:var(--carousel-arrow-shadow, var(--shadow-md))}.ds-carousel__arrow:hover{background-color:var(--carousel-arrow-bg-hover, var(--white));color:var(--carousel-arrow-color-hover, var(--color-primary));transform:translateY(-50%) scale(1.1)}.ds-carousel__arrow:active{transform:translateY(-50%) scale(.95)}.ds-carousel__arrow:focus-visible{outline:2px solid var(--carousel-arrow-focus, var(--color-primary));outline-offset:2px}.ds-carousel__arrow--left{left:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow--right{right:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow fa-icon{font-size:var(--carousel-arrow-icon-size, var(--font-size-4))}.ds-carousel__dots{position:absolute;z-index:10;display:flex;gap:var(--carousel-dots-gap, var(--space-2));padding:var(--carousel-dots-padding, var(--space-4))}.ds-carousel--dots-bottom .ds-carousel__dots{bottom:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-top .ds-carousel__dots{top:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-left .ds-carousel__dots{top:50%;left:0;transform:translateY(-50%);flex-direction:column}.ds-carousel--dots-right .ds-carousel__dots{top:50%;right:0;transform:translateY(-50%);flex-direction:column}.ds-carousel__dot{padding:0;border:none;background:transparent;cursor:pointer;transition:all .3s ease}.ds-carousel__dot:focus-visible{outline:2px solid var(--carousel-dot-focus, var(--color-primary));outline-offset:2px;border-radius:50%}.ds-carousel__dot-inner{display:block;width:var(--carousel-dot-size, 10px);height:var(--carousel-dot-size, 10px);background-color:var(--carousel-dot-bg, rgba(255, 255, 255, .5));border-radius:50%;transition:all .3s ease}.ds-carousel__dot--active .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-active, var(--white));width:var(--carousel-dot-size-active, 12px);height:var(--carousel-dot-size-active, 12px)}.ds-carousel__dot:hover .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-hover, rgba(255, 255, 255, .8));transform:scale(1.2)}.ds-carousel--fade .ds-carousel__track{position:relative}.ds-carousel--fade .ds-carousel__slide{position:absolute;top:0;left:0}.ds-carousel--transitioning{-webkit-user-select:none;user-select:none}@media
|
|
11653
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsCarousel, isStandalone: true, selector: "ds-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplaySpeed: { classPropertyName: "autoplaySpeed", publicName: "autoplaySpeed", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, dotsPosition: { classPropertyName: "dotsPosition", publicName: "dotsPosition", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange" }, viewQueries: [{ propertyName: "trackElement", first: true, predicate: ["track"], descendants: true }, { propertyName: "slideElements", predicate: ["slideElement"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (keydown)=\"onKeydown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n tabindex=\"0\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"'Carousel with ' + slides().length + ' slides'\"\n>\n <!-- Arrows -->\n @if (arrows() && slides().length > 1) {\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--left\"\n (click)=\"prev()\"\n [attr.aria-label]=\"'Previous slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.left\" />\n </button>\n\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--right\"\n (click)=\"next()\"\n [attr.aria-label]=\"'Next slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.right\" />\n </button>\n }\n\n <!-- Slides container -->\n <div class=\"ds-carousel__container\">\n <div\n class=\"ds-carousel__track\"\n #track\n [ngStyle]=\"trackStyle()\"\n role=\"list\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <div\n class=\"{{ slideClasses(i) }}\"\n #slideElement\n role=\"listitem\"\n [attr.aria-hidden]=\"i !== internalActiveIndex()\"\n [attr.aria-label]=\"'Slide ' + (i + 1) + ' of ' + slides().length\"\n >\n @if (slide.image) {\n <img\n [src]=\"slide.image\"\n [alt]=\"slide.alt || slide.title || 'Slide ' + (i + 1)\"\n class=\"ds-carousel__image\"\n />\n }\n\n @if (slide.title || slide.description) {\n <div class=\"ds-carousel__content\">\n @if (slide.title) {\n <h3 class=\"ds-carousel__title\">{{ slide.title }}</h3>\n }\n @if (slide.description) {\n <p class=\"ds-carousel__description\">{{ slide.description }}</p>\n }\n </div>\n }\n\n <!-- Content projection for custom slides -->\n <ng-content select=\"[carousel-slide]\" />\n </div>\n }\n </div>\n </div>\n\n <!-- Dots -->\n @if (dots() && slides().length > 1) {\n <div\n class=\"ds-carousel__dots\"\n role=\"tablist\"\n [attr.aria-label]=\"'Carousel navigation'\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <button\n type=\"button\"\n [class]=\"dotClasses(i)\"\n (click)=\"goTo(i)\"\n role=\"tab\"\n [attr.aria-selected]=\"i === internalActiveIndex()\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n [attr.aria-controls]=\"'carousel-slide-' + i\"\n >\n <span class=\"ds-carousel__dot-inner\"></span>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ds-carousel{position:relative;width:100%;overflow:hidden;background-color:var(--carousel-bg, var(--gray-50));border-radius:var(--carousel-radius, var(--radius-2));outline:none}.ds-carousel__container{position:relative;width:100%;height:400px;overflow:hidden}.ds-carousel__track{display:flex;height:100%;transition:transform .3s ease-in-out}.ds-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease-in-out}.ds-carousel__slide--fade{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease-in-out}.ds-carousel__slide--fade.ds-carousel__slide--active{opacity:1;z-index:1}.ds-carousel__image{width:100%;height:100%;object-fit:cover;display:block}.ds-carousel__content{position:absolute;bottom:0;left:0;right:0;padding:var(--carousel-content-padding, var(--space-6));background:var(--carousel-content-bg, linear-gradient(to top, rgba(0, 0, 0, .7), transparent));color:var(--carousel-content-text, var(--white))}.ds-carousel__title{margin:0 0 var(--space-2) 0;font-size:var(--carousel-title-size, var(--font-size-5));font-weight:var(--font-weight-bold, 700);line-height:1.2}.ds-carousel__description{margin:0;font-size:var(--carousel-description-size, var(--font-size-3));line-height:1.5;opacity:.95}.ds-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--carousel-arrow-size, 40px);height:var(--carousel-arrow-size, 40px);padding:0;background-color:var(--carousel-arrow-bg, rgba(255, 255, 255, .9));color:var(--carousel-arrow-color, var(--gray-800));border:none;border-radius:var(--carousel-arrow-radius, 50%);cursor:pointer;transition:all .2s ease;box-shadow:var(--carousel-arrow-shadow, var(--shadow-md))}.ds-carousel__arrow:hover{background-color:var(--carousel-arrow-bg-hover, var(--white));color:var(--carousel-arrow-color-hover, var(--color-primary));transform:translateY(-50%) scale(1.1)}.ds-carousel__arrow:active{transform:translateY(-50%) scale(.95)}.ds-carousel__arrow:focus-visible{outline:2px solid var(--carousel-arrow-focus, var(--color-primary));outline-offset:2px}.ds-carousel__arrow--left{left:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow--right{right:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow fa-icon{font-size:var(--carousel-arrow-icon-size, var(--font-size-4))}.ds-carousel__dots{position:absolute;z-index:10;display:flex;gap:var(--carousel-dots-gap, var(--space-2));padding:var(--carousel-dots-padding, var(--space-4))}.ds-carousel--dots-bottom .ds-carousel__dots{bottom:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-top .ds-carousel__dots{top:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-left .ds-carousel__dots{top:50%;left:0;transform:translateY(-50%);flex-direction:column}.ds-carousel--dots-right .ds-carousel__dots{top:50%;right:0;transform:translateY(-50%);flex-direction:column}.ds-carousel__dot{padding:0;border:none;background:transparent;cursor:pointer;transition:all .3s ease}.ds-carousel__dot:focus-visible{outline:2px solid var(--carousel-dot-focus, var(--color-primary));outline-offset:2px;border-radius:50%}.ds-carousel__dot-inner{display:block;width:var(--carousel-dot-size, 10px);height:var(--carousel-dot-size, 10px);background-color:var(--carousel-dot-bg, rgba(255, 255, 255, .5));border-radius:50%;transition:all .3s ease}.ds-carousel__dot--active .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-active, var(--white));width:var(--carousel-dot-size-active, 12px);height:var(--carousel-dot-size-active, 12px)}.ds-carousel__dot:hover .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-hover, rgba(255, 255, 255, .8));transform:scale(1.2)}.ds-carousel--fade .ds-carousel__track{position:relative}.ds-carousel--fade .ds-carousel__slide{position:absolute;top:0;left:0}.ds-carousel--transitioning{-webkit-user-select:none;user-select:none}@media(max-width:768px){.ds-carousel__container{height:300px}.ds-carousel__content{padding:var(--space-4)}.ds-carousel__title{font-size:var(--font-size-4)}.ds-carousel__description{font-size:var(--font-size-2)}.ds-carousel__arrow{width:32px;height:32px}.ds-carousel__arrow fa-icon{font-size:var(--font-size-3)}.ds-carousel__arrow--left,.ds-carousel__arrow--right{--carousel-arrow-offset: var(--space-2)}}@media(max-width:480px){.ds-carousel__container{height:250px}.ds-carousel__arrow{width:28px;height:28px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
|
|
11616
11654
|
}
|
|
11617
11655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCarousel, decorators: [{
|
|
11618
11656
|
type: Component,
|
|
11619
|
-
args: [{ selector: 'ds-carousel', imports: [CommonModule, FontAwesomeModule], template: "<div\n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (keydown)=\"onKeydown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n tabindex=\"0\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"'Carousel with ' + slides().length + ' slides'\"\n>\n <!-- Arrows -->\n @if (arrows() && slides().length > 1) {\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--left\"\n (click)=\"prev()\"\n [attr.aria-label]=\"'Previous slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.left\" />\n </button>\n\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--right\"\n (click)=\"next()\"\n [attr.aria-label]=\"'Next slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.right\" />\n </button>\n }\n\n <!-- Slides container -->\n <div class=\"ds-carousel__container\">\n <div\n class=\"ds-carousel__track\"\n #track\n [ngStyle]=\"trackStyle()\"\n role=\"list\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <div\n class=\"{{ slideClasses(i) }}\"\n #slideElement\n role=\"listitem\"\n [attr.aria-hidden]=\"i !== internalActiveIndex()\"\n [attr.aria-label]=\"'Slide ' + (i + 1) + ' of ' + slides().length\"\n >\n @if (slide.image) {\n <img\n [src]=\"slide.image\"\n [alt]=\"slide.alt || slide.title || 'Slide ' + (i + 1)\"\n class=\"ds-carousel__image\"\n />\n }\n\n @if (slide.title || slide.description) {\n <div class=\"ds-carousel__content\">\n @if (slide.title) {\n <h3 class=\"ds-carousel__title\">{{ slide.title }}</h3>\n }\n @if (slide.description) {\n <p class=\"ds-carousel__description\">{{ slide.description }}</p>\n }\n </div>\n }\n\n <!-- Content projection for custom slides -->\n <ng-content select=\"[carousel-slide]\" />\n </div>\n }\n </div>\n </div>\n\n <!-- Dots -->\n @if (dots() && slides().length > 1) {\n <div\n class=\"ds-carousel__dots\"\n role=\"tablist\"\n [attr.aria-label]=\"'Carousel navigation'\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <button\n type=\"button\"\n [class]=\"dotClasses(i)\"\n (click)=\"goTo(i)\"\n role=\"tab\"\n [attr.aria-selected]=\"i === internalActiveIndex()\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n [attr.aria-controls]=\"'carousel-slide-' + i\"\n >\n <span class=\"ds-carousel__dot-inner\"></span>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ds-carousel{position:relative;width:100%;overflow:hidden;background-color:var(--carousel-bg, var(--gray-50));border-radius:var(--carousel-radius, var(--radius-2));outline:none}.ds-carousel__container{position:relative;width:100%;height:400px;overflow:hidden}.ds-carousel__track{display:flex;height:100%;transition:transform .3s ease-in-out}.ds-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease-in-out}.ds-carousel__slide--fade{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease-in-out}.ds-carousel__slide--fade.ds-carousel__slide--active{opacity:1;z-index:1}.ds-carousel__image{width:100%;height:100%;object-fit:cover;display:block}.ds-carousel__content{position:absolute;bottom:0;left:0;right:0;padding:var(--carousel-content-padding, var(--space-6));background:var(--carousel-content-bg, linear-gradient(to top, rgba(0, 0, 0, .7), transparent));color:var(--carousel-content-text, var(--white))}.ds-carousel__title{margin:0 0 var(--space-2) 0;font-size:var(--carousel-title-size, var(--font-size-5));font-weight:var(--font-weight-bold, 700);line-height:1.2}.ds-carousel__description{margin:0;font-size:var(--carousel-description-size, var(--font-size-3));line-height:1.5;opacity:.95}.ds-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--carousel-arrow-size, 40px);height:var(--carousel-arrow-size, 40px);padding:0;background-color:var(--carousel-arrow-bg, rgba(255, 255, 255, .9));color:var(--carousel-arrow-color, var(--gray-800));border:none;border-radius:var(--carousel-arrow-radius, 50%);cursor:pointer;transition:all .2s ease;box-shadow:var(--carousel-arrow-shadow, var(--shadow-md))}.ds-carousel__arrow:hover{background-color:var(--carousel-arrow-bg-hover, var(--white));color:var(--carousel-arrow-color-hover, var(--color-primary));transform:translateY(-50%) scale(1.1)}.ds-carousel__arrow:active{transform:translateY(-50%) scale(.95)}.ds-carousel__arrow:focus-visible{outline:2px solid var(--carousel-arrow-focus, var(--color-primary));outline-offset:2px}.ds-carousel__arrow--left{left:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow--right{right:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow fa-icon{font-size:var(--carousel-arrow-icon-size, var(--font-size-4))}.ds-carousel__dots{position:absolute;z-index:10;display:flex;gap:var(--carousel-dots-gap, var(--space-2));padding:var(--carousel-dots-padding, var(--space-4))}.ds-carousel--dots-bottom .ds-carousel__dots{bottom:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-top .ds-carousel__dots{top:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-left .ds-carousel__dots{top:50%;left:0;transform:translateY(-50%);flex-direction:column}.ds-carousel--dots-right .ds-carousel__dots{top:50%;right:0;transform:translateY(-50%);flex-direction:column}.ds-carousel__dot{padding:0;border:none;background:transparent;cursor:pointer;transition:all .3s ease}.ds-carousel__dot:focus-visible{outline:2px solid var(--carousel-dot-focus, var(--color-primary));outline-offset:2px;border-radius:50%}.ds-carousel__dot-inner{display:block;width:var(--carousel-dot-size, 10px);height:var(--carousel-dot-size, 10px);background-color:var(--carousel-dot-bg, rgba(255, 255, 255, .5));border-radius:50%;transition:all .3s ease}.ds-carousel__dot--active .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-active, var(--white));width:var(--carousel-dot-size-active, 12px);height:var(--carousel-dot-size-active, 12px)}.ds-carousel__dot:hover .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-hover, rgba(255, 255, 255, .8));transform:scale(1.2)}.ds-carousel--fade .ds-carousel__track{position:relative}.ds-carousel--fade .ds-carousel__slide{position:absolute;top:0;left:0}.ds-carousel--transitioning{-webkit-user-select:none;user-select:none}@media
|
|
11657
|
+
args: [{ selector: 'ds-carousel', imports: [CommonModule, FontAwesomeModule], template: "<div\n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (keydown)=\"onKeydown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n tabindex=\"0\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"'Carousel with ' + slides().length + ' slides'\"\n>\n <!-- Arrows -->\n @if (arrows() && slides().length > 1) {\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--left\"\n (click)=\"prev()\"\n [attr.aria-label]=\"'Previous slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.left\" />\n </button>\n\n <button\n class=\"ds-carousel__arrow ds-carousel__arrow--right\"\n (click)=\"next()\"\n [attr.aria-label]=\"'Next slide'\"\n type=\"button\"\n >\n <fa-icon [icon]=\"icons.right\" />\n </button>\n }\n\n <!-- Slides container -->\n <div class=\"ds-carousel__container\">\n <div\n class=\"ds-carousel__track\"\n #track\n [ngStyle]=\"trackStyle()\"\n role=\"list\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <div\n class=\"{{ slideClasses(i) }}\"\n #slideElement\n role=\"listitem\"\n [attr.aria-hidden]=\"i !== internalActiveIndex()\"\n [attr.aria-label]=\"'Slide ' + (i + 1) + ' of ' + slides().length\"\n >\n @if (slide.image) {\n <img\n [src]=\"slide.image\"\n [alt]=\"slide.alt || slide.title || 'Slide ' + (i + 1)\"\n class=\"ds-carousel__image\"\n />\n }\n\n @if (slide.title || slide.description) {\n <div class=\"ds-carousel__content\">\n @if (slide.title) {\n <h3 class=\"ds-carousel__title\">{{ slide.title }}</h3>\n }\n @if (slide.description) {\n <p class=\"ds-carousel__description\">{{ slide.description }}</p>\n }\n </div>\n }\n\n <!-- Content projection for custom slides -->\n <ng-content select=\"[carousel-slide]\" />\n </div>\n }\n </div>\n </div>\n\n <!-- Dots -->\n @if (dots() && slides().length > 1) {\n <div\n class=\"ds-carousel__dots\"\n role=\"tablist\"\n [attr.aria-label]=\"'Carousel navigation'\"\n >\n @for (slide of slides(); track slide.id; let i = $index) {\n <button\n type=\"button\"\n [class]=\"dotClasses(i)\"\n (click)=\"goTo(i)\"\n role=\"tab\"\n [attr.aria-selected]=\"i === internalActiveIndex()\"\n [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n [attr.aria-controls]=\"'carousel-slide-' + i\"\n >\n <span class=\"ds-carousel__dot-inner\"></span>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ds-carousel{position:relative;width:100%;overflow:hidden;background-color:var(--carousel-bg, var(--gray-50));border-radius:var(--carousel-radius, var(--radius-2));outline:none}.ds-carousel__container{position:relative;width:100%;height:400px;overflow:hidden}.ds-carousel__track{display:flex;height:100%;transition:transform .3s ease-in-out}.ds-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease-in-out}.ds-carousel__slide--fade{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease-in-out}.ds-carousel__slide--fade.ds-carousel__slide--active{opacity:1;z-index:1}.ds-carousel__image{width:100%;height:100%;object-fit:cover;display:block}.ds-carousel__content{position:absolute;bottom:0;left:0;right:0;padding:var(--carousel-content-padding, var(--space-6));background:var(--carousel-content-bg, linear-gradient(to top, rgba(0, 0, 0, .7), transparent));color:var(--carousel-content-text, var(--white))}.ds-carousel__title{margin:0 0 var(--space-2) 0;font-size:var(--carousel-title-size, var(--font-size-5));font-weight:var(--font-weight-bold, 700);line-height:1.2}.ds-carousel__description{margin:0;font-size:var(--carousel-description-size, var(--font-size-3));line-height:1.5;opacity:.95}.ds-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--carousel-arrow-size, 40px);height:var(--carousel-arrow-size, 40px);padding:0;background-color:var(--carousel-arrow-bg, rgba(255, 255, 255, .9));color:var(--carousel-arrow-color, var(--gray-800));border:none;border-radius:var(--carousel-arrow-radius, 50%);cursor:pointer;transition:all .2s ease;box-shadow:var(--carousel-arrow-shadow, var(--shadow-md))}.ds-carousel__arrow:hover{background-color:var(--carousel-arrow-bg-hover, var(--white));color:var(--carousel-arrow-color-hover, var(--color-primary));transform:translateY(-50%) scale(1.1)}.ds-carousel__arrow:active{transform:translateY(-50%) scale(.95)}.ds-carousel__arrow:focus-visible{outline:2px solid var(--carousel-arrow-focus, var(--color-primary));outline-offset:2px}.ds-carousel__arrow--left{left:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow--right{right:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow fa-icon{font-size:var(--carousel-arrow-icon-size, var(--font-size-4))}.ds-carousel__dots{position:absolute;z-index:10;display:flex;gap:var(--carousel-dots-gap, var(--space-2));padding:var(--carousel-dots-padding, var(--space-4))}.ds-carousel--dots-bottom .ds-carousel__dots{bottom:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-top .ds-carousel__dots{top:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-left .ds-carousel__dots{top:50%;left:0;transform:translateY(-50%);flex-direction:column}.ds-carousel--dots-right .ds-carousel__dots{top:50%;right:0;transform:translateY(-50%);flex-direction:column}.ds-carousel__dot{padding:0;border:none;background:transparent;cursor:pointer;transition:all .3s ease}.ds-carousel__dot:focus-visible{outline:2px solid var(--carousel-dot-focus, var(--color-primary));outline-offset:2px;border-radius:50%}.ds-carousel__dot-inner{display:block;width:var(--carousel-dot-size, 10px);height:var(--carousel-dot-size, 10px);background-color:var(--carousel-dot-bg, rgba(255, 255, 255, .5));border-radius:50%;transition:all .3s ease}.ds-carousel__dot--active .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-active, var(--white));width:var(--carousel-dot-size-active, 12px);height:var(--carousel-dot-size-active, 12px)}.ds-carousel__dot:hover .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-hover, rgba(255, 255, 255, .8));transform:scale(1.2)}.ds-carousel--fade .ds-carousel__track{position:relative}.ds-carousel--fade .ds-carousel__slide{position:absolute;top:0;left:0}.ds-carousel--transitioning{-webkit-user-select:none;user-select:none}@media(max-width:768px){.ds-carousel__container{height:300px}.ds-carousel__content{padding:var(--space-4)}.ds-carousel__title{font-size:var(--font-size-4)}.ds-carousel__description{font-size:var(--font-size-2)}.ds-carousel__arrow{width:32px;height:32px}.ds-carousel__arrow fa-icon{font-size:var(--font-size-3)}.ds-carousel__arrow--left,.ds-carousel__arrow--right{--carousel-arrow-offset: var(--space-2)}}@media(max-width:480px){.ds-carousel__container{height:250px}.ds-carousel__arrow{width:28px;height:28px}}\n"] }]
|
|
11620
11658
|
}], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], autoplaySpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplaySpeed", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], dotsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotsPosition", required: false }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], infinite: [{ type: i0.Input, args: [{ isSignal: true, alias: "infinite", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], trackElement: [{
|
|
11621
11659
|
type: ViewChild,
|
|
11622
11660
|
args: ['track', { static: false }]
|
|
@@ -13731,6 +13769,8 @@ class DsSidebarItemComponent {
|
|
|
13731
13769
|
showTooltip = input(true, ...(ngDevMode ? [{ debugName: "showTooltip" }] : []));
|
|
13732
13770
|
expandedItemIds = input(new Set(), ...(ngDevMode ? [{ debugName: "expandedItemIds" }] : []));
|
|
13733
13771
|
activeItemId = input(null, ...(ngDevMode ? [{ debugName: "activeItemId" }] : []));
|
|
13772
|
+
sidebarPosition = input('left', ...(ngDevMode ? [{ debugName: "sidebarPosition" }] : []));
|
|
13773
|
+
collapsedTrigger = input('hover', ...(ngDevMode ? [{ debugName: "collapsedTrigger" }] : []));
|
|
13734
13774
|
// Outputs
|
|
13735
13775
|
itemClick = output();
|
|
13736
13776
|
itemToggle = output();
|
|
@@ -13742,6 +13782,12 @@ class DsSidebarItemComponent {
|
|
|
13742
13782
|
// Injection
|
|
13743
13783
|
elementRef = inject(ElementRef);
|
|
13744
13784
|
router = inject(Router);
|
|
13785
|
+
// État du popover (mode collapsed)
|
|
13786
|
+
popoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "popoverOpen" }] : []));
|
|
13787
|
+
isPopoverOpen = computed(() => this.popoverOpen(), ...(ngDevMode ? [{ debugName: "isPopoverOpen" }] : []));
|
|
13788
|
+
activeChildIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeChildIndex" }] : []));
|
|
13789
|
+
isHoveringPopover = false;
|
|
13790
|
+
hideTimeout = null;
|
|
13745
13791
|
// Computed
|
|
13746
13792
|
hasChildren = computed(() => {
|
|
13747
13793
|
const children = this.item().children;
|
|
@@ -13758,6 +13804,12 @@ class DsSidebarItemComponent {
|
|
|
13758
13804
|
const levelIndent = 20; // indent par niveau
|
|
13759
13805
|
return baseIndent + this.level() * levelIndent;
|
|
13760
13806
|
}, ...(ngDevMode ? [{ debugName: "indentPadding" }] : []));
|
|
13807
|
+
/** Positions du popover selon la position de la sidebar */
|
|
13808
|
+
popoverPositions = computed(() => {
|
|
13809
|
+
return this.sidebarPosition() === 'left'
|
|
13810
|
+
? SIDEBAR_POPOVER_POSITIONS_RIGHT
|
|
13811
|
+
: SIDEBAR_POPOVER_POSITIONS_LEFT;
|
|
13812
|
+
}, ...(ngDevMode ? [{ debugName: "popoverPositions" }] : []));
|
|
13761
13813
|
/**
|
|
13762
13814
|
* Gère le clic sur l'item.
|
|
13763
13815
|
*/
|
|
@@ -13767,6 +13819,13 @@ class DsSidebarItemComponent {
|
|
|
13767
13819
|
event.stopPropagation();
|
|
13768
13820
|
return;
|
|
13769
13821
|
}
|
|
13822
|
+
// En mode collapsed avec trigger click, toggle le popover pour les items avec enfants
|
|
13823
|
+
if (this.mode() === 'collapsed' && this.hasChildren() && this.collapsedTrigger() === 'click') {
|
|
13824
|
+
event.preventDefault();
|
|
13825
|
+
event.stopPropagation();
|
|
13826
|
+
this.togglePopover();
|
|
13827
|
+
return;
|
|
13828
|
+
}
|
|
13770
13829
|
// Si l'item a des enfants et pas de lien, toggle expand
|
|
13771
13830
|
if (this.hasChildren() && !this.item().routerLink && !this.item().href) {
|
|
13772
13831
|
this.itemToggle.emit(this.item());
|
|
@@ -13823,26 +13882,214 @@ class DsSidebarItemComponent {
|
|
|
13823
13882
|
element.focus();
|
|
13824
13883
|
}
|
|
13825
13884
|
}
|
|
13885
|
+
// ============================================
|
|
13886
|
+
// GESTION DU POPOVER (mode collapsed)
|
|
13887
|
+
// ============================================
|
|
13888
|
+
/**
|
|
13889
|
+
* Ouvre le popover (mode collapsed + hasChildren).
|
|
13890
|
+
*/
|
|
13891
|
+
openPopover() {
|
|
13892
|
+
if (this.mode() !== 'collapsed' || !this.hasChildren())
|
|
13893
|
+
return;
|
|
13894
|
+
this.clearHideTimeout();
|
|
13895
|
+
this.popoverOpen.set(true);
|
|
13896
|
+
this.activeChildIndex.set(0);
|
|
13897
|
+
}
|
|
13898
|
+
/**
|
|
13899
|
+
* Ferme le popover.
|
|
13900
|
+
*/
|
|
13901
|
+
closePopover() {
|
|
13902
|
+
this.popoverOpen.set(false);
|
|
13903
|
+
this.activeChildIndex.set(-1);
|
|
13904
|
+
}
|
|
13905
|
+
/**
|
|
13906
|
+
* Ferme le popover avec un délai.
|
|
13907
|
+
*/
|
|
13908
|
+
closePopoverWithDelay() {
|
|
13909
|
+
this.hideTimeout = setTimeout(() => {
|
|
13910
|
+
if (!this.isHoveringPopover) {
|
|
13911
|
+
this.closePopover();
|
|
13912
|
+
}
|
|
13913
|
+
}, 150);
|
|
13914
|
+
}
|
|
13915
|
+
/**
|
|
13916
|
+
* Annule le timeout de fermeture.
|
|
13917
|
+
*/
|
|
13918
|
+
clearHideTimeout() {
|
|
13919
|
+
if (this.hideTimeout) {
|
|
13920
|
+
clearTimeout(this.hideTimeout);
|
|
13921
|
+
this.hideTimeout = null;
|
|
13922
|
+
}
|
|
13923
|
+
}
|
|
13924
|
+
/**
|
|
13925
|
+
* Gestion du mouseenter sur l'item (ouvre le popover en mode collapsed + trigger hover).
|
|
13926
|
+
*/
|
|
13927
|
+
handleMouseEnter() {
|
|
13928
|
+
if (this.mode() === 'collapsed' && this.hasChildren() && this.collapsedTrigger() === 'hover') {
|
|
13929
|
+
this.openPopover();
|
|
13930
|
+
}
|
|
13931
|
+
}
|
|
13932
|
+
/**
|
|
13933
|
+
* Gestion du mouseleave sur l'item.
|
|
13934
|
+
*/
|
|
13935
|
+
handleMouseLeave() {
|
|
13936
|
+
if (this.mode() === 'collapsed' && this.isPopoverOpen() && this.collapsedTrigger() === 'hover') {
|
|
13937
|
+
this.closePopoverWithDelay();
|
|
13938
|
+
}
|
|
13939
|
+
}
|
|
13940
|
+
/**
|
|
13941
|
+
* Toggle le popover (pour le mode click).
|
|
13942
|
+
*/
|
|
13943
|
+
togglePopover() {
|
|
13944
|
+
if (this.isPopoverOpen()) {
|
|
13945
|
+
this.closePopover();
|
|
13946
|
+
}
|
|
13947
|
+
else {
|
|
13948
|
+
this.openPopover();
|
|
13949
|
+
}
|
|
13950
|
+
}
|
|
13951
|
+
/**
|
|
13952
|
+
* Gestion du mouseenter sur le popover.
|
|
13953
|
+
*/
|
|
13954
|
+
handlePopoverMouseEnter() {
|
|
13955
|
+
this.isHoveringPopover = true;
|
|
13956
|
+
this.clearHideTimeout();
|
|
13957
|
+
}
|
|
13958
|
+
/**
|
|
13959
|
+
* Gestion du mouseleave sur le popover.
|
|
13960
|
+
*/
|
|
13961
|
+
handlePopoverMouseLeave() {
|
|
13962
|
+
this.isHoveringPopover = false;
|
|
13963
|
+
if (this.collapsedTrigger() === 'hover') {
|
|
13964
|
+
this.closePopoverWithDelay();
|
|
13965
|
+
}
|
|
13966
|
+
}
|
|
13967
|
+
/**
|
|
13968
|
+
* Navigation clavier dans le popover.
|
|
13969
|
+
*/
|
|
13970
|
+
handlePopoverKeydown(event) {
|
|
13971
|
+
const children = this.item().children || [];
|
|
13972
|
+
switch (event.key) {
|
|
13973
|
+
case 'ArrowDown':
|
|
13974
|
+
event.preventDefault();
|
|
13975
|
+
this.moveChildIndex(1, children.length);
|
|
13976
|
+
break;
|
|
13977
|
+
case 'ArrowUp':
|
|
13978
|
+
event.preventDefault();
|
|
13979
|
+
this.moveChildIndex(-1, children.length);
|
|
13980
|
+
break;
|
|
13981
|
+
case 'Escape':
|
|
13982
|
+
event.preventDefault();
|
|
13983
|
+
this.closePopover();
|
|
13984
|
+
break;
|
|
13985
|
+
case 'Enter':
|
|
13986
|
+
case ' ':
|
|
13987
|
+
event.preventDefault();
|
|
13988
|
+
this.selectActiveChild();
|
|
13989
|
+
break;
|
|
13990
|
+
}
|
|
13991
|
+
}
|
|
13992
|
+
/**
|
|
13993
|
+
* Déplace l'index actif dans le popover.
|
|
13994
|
+
*/
|
|
13995
|
+
moveChildIndex(direction, total) {
|
|
13996
|
+
let newIndex = this.activeChildIndex() + direction;
|
|
13997
|
+
// Boucle circulaire
|
|
13998
|
+
if (newIndex < 0)
|
|
13999
|
+
newIndex = total - 1;
|
|
14000
|
+
if (newIndex >= total)
|
|
14001
|
+
newIndex = 0;
|
|
14002
|
+
// Skip les items désactivés
|
|
14003
|
+
const children = this.item().children || [];
|
|
14004
|
+
let attempts = 0;
|
|
14005
|
+
while (children[newIndex]?.disabled && attempts < total) {
|
|
14006
|
+
newIndex += direction;
|
|
14007
|
+
if (newIndex < 0)
|
|
14008
|
+
newIndex = total - 1;
|
|
14009
|
+
if (newIndex >= total)
|
|
14010
|
+
newIndex = 0;
|
|
14011
|
+
attempts++;
|
|
14012
|
+
}
|
|
14013
|
+
this.activeChildIndex.set(newIndex);
|
|
14014
|
+
}
|
|
14015
|
+
/**
|
|
14016
|
+
* Sélectionne l'enfant actif dans le popover.
|
|
14017
|
+
*/
|
|
14018
|
+
selectActiveChild() {
|
|
14019
|
+
const children = this.item().children || [];
|
|
14020
|
+
const index = this.activeChildIndex();
|
|
14021
|
+
if (index >= 0 && index < children.length) {
|
|
14022
|
+
const child = children[index];
|
|
14023
|
+
if (!child.disabled) {
|
|
14024
|
+
this.handleChildClick(child, new MouseEvent('click'));
|
|
14025
|
+
}
|
|
14026
|
+
}
|
|
14027
|
+
}
|
|
14028
|
+
/**
|
|
14029
|
+
* Gère le clic sur un enfant dans le popover.
|
|
14030
|
+
*/
|
|
14031
|
+
handleChildClick(child, event) {
|
|
14032
|
+
if (child.disabled) {
|
|
14033
|
+
event.preventDefault();
|
|
14034
|
+
event.stopPropagation();
|
|
14035
|
+
return;
|
|
14036
|
+
}
|
|
14037
|
+
// Navigation programmatique pour routerLink
|
|
14038
|
+
if (child.routerLink) {
|
|
14039
|
+
const link = child.routerLink;
|
|
14040
|
+
if (Array.isArray(link)) {
|
|
14041
|
+
void this.router.navigate(link);
|
|
14042
|
+
}
|
|
14043
|
+
else {
|
|
14044
|
+
void this.router.navigate([link]);
|
|
14045
|
+
}
|
|
14046
|
+
}
|
|
14047
|
+
// Navigation href externe
|
|
14048
|
+
if (child.href) {
|
|
14049
|
+
const target = child.external ? '_blank' : '_self';
|
|
14050
|
+
window.open(child.href, target);
|
|
14051
|
+
}
|
|
14052
|
+
this.itemClick.emit({ item: child, event });
|
|
14053
|
+
this.closePopover();
|
|
14054
|
+
}
|
|
14055
|
+
/**
|
|
14056
|
+
* Met à jour l'index actif au hover.
|
|
14057
|
+
*/
|
|
14058
|
+
setActiveChildIndex(index) {
|
|
14059
|
+
this.activeChildIndex.set(index);
|
|
14060
|
+
}
|
|
14061
|
+
/**
|
|
14062
|
+
* Retourne l'index actif du popover.
|
|
14063
|
+
*/
|
|
14064
|
+
getActiveChildIndex() {
|
|
14065
|
+
return this.activeChildIndex();
|
|
14066
|
+
}
|
|
13826
14067
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13827
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebarItemComponent, isStandalone: true, selector: "ds-sidebar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, expandedItemIds: { classPropertyName: "expandedItemIds", publicName: "expandedItemIds", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemToggle: "itemToggle", itemKeydown: "itemKeydown" }, ngImport: i0, template: `
|
|
14068
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebarItemComponent, isStandalone: true, selector: "ds-sidebar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, expandedItemIds: { classPropertyName: "expandedItemIds", publicName: "expandedItemIds", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, collapsedTrigger: { classPropertyName: "collapsedTrigger", publicName: "collapsedTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemToggle: "itemToggle", itemKeydown: "itemKeydown" }, ngImport: i0, template: `
|
|
13828
14069
|
<!-- Item container -->
|
|
13829
14070
|
<div
|
|
14071
|
+
#itemTrigger="cdkOverlayOrigin"
|
|
14072
|
+
cdkOverlayOrigin
|
|
13830
14073
|
class="ds-sidebar-item"
|
|
13831
14074
|
[class.ds-sidebar-item--active]="isActive()"
|
|
13832
14075
|
[class.ds-sidebar-item--disabled]="item().disabled"
|
|
13833
14076
|
[class.ds-sidebar-item--has-children]="hasChildren()"
|
|
13834
14077
|
[class.ds-sidebar-item--expanded]="isExpanded()"
|
|
13835
14078
|
[class.ds-sidebar-item--collapsed-mode]="mode() === 'collapsed'"
|
|
14079
|
+
[class.ds-sidebar-item--popover-open]="isPopoverOpen()"
|
|
13836
14080
|
[style.padding-left.px]="mode() === 'collapsed' ? null : indentPadding()"
|
|
13837
14081
|
[attr.tabindex]="item().disabled ? -1 : 0"
|
|
13838
14082
|
role="menuitem"
|
|
13839
|
-
[attr.aria-
|
|
14083
|
+
[attr.aria-haspopup]="hasChildren() && mode() === 'collapsed' ? 'menu' : null"
|
|
14084
|
+
[attr.aria-expanded]="hasChildren() ? (mode() === 'collapsed' ? isPopoverOpen() : isExpanded()) : null"
|
|
13840
14085
|
[attr.aria-selected]="isActive()"
|
|
13841
14086
|
[attr.aria-disabled]="item().disabled"
|
|
13842
14087
|
[attr.data-item-id]="item().id"
|
|
13843
14088
|
(click)="handleClick($event)"
|
|
13844
14089
|
(keydown)="handleKeydown($event)"
|
|
13845
|
-
|
|
14090
|
+
(mouseenter)="handleMouseEnter()"
|
|
14091
|
+
(mouseleave)="handleMouseLeave()"
|
|
14092
|
+
[dsTooltip]="mode() === 'collapsed' && showTooltip() && !isPopoverOpen() && !hasChildren() ? item().label : ''"
|
|
13846
14093
|
tooltipPosition="right"
|
|
13847
14094
|
#itemElement>
|
|
13848
14095
|
|
|
@@ -13909,6 +14156,76 @@ class DsSidebarItemComponent {
|
|
|
13909
14156
|
<div class="ds-sidebar-item__divider" role="separator"></div>
|
|
13910
14157
|
}
|
|
13911
14158
|
|
|
14159
|
+
<!-- Popover pour enfants en mode collapsed -->
|
|
14160
|
+
@if (hasChildren() && mode() === 'collapsed') {
|
|
14161
|
+
<ng-template
|
|
14162
|
+
cdkConnectedOverlay
|
|
14163
|
+
[cdkConnectedOverlayOrigin]="itemTrigger"
|
|
14164
|
+
[cdkConnectedOverlayOpen]="isPopoverOpen()"
|
|
14165
|
+
[cdkConnectedOverlayPositions]="popoverPositions()"
|
|
14166
|
+
[cdkConnectedOverlayHasBackdrop]="true"
|
|
14167
|
+
[cdkConnectedOverlayBackdropClass]="'ds-sidebar-popover-backdrop'"
|
|
14168
|
+
[cdkConnectedOverlayPanelClass]="'ds-sidebar-popover-panel'"
|
|
14169
|
+
(backdropClick)="closePopover()"
|
|
14170
|
+
(detach)="closePopover()">
|
|
14171
|
+
|
|
14172
|
+
<div
|
|
14173
|
+
class="ds-sidebar-popover"
|
|
14174
|
+
role="menu"
|
|
14175
|
+
[attr.aria-label]="'Sous-menu de ' + item().label"
|
|
14176
|
+
(keydown)="handlePopoverKeydown($event)"
|
|
14177
|
+
(mouseenter)="handlePopoverMouseEnter()"
|
|
14178
|
+
(mouseleave)="handlePopoverMouseLeave()">
|
|
14179
|
+
|
|
14180
|
+
<!-- Header du popover avec le label parent -->
|
|
14181
|
+
<div class="ds-sidebar-popover__header">
|
|
14182
|
+
@if (item().icon) {
|
|
14183
|
+
<fa-icon [icon]="item().icon!" class="ds-sidebar-popover__header-icon" />
|
|
14184
|
+
}
|
|
14185
|
+
<span class="ds-sidebar-popover__header-label">{{ item().label }}</span>
|
|
14186
|
+
</div>
|
|
14187
|
+
|
|
14188
|
+
<!-- Liste des enfants -->
|
|
14189
|
+
<div class="ds-sidebar-popover__body">
|
|
14190
|
+
@for (child of item().children; track child.id; let i = $index) {
|
|
14191
|
+
<div
|
|
14192
|
+
class="ds-sidebar-popover__item"
|
|
14193
|
+
[class.ds-sidebar-popover__item--active]="getActiveChildIndex() === i"
|
|
14194
|
+
[class.ds-sidebar-popover__item--disabled]="child.disabled"
|
|
14195
|
+
[attr.tabindex]="child.disabled ? -1 : 0"
|
|
14196
|
+
role="menuitem"
|
|
14197
|
+
[attr.aria-disabled]="child.disabled"
|
|
14198
|
+
(click)="handleChildClick(child, $event)"
|
|
14199
|
+
(mouseenter)="setActiveChildIndex(i)">
|
|
14200
|
+
|
|
14201
|
+
@if (child.icon) {
|
|
14202
|
+
<fa-icon [icon]="child.icon" class="ds-sidebar-popover__item-icon" />
|
|
14203
|
+
}
|
|
14204
|
+
|
|
14205
|
+
<span class="ds-sidebar-popover__item-label">{{ child.label }}</span>
|
|
14206
|
+
|
|
14207
|
+
@if (child.badge !== undefined && child.badge !== null) {
|
|
14208
|
+
<span
|
|
14209
|
+
class="ds-sidebar-popover__item-badge"
|
|
14210
|
+
[class]="'ds-sidebar-popover__item-badge--' + (child.badgeVariant || 'default')">
|
|
14211
|
+
{{ child.badge }}
|
|
14212
|
+
</span>
|
|
14213
|
+
}
|
|
14214
|
+
|
|
14215
|
+
@if (child.children && child.children.length > 0) {
|
|
14216
|
+
<fa-icon [icon]="chevronRightIcon" class="ds-sidebar-popover__item-chevron" />
|
|
14217
|
+
}
|
|
14218
|
+
</div>
|
|
14219
|
+
|
|
14220
|
+
@if (child.dividerAfter) {
|
|
14221
|
+
<div class="ds-sidebar-popover__divider" role="separator"></div>
|
|
14222
|
+
}
|
|
14223
|
+
}
|
|
14224
|
+
</div>
|
|
14225
|
+
</div>
|
|
14226
|
+
</ng-template>
|
|
14227
|
+
}
|
|
14228
|
+
|
|
13912
14229
|
<!-- Enfants (récursif) -->
|
|
13913
14230
|
@if (hasChildren() && isExpanded() && mode() !== 'collapsed') {
|
|
13914
14231
|
<div
|
|
@@ -13929,29 +14246,35 @@ class DsSidebarItemComponent {
|
|
|
13929
14246
|
}
|
|
13930
14247
|
</div>
|
|
13931
14248
|
}
|
|
13932
|
-
`, isInline: true, styles: [":host{display:block}.ds-sidebar-item{display:flex;align-items:center;gap:var(--space-2, .5rem);min-height:var(--sidebar-item-height, 44px);padding:var(--sidebar-item-padding, .5rem 1rem);border-radius:var(--sidebar-item-radius, 6px);cursor:pointer;color:var(--sidebar-text, inherit);text-decoration:none;transition:background-color .15s ease,color .15s ease;outline:none;-webkit-user-select:none;user-select:none}.ds-sidebar-item:hover:not(.ds-sidebar-item--disabled){background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}.ds-sidebar-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-sidebar-item--active{background:var(--sidebar-item-active-bg, rgba(59, 130, 246, .1));color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--active .ds-sidebar-item__icon{color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-sidebar-item--collapsed-mode{justify-content:center;padding:var(--space-2, .5rem);gap:0}.ds-sidebar-item--collapsed-mode .ds-sidebar-item__icon{margin:0}.ds-sidebar-item__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;flex-shrink:0;transition:transform .2s ease}.ds-sidebar-item__toggle:hover{color:var(--color-primary, #3b82f6)}.ds-sidebar-item__toggle-placeholder{width:20px;flex-shrink:0}.ds-sidebar-item__icon{flex-shrink:0;font-size:var(--icon-size-md, 1rem);color:var(--sidebar-icon-color, currentColor);opacity:.8}.ds-sidebar-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit;font-size:var(--font-size-sm, .875rem);line-height:1.4}.ds-sidebar-item__label--router-active{font-weight:600}.ds-sidebar-item__external-icon{margin-left:var(--space-1, .25rem);font-size:.75em;opacity:.6}.ds-sidebar-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-badge-size, 20px);height:var(--sidebar-badge-size, 20px);padding:0 var(--space-1-5, .375rem);border-radius:var(--radius-round, 9999px);font-size:var(--font-size-xs, .75rem);font-weight:600;flex-shrink:0}.ds-sidebar-item__badge--default{background:var(--gray-200, #e5e7eb);color:var(--gray-800, #1f2937)}.ds-sidebar-item__badge--primary{background:var(--color-primary, #3b82f6);color:#fff}.ds-sidebar-item__badge--success{background:var(--success, #10b981);color:#fff}.ds-sidebar-item__badge--warning{background:var(--warning, #f59e0b);color:#fff}.ds-sidebar-item__badge--error{background:var(--error, #ef4444);color:#fff}.ds-sidebar-item__badge--info{background:var(--info, #06b6d4);color:#fff}.ds-sidebar-item__divider{height:1px;margin:var(--space-2, .5rem) var(--space-4, 1rem);background:var(--sidebar-border, rgba(0, 0, 0, .1))}\n"], dependencies: [{ kind: "component", type: DsSidebarItemComponent, selector: "ds-sidebar-item", inputs: ["item", "level", "mode", "showTooltip", "expandedItemIds", "activeItemId"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: "directive", type: DsTooltip, selector: "[dsTooltip]", inputs: ["dsTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14249
|
+
`, isInline: true, styles: [":host{display:block}.ds-sidebar-item{display:flex;align-items:center;gap:var(--space-2, .5rem);min-height:var(--sidebar-item-height, 44px);padding:var(--sidebar-item-padding, .5rem 1rem);border-radius:var(--sidebar-item-radius, 6px);cursor:pointer;color:var(--sidebar-text, inherit);text-decoration:none;transition:background-color .15s ease,color .15s ease;outline:none;-webkit-user-select:none;user-select:none}.ds-sidebar-item:hover:not(.ds-sidebar-item--disabled){background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}.ds-sidebar-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-sidebar-item--active{background:var(--sidebar-item-active-bg, rgba(59, 130, 246, .1));color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--active .ds-sidebar-item__icon{color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-sidebar-item--collapsed-mode{justify-content:center;padding:var(--space-2, .5rem);gap:0}.ds-sidebar-item--collapsed-mode .ds-sidebar-item__icon{margin:0}.ds-sidebar-item__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;flex-shrink:0;transition:transform .2s ease}.ds-sidebar-item__toggle:hover{color:var(--color-primary, #3b82f6)}.ds-sidebar-item__toggle-placeholder{width:20px;flex-shrink:0}.ds-sidebar-item__icon{flex-shrink:0;font-size:var(--icon-size-md, 1rem);color:var(--sidebar-icon-color, currentColor);opacity:.8}.ds-sidebar-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit;font-size:var(--font-size-sm, .875rem);line-height:1.4}.ds-sidebar-item__label--router-active{font-weight:600}.ds-sidebar-item__external-icon{margin-left:var(--space-1, .25rem);font-size:.75em;opacity:.6}.ds-sidebar-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-badge-size, 20px);height:var(--sidebar-badge-size, 20px);padding:0 var(--space-1-5, .375rem);border-radius:var(--radius-round, 9999px);font-size:var(--font-size-xs, .75rem);font-weight:600;flex-shrink:0}.ds-sidebar-item__badge--default{background:var(--gray-200, #e5e7eb);color:var(--gray-800, #1f2937)}.ds-sidebar-item__badge--primary{background:var(--color-primary, #3b82f6);color:#fff}.ds-sidebar-item__badge--success{background:var(--success, #10b981);color:#fff}.ds-sidebar-item__badge--warning{background:var(--warning, #f59e0b);color:#fff}.ds-sidebar-item__badge--error{background:var(--error, #ef4444);color:#fff}.ds-sidebar-item__badge--info{background:var(--info, #06b6d4);color:#fff}.ds-sidebar-item__divider{height:1px;margin:var(--space-2, .5rem) var(--space-4, 1rem);background:var(--sidebar-border, rgba(0, 0, 0, .1))}.ds-sidebar-popover{background:var(--popover-bg, var(--sidebar-bg, #ffffff));border:1px solid var(--popover-border, var(--sidebar-border, #e5e7eb));border-radius:var(--popover-radius, 8px);box-shadow:var(--popover-shadow, var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, .1)));min-width:200px;max-width:280px;overflow:hidden;animation:popoverSlideIn .15s ease-out}@keyframes popoverSlideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.ds-sidebar-popover__header{display:flex;align-items:center;gap:var(--space-2, .5rem);padding:var(--space-3, .75rem) var(--space-4, 1rem);background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .03));border-bottom:1px solid var(--sidebar-border, rgba(0, 0, 0, .1));font-weight:600;font-size:var(--font-size-sm, .875rem);color:var(--sidebar-text, inherit)}.ds-sidebar-popover__header-icon{font-size:var(--icon-size-md, 1rem);opacity:.8}.ds-sidebar-popover__header-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-sidebar-popover__body{padding:var(--space-1, .25rem) 0;max-height:300px;overflow-y:auto}.ds-sidebar-popover__item{display:flex;align-items:center;gap:var(--space-2, .5rem);padding:var(--space-2, .5rem) var(--space-4, 1rem);cursor:pointer;color:var(--sidebar-text, inherit);transition:background-color .15s ease;outline:none;font-size:var(--font-size-sm, .875rem)}.ds-sidebar-popover__item:hover,.ds-sidebar-popover__item--active{background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}.ds-sidebar-popover__item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-sidebar-popover__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-sidebar-popover__item-icon{flex-shrink:0;font-size:var(--icon-size-md, 1rem);opacity:.8}.ds-sidebar-popover__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-sidebar-popover__item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-badge-size, 20px);height:var(--sidebar-badge-size, 20px);padding:0 var(--space-1-5, .375rem);border-radius:var(--radius-round, 9999px);font-size:var(--font-size-xs, .75rem);font-weight:600;flex-shrink:0}.ds-sidebar-popover__item-badge--default{background:var(--gray-200, #e5e7eb);color:var(--gray-800, #1f2937)}.ds-sidebar-popover__item-badge--primary{background:var(--color-primary, #3b82f6);color:#fff}.ds-sidebar-popover__item-badge--success{background:var(--success, #10b981);color:#fff}.ds-sidebar-popover__item-badge--warning{background:var(--warning, #f59e0b);color:#fff}.ds-sidebar-popover__item-badge--error{background:var(--error, #ef4444);color:#fff}.ds-sidebar-popover__item-badge--info{background:var(--info, #06b6d4);color:#fff}.ds-sidebar-popover__item-chevron{font-size:.75rem;opacity:.5;flex-shrink:0}.ds-sidebar-popover__divider{height:1px;margin:var(--space-1, .25rem) var(--space-4, 1rem);background:var(--sidebar-border, rgba(0, 0, 0, .1))}.ds-sidebar-item--popover-open{background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}\n"], dependencies: [{ kind: "component", type: DsSidebarItemComponent, selector: "ds-sidebar-item", inputs: ["item", "level", "mode", "showTooltip", "expandedItemIds", "activeItemId", "sidebarPosition", "collapsedTrigger"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: "directive", type: DsTooltip, selector: "[dsTooltip]", inputs: ["dsTooltip"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13933
14250
|
}
|
|
13934
14251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebarItemComponent, decorators: [{
|
|
13935
14252
|
type: Component,
|
|
13936
|
-
args: [{ selector: 'ds-sidebar-item', standalone: true, imports: [CommonModule, RouterModule, FontAwesomeModule, DsTooltip], template: `
|
|
14253
|
+
args: [{ selector: 'ds-sidebar-item', standalone: true, imports: [CommonModule, RouterModule, FontAwesomeModule, DsTooltip, CdkConnectedOverlay, CdkOverlayOrigin], template: `
|
|
13937
14254
|
<!-- Item container -->
|
|
13938
14255
|
<div
|
|
14256
|
+
#itemTrigger="cdkOverlayOrigin"
|
|
14257
|
+
cdkOverlayOrigin
|
|
13939
14258
|
class="ds-sidebar-item"
|
|
13940
14259
|
[class.ds-sidebar-item--active]="isActive()"
|
|
13941
14260
|
[class.ds-sidebar-item--disabled]="item().disabled"
|
|
13942
14261
|
[class.ds-sidebar-item--has-children]="hasChildren()"
|
|
13943
14262
|
[class.ds-sidebar-item--expanded]="isExpanded()"
|
|
13944
14263
|
[class.ds-sidebar-item--collapsed-mode]="mode() === 'collapsed'"
|
|
14264
|
+
[class.ds-sidebar-item--popover-open]="isPopoverOpen()"
|
|
13945
14265
|
[style.padding-left.px]="mode() === 'collapsed' ? null : indentPadding()"
|
|
13946
14266
|
[attr.tabindex]="item().disabled ? -1 : 0"
|
|
13947
14267
|
role="menuitem"
|
|
13948
|
-
[attr.aria-
|
|
14268
|
+
[attr.aria-haspopup]="hasChildren() && mode() === 'collapsed' ? 'menu' : null"
|
|
14269
|
+
[attr.aria-expanded]="hasChildren() ? (mode() === 'collapsed' ? isPopoverOpen() : isExpanded()) : null"
|
|
13949
14270
|
[attr.aria-selected]="isActive()"
|
|
13950
14271
|
[attr.aria-disabled]="item().disabled"
|
|
13951
14272
|
[attr.data-item-id]="item().id"
|
|
13952
14273
|
(click)="handleClick($event)"
|
|
13953
14274
|
(keydown)="handleKeydown($event)"
|
|
13954
|
-
|
|
14275
|
+
(mouseenter)="handleMouseEnter()"
|
|
14276
|
+
(mouseleave)="handleMouseLeave()"
|
|
14277
|
+
[dsTooltip]="mode() === 'collapsed' && showTooltip() && !isPopoverOpen() && !hasChildren() ? item().label : ''"
|
|
13955
14278
|
tooltipPosition="right"
|
|
13956
14279
|
#itemElement>
|
|
13957
14280
|
|
|
@@ -14018,6 +14341,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
14018
14341
|
<div class="ds-sidebar-item__divider" role="separator"></div>
|
|
14019
14342
|
}
|
|
14020
14343
|
|
|
14344
|
+
<!-- Popover pour enfants en mode collapsed -->
|
|
14345
|
+
@if (hasChildren() && mode() === 'collapsed') {
|
|
14346
|
+
<ng-template
|
|
14347
|
+
cdkConnectedOverlay
|
|
14348
|
+
[cdkConnectedOverlayOrigin]="itemTrigger"
|
|
14349
|
+
[cdkConnectedOverlayOpen]="isPopoverOpen()"
|
|
14350
|
+
[cdkConnectedOverlayPositions]="popoverPositions()"
|
|
14351
|
+
[cdkConnectedOverlayHasBackdrop]="true"
|
|
14352
|
+
[cdkConnectedOverlayBackdropClass]="'ds-sidebar-popover-backdrop'"
|
|
14353
|
+
[cdkConnectedOverlayPanelClass]="'ds-sidebar-popover-panel'"
|
|
14354
|
+
(backdropClick)="closePopover()"
|
|
14355
|
+
(detach)="closePopover()">
|
|
14356
|
+
|
|
14357
|
+
<div
|
|
14358
|
+
class="ds-sidebar-popover"
|
|
14359
|
+
role="menu"
|
|
14360
|
+
[attr.aria-label]="'Sous-menu de ' + item().label"
|
|
14361
|
+
(keydown)="handlePopoverKeydown($event)"
|
|
14362
|
+
(mouseenter)="handlePopoverMouseEnter()"
|
|
14363
|
+
(mouseleave)="handlePopoverMouseLeave()">
|
|
14364
|
+
|
|
14365
|
+
<!-- Header du popover avec le label parent -->
|
|
14366
|
+
<div class="ds-sidebar-popover__header">
|
|
14367
|
+
@if (item().icon) {
|
|
14368
|
+
<fa-icon [icon]="item().icon!" class="ds-sidebar-popover__header-icon" />
|
|
14369
|
+
}
|
|
14370
|
+
<span class="ds-sidebar-popover__header-label">{{ item().label }}</span>
|
|
14371
|
+
</div>
|
|
14372
|
+
|
|
14373
|
+
<!-- Liste des enfants -->
|
|
14374
|
+
<div class="ds-sidebar-popover__body">
|
|
14375
|
+
@for (child of item().children; track child.id; let i = $index) {
|
|
14376
|
+
<div
|
|
14377
|
+
class="ds-sidebar-popover__item"
|
|
14378
|
+
[class.ds-sidebar-popover__item--active]="getActiveChildIndex() === i"
|
|
14379
|
+
[class.ds-sidebar-popover__item--disabled]="child.disabled"
|
|
14380
|
+
[attr.tabindex]="child.disabled ? -1 : 0"
|
|
14381
|
+
role="menuitem"
|
|
14382
|
+
[attr.aria-disabled]="child.disabled"
|
|
14383
|
+
(click)="handleChildClick(child, $event)"
|
|
14384
|
+
(mouseenter)="setActiveChildIndex(i)">
|
|
14385
|
+
|
|
14386
|
+
@if (child.icon) {
|
|
14387
|
+
<fa-icon [icon]="child.icon" class="ds-sidebar-popover__item-icon" />
|
|
14388
|
+
}
|
|
14389
|
+
|
|
14390
|
+
<span class="ds-sidebar-popover__item-label">{{ child.label }}</span>
|
|
14391
|
+
|
|
14392
|
+
@if (child.badge !== undefined && child.badge !== null) {
|
|
14393
|
+
<span
|
|
14394
|
+
class="ds-sidebar-popover__item-badge"
|
|
14395
|
+
[class]="'ds-sidebar-popover__item-badge--' + (child.badgeVariant || 'default')">
|
|
14396
|
+
{{ child.badge }}
|
|
14397
|
+
</span>
|
|
14398
|
+
}
|
|
14399
|
+
|
|
14400
|
+
@if (child.children && child.children.length > 0) {
|
|
14401
|
+
<fa-icon [icon]="chevronRightIcon" class="ds-sidebar-popover__item-chevron" />
|
|
14402
|
+
}
|
|
14403
|
+
</div>
|
|
14404
|
+
|
|
14405
|
+
@if (child.dividerAfter) {
|
|
14406
|
+
<div class="ds-sidebar-popover__divider" role="separator"></div>
|
|
14407
|
+
}
|
|
14408
|
+
}
|
|
14409
|
+
</div>
|
|
14410
|
+
</div>
|
|
14411
|
+
</ng-template>
|
|
14412
|
+
}
|
|
14413
|
+
|
|
14021
14414
|
<!-- Enfants (récursif) -->
|
|
14022
14415
|
@if (hasChildren() && isExpanded() && mode() !== 'collapsed') {
|
|
14023
14416
|
<div
|
|
@@ -14038,8 +14431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
14038
14431
|
}
|
|
14039
14432
|
</div>
|
|
14040
14433
|
}
|
|
14041
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ds-sidebar-item{display:flex;align-items:center;gap:var(--space-2, .5rem);min-height:var(--sidebar-item-height, 44px);padding:var(--sidebar-item-padding, .5rem 1rem);border-radius:var(--sidebar-item-radius, 6px);cursor:pointer;color:var(--sidebar-text, inherit);text-decoration:none;transition:background-color .15s ease,color .15s ease;outline:none;-webkit-user-select:none;user-select:none}.ds-sidebar-item:hover:not(.ds-sidebar-item--disabled){background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}.ds-sidebar-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-sidebar-item--active{background:var(--sidebar-item-active-bg, rgba(59, 130, 246, .1));color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--active .ds-sidebar-item__icon{color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-sidebar-item--collapsed-mode{justify-content:center;padding:var(--space-2, .5rem);gap:0}.ds-sidebar-item--collapsed-mode .ds-sidebar-item__icon{margin:0}.ds-sidebar-item__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;flex-shrink:0;transition:transform .2s ease}.ds-sidebar-item__toggle:hover{color:var(--color-primary, #3b82f6)}.ds-sidebar-item__toggle-placeholder{width:20px;flex-shrink:0}.ds-sidebar-item__icon{flex-shrink:0;font-size:var(--icon-size-md, 1rem);color:var(--sidebar-icon-color, currentColor);opacity:.8}.ds-sidebar-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit;font-size:var(--font-size-sm, .875rem);line-height:1.4}.ds-sidebar-item__label--router-active{font-weight:600}.ds-sidebar-item__external-icon{margin-left:var(--space-1, .25rem);font-size:.75em;opacity:.6}.ds-sidebar-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-badge-size, 20px);height:var(--sidebar-badge-size, 20px);padding:0 var(--space-1-5, .375rem);border-radius:var(--radius-round, 9999px);font-size:var(--font-size-xs, .75rem);font-weight:600;flex-shrink:0}.ds-sidebar-item__badge--default{background:var(--gray-200, #e5e7eb);color:var(--gray-800, #1f2937)}.ds-sidebar-item__badge--primary{background:var(--color-primary, #3b82f6);color:#fff}.ds-sidebar-item__badge--success{background:var(--success, #10b981);color:#fff}.ds-sidebar-item__badge--warning{background:var(--warning, #f59e0b);color:#fff}.ds-sidebar-item__badge--error{background:var(--error, #ef4444);color:#fff}.ds-sidebar-item__badge--info{background:var(--info, #06b6d4);color:#fff}.ds-sidebar-item__divider{height:1px;margin:var(--space-2, .5rem) var(--space-4, 1rem);background:var(--sidebar-border, rgba(0, 0, 0, .1))}\n"] }]
|
|
14042
|
-
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], expandedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItemIds", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }] } });
|
|
14434
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ds-sidebar-item{display:flex;align-items:center;gap:var(--space-2, .5rem);min-height:var(--sidebar-item-height, 44px);padding:var(--sidebar-item-padding, .5rem 1rem);border-radius:var(--sidebar-item-radius, 6px);cursor:pointer;color:var(--sidebar-text, inherit);text-decoration:none;transition:background-color .15s ease,color .15s ease;outline:none;-webkit-user-select:none;user-select:none}.ds-sidebar-item:hover:not(.ds-sidebar-item--disabled){background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}.ds-sidebar-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-sidebar-item--active{background:var(--sidebar-item-active-bg, rgba(59, 130, 246, .1));color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--active .ds-sidebar-item__icon{color:var(--sidebar-item-active-text, #3b82f6)}.ds-sidebar-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-sidebar-item--collapsed-mode{justify-content:center;padding:var(--space-2, .5rem);gap:0}.ds-sidebar-item--collapsed-mode .ds-sidebar-item__icon{margin:0}.ds-sidebar-item__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;flex-shrink:0;transition:transform .2s ease}.ds-sidebar-item__toggle:hover{color:var(--color-primary, #3b82f6)}.ds-sidebar-item__toggle-placeholder{width:20px;flex-shrink:0}.ds-sidebar-item__icon{flex-shrink:0;font-size:var(--icon-size-md, 1rem);color:var(--sidebar-icon-color, currentColor);opacity:.8}.ds-sidebar-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit;font-size:var(--font-size-sm, .875rem);line-height:1.4}.ds-sidebar-item__label--router-active{font-weight:600}.ds-sidebar-item__external-icon{margin-left:var(--space-1, .25rem);font-size:.75em;opacity:.6}.ds-sidebar-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-badge-size, 20px);height:var(--sidebar-badge-size, 20px);padding:0 var(--space-1-5, .375rem);border-radius:var(--radius-round, 9999px);font-size:var(--font-size-xs, .75rem);font-weight:600;flex-shrink:0}.ds-sidebar-item__badge--default{background:var(--gray-200, #e5e7eb);color:var(--gray-800, #1f2937)}.ds-sidebar-item__badge--primary{background:var(--color-primary, #3b82f6);color:#fff}.ds-sidebar-item__badge--success{background:var(--success, #10b981);color:#fff}.ds-sidebar-item__badge--warning{background:var(--warning, #f59e0b);color:#fff}.ds-sidebar-item__badge--error{background:var(--error, #ef4444);color:#fff}.ds-sidebar-item__badge--info{background:var(--info, #06b6d4);color:#fff}.ds-sidebar-item__divider{height:1px;margin:var(--space-2, .5rem) var(--space-4, 1rem);background:var(--sidebar-border, rgba(0, 0, 0, .1))}.ds-sidebar-popover{background:var(--popover-bg, var(--sidebar-bg, #ffffff));border:1px solid var(--popover-border, var(--sidebar-border, #e5e7eb));border-radius:var(--popover-radius, 8px);box-shadow:var(--popover-shadow, var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, .1)));min-width:200px;max-width:280px;overflow:hidden;animation:popoverSlideIn .15s ease-out}@keyframes popoverSlideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.ds-sidebar-popover__header{display:flex;align-items:center;gap:var(--space-2, .5rem);padding:var(--space-3, .75rem) var(--space-4, 1rem);background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .03));border-bottom:1px solid var(--sidebar-border, rgba(0, 0, 0, .1));font-weight:600;font-size:var(--font-size-sm, .875rem);color:var(--sidebar-text, inherit)}.ds-sidebar-popover__header-icon{font-size:var(--icon-size-md, 1rem);opacity:.8}.ds-sidebar-popover__header-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-sidebar-popover__body{padding:var(--space-1, .25rem) 0;max-height:300px;overflow-y:auto}.ds-sidebar-popover__item{display:flex;align-items:center;gap:var(--space-2, .5rem);padding:var(--space-2, .5rem) var(--space-4, 1rem);cursor:pointer;color:var(--sidebar-text, inherit);transition:background-color .15s ease;outline:none;font-size:var(--font-size-sm, .875rem)}.ds-sidebar-popover__item:hover,.ds-sidebar-popover__item--active{background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}.ds-sidebar-popover__item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-sidebar-popover__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-sidebar-popover__item-icon{flex-shrink:0;font-size:var(--icon-size-md, 1rem);opacity:.8}.ds-sidebar-popover__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-sidebar-popover__item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-badge-size, 20px);height:var(--sidebar-badge-size, 20px);padding:0 var(--space-1-5, .375rem);border-radius:var(--radius-round, 9999px);font-size:var(--font-size-xs, .75rem);font-weight:600;flex-shrink:0}.ds-sidebar-popover__item-badge--default{background:var(--gray-200, #e5e7eb);color:var(--gray-800, #1f2937)}.ds-sidebar-popover__item-badge--primary{background:var(--color-primary, #3b82f6);color:#fff}.ds-sidebar-popover__item-badge--success{background:var(--success, #10b981);color:#fff}.ds-sidebar-popover__item-badge--warning{background:var(--warning, #f59e0b);color:#fff}.ds-sidebar-popover__item-badge--error{background:var(--error, #ef4444);color:#fff}.ds-sidebar-popover__item-badge--info{background:var(--info, #06b6d4);color:#fff}.ds-sidebar-popover__item-chevron{font-size:.75rem;opacity:.5;flex-shrink:0}.ds-sidebar-popover__divider{height:1px;margin:var(--space-1, .25rem) var(--space-4, 1rem);background:var(--sidebar-border, rgba(0, 0, 0, .1))}.ds-sidebar-item--popover-open{background:var(--sidebar-item-hover-bg, rgba(0, 0, 0, .05))}\n"] }]
|
|
14435
|
+
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], expandedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItemIds", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], sidebarPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPosition", required: false }] }], collapsedTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedTrigger", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }] } });
|
|
14043
14436
|
|
|
14044
14437
|
/**
|
|
14045
14438
|
* # DsSidebar
|
|
@@ -14100,6 +14493,8 @@ class DsSidebar {
|
|
|
14100
14493
|
autoCollapseOnMobile = input(true, ...(ngDevMode ? [{ debugName: "autoCollapseOnMobile" }] : []));
|
|
14101
14494
|
/** Affiche les tooltips en mode collapsed (désactivable) */
|
|
14102
14495
|
showTooltips = input(true, ...(ngDevMode ? [{ debugName: "showTooltips" }] : []));
|
|
14496
|
+
/** Trigger pour ouvrir le popover des sous-menus en mode collapsed */
|
|
14497
|
+
collapsedTrigger = input('hover', ...(ngDevMode ? [{ debugName: "collapsedTrigger" }] : []));
|
|
14103
14498
|
/** ID de l'item actif (contrôlé depuis l'extérieur) */
|
|
14104
14499
|
initialActiveItemId = input(null, ...(ngDevMode ? [{ debugName: "initialActiveItemId" }] : []));
|
|
14105
14500
|
// ============ OUTPUTS ============
|
|
@@ -14592,12 +14987,12 @@ class DsSidebar {
|
|
|
14592
14987
|
}
|
|
14593
14988
|
}
|
|
14594
14989
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14595
|
-
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 }, 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 [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<!-- 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:block}.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:100vh;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{margin:0 auto}.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}: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{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}}\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"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
14596
14991
|
}
|
|
14597
14992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebar, decorators: [{
|
|
14598
14993
|
type: Component,
|
|
14599
|
-
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 [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<!-- 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:block}.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:100vh;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{margin:0 auto}.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}: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{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}}\n"] }]
|
|
14600
|
-
}], 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 }] }], 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: [{
|
|
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"] }]
|
|
14995
|
+
}], 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: [{
|
|
14601
14996
|
type: ViewChild,
|
|
14602
14997
|
args: ['sidebarContainer']
|
|
14603
14998
|
}], itemComponents: [{
|
|
@@ -14605,6 +15000,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
14605
15000
|
args: [DsSidebarItemComponent]
|
|
14606
15001
|
}] } });
|
|
14607
15002
|
|
|
15003
|
+
class DsSidebarFooterItemComponent {
|
|
15004
|
+
// Inputs (signals)
|
|
15005
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
15006
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
15007
|
+
mode = input('full', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
15008
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
15009
|
+
// Outputs (signals)
|
|
15010
|
+
clicked = output();
|
|
15011
|
+
// Computed
|
|
15012
|
+
isCollapsed = computed(() => this.mode() === 'collapsed', ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
15013
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebarFooterItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15014
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebarFooterItemComponent, isStandalone: true, selector: "ds-sidebar-footer-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ds-sidebar-footer-item\"\n [class.ds-sidebar-footer-item--collapsed]=\"isCollapsed()\"\n [class.ds-sidebar-footer-item--danger]=\"variant() === 'danger'\"\n [attr.aria-label]=\"label()\"\n [attr.title]=\"isCollapsed() ? label() : null\"\n (click)=\"clicked.emit()\">\n <fa-icon [icon]=\"icon()\" />\n @if (!isCollapsed()) {\n <span class=\"ds-sidebar-footer-item__label\">{{ label() }}</span>\n }\n</button>\n", styles: [".ds-sidebar-footer-item{display:flex;align-items:center;gap:var(--space-2, .5rem);width:100%;padding:var(--space-3, .75rem);border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));font-size:var(--font-size-sm, .875rem);cursor:pointer;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar-footer-item:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar-footer-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar-footer-item--collapsed{justify-content:center;padding:var(--space-2, .5rem)}.ds-sidebar-footer-item--danger{background:var(--color-error, #ef4444);color:#fff}.ds-sidebar-footer-item--danger:hover{background:var(--color-error-hover, #dc2626)}.ds-sidebar-footer-item__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: 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"] }] });
|
|
15015
|
+
}
|
|
15016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebarFooterItemComponent, decorators: [{
|
|
15017
|
+
type: Component,
|
|
15018
|
+
args: [{ selector: 'ds-sidebar-footer-item', standalone: true, imports: [FaIconComponent], template: "<button\n type=\"button\"\n class=\"ds-sidebar-footer-item\"\n [class.ds-sidebar-footer-item--collapsed]=\"isCollapsed()\"\n [class.ds-sidebar-footer-item--danger]=\"variant() === 'danger'\"\n [attr.aria-label]=\"label()\"\n [attr.title]=\"isCollapsed() ? label() : null\"\n (click)=\"clicked.emit()\">\n <fa-icon [icon]=\"icon()\" />\n @if (!isCollapsed()) {\n <span class=\"ds-sidebar-footer-item__label\">{{ label() }}</span>\n }\n</button>\n", styles: [".ds-sidebar-footer-item{display:flex;align-items:center;gap:var(--space-2, .5rem);width:100%;padding:var(--space-3, .75rem);border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));font-size:var(--font-size-sm, .875rem);cursor:pointer;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar-footer-item:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar-footer-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar-footer-item--collapsed{justify-content:center;padding:var(--space-2, .5rem)}.ds-sidebar-footer-item--danger{background:var(--color-error, #ef4444);color:#fff}.ds-sidebar-footer-item--danger:hover{background:var(--color-error-hover, #dc2626)}.ds-sidebar-footer-item__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
15019
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
15020
|
+
|
|
14608
15021
|
/**
|
|
14609
15022
|
* # DsNavList
|
|
14610
15023
|
*
|
|
@@ -15519,91 +15932,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15519
15932
|
*/
|
|
15520
15933
|
// Design System components exports
|
|
15521
15934
|
|
|
15522
|
-
const BUTTON_VARIANT_OPTIONS = ['primary', 'secondary', 'ghost', 'success', 'warning', 'error', 'info'];
|
|
15523
|
-
const BUTTON_APPEARANCE_OPTIONS = ['solid', 'outline'];
|
|
15524
|
-
const BUTTON_SIZE_OPTIONS = ['sm', 'md', 'lg'];
|
|
15525
|
-
const buildButtonArgTypes = ({ includeLoading = true, includeBlock = true, variantDescription = 'Variante visuelle', appearanceDescription = 'Apparence', sizeDescription = 'Taille', disabledDescription = 'Désactivé', loadingDescription = 'En chargement', blockDescription = 'Pleine largeur', } = {}) => ({
|
|
15526
|
-
variant: {
|
|
15527
|
-
control: 'select',
|
|
15528
|
-
options: BUTTON_VARIANT_OPTIONS,
|
|
15529
|
-
description: variantDescription,
|
|
15530
|
-
},
|
|
15531
|
-
appearance: {
|
|
15532
|
-
control: 'select',
|
|
15533
|
-
options: BUTTON_APPEARANCE_OPTIONS,
|
|
15534
|
-
description: appearanceDescription,
|
|
15535
|
-
},
|
|
15536
|
-
size: {
|
|
15537
|
-
control: 'select',
|
|
15538
|
-
options: BUTTON_SIZE_OPTIONS,
|
|
15539
|
-
description: sizeDescription,
|
|
15540
|
-
},
|
|
15541
|
-
disabled: {
|
|
15542
|
-
control: 'boolean',
|
|
15543
|
-
description: disabledDescription,
|
|
15544
|
-
},
|
|
15545
|
-
...(includeLoading
|
|
15546
|
-
? {
|
|
15547
|
-
loading: {
|
|
15548
|
-
control: 'boolean',
|
|
15549
|
-
description: loadingDescription,
|
|
15550
|
-
},
|
|
15551
|
-
}
|
|
15552
|
-
: {}),
|
|
15553
|
-
...(includeBlock
|
|
15554
|
-
? {
|
|
15555
|
-
block: {
|
|
15556
|
-
control: 'boolean',
|
|
15557
|
-
description: blockDescription,
|
|
15558
|
-
},
|
|
15559
|
-
}
|
|
15560
|
-
: {}),
|
|
15561
|
-
});
|
|
15562
|
-
const buildButtonArgs = ({ includeLoading = true, includeBlock = true } = {}) => ({
|
|
15563
|
-
variant: 'primary',
|
|
15564
|
-
appearance: 'solid',
|
|
15565
|
-
size: 'md',
|
|
15566
|
-
disabled: false,
|
|
15567
|
-
...(includeLoading ? { loading: false } : {}),
|
|
15568
|
-
...(includeBlock ? { block: false } : {}),
|
|
15569
|
-
});
|
|
15570
|
-
const createVariantRender = (tagName, bindings, extraAttributes = '') => (args) => ({
|
|
15571
|
-
props: { ...args, variants: BUTTON_VARIANT_OPTIONS },
|
|
15572
|
-
template: `
|
|
15573
|
-
<div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
|
|
15574
|
-
<${tagName}
|
|
15575
|
-
*ngFor="let variant of variants"
|
|
15576
|
-
[${bindings.variant}]="variant"${bindings.appearance ? `
|
|
15577
|
-
[${bindings.appearance}]="appearance"` : ''}
|
|
15578
|
-
[${bindings.size}]="size"${bindings.disabled ? `
|
|
15579
|
-
[${bindings.disabled}]="disabled"` : ''}${bindings.loading ? `
|
|
15580
|
-
[${bindings.loading}]="loading"` : ''}${bindings.block ? `
|
|
15581
|
-
[${bindings.block}]="block"` : ''}${extraAttributes ? `
|
|
15582
|
-
${extraAttributes}` : ''}>
|
|
15583
|
-
{{ variant }}
|
|
15584
|
-
</${tagName}>
|
|
15585
|
-
</div>
|
|
15586
|
-
`,
|
|
15587
|
-
});
|
|
15588
|
-
const createSizeRender = (tagName, bindings, extraAttributes = '') => (args) => ({
|
|
15589
|
-
props: { ...args, sizes: BUTTON_SIZE_OPTIONS },
|
|
15590
|
-
template: `
|
|
15591
|
-
<div style="display: flex; gap: 8px; align-items: center;">
|
|
15592
|
-
<${tagName}
|
|
15593
|
-
*ngFor="let size of sizes"
|
|
15594
|
-
[${bindings.size}]="size"${bindings.variant ? `
|
|
15595
|
-
[${bindings.variant}]="variant"` : ''}${bindings.appearance ? `
|
|
15596
|
-
[${bindings.appearance}]="appearance"` : ''}${bindings.disabled ? `
|
|
15597
|
-
[${bindings.disabled}]="disabled"` : ''}${bindings.loading ? `
|
|
15598
|
-
[${bindings.loading}]="loading"` : ''}${bindings.block ? `
|
|
15599
|
-
[${bindings.block}]="block"` : ''}${extraAttributes ? `
|
|
15600
|
-
${extraAttributes}` : ''}>
|
|
15601
|
-
{{ size }}
|
|
15602
|
-
</${tagName}>
|
|
15603
|
-
</div>
|
|
15604
|
-
`,
|
|
15605
|
-
});
|
|
15606
|
-
|
|
15607
15935
|
/**
|
|
15608
15936
|
* Service centralisé pour l'enregistrement des icônes FontAwesome.
|
|
15609
15937
|
*
|
|
@@ -16085,5 +16413,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
16085
16413
|
* Generated bundle index. Do not edit.
|
|
16086
16414
|
*/
|
|
16087
16415
|
|
|
16088
|
-
export { AUTOCOMPLETE_POSITIONS,
|
|
16416
|
+
export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
|
|
16089
16417
|
//# sourceMappingURL=kksdev-ds-angular.mjs.map
|