@kksdev/ds-angular 1.8.2 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15258,6 +15258,8 @@ class DsNavList {
|
|
|
15258
15258
|
itemClick = output();
|
|
15259
15259
|
/** Émis lors du toggle d'un groupe */
|
|
15260
15260
|
groupToggle = output();
|
|
15261
|
+
/** Émis lors du clic sur l'action d'un groupe */
|
|
15262
|
+
groupAction = output();
|
|
15261
15263
|
// ============ ICONS ============
|
|
15262
15264
|
faChevronDown = faChevronDown;
|
|
15263
15265
|
faChevronRight = faChevronRight;
|
|
@@ -15359,8 +15361,15 @@ class DsNavList {
|
|
|
15359
15361
|
}
|
|
15360
15362
|
return classes.join(' ');
|
|
15361
15363
|
}
|
|
15364
|
+
/**
|
|
15365
|
+
* Gère le clic sur l'action d'un groupe
|
|
15366
|
+
*/
|
|
15367
|
+
handleGroupAction(group, event) {
|
|
15368
|
+
event.stopPropagation();
|
|
15369
|
+
this.groupAction.emit({ group, event });
|
|
15370
|
+
}
|
|
15362
15371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNavList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsNavList, isStandalone: true, selector: "ds-nav-list", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", groupToggle: "groupToggle" }, ngImport: i0, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n @if (group.collapsible) {\n
|
|
15372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsNavList, isStandalone: true, selector: "ds-nav-list", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", groupToggle: "groupToggle", groupAction: "groupAction" }, ngImport: i0, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n <div class=\"group-header-end\">\n @if (group.headerAction) {\n <button\n type=\"button\"\n class=\"group-action-btn\"\n [attr.aria-label]=\"group.headerAction.ariaLabel\"\n [title]=\"group.headerAction.tooltip || group.headerAction.ariaLabel\"\n (click)=\"handleGroupAction(group, $event)\">\n <fa-icon [icon]=\"group.headerAction.icon\" />\n </button>\n }\n @if (group.collapsible) {\n <fa-icon\n [icon]=\"isGroupCollapsed(group) ? faChevronRight : faChevronDown\"\n class=\"collapse-icon\">\n </fa-icon>\n }\n </div>\n </div>\n </ds-divider>\n }\n\n <!-- Items du groupe -->\n @if (!isGroupCollapsed(group)) {\n <ul class=\"nav-list-group\" role=\"list\">\n @for (item of group.items; track item.id) {\n <li\n [class]=\"getItemClasses(item)\"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [tabindex]=\"item.disabled ? -1 : 0\"\n role=\"listitem\"\n (click)=\"handleItemClick(item, group, $event)\"\n (keydown)=\"handleItemKeydown(item, group, $event)\">\n\n <!-- Partie gauche : ic\u00F4ne/emoji + label -->\n <div class=\"item-main\">\n @if (item.emoji) {\n <span class=\"item-emoji\">{{ item.emoji }}</span>\n } @else if (item.icon) {\n <fa-icon [icon]=\"item.icon\" class=\"item-icon\"></fa-icon>\n }\n <span class=\"item-label\">{{ item.label }}</span>\n </div>\n\n <!-- Partie droite : dot + badge -->\n <div class=\"item-end\">\n @if (item.dotColor) {\n <span\n class=\"item-dot\"\n [style.background-color]=\"item.dotColor\">\n </span>\n }\n @if (item.badge !== undefined && item.badge !== null) {\n <ds-badge\n [type]=\"item.badgeVariant ?? 'default'\"\n variant=\"outline\"\n size=\"sm\">\n {{ item.badge }}\n </ds-badge>\n }\n </div>\n </li>\n }\n </ul>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-nav-list{display:flex;flex-direction:column;gap:var(--space-1)}.ds-nav-list--sm{--nav-item-padding-y: .35rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-0, .8125rem);--nav-item-icon-size: .875rem;--nav-item-emoji-size: .9rem;--nav-item-dot-size: 6px;--nav-item-gap: var(--space-1)}.ds-nav-list--md{--nav-item-padding-y: .45rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-1, .9375rem);--nav-item-icon-size: 1rem;--nav-item-emoji-size: 1rem;--nav-item-dot-size: 8px;--nav-item-gap: var(--space-2)}.ds-nav-list--lg{--nav-item-padding-y: .55rem;--nav-item-padding-x: var(--space-3);--nav-item-font-size: var(--font-size-2, 1rem);--nav-item-icon-size: 1.125rem;--nav-item-emoji-size: 1.125rem;--nav-item-dot-size: 10px;--nav-item-gap: var(--space-2)}.group-header{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:default}.collapsible .group-header{cursor:pointer}.group-header-end{display:flex;align-items:center;gap:var(--space-1)}.group-action-btn{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-1, 4px);background:transparent;color:var(--text-muted);font-size:.75rem;cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.group-action-btn:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .1));color:var(--text-default)}.group-action-btn:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:1px}.collapse-icon{font-size:.7em;color:var(--text-muted);transition:transform var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-group{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.nav-list-item{display:flex;align-items:center;justify-content:space-between;gap:var(--nav-item-gap);padding:var(--nav-item-padding-y) var(--nav-item-padding-x);border-radius:var(--radius-1-5, 6px);color:var(--text-default);cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-item:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .06))}.nav-list-item:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:-2px}.nav-list-item--active{background-color:var(--active-bg, rgba(255, 255, 255, .1));color:var(--color-primary, #6366f1)}.nav-list-item--active .item-icon{color:var(--color-primary, #6366f1)}.nav-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.item-main{display:inline-flex;align-items:center;gap:var(--nav-item-gap);min-width:0}.item-icon{flex-shrink:0;font-size:var(--nav-item-icon-size);color:var(--text-muted);width:1.25em;text-align:center}.item-emoji{flex-shrink:0;font-size:var(--nav-item-emoji-size);width:1.25em;text-align:center}.item-label{font-size:var(--nav-item-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-end{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0}.item-dot{width:var(--nav-item-dot-size);height:var(--nav-item-dot-size);border-radius:50%;flex-shrink:0}ds-divider.collapsible{cursor:pointer}ds-divider.collapsible:hover .group-header{color:var(--text-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DsBadge, selector: "ds-badge", inputs: ["type", "size", "iconStart", "iconEnd", "variant", "shape", "color"] }, { kind: "component", type: DsDivider, selector: "ds-divider", inputs: ["orientation", "variant", "size", "labelPosition", "spacing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15364
15373
|
}
|
|
15365
15374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNavList, decorators: [{
|
|
15366
15375
|
type: Component,
|
|
@@ -15369,8 +15378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15369
15378
|
FaIconComponent,
|
|
15370
15379
|
DsBadge,
|
|
15371
15380
|
DsDivider,
|
|
15372
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n @if (group.collapsible) {\n
|
|
15373
|
-
}], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }] } });
|
|
15381
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n <div class=\"group-header-end\">\n @if (group.headerAction) {\n <button\n type=\"button\"\n class=\"group-action-btn\"\n [attr.aria-label]=\"group.headerAction.ariaLabel\"\n [title]=\"group.headerAction.tooltip || group.headerAction.ariaLabel\"\n (click)=\"handleGroupAction(group, $event)\">\n <fa-icon [icon]=\"group.headerAction.icon\" />\n </button>\n }\n @if (group.collapsible) {\n <fa-icon\n [icon]=\"isGroupCollapsed(group) ? faChevronRight : faChevronDown\"\n class=\"collapse-icon\">\n </fa-icon>\n }\n </div>\n </div>\n </ds-divider>\n }\n\n <!-- Items du groupe -->\n @if (!isGroupCollapsed(group)) {\n <ul class=\"nav-list-group\" role=\"list\">\n @for (item of group.items; track item.id) {\n <li\n [class]=\"getItemClasses(item)\"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [tabindex]=\"item.disabled ? -1 : 0\"\n role=\"listitem\"\n (click)=\"handleItemClick(item, group, $event)\"\n (keydown)=\"handleItemKeydown(item, group, $event)\">\n\n <!-- Partie gauche : ic\u00F4ne/emoji + label -->\n <div class=\"item-main\">\n @if (item.emoji) {\n <span class=\"item-emoji\">{{ item.emoji }}</span>\n } @else if (item.icon) {\n <fa-icon [icon]=\"item.icon\" class=\"item-icon\"></fa-icon>\n }\n <span class=\"item-label\">{{ item.label }}</span>\n </div>\n\n <!-- Partie droite : dot + badge -->\n <div class=\"item-end\">\n @if (item.dotColor) {\n <span\n class=\"item-dot\"\n [style.background-color]=\"item.dotColor\">\n </span>\n }\n @if (item.badge !== undefined && item.badge !== null) {\n <ds-badge\n [type]=\"item.badgeVariant ?? 'default'\"\n variant=\"outline\"\n size=\"sm\">\n {{ item.badge }}\n </ds-badge>\n }\n </div>\n </li>\n }\n </ul>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-nav-list{display:flex;flex-direction:column;gap:var(--space-1)}.ds-nav-list--sm{--nav-item-padding-y: .35rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-0, .8125rem);--nav-item-icon-size: .875rem;--nav-item-emoji-size: .9rem;--nav-item-dot-size: 6px;--nav-item-gap: var(--space-1)}.ds-nav-list--md{--nav-item-padding-y: .45rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-1, .9375rem);--nav-item-icon-size: 1rem;--nav-item-emoji-size: 1rem;--nav-item-dot-size: 8px;--nav-item-gap: var(--space-2)}.ds-nav-list--lg{--nav-item-padding-y: .55rem;--nav-item-padding-x: var(--space-3);--nav-item-font-size: var(--font-size-2, 1rem);--nav-item-icon-size: 1.125rem;--nav-item-emoji-size: 1.125rem;--nav-item-dot-size: 10px;--nav-item-gap: var(--space-2)}.group-header{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:default}.collapsible .group-header{cursor:pointer}.group-header-end{display:flex;align-items:center;gap:var(--space-1)}.group-action-btn{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-1, 4px);background:transparent;color:var(--text-muted);font-size:.75rem;cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.group-action-btn:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .1));color:var(--text-default)}.group-action-btn:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:1px}.collapse-icon{font-size:.7em;color:var(--text-muted);transition:transform var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-group{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.nav-list-item{display:flex;align-items:center;justify-content:space-between;gap:var(--nav-item-gap);padding:var(--nav-item-padding-y) var(--nav-item-padding-x);border-radius:var(--radius-1-5, 6px);color:var(--text-default);cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-item:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .06))}.nav-list-item:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:-2px}.nav-list-item--active{background-color:var(--active-bg, rgba(255, 255, 255, .1));color:var(--color-primary, #6366f1)}.nav-list-item--active .item-icon{color:var(--color-primary, #6366f1)}.nav-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.item-main{display:inline-flex;align-items:center;gap:var(--nav-item-gap);min-width:0}.item-icon{flex-shrink:0;font-size:var(--nav-item-icon-size);color:var(--text-muted);width:1.25em;text-align:center}.item-emoji{flex-shrink:0;font-size:var(--nav-item-emoji-size);width:1.25em;text-align:center}.item-label{font-size:var(--nav-item-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-end{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0}.item-dot{width:var(--nav-item-dot-size);height:var(--nav-item-dot-size);border-radius:50%;flex-shrink:0}ds-divider.collapsible{cursor:pointer}ds-divider.collapsible:hover .group-header{color:var(--text-default)}\n"] }]
|
|
15382
|
+
}], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], groupAction: [{ type: i0.Output, args: ["groupAction"] }] } });
|
|
15374
15383
|
|
|
15375
15384
|
/**
|
|
15376
15385
|
* # DsCheckboxList
|