@anton-gustafsson/snapshot-angular 0.0.2 → 0.0.4
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.
|
@@ -22,11 +22,14 @@ class SnapshotNavListComponent {
|
|
|
22
22
|
overlayTint = 'dark';
|
|
23
23
|
overlayOpacity = 0.35;
|
|
24
24
|
overlayBlur = 0;
|
|
25
|
-
/** 'bottom' is the caption strip (default); 'center'
|
|
25
|
+
/** 'bottom' is the caption strip (default); 'center' centers a larger title (icon-only variant only). */
|
|
26
26
|
labelPosition = 'bottom';
|
|
27
27
|
/** Defaults to the shared singleton — pass your own instance (e.g. a namespaced or custom-storage SnapshotService) if needed. */
|
|
28
28
|
snapshotService = snapshotService;
|
|
29
|
+
/** Shows a top-right edit button per card. Off by default — clicking it fires `edit` instead of `select`; the consuming app decides what "edit" means (e.g. open its own dialog component). */
|
|
30
|
+
editable = false;
|
|
29
31
|
select = new EventEmitter();
|
|
32
|
+
edit = new EventEmitter();
|
|
30
33
|
elRef;
|
|
31
34
|
ngOnChanges(changes) {
|
|
32
35
|
// Guard: ngOnChanges fires before the view (and @ViewChild) exists on the first pass.
|
|
@@ -39,8 +42,11 @@ class SnapshotNavListComponent {
|
|
|
39
42
|
onNavSelect(event) {
|
|
40
43
|
this.select.emit(event.detail);
|
|
41
44
|
}
|
|
45
|
+
onNavEdit(event) {
|
|
46
|
+
this.edit.emit(event.detail);
|
|
47
|
+
}
|
|
42
48
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SnapshotNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: SnapshotNavListComponent, isStandalone: true, selector: "ngx-snapshot-nav-list", inputs: { items: "items", variant: "variant", overlayTint: "overlayTint", overlayOpacity: "overlayOpacity", overlayBlur: "overlayBlur", labelPosition: "labelPosition", snapshotService: "snapshotService" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<snapshot-nav-list
|
|
49
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: SnapshotNavListComponent, isStandalone: true, selector: "ngx-snapshot-nav-list", inputs: { items: "items", variant: "variant", overlayTint: "overlayTint", overlayOpacity: "overlayOpacity", overlayBlur: "overlayBlur", labelPosition: "labelPosition", snapshotService: "snapshotService", editable: "editable" }, outputs: { select: "select", edit: "edit" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<snapshot-nav-list
|
|
44
50
|
#el
|
|
45
51
|
[snapshotService]="snapshotService"
|
|
46
52
|
[attr.variant]="variant"
|
|
@@ -48,7 +54,9 @@ class SnapshotNavListComponent {
|
|
|
48
54
|
[attr.overlay-opacity]="overlayOpacity"
|
|
49
55
|
[attr.overlay-blur]="overlayBlur"
|
|
50
56
|
[attr.label-position]="labelPosition"
|
|
57
|
+
[attr.editable]="editable ? '' : null"
|
|
51
58
|
(nav-select)="onNavSelect($event)"
|
|
59
|
+
(nav-edit)="onNavEdit($event)"
|
|
52
60
|
></snapshot-nav-list>`, isInline: true });
|
|
53
61
|
}
|
|
54
62
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SnapshotNavListComponent, decorators: [{
|
|
@@ -64,7 +72,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
64
72
|
[attr.overlay-opacity]="overlayOpacity"
|
|
65
73
|
[attr.overlay-blur]="overlayBlur"
|
|
66
74
|
[attr.label-position]="labelPosition"
|
|
75
|
+
[attr.editable]="editable ? '' : null"
|
|
67
76
|
(nav-select)="onNavSelect($event)"
|
|
77
|
+
(nav-edit)="onNavEdit($event)"
|
|
68
78
|
></snapshot-nav-list>`,
|
|
69
79
|
}]
|
|
70
80
|
}], propDecorators: { items: [{
|
|
@@ -81,8 +91,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
81
91
|
type: Input
|
|
82
92
|
}], snapshotService: [{
|
|
83
93
|
type: Input
|
|
94
|
+
}], editable: [{
|
|
95
|
+
type: Input
|
|
84
96
|
}], select: [{
|
|
85
97
|
type: Output
|
|
98
|
+
}], edit: [{
|
|
99
|
+
type: Output
|
|
86
100
|
}], elRef: [{
|
|
87
101
|
type: ViewChild,
|
|
88
102
|
args: ['el']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"anton-gustafsson-snapshot-angular.mjs","sources":["../../src/snapshot-nav-list.component.ts","../../src/anton-gustafsson-snapshot-angular.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n CUSTOM_ELEMENTS_SCHEMA,\n type AfterViewInit,\n type OnChanges,\n type SimpleChanges,\n} from '@angular/core';\nimport '@anton-gustafsson/snapshot-core';\nimport { snapshotService as defaultSnapshotService } from '@anton-gustafsson/snapshot-core';\nimport type { NavItem, SnapshotNavList, SnapshotNavListVariant, SnapshotService } from '@anton-gustafsson/snapshot-core';\n\n/**\n * Thin Angular wrapper around <snapshot-nav-list>. Keeps CUSTOM_ELEMENTS_SCHEMA\n * contained here instead of leaking it into consuming app modules.\n *\n * `snapshotService` is bound as a real DOM property (objects can't cross an\n * HTML attribute); the rest are plain string/number values forwarded as\n * attributes for the Lit element's own attribute converters to parse.\n *\n * `items` is set by hand (ngOnChanges + ngAfterViewInit) instead of a\n * template binding: Angular's property binding only propagates when the\n * array *reference* changes. That's the correct, zoneless-safe behavior —\n * pass a new array when `items` changes rather than mutating in place\n * (`.push()`), since nothing here polls for in-place mutations.\n */\n@Component({\n selector: 'ngx-snapshot-nav-list',\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: `<snapshot-nav-list\n #el\n [snapshotService]=\"snapshotService\"\n [attr.variant]=\"variant\"\n [attr.overlay-tint]=\"overlayTint\"\n [attr.overlay-opacity]=\"overlayOpacity\"\n [attr.overlay-blur]=\"overlayBlur\"\n [attr.label-position]=\"labelPosition\"\n (nav-select)=\"onNavSelect($event)\"\n ></snapshot-nav-list>`,\n})\nexport class SnapshotNavListComponent implements OnChanges, AfterViewInit {\n @Input() items: NavItem[] = [];\n @Input() variant: SnapshotNavListVariant = 'icon-only';\n @Input() overlayTint: 'dark' | 'light' | 'none' = 'dark';\n @Input() overlayOpacity = 0.35;\n @Input() overlayBlur = 0;\n /** 'bottom' is the caption strip (default); 'center'
|
|
1
|
+
{"version":3,"file":"anton-gustafsson-snapshot-angular.mjs","sources":["../../src/snapshot-nav-list.component.ts","../../src/anton-gustafsson-snapshot-angular.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n CUSTOM_ELEMENTS_SCHEMA,\n type AfterViewInit,\n type OnChanges,\n type SimpleChanges,\n} from '@angular/core';\nimport '@anton-gustafsson/snapshot-core';\nimport { snapshotService as defaultSnapshotService } from '@anton-gustafsson/snapshot-core';\nimport type { NavItem, SnapshotNavList, SnapshotNavListVariant, SnapshotService } from '@anton-gustafsson/snapshot-core';\n\n/**\n * Thin Angular wrapper around <snapshot-nav-list>. Keeps CUSTOM_ELEMENTS_SCHEMA\n * contained here instead of leaking it into consuming app modules.\n *\n * `snapshotService` is bound as a real DOM property (objects can't cross an\n * HTML attribute); the rest are plain string/number values forwarded as\n * attributes for the Lit element's own attribute converters to parse.\n *\n * `items` is set by hand (ngOnChanges + ngAfterViewInit) instead of a\n * template binding: Angular's property binding only propagates when the\n * array *reference* changes. That's the correct, zoneless-safe behavior —\n * pass a new array when `items` changes rather than mutating in place\n * (`.push()`), since nothing here polls for in-place mutations.\n */\n@Component({\n selector: 'ngx-snapshot-nav-list',\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n template: `<snapshot-nav-list\n #el\n [snapshotService]=\"snapshotService\"\n [attr.variant]=\"variant\"\n [attr.overlay-tint]=\"overlayTint\"\n [attr.overlay-opacity]=\"overlayOpacity\"\n [attr.overlay-blur]=\"overlayBlur\"\n [attr.label-position]=\"labelPosition\"\n [attr.editable]=\"editable ? '' : null\"\n (nav-select)=\"onNavSelect($event)\"\n (nav-edit)=\"onNavEdit($event)\"\n ></snapshot-nav-list>`,\n})\nexport class SnapshotNavListComponent implements OnChanges, AfterViewInit {\n @Input() items: NavItem[] = [];\n @Input() variant: SnapshotNavListVariant = 'icon-only';\n @Input() overlayTint: 'dark' | 'light' | 'none' = 'dark';\n @Input() overlayOpacity = 0.35;\n @Input() overlayBlur = 0;\n /** 'bottom' is the caption strip (default); 'center' centers a larger title (icon-only variant only). */\n @Input() labelPosition: 'bottom' | 'center' = 'bottom';\n /** Defaults to the shared singleton — pass your own instance (e.g. a namespaced or custom-storage SnapshotService) if needed. */\n @Input() snapshotService: SnapshotService = defaultSnapshotService;\n /** Shows a top-right edit button per card. Off by default — clicking it fires `edit` instead of `select`; the consuming app decides what \"edit\" means (e.g. open its own dialog component). */\n @Input() editable = false;\n @Output() select = new EventEmitter<{ id: string; route?: string }>();\n @Output() edit = new EventEmitter<{ id: string; route?: string }>();\n\n @ViewChild('el') private elRef!: ElementRef<SnapshotNavList>;\n\n ngOnChanges(changes: SimpleChanges) {\n // Guard: ngOnChanges fires before the view (and @ViewChild) exists on the first pass.\n if (changes['items'] && this.elRef) this.elRef.nativeElement.items = [...this.items];\n }\n\n ngAfterViewInit() {\n this.elRef.nativeElement.items = [...this.items];\n }\n\n onNavSelect(event: Event) {\n this.select.emit((event as CustomEvent<{ id: string; route?: string }>).detail);\n }\n\n onNavEdit(event: Event) {\n this.edit.emit((event as CustomEvent<{ id: string; route?: string }>).detail);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["defaultSnapshotService"],"mappings":";;;;AAgBA;;;;;;;;;;;;;AAaG;MAiBU,wBAAwB,CAAA;IAC1B,KAAK,GAAc,EAAE;IACrB,OAAO,GAA2B,WAAW;IAC7C,WAAW,GAA8B,MAAM;IAC/C,cAAc,GAAG,IAAI;IACrB,WAAW,GAAG,CAAC;;IAEf,aAAa,GAAwB,QAAQ;;IAE7C,eAAe,GAAoBA,eAAsB;;IAEzD,QAAQ,GAAG,KAAK;AACf,IAAA,MAAM,GAAG,IAAI,YAAY,EAAkC;AAC3D,IAAA,IAAI,GAAG,IAAI,YAAY,EAAkC;AAE1C,IAAA,KAAK;AAE9B,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAEhC,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;IACtF;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;IAClD;AAEA,IAAA,WAAW,CAAC,KAAY,EAAA;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAE,KAAqD,CAAC,MAAM,CAAC;IACjF;AAEA,IAAA,SAAS,CAAC,KAAY,EAAA;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAE,KAAqD,CAAC,MAAM,CAAC;IAC/E;wGAhCW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,IAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAbzB,CAAA;;;;;;;;;;;AAWY,uBAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;4FAEX,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAhBpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;oBACjC,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;AAWY,uBAAA,CAAA;AACvB,iBAAA;;sBAEE;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBAEA;;sBAEA;;sBACA;;sBACA;;sBAEA,SAAS;uBAAC,IAAI;;;AC7DjB;;AAEG;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anton-gustafsson/snapshot-angular",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Thin Angular wrapper around <snapshot-nav-list> from @anton-gustafsson/snapshot-core.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"@angular/core": ">=17"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@anton-gustafsson/snapshot-core": "
|
|
19
|
+
"@anton-gustafsson/snapshot-core": "^0.0.4",
|
|
20
20
|
"tslib": "^2.3.0"
|
|
21
21
|
},
|
|
22
22
|
"module": "fesm2022/anton-gustafsson-snapshot-angular.mjs",
|
|
@@ -22,20 +22,27 @@ declare class SnapshotNavListComponent implements OnChanges, AfterViewInit {
|
|
|
22
22
|
overlayTint: 'dark' | 'light' | 'none';
|
|
23
23
|
overlayOpacity: number;
|
|
24
24
|
overlayBlur: number;
|
|
25
|
-
/** 'bottom' is the caption strip (default); 'center'
|
|
25
|
+
/** 'bottom' is the caption strip (default); 'center' centers a larger title (icon-only variant only). */
|
|
26
26
|
labelPosition: 'bottom' | 'center';
|
|
27
27
|
/** Defaults to the shared singleton — pass your own instance (e.g. a namespaced or custom-storage SnapshotService) if needed. */
|
|
28
28
|
snapshotService: SnapshotService;
|
|
29
|
+
/** Shows a top-right edit button per card. Off by default — clicking it fires `edit` instead of `select`; the consuming app decides what "edit" means (e.g. open its own dialog component). */
|
|
30
|
+
editable: boolean;
|
|
29
31
|
select: EventEmitter<{
|
|
30
32
|
id: string;
|
|
31
33
|
route?: string;
|
|
32
34
|
}>;
|
|
35
|
+
edit: EventEmitter<{
|
|
36
|
+
id: string;
|
|
37
|
+
route?: string;
|
|
38
|
+
}>;
|
|
33
39
|
private elRef;
|
|
34
40
|
ngOnChanges(changes: SimpleChanges): void;
|
|
35
41
|
ngAfterViewInit(): void;
|
|
36
42
|
onNavSelect(event: Event): void;
|
|
43
|
+
onNavEdit(event: Event): void;
|
|
37
44
|
static ɵfac: i0.ɵɵFactoryDeclaration<SnapshotNavListComponent, never>;
|
|
38
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SnapshotNavListComponent, "ngx-snapshot-nav-list", never, { "items": { "alias": "items"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "overlayTint": { "alias": "overlayTint"; "required": false; }; "overlayOpacity": { "alias": "overlayOpacity"; "required": false; }; "overlayBlur": { "alias": "overlayBlur"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "snapshotService": { "alias": "snapshotService"; "required": false; }; }, { "select": "select"; }, never, never, true, never>;
|
|
45
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SnapshotNavListComponent, "ngx-snapshot-nav-list", never, { "items": { "alias": "items"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "overlayTint": { "alias": "overlayTint"; "required": false; }; "overlayOpacity": { "alias": "overlayOpacity"; "required": false; }; "overlayBlur": { "alias": "overlayBlur"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "snapshotService": { "alias": "snapshotService"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "select": "select"; "edit": "edit"; }, never, never, true, never>;
|
|
39
46
|
}
|
|
40
47
|
|
|
41
48
|
export { SnapshotNavListComponent };
|