suis 2.0.0 → 2.0.1
Sign up to get free protection for your applications and to get access to all the features.
package/README.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
# SUIS - Angular
|
|
1
|
+
# SUIS - Angular 17+ Component Library
|
|
2
2
|
|
|
3
3
|
## What is SUIS ?
|
|
4
4
|
|
|
5
|
-
Angular UI component library for dashboard systems development. Supports Angular in version >=
|
|
5
|
+
Angular UI component library for dashboard systems development. Supports Angular in version >=17.1 and uses its latest features as standalone components and signals (SUIS - Standalone UI + Signals).
|
|
6
|
+
|
|
7
|
+
## Angular version matrix
|
|
8
|
+
|
|
9
|
+
| Angular | SUIS |
|
|
10
|
+
| 16.2.0 | 1.8.2 |
|
|
11
|
+
| 17.1.0 | 2.0.0 |
|
package/esm2022/lib/modules/suis-navigation/components/suis-navigation/suis-navigation.component.mjs
CHANGED
|
@@ -44,11 +44,11 @@ export class SuisNavigationComponent {
|
|
|
44
44
|
return `${groupItem.label}-${index}`;
|
|
45
45
|
}
|
|
46
46
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange", darkMode: "darkMode" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable", "darkMode"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange", darkMode: "darkMode" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n [color]=\"darkMode ? 'white' : 'primary'\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable", "darkMode"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
48
|
}
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SuisNavigationComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
|
-
args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
|
|
51
|
+
args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n [color]=\"darkMode ? 'white' : 'primary'\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
|
|
52
52
|
}], propDecorators: { suisNavigationItem: [{
|
|
53
53
|
type: ContentChild,
|
|
54
54
|
args: [SuisNavigationItemDirective]
|
|
@@ -67,4 +67,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
|
|
|
67
67
|
}], darkMode: [{
|
|
68
68
|
type: Input
|
|
69
69
|
}] } });
|
|
70
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1uYXZpZ2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL21vZHVsZXMvc3Vpcy1uYXZpZ2F0aW9uL2NvbXBvbmVudHMvc3Vpcy1uYXZpZ2F0aW9uL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9tb2R1bGVzL3N1aXMtbmF2aWdhdGlvbi9jb21wb25lbnRzL3N1aXMtbmF2aWdhdGlvbi9zdWlzLW5hdmlnYXRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUM5RixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN4RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7QUFVckUsTUFBTSxPQUFPLHVCQUF1QjtJQVJwQztRQWFFOztXQUVHO1FBQ00sVUFBSyxHQUE4QixFQUFFLENBQUM7UUFFL0M7O1dBRUc7UUFDTSxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUV4Qzs7V0FFRztRQUNNLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFckM7O1dBRUc7UUFDTSxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUV0Qzs7V0FFRztRQUNNLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFFcEM7O1dBRUc7UUFDTSxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFdkQ7O1dBRUc7UUFDTSxhQUFRLEdBQVksSUFBSSxDQUFDO0tBV25DO0lBVEMsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRUQsZ0JBQWdCO0lBQ2hCLGdCQUFnQixDQUFDLEtBQWEsRUFBRSxTQUFrQztRQUNoRSxPQUFPLEdBQUcsU0FBUyxDQUFDLEtBQUssSUFBSSxLQUFLLEVBQUUsQ0FBQztJQUN2QyxDQUFDOzhHQWhEVSx1QkFBdUI7a0dBQXZCLHVCQUF1QixpVUFFcEIsMkJBQTJCLGdEQ3ZCM0MsNDVCQTJCQSwweEJEWFksSUFBSSw2RkFBRSxLQUFLLG1IQUFFLDRCQUE0Qix5SUFBRSxpQkFBaUI7OzJGQUszRCx1QkFBdUI7a0JBUm5DLFNBQVM7K0JBQ0UsaUJBQWlCLGNBQ2YsSUFBSSxXQUNQLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSw0QkFBNEIsRUFBRSxpQkFBaUIsQ0FBQyxtQkFHdEQsdUJBQXVCLENBQUMsTUFBTTs4QkFLL0Msa0JBQWtCO3NCQURqQixZQUFZO3VCQUFDLDJCQUEyQjtnQkFNaEMsS0FBSztzQkFBYixLQUFLO2dCQUtHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFLRyxXQUFXO3NCQUFuQixLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0csZUFBZTtzQkFBdkIsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nRm9yLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNOYXZpZ2F0aW9uR3JvdXBJdGVtIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9zdWlzLW5hdmlnYXRpb24taXRlbS5pbnRlcmZhY2VzJztcbmltcG9ydCB7IFN1aXNOYXZpZ2F0aW9uSXRlbURpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMvc3Vpcy1uYXZpZ2F0aW9uLWl0ZW0uZGlyZWN0aXZlJztcbmltcG9ydCB7IFN1aXNOYXZpZ2F0aW9uR3JvdXBDb21wb25lbnQgfSBmcm9tICcuLi9zdWlzLW5hdmlnYXRpb24tZ3JvdXAnO1xuaW1wb3J0IHsgU3Vpc0ljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL3N1aXMtaWNvbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1aXMtbmF2aWdhdGlvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmLCBOZ0ZvciwgU3Vpc05hdmlnYXRpb25Hcm91cENvbXBvbmVudCwgU3Vpc0ljb25Db21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vc3Vpcy1uYXZpZ2F0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3Vpcy1uYXZpZ2F0aW9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTdWlzTmF2aWdhdGlvbkNvbXBvbmVudCB7XG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgQENvbnRlbnRDaGlsZChTdWlzTmF2aWdhdGlvbkl0ZW1EaXJlY3RpdmUpXG4gIHN1aXNOYXZpZ2F0aW9uSXRlbT86IFN1aXNOYXZpZ2F0aW9uSXRlbURpcmVjdGl2ZTtcblxuICAvKipcbiAgICogTGlzdCBvZiBuYXZpZ2F0aW9uIGl0ZW1zLiBUeXBlIG9mIFN1aXNOYXZpZ2F0aW9uR3JvdXBJdGVtW10uIEJ5IGRlZmF1bHQgc2V0IHRvIGVtcHR5IGFycmF5LlxuICAgKi9cbiAgQElucHV0KCkgaXRlbXM6IFN1aXNOYXZpZ2F0aW9uR3JvdXBJdGVtW10gPSBbXTtcblxuICAvKipcbiAgICogQ29uZGl0aW9uIHRvIGV4cGFuZCBncm91cHMgYXQgdmlldyBpbml0aWFsaXphdGlvbi4gQnkgZGVmYXVsdCBzZXQgdG8gdHJ1ZS5cbiAgICovXG4gIEBJbnB1dCgpIGV4cGFuZGVkR3JvdXBzOiBib29sZWFuID0gdHJ1ZTtcblxuICAvKipcbiAgICogQWRkcyBleHBhbmQgLyBjb2xsYXBzZSBsb2dpYyB0byBncm91cCBoZWFkZXIgaXRlbXMuIEJ5IGRlZmF1bHQgc2V0IHRvIGZhbHNlLlxuICAgKi9cbiAgQElucHV0KCkgZXhwYW5kYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBBZGRzIGNvbGxhcHNlIC8gZXhwYW5kIGxvZ2ljIHRvIG5hdmlnaWF0b24uIEJ5IGRlZmF1bHQgc2V0IHRvIGZhbHNlLlxuICAgKi9cbiAgQElucHV0KCkgY29sbGFwc2FibGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogQ29sbGFwc2VzIHRoZSBuYXZpZ2lhdGlvbiwgd2hlbiBjb2xsYXBzYWJsZSBpcyBlbmFibGVkLiBCeSBkZWZhdWx0IHNldCB0byBmYWxzZS5cbiAgICovXG4gIEBJbnB1dCgpIGNvbGxhcHNlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBFbWl0cyBvbiBjb2xsYXBzZWQgdmFsdWUgY2hhbmdlZC5cbiAgICovXG4gIEBJbnB1dCgpIGNvbGxhc3BlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAvKipcbiAgICogRW5hYmxlcyBkYXJrIG1vZGUgcGFsbGV0dGUuIEJ5IGRlZmF1bHQgc2V0IHRvIHRydWUuXG4gICAqL1xuICBASW5wdXQoKSBkYXJrTW9kZTogYm9vbGVhbiA9IHRydWU7XG5cbiAgb25Ub2dnbGUoKTogdm9pZCB7XG4gICAgdGhpcy5jb2xsYXBzZWQgPSAhdGhpcy5jb2xsYXBzZWQ7XG4gICAgdGhpcy5jb2xsYXNwZWRDaGFuZ2UuZW1pdCh0aGlzLmNvbGxhcHNlZCk7XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIGdyb3VwSXRlbVRyYWNrQnkoaW5kZXg6IG51bWJlciwgZ3JvdXBJdGVtOiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbSk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGAke2dyb3VwSXRlbS5sYWJlbH0tJHtpbmRleH1gO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic3Vpcy1uYXZpZ2F0aW9uXCJcbiAgW2NsYXNzLnN1aXMtbmF2aWdhdGlvbi0tY29sbGFwc2VkXT1cImNvbGxhcHNhYmxlICYmIGNvbGxhcHNlZFwiXG4gIFtjbGFzcy5zdWlzLW5hdmlnYXRpb24tLWRhcmtdPVwiZGFya01vZGVcIlxuPlxuICA8ZGl2IGNsYXNzPVwic3Vpcy1uYXZpZ2F0aW9uX19hY3Rpb25zXCI+XG4gICAgPGJ1dHRvbiAqbmdJZj1cImNvbGxhcHNhYmxlXCIgdHlwZT1cImJ1dHRvblwiIChjbGljayk9XCJvblRvZ2dsZSgpXCI+XG4gICAgICA8c3Vpcy1pY29uXG4gICAgICAgIFt0eXBlXT1cImNvbGxhcHNlZCA/ICdhcnJvdy1yaWdodCcgOiAnYXJyb3ctbGVmdCdcIlxuICAgICAgICBbY29sb3JdPVwiZGFya01vZGUgPyAnd2hpdGUnIDogJ3ByaW1hcnknXCJcbiAgICAgICAgc2l6ZT1cInhsXCJcbiAgICAgID48L3N1aXMtaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJzdWlzLW5hdmlnYXRpb25fX2dyb3Vwc1wiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhY29sbGFwc2VkXCI+XG4gICAgICA8c3Vpcy1uYXZpZ2F0aW9uLWdyb3VwXG4gICAgICAgICpuZ0Zvcj1cImxldCBncm91cEl0ZW0gb2YgaXRlbXM7IHRyYWNrQnk6IGdyb3VwSXRlbVRyYWNrQnlcIlxuICAgICAgICBbaXRlbV09XCJncm91cEl0ZW1cIlxuICAgICAgICBbdGVtcGxhdGVSZWZdPVwic3Vpc05hdmlnYXRpb25JdGVtPy50ZW1wbGF0ZVJlZlwiXG4gICAgICAgIFtleHBhbmRlZF09XCJleHBhbmRlZEdyb3Vwc1wiXG4gICAgICAgIFtleHBhbmRhYmxlXT1cImV4cGFuZGFibGVcIlxuICAgICAgICBbZGFya01vZGVdPVwiZGFya01vZGVcIlxuICAgICAgPjwvc3Vpcy1uYXZpZ2F0aW9uLWdyb3VwPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
package/fesm2022/suis.mjs
CHANGED
|
@@ -2850,11 +2850,11 @@ class SuisNavigationComponent {
|
|
|
2850
2850
|
return `${groupItem.label}-${index}`;
|
|
2851
2851
|
}
|
|
2852
2852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange", darkMode: "darkMode" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable", "darkMode"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange", darkMode: "darkMode" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n [color]=\"darkMode ? 'white' : 'primary'\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable", "darkMode"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2854
2854
|
}
|
|
2855
2855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SuisNavigationComponent, decorators: [{
|
|
2856
2856
|
type: Component,
|
|
2857
|
-
args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
|
|
2857
|
+
args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n [class.suis-navigation--dark]=\"darkMode\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n [color]=\"darkMode ? 'white' : 'primary'\"\n size=\"xl\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n [darkMode]=\"darkMode\"\n ></suis-navigation-group>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
|
|
2858
2858
|
}], propDecorators: { suisNavigationItem: [{
|
|
2859
2859
|
type: ContentChild,
|
|
2860
2860
|
args: [SuisNavigationItemDirective]
|