@softpak/components 0.0.0-beta.70 → 0.0.0-beta.72
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/esm2022/spx-navigation/spx-home-tile.component.mjs +17 -7
- package/esm2022/spx-navigation/spx-navigation.component.mjs +11 -5
- package/fesm2022/softpak-components-spx-navigation.mjs +25 -9
- package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
- package/package.json +7 -7
- package/spx-navigation/spx-home-tile.component.d.ts +4 -1
- package/spx-navigation/spx-navigation.component.d.ts +4 -1
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { NgClass, NgIf } from '@angular/common';
|
|
2
|
-
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { Component, Input, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class SpxHomeTileComponent {
|
|
5
|
+
setFocus() {
|
|
6
|
+
this.buttonRef?.focus();
|
|
7
|
+
}
|
|
5
8
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxHomeTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxHomeTileComponent, isStandalone: true, selector: "spx-home-tile", inputs: { spxClass: "spxClass", spxSubtitle: "spxSubtitle", spxTitle: "spxTitle" }, ngImport: i0, template: `<button
|
|
9
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxHomeTileComponent, isStandalone: true, selector: "spx-home-tile", inputs: { spxAutofocus: "spxAutofocus", spxClass: "spxClass", spxSubtitle: "spxSubtitle", spxTitle: "spxTitle" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: `<button #button
|
|
7
10
|
class="border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
8
11
|
type="button"
|
|
9
12
|
part="button"
|
|
13
|
+
[attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
|
|
10
14
|
[class.bg-blue-600]="!this.spxClass"
|
|
11
15
|
[class.focus:ring-blue-500]="!this.spxClass"
|
|
12
16
|
[class.hover:bg-blue-800]="!this.spxClass"
|
|
@@ -14,7 +18,7 @@ export class SpxHomeTileComponent {
|
|
|
14
18
|
[ngClass]="this.spxClass ? this.spxClass : undefined">
|
|
15
19
|
<div class="flex gap-3 items-center">
|
|
16
20
|
<div class="fal my-2.5 self-center text-xl"><ng-content></ng-content></div>
|
|
17
|
-
<div class="grow flex flex-col">
|
|
21
|
+
<div class="grow flex flex-col text-left">
|
|
18
22
|
<div class="text-lg font-bold text-ellipsis overflow-hidden">{{ this.spxTitle }}</div>
|
|
19
23
|
<div *ngIf="this.spxSubtitle" class="text-sm opacity-70 text-ellipsis overflow-hidden">{{ this.spxSubtitle }}</div>
|
|
20
24
|
</div>
|
|
@@ -30,10 +34,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
30
34
|
NgClass,
|
|
31
35
|
NgIf,
|
|
32
36
|
],
|
|
33
|
-
template: `<button
|
|
37
|
+
template: `<button #button
|
|
34
38
|
class="border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
35
39
|
type="button"
|
|
36
40
|
part="button"
|
|
41
|
+
[attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
|
|
37
42
|
[class.bg-blue-600]="!this.spxClass"
|
|
38
43
|
[class.focus:ring-blue-500]="!this.spxClass"
|
|
39
44
|
[class.hover:bg-blue-800]="!this.spxClass"
|
|
@@ -41,18 +46,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
41
46
|
[ngClass]="this.spxClass ? this.spxClass : undefined">
|
|
42
47
|
<div class="flex gap-3 items-center">
|
|
43
48
|
<div class="fal my-2.5 self-center text-xl"><ng-content></ng-content></div>
|
|
44
|
-
<div class="grow flex flex-col">
|
|
49
|
+
<div class="grow flex flex-col text-left">
|
|
45
50
|
<div class="text-lg font-bold text-ellipsis overflow-hidden">{{ this.spxTitle }}</div>
|
|
46
51
|
<div *ngIf="this.spxSubtitle" class="text-sm opacity-70 text-ellipsis overflow-hidden">{{ this.spxSubtitle }}</div>
|
|
47
52
|
</div>
|
|
48
53
|
</div>
|
|
49
54
|
</button>`,
|
|
50
55
|
}]
|
|
51
|
-
}], propDecorators: {
|
|
56
|
+
}], propDecorators: { spxAutofocus: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}], spxClass: [{
|
|
52
59
|
type: Input
|
|
53
60
|
}], spxSubtitle: [{
|
|
54
61
|
type: Input
|
|
55
62
|
}], spxTitle: [{
|
|
56
63
|
type: Input
|
|
64
|
+
}], buttonRef: [{
|
|
65
|
+
type: ViewChild,
|
|
66
|
+
args: ['button']
|
|
57
67
|
}] } });
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWhvbWUtdGlsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zb2Z0cGFrL2NvbXBvbmVudHMvc3B4LW5hdmlnYXRpb24vc3B4LWhvbWUtdGlsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNoRCxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBNEI1RCxNQUFNLE9BQU8sb0JBQW9CO0lBTy9CLFFBQVE7UUFDTixJQUFJLENBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO0lBQzFCLENBQUM7OEdBVFUsb0JBQW9CO2tHQUFwQixvQkFBb0IsZ1NBbkJyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7VUFpQkYsNERBcEJOLE9BQU8sb0ZBQ1AsSUFBSTs7MkZBcUJLLG9CQUFvQjtrQkExQmhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUU7d0JBQ1AsT0FBTzt3QkFDUCxJQUFJO3FCQUNMO29CQUNELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7VUFpQkY7aUJBQ1Q7OEJBRVUsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDdUIsU0FBUztzQkFBckMsU0FBUzt1QkFBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdDbGFzcywgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3B4LWhvbWUtdGlsZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBOZ0NsYXNzLFxuICAgIE5nSWYsXG4gIF0sXG4gIHRlbXBsYXRlOiBgPGJ1dHRvbiAjYnV0dG9uXG4gIGNsYXNzPVwiYm9yZGVyIGJvcmRlci10cmFuc3BhcmVudCBmbGV4IGZsZXgtY29sIHctZnVsbCBweC00IHB5LTIgcmVsYXRpdmUgcm91bmRlZCB0ZXh0LWNlbnRlciBmb2N1czpvdXRsaW5lLW5vbmUgZm9jdXM6cmluZy0yIGZvY3VzOnJpbmctb2Zmc2V0LTJcIlxuICB0eXBlPVwiYnV0dG9uXCJcbiAgcGFydD1cImJ1dHRvblwiXG4gIFthdHRyLmF1dG9mb2N1c109XCJ0aGlzLnNweEF1dG9mb2N1cyA/IHRoaXMuc3B4QXV0b2ZvY3VzIDogdW5kZWZpbmVkXCJcbiAgW2NsYXNzLmJnLWJsdWUtNjAwXT1cIiF0aGlzLnNweENsYXNzXCJcbiAgW2NsYXNzLmZvY3VzOnJpbmctYmx1ZS01MDBdPVwiIXRoaXMuc3B4Q2xhc3NcIlxuICBbY2xhc3MuaG92ZXI6YmctYmx1ZS04MDBdPVwiIXRoaXMuc3B4Q2xhc3NcIlxuICBbY2xhc3MudGV4dC13aGl0ZV09XCIhdGhpcy5zcHhDbGFzc1wiXG4gIFtuZ0NsYXNzXT1cInRoaXMuc3B4Q2xhc3MgPyB0aGlzLnNweENsYXNzIDogdW5kZWZpbmVkXCI+XG4gIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC0zIGl0ZW1zLWNlbnRlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJmYWwgbXktMi41IHNlbGYtY2VudGVyIHRleHQteGxcIj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImdyb3cgZmxleCBmbGV4LWNvbCB0ZXh0LWxlZnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LWxnIGZvbnQtYm9sZCB0ZXh0LWVsbGlwc2lzIG92ZXJmbG93LWhpZGRlblwiPnt7IHRoaXMuc3B4VGl0bGUgfX08L2Rpdj5cbiAgICAgIDxkaXYgKm5nSWY9XCJ0aGlzLnNweFN1YnRpdGxlXCIgY2xhc3M9XCJ0ZXh0LXNtIG9wYWNpdHktNzAgdGV4dC1lbGxpcHNpcyBvdmVyZmxvdy1oaWRkZW5cIj57eyB0aGlzLnNweFN1YnRpdGxlIH19PC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9idXR0b24+YCxcbn0pXG5leHBvcnQgY2xhc3MgU3B4SG9tZVRpbGVDb21wb25lbnQge1xuICBASW5wdXQoKSBzcHhBdXRvZm9jdXM/OiBib29sZWFuO1xuICBASW5wdXQoKSBzcHhDbGFzcz86IHN0cmluZztcbiAgQElucHV0KCkgc3B4U3VidGl0bGU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNweFRpdGxlPzogc3RyaW5nO1xuICBAVmlld0NoaWxkKCdidXR0b24nKSBwcml2YXRlIGJ1dHRvblJlZj86IEhUTUxCdXR0b25FbGVtZW50O1xuXG4gIHNldEZvY3VzKCk6IHZvaWQge1xuICAgIHRoaXMuYnV0dG9uUmVmPy5mb2N1cygpO1xuICB9XG59XG4iXX0=
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
|
|
1
|
+
import { Component, ContentChild, EventEmitter, Input, Output, ViewChildren } from '@angular/core';
|
|
2
2
|
import { CommonModule, NgFor } from '@angular/common';
|
|
3
3
|
import { TranslateModule } from '@ngx-translate/core';
|
|
4
4
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
@@ -14,11 +14,14 @@ export class SpxNavigationComponent {
|
|
|
14
14
|
this.navItems = [];
|
|
15
15
|
this.spxClick = new EventEmitter();
|
|
16
16
|
}
|
|
17
|
+
setFocus() {
|
|
18
|
+
this.tiles?.first.setFocus();
|
|
19
|
+
}
|
|
17
20
|
onNavigate(link) {
|
|
18
21
|
this.spxClick.emit(link);
|
|
19
22
|
}
|
|
20
23
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxNavigationComponent, isStandalone: true, selector: "spx-navigation", inputs: { navItems: "navItems" }, outputs: { spxClick: "spxClick" }, queries: [{ propertyName: "iconTemplateRef", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<spx-home-tiles>\n <spx-home-tile *ngFor=\"let item of navItems\" (click)=\"onNavigate(item.routerLink)\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxHomeTilesComponent, selector: "spx-home-tiles" }, { kind: "component", type: SpxHomeTileComponent, selector: "spx-home-tile", inputs: ["spxClass", "spxSubtitle", "spxTitle"] }] }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxNavigationComponent, isStandalone: true, selector: "spx-navigation", inputs: { navItems: "navItems" }, outputs: { spxClick: "spxClick" }, queries: [{ propertyName: "iconTemplateRef", first: true, predicate: ["icon"], descendants: true }], viewQueries: [{ propertyName: "tiles", predicate: ["tiles"], descendants: true }], ngImport: i0, template: "<spx-home-tiles>\n <spx-home-tile #tiles *ngFor=\"let item of navItems; let i = index\" (click)=\"onNavigate(item.routerLink)\"\n [spxAutofocus]=\"i === 0\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxHomeTilesComponent, selector: "spx-home-tiles" }, { kind: "component", type: SpxHomeTileComponent, selector: "spx-home-tile", inputs: ["spxAutofocus", "spxClass", "spxSubtitle", "spxTitle"] }] }); }
|
|
22
25
|
}
|
|
23
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxNavigationComponent, decorators: [{
|
|
24
27
|
type: Component,
|
|
@@ -30,8 +33,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
30
33
|
SpxHomeTilesComponent,
|
|
31
34
|
SpxHomeTileComponent,
|
|
32
35
|
NgFor,
|
|
33
|
-
], template: "<spx-home-tiles>\n <spx-home-tile *ngFor=\"let item of navItems\" (click)=\"onNavigate(item.routerLink)\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n" }]
|
|
34
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
36
|
+
], template: "<spx-home-tiles>\n <spx-home-tile #tiles *ngFor=\"let item of navItems; let i = index\" (click)=\"onNavigate(item.routerLink)\"\n [spxAutofocus]=\"i === 0\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n" }]
|
|
37
|
+
}], ctorParameters: () => [], propDecorators: { tiles: [{
|
|
38
|
+
type: ViewChildren,
|
|
39
|
+
args: ['tiles']
|
|
40
|
+
}], iconTemplateRef: [{
|
|
35
41
|
type: ContentChild,
|
|
36
42
|
args: ['icon', { static: false }]
|
|
37
43
|
}], navItems: [{
|
|
@@ -39,4 +45,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
39
45
|
}], spxClick: [{
|
|
40
46
|
type: Output
|
|
41
47
|
}] } });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LW5hdmlnYXRpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc29mdHBhay9jb21wb25lbnRzL3NweC1uYXZpZ2F0aW9uL3NweC1uYXZpZ2F0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NvZnRwYWsvY29tcG9uZW50cy9zcHgtbmF2aWdhdGlvbi9zcHgtbmF2aWdhdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBMEIsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTNILE9BQU8sRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ25FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7OztBQWdCakUsTUFBTSxPQUFPLHNCQUFzQjtJQU1qQztRQUhTLGFBQVEsR0FBeUIsRUFBRSxDQUFDO1FBQ25DLGFBQVEsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUduRSxDQUFDO0lBRUosUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFRCxVQUFVLENBQUMsSUFBWTtRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzQixDQUFDOzhHQWZVLHNCQUFzQjtrR0FBdEIsc0JBQXNCLHVVQ3ZCbkMsZ2RBU0EsMkNES0ksWUFBWSwySkFDWixlQUFlLDJGQUNmLGlCQUFpQiw4UkFDakIsaUJBQWlCLG1EQUNqQixxQkFBcUIsMkRBQ3JCLG9CQUFvQjs7MkZBSVgsc0JBQXNCO2tCQWRsQyxTQUFTOytCQUNFLGdCQUFnQixjQUVkLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsaUJBQWlCO3dCQUNqQixpQkFBaUI7d0JBQ2pCLHFCQUFxQjt3QkFDckIsb0JBQW9CO3dCQUNwQixLQUFLO3FCQUNOO3dEQUdzQixLQUFLO3NCQUEzQixZQUFZO3VCQUFDLE9BQU87Z0JBQ2lCLGVBQWU7c0JBQXBELFlBQVk7dUJBQUMsTUFBTSxFQUFDLEVBQUMsTUFBTSxFQUFFLEtBQUssRUFBQztnQkFDM0IsUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgUXVlcnlMaXN0LCBUZW1wbGF0ZVJlZiwgVmlld0NoaWxkcmVuIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTcHhOYXZpZ2F0aW9uSXRlbUkgfSBmcm9tICcuL3NweC1uYXZpZ2F0aW9uLWl0ZW0uaW50ZXJmYWNlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSwgTmdGb3IgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBGb250QXdlc29tZU1vZHVsZSB9IGZyb20gJ0Bmb3J0YXdlc29tZS9hbmd1bGFyLWZvbnRhd2Vzb21lJztcbmltcG9ydCB7IFNweENhcGl0YWxpemVQaXBlIH0gZnJvbSAnQHNvZnRwYWsvY29tcG9uZW50cy9zcHgtY2FwaXRhbGl6ZSc7XG5pbXBvcnQgeyBTcHhIb21lVGlsZXNDb21wb25lbnQgfSBmcm9tICcuL3NweC1ob21lLXRpbGVzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTcHhIb21lVGlsZUNvbXBvbmVudCB9IGZyb20gJy4vc3B4LWhvbWUtdGlsZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcHgtbmF2aWdhdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zcHgtbmF2aWdhdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgVHJhbnNsYXRlTW9kdWxlLFxuICAgIEZvbnRBd2Vzb21lTW9kdWxlLFxuICAgIFNweENhcGl0YWxpemVQaXBlLFxuICAgIFNweEhvbWVUaWxlc0NvbXBvbmVudCxcbiAgICBTcHhIb21lVGlsZUNvbXBvbmVudCxcbiAgICBOZ0ZvcixcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU3B4TmF2aWdhdGlvbkNvbXBvbmVudCB7XG4gIEBWaWV3Q2hpbGRyZW4oJ3RpbGVzJykgdGlsZXM/OiBRdWVyeUxpc3Q8U3B4SG9tZVRpbGVDb21wb25lbnQ+O1xuICBAQ29udGVudENoaWxkKCdpY29uJyx7c3RhdGljOiBmYWxzZX0pIGljb25UZW1wbGF0ZVJlZj86IFRlbXBsYXRlUmVmPGFueT47XG4gIEBJbnB1dCgpIG5hdkl0ZW1zOiBTcHhOYXZpZ2F0aW9uSXRlbUlbXSA9IFtdO1xuICBAT3V0cHV0KCkgc3B4Q2xpY2s6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICkge31cblxuICBzZXRGb2N1cygpOiB2b2lkIHtcbiAgICB0aGlzLnRpbGVzPy5maXJzdC5zZXRGb2N1cygpO1xuICB9XG5cbiAgb25OYXZpZ2F0ZShsaW5rOiBzdHJpbmcpIHtcbiAgICB0aGlzLnNweENsaWNrLmVtaXQobGluayk7XG4gIH1cbn1cbiIsIjxzcHgtaG9tZS10aWxlcz5cbiAgPHNweC1ob21lLXRpbGUgI3RpbGVzICpuZ0Zvcj1cImxldCBpdGVtIG9mIG5hdkl0ZW1zOyBsZXQgaSA9IGluZGV4XCIgKGNsaWNrKT1cIm9uTmF2aWdhdGUoaXRlbS5yb3V0ZXJMaW5rKVwiXG4gICAgW3NweEF1dG9mb2N1c109XCJpID09PSAwXCJcbiAgICBbc3B4Q2xhc3NdPVwiaXRlbS50aWxlQ2xhc3NlcyA/IGl0ZW0udGlsZUNsYXNzZXMgOiB1bmRlZmluZWRcIlxuICAgIFtzcHhUaXRsZV09XCJpdGVtLnRpdGxlIHwgdHJhbnNsYXRlIHwgY2FwaXRhbGl6ZVwiXG4gICAgW3NweFN1YnRpdGxlXT1cIml0ZW0uc3VidGl0ZSA/IChpdGVtLnN1YnRpdGUgfCB0cmFuc2xhdGUgfCBjYXBpdGFsaXplKSA6IHVuZGVmaW5lZFwiPlxuICAgIDxmYS1pY29uIFtpY29uXT1cIml0ZW0uaWNvblwiPjwvZmEtaWNvbj5cbiAgPC9zcHgtaG9tZS10aWxlPlxuPC9zcHgtaG9tZS10aWxlcz5cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, ContentChild, Output } from '@angular/core';
|
|
2
|
+
import { Component, Input, ViewChild, EventEmitter, ViewChildren, ContentChild, Output } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { NgClass, NgIf, CommonModule, NgFor } from '@angular/common';
|
|
5
5
|
import * as i2 from '@ngx-translate/core';
|
|
@@ -22,11 +22,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
22
22
|
}] });
|
|
23
23
|
|
|
24
24
|
class SpxHomeTileComponent {
|
|
25
|
+
setFocus() {
|
|
26
|
+
this.buttonRef?.focus();
|
|
27
|
+
}
|
|
25
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxHomeTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxHomeTileComponent, isStandalone: true, selector: "spx-home-tile", inputs: { spxClass: "spxClass", spxSubtitle: "spxSubtitle", spxTitle: "spxTitle" }, ngImport: i0, template: `<button
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxHomeTileComponent, isStandalone: true, selector: "spx-home-tile", inputs: { spxAutofocus: "spxAutofocus", spxClass: "spxClass", spxSubtitle: "spxSubtitle", spxTitle: "spxTitle" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: `<button #button
|
|
27
30
|
class="border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
28
31
|
type="button"
|
|
29
32
|
part="button"
|
|
33
|
+
[attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
|
|
30
34
|
[class.bg-blue-600]="!this.spxClass"
|
|
31
35
|
[class.focus:ring-blue-500]="!this.spxClass"
|
|
32
36
|
[class.hover:bg-blue-800]="!this.spxClass"
|
|
@@ -34,7 +38,7 @@ class SpxHomeTileComponent {
|
|
|
34
38
|
[ngClass]="this.spxClass ? this.spxClass : undefined">
|
|
35
39
|
<div class="flex gap-3 items-center">
|
|
36
40
|
<div class="fal my-2.5 self-center text-xl"><ng-content></ng-content></div>
|
|
37
|
-
<div class="grow flex flex-col">
|
|
41
|
+
<div class="grow flex flex-col text-left">
|
|
38
42
|
<div class="text-lg font-bold text-ellipsis overflow-hidden">{{ this.spxTitle }}</div>
|
|
39
43
|
<div *ngIf="this.spxSubtitle" class="text-sm opacity-70 text-ellipsis overflow-hidden">{{ this.spxSubtitle }}</div>
|
|
40
44
|
</div>
|
|
@@ -50,10 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
50
54
|
NgClass,
|
|
51
55
|
NgIf,
|
|
52
56
|
],
|
|
53
|
-
template: `<button
|
|
57
|
+
template: `<button #button
|
|
54
58
|
class="border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
55
59
|
type="button"
|
|
56
60
|
part="button"
|
|
61
|
+
[attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
|
|
57
62
|
[class.bg-blue-600]="!this.spxClass"
|
|
58
63
|
[class.focus:ring-blue-500]="!this.spxClass"
|
|
59
64
|
[class.hover:bg-blue-800]="!this.spxClass"
|
|
@@ -61,19 +66,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
61
66
|
[ngClass]="this.spxClass ? this.spxClass : undefined">
|
|
62
67
|
<div class="flex gap-3 items-center">
|
|
63
68
|
<div class="fal my-2.5 self-center text-xl"><ng-content></ng-content></div>
|
|
64
|
-
<div class="grow flex flex-col">
|
|
69
|
+
<div class="grow flex flex-col text-left">
|
|
65
70
|
<div class="text-lg font-bold text-ellipsis overflow-hidden">{{ this.spxTitle }}</div>
|
|
66
71
|
<div *ngIf="this.spxSubtitle" class="text-sm opacity-70 text-ellipsis overflow-hidden">{{ this.spxSubtitle }}</div>
|
|
67
72
|
</div>
|
|
68
73
|
</div>
|
|
69
74
|
</button>`,
|
|
70
75
|
}]
|
|
71
|
-
}], propDecorators: {
|
|
76
|
+
}], propDecorators: { spxAutofocus: [{
|
|
77
|
+
type: Input
|
|
78
|
+
}], spxClass: [{
|
|
72
79
|
type: Input
|
|
73
80
|
}], spxSubtitle: [{
|
|
74
81
|
type: Input
|
|
75
82
|
}], spxTitle: [{
|
|
76
83
|
type: Input
|
|
84
|
+
}], buttonRef: [{
|
|
85
|
+
type: ViewChild,
|
|
86
|
+
args: ['button']
|
|
77
87
|
}] } });
|
|
78
88
|
|
|
79
89
|
class SpxNavigationComponent {
|
|
@@ -81,11 +91,14 @@ class SpxNavigationComponent {
|
|
|
81
91
|
this.navItems = [];
|
|
82
92
|
this.spxClick = new EventEmitter();
|
|
83
93
|
}
|
|
94
|
+
setFocus() {
|
|
95
|
+
this.tiles?.first.setFocus();
|
|
96
|
+
}
|
|
84
97
|
onNavigate(link) {
|
|
85
98
|
this.spxClick.emit(link);
|
|
86
99
|
}
|
|
87
100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
88
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxNavigationComponent, isStandalone: true, selector: "spx-navigation", inputs: { navItems: "navItems" }, outputs: { spxClick: "spxClick" }, queries: [{ propertyName: "iconTemplateRef", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<spx-home-tiles>\n <spx-home-tile *ngFor=\"let item of navItems\" (click)=\"onNavigate(item.routerLink)\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxHomeTilesComponent, selector: "spx-home-tiles" }, { kind: "component", type: SpxHomeTileComponent, selector: "spx-home-tile", inputs: ["spxClass", "spxSubtitle", "spxTitle"] }] }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxNavigationComponent, isStandalone: true, selector: "spx-navigation", inputs: { navItems: "navItems" }, outputs: { spxClick: "spxClick" }, queries: [{ propertyName: "iconTemplateRef", first: true, predicate: ["icon"], descendants: true }], viewQueries: [{ propertyName: "tiles", predicate: ["tiles"], descendants: true }], ngImport: i0, template: "<spx-home-tiles>\n <spx-home-tile #tiles *ngFor=\"let item of navItems; let i = index\" (click)=\"onNavigate(item.routerLink)\"\n [spxAutofocus]=\"i === 0\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxHomeTilesComponent, selector: "spx-home-tiles" }, { kind: "component", type: SpxHomeTileComponent, selector: "spx-home-tile", inputs: ["spxAutofocus", "spxClass", "spxSubtitle", "spxTitle"] }] }); }
|
|
89
102
|
}
|
|
90
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxNavigationComponent, decorators: [{
|
|
91
104
|
type: Component,
|
|
@@ -97,8 +110,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
97
110
|
SpxHomeTilesComponent,
|
|
98
111
|
SpxHomeTileComponent,
|
|
99
112
|
NgFor,
|
|
100
|
-
], template: "<spx-home-tiles>\n <spx-home-tile *ngFor=\"let item of navItems\" (click)=\"onNavigate(item.routerLink)\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n" }]
|
|
101
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
113
|
+
], template: "<spx-home-tiles>\n <spx-home-tile #tiles *ngFor=\"let item of navItems; let i = index\" (click)=\"onNavigate(item.routerLink)\"\n [spxAutofocus]=\"i === 0\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n" }]
|
|
114
|
+
}], ctorParameters: () => [], propDecorators: { tiles: [{
|
|
115
|
+
type: ViewChildren,
|
|
116
|
+
args: ['tiles']
|
|
117
|
+
}], iconTemplateRef: [{
|
|
102
118
|
type: ContentChild,
|
|
103
119
|
args: ['icon', { static: false }]
|
|
104
120
|
}], navItems: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"softpak-components-spx-navigation.mjs","sources":["../../../../projects/softpak/components/spx-navigation/spx-home-tiles.component.ts","../../../../projects/softpak/components/spx-navigation/spx-home-tile.component.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.html","../../../../projects/softpak/components/spx-navigation/softpak-components-spx-navigation.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'spx-home-tiles',\n standalone: true,\n template: `<div class=\"mx-auto max-w-lg grid grid-cols-2 gap-3\"><ng-content></ng-content></div>`,\n})\nexport class SpxHomeTilesComponent {\n}\n","import { NgClass, NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'spx-home-tile',\n standalone: true,\n imports: [\n NgClass,\n NgIf,\n ],\n template: `<button\n class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n type=\"button\"\n part=\"button\"\n [class.bg-blue-600]=\"!this.spxClass\"\n [class.focus:ring-blue-500]=\"!this.spxClass\"\n [class.hover:bg-blue-800]=\"!this.spxClass\"\n [class.text-white]=\"!this.spxClass\"\n [ngClass]=\"this.spxClass ? this.spxClass : undefined\">\n <div class=\"flex gap-3 items-center\">\n <div class=\"fal my-2.5 self-center text-xl\"><ng-content></ng-content></div>\n <div class=\"grow flex flex-col\">\n <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle }}</div>\n <div *ngIf=\"this.spxSubtitle\" class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle }}</div>\n </div>\n </div>\n</button>`,\n})\nexport class SpxHomeTileComponent {\n @Input() spxClass?: string;\n @Input() spxSubtitle?: string;\n @Input() spxTitle?: string;\n}\n","import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';\nimport { SpxNavigationItemI } from './spx-navigation-item.interface';\nimport { CommonModule, NgFor } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxHomeTilesComponent } from './spx-home-tiles.component';\nimport { SpxHomeTileComponent } from './spx-home-tile.component';\n\n@Component({\n selector: 'spx-navigation',\n templateUrl: './spx-navigation.component.html',\n standalone: true,\n imports: [\n CommonModule,\n TranslateModule,\n FontAwesomeModule,\n SpxCapitalizePipe,\n SpxHomeTilesComponent,\n SpxHomeTileComponent,\n NgFor,\n ],\n})\nexport class SpxNavigationComponent {\n @ContentChild('icon',{static: false}) iconTemplateRef?: TemplateRef<any>;\n @Input() navItems: SpxNavigationItemI[] = [];\n @Output() spxClick: EventEmitter<string> = new EventEmitter<string>();\n\n constructor(\n ) {}\n\n
|
|
1
|
+
{"version":3,"file":"softpak-components-spx-navigation.mjs","sources":["../../../../projects/softpak/components/spx-navigation/spx-home-tiles.component.ts","../../../../projects/softpak/components/spx-navigation/spx-home-tile.component.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.ts","../../../../projects/softpak/components/spx-navigation/spx-navigation.component.html","../../../../projects/softpak/components/spx-navigation/softpak-components-spx-navigation.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'spx-home-tiles',\n standalone: true,\n template: `<div class=\"mx-auto max-w-lg grid grid-cols-2 gap-3\"><ng-content></ng-content></div>`,\n})\nexport class SpxHomeTilesComponent {\n}\n","import { NgClass, NgIf } from '@angular/common';\nimport { Component, Input, ViewChild } from '@angular/core';\n\n@Component({\n selector: 'spx-home-tile',\n standalone: true,\n imports: [\n NgClass,\n NgIf,\n ],\n template: `<button #button\n class=\"border border-transparent flex flex-col w-full px-4 py-2 relative rounded text-center focus:outline-none focus:ring-2 focus:ring-offset-2\"\n type=\"button\"\n part=\"button\"\n [attr.autofocus]=\"this.spxAutofocus ? this.spxAutofocus : undefined\"\n [class.bg-blue-600]=\"!this.spxClass\"\n [class.focus:ring-blue-500]=\"!this.spxClass\"\n [class.hover:bg-blue-800]=\"!this.spxClass\"\n [class.text-white]=\"!this.spxClass\"\n [ngClass]=\"this.spxClass ? this.spxClass : undefined\">\n <div class=\"flex gap-3 items-center\">\n <div class=\"fal my-2.5 self-center text-xl\"><ng-content></ng-content></div>\n <div class=\"grow flex flex-col text-left\">\n <div class=\"text-lg font-bold text-ellipsis overflow-hidden\">{{ this.spxTitle }}</div>\n <div *ngIf=\"this.spxSubtitle\" class=\"text-sm opacity-70 text-ellipsis overflow-hidden\">{{ this.spxSubtitle }}</div>\n </div>\n </div>\n</button>`,\n})\nexport class SpxHomeTileComponent {\n @Input() spxAutofocus?: boolean;\n @Input() spxClass?: string;\n @Input() spxSubtitle?: string;\n @Input() spxTitle?: string;\n @ViewChild('button') private buttonRef?: HTMLButtonElement;\n\n setFocus(): void {\n this.buttonRef?.focus();\n }\n}\n","import { Component, ContentChild, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChildren } from '@angular/core';\nimport { SpxNavigationItemI } from './spx-navigation-item.interface';\nimport { CommonModule, NgFor } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxHomeTilesComponent } from './spx-home-tiles.component';\nimport { SpxHomeTileComponent } from './spx-home-tile.component';\n\n@Component({\n selector: 'spx-navigation',\n templateUrl: './spx-navigation.component.html',\n standalone: true,\n imports: [\n CommonModule,\n TranslateModule,\n FontAwesomeModule,\n SpxCapitalizePipe,\n SpxHomeTilesComponent,\n SpxHomeTileComponent,\n NgFor,\n ],\n})\nexport class SpxNavigationComponent {\n @ViewChildren('tiles') tiles?: QueryList<SpxHomeTileComponent>;\n @ContentChild('icon',{static: false}) iconTemplateRef?: TemplateRef<any>;\n @Input() navItems: SpxNavigationItemI[] = [];\n @Output() spxClick: EventEmitter<string> = new EventEmitter<string>();\n\n constructor(\n ) {}\n\n setFocus(): void {\n this.tiles?.first.setFocus();\n }\n\n onNavigate(link: string) {\n this.spxClick.emit(link);\n }\n}\n","<spx-home-tiles>\n <spx-home-tile #tiles *ngFor=\"let item of navItems; let i = index\" (click)=\"onNavigate(item.routerLink)\"\n [spxAutofocus]=\"i === 0\"\n [spxClass]=\"item.tileClasses ? item.tileClasses : undefined\"\n [spxTitle]=\"item.title | translate | capitalize\"\n [spxSubtitle]=\"item.subtite ? (item.subtite | translate | capitalize) : undefined\">\n <fa-icon [icon]=\"item.icon\"></fa-icon>\n </spx-home-tile>\n</spx-home-tiles>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@softpak/components",
|
|
3
|
-
"version": "0.0.0-beta.
|
|
3
|
+
"version": "0.0.0-beta.72",
|
|
4
4
|
"private": false,
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^17.x.x",
|
|
@@ -47,18 +47,18 @@
|
|
|
47
47
|
"esm": "./esm2022/spx-capitalize/softpak-components-spx-capitalize.mjs",
|
|
48
48
|
"default": "./fesm2022/softpak-components-spx-capitalize.mjs"
|
|
49
49
|
},
|
|
50
|
-
"./spx-change-details": {
|
|
51
|
-
"types": "./spx-change-details/index.d.ts",
|
|
52
|
-
"esm2022": "./esm2022/spx-change-details/softpak-components-spx-change-details.mjs",
|
|
53
|
-
"esm": "./esm2022/spx-change-details/softpak-components-spx-change-details.mjs",
|
|
54
|
-
"default": "./fesm2022/softpak-components-spx-change-details.mjs"
|
|
55
|
-
},
|
|
56
50
|
"./spx-channel-selection": {
|
|
57
51
|
"types": "./spx-channel-selection/index.d.ts",
|
|
58
52
|
"esm2022": "./esm2022/spx-channel-selection/softpak-components-spx-channel-selection.mjs",
|
|
59
53
|
"esm": "./esm2022/spx-channel-selection/softpak-components-spx-channel-selection.mjs",
|
|
60
54
|
"default": "./fesm2022/softpak-components-spx-channel-selection.mjs"
|
|
61
55
|
},
|
|
56
|
+
"./spx-change-details": {
|
|
57
|
+
"types": "./spx-change-details/index.d.ts",
|
|
58
|
+
"esm2022": "./esm2022/spx-change-details/softpak-components-spx-change-details.mjs",
|
|
59
|
+
"esm": "./esm2022/spx-change-details/softpak-components-spx-change-details.mjs",
|
|
60
|
+
"default": "./fesm2022/softpak-components-spx-change-details.mjs"
|
|
61
|
+
},
|
|
62
62
|
"./spx-check-digit": {
|
|
63
63
|
"types": "./spx-check-digit/index.d.ts",
|
|
64
64
|
"esm2022": "./esm2022/spx-check-digit/softpak-components-spx-check-digit.mjs",
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
export declare class SpxHomeTileComponent {
|
|
3
|
+
spxAutofocus?: boolean;
|
|
3
4
|
spxClass?: string;
|
|
4
5
|
spxSubtitle?: string;
|
|
5
6
|
spxTitle?: string;
|
|
7
|
+
private buttonRef?;
|
|
8
|
+
setFocus(): void;
|
|
6
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<SpxHomeTileComponent, never>;
|
|
7
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SpxHomeTileComponent, "spx-home-tile", never, { "spxClass": { "alias": "spxClass"; "required": false; }; "spxSubtitle": { "alias": "spxSubtitle"; "required": false; }; "spxTitle": { "alias": "spxTitle"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SpxHomeTileComponent, "spx-home-tile", never, { "spxAutofocus": { "alias": "spxAutofocus"; "required": false; }; "spxClass": { "alias": "spxClass"; "required": false; }; "spxSubtitle": { "alias": "spxSubtitle"; "required": false; }; "spxTitle": { "alias": "spxTitle"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
8
11
|
}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { EventEmitter, TemplateRef } from '@angular/core';
|
|
1
|
+
import { EventEmitter, QueryList, TemplateRef } from '@angular/core';
|
|
2
2
|
import { SpxNavigationItemI } from './spx-navigation-item.interface';
|
|
3
|
+
import { SpxHomeTileComponent } from './spx-home-tile.component';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
export declare class SpxNavigationComponent {
|
|
6
|
+
tiles?: QueryList<SpxHomeTileComponent>;
|
|
5
7
|
iconTemplateRef?: TemplateRef<any>;
|
|
6
8
|
navItems: SpxNavigationItemI[];
|
|
7
9
|
spxClick: EventEmitter<string>;
|
|
8
10
|
constructor();
|
|
11
|
+
setFocus(): void;
|
|
9
12
|
onNavigate(link: string): void;
|
|
10
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<SpxNavigationComponent, never>;
|
|
11
14
|
static ɵcmp: i0.ɵɵComponentDeclaration<SpxNavigationComponent, "spx-navigation", never, { "navItems": { "alias": "navItems"; "required": false; }; }, { "spxClick": "spxClick"; }, ["iconTemplateRef"], never, true, never>;
|