@ng-vagabond-lab/ng-dsv 0.2.27 → 0.2.28

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.
@@ -1,7 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, output, Component } from '@angular/core';
2
+ import { input, output, inject, ElementRef, Component, viewChildren, effect } from '@angular/core';
3
3
  import { RouterLink } from '@angular/router';
4
4
  import { TranslatePipe } from '@ngx-translate/core';
5
+ import { EnvironmentService } from '@ng-vagabond-lab/ng-dsv/environment';
5
6
 
6
7
  class DsvTabComponent {
7
8
  tab = input.required(/* @ts-ignore */
@@ -9,6 +10,7 @@ class DsvTabComponent {
9
10
  isSelected = input(false, /* @ts-ignore */
10
11
  ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
11
12
  callback = output();
13
+ elementRef = inject(ElementRef);
12
14
  doClick(event, tab) {
13
15
  if (!tab.url) {
14
16
  event.stopPropagation();
@@ -16,29 +18,53 @@ class DsvTabComponent {
16
18
  }
17
19
  }
18
20
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
19
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: DsvTabComponent, isStandalone: true, selector: "dsv-tab-component", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "<button\n [routerLink]=\"tab().url ?? null\"\n [class.selected]=\"isSelected()\"\n (click)=\"doClick($event, tab())\"\n>\n {{ tab().title | translate }}\n</button>\n", styles: [":host button{opacity:.6;align-items:baseline;max-width:max-content!important;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0px;border:0px;margin:0;border-radius:0;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:.875rem;line-height:1.25;letter-spacing:.02857em;text-transform:uppercase;max-width:none;min-width:90px;position:relative;min-height:48px;flex:1 1 0px;padding:12px 16px;overflow:hidden;white-space:normal;text-align:center;flex-direction:column;color:inherit;-webkit-box-flex:1}:host button.selected{opacity:1;border-bottom:2px solid var(--primary)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
21
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: DsvTabComponent, isStandalone: true, selector: "dsv-tab-component", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "<button\n [routerLink]=\"tab().url ?? null\"\n [class.selected]=\"isSelected()\"\n (click)=\"doClick($event, tab())\"\n>\n {{ tab().title | translate }}\n</button>\n", styles: [":host button{opacity:.6;align-items:baseline;max-width:max-content!important;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0px;border:0px;margin:0;border-radius:0;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:.875rem;line-height:1.25;letter-spacing:.02857em;text-transform:uppercase;max-width:none;min-width:90px;position:relative;min-height:48px;flex:1 1 0px;padding:12px 16px;overflow:hidden;white-space:normal;text-align:center;flex-direction:column;color:inherit;-webkit-box-flex:1}:host button.selected{opacity:1;border-bottom:2px solid var(--secondary)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
20
22
  }
21
23
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvTabComponent, decorators: [{
22
24
  type: Component,
23
- args: [{ selector: 'dsv-tab-component', imports: [TranslatePipe, RouterLink], template: "<button\n [routerLink]=\"tab().url ?? null\"\n [class.selected]=\"isSelected()\"\n (click)=\"doClick($event, tab())\"\n>\n {{ tab().title | translate }}\n</button>\n", styles: [":host button{opacity:.6;align-items:baseline;max-width:max-content!important;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0px;border:0px;margin:0;border-radius:0;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:.875rem;line-height:1.25;letter-spacing:.02857em;text-transform:uppercase;max-width:none;min-width:90px;position:relative;min-height:48px;flex:1 1 0px;padding:12px 16px;overflow:hidden;white-space:normal;text-align:center;flex-direction:column;color:inherit;-webkit-box-flex:1}:host button.selected{opacity:1;border-bottom:2px solid var(--primary)}\n"] }]
25
+ args: [{ selector: 'dsv-tab-component', imports: [TranslatePipe, RouterLink], template: "<button\n [routerLink]=\"tab().url ?? null\"\n [class.selected]=\"isSelected()\"\n (click)=\"doClick($event, tab())\"\n>\n {{ tab().title | translate }}\n</button>\n", styles: [":host button{opacity:.6;align-items:baseline;max-width:max-content!important;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0px;border:0px;margin:0;border-radius:0;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:.875rem;line-height:1.25;letter-spacing:.02857em;text-transform:uppercase;max-width:none;min-width:90px;position:relative;min-height:48px;flex:1 1 0px;padding:12px 16px;overflow:hidden;white-space:normal;text-align:center;flex-direction:column;color:inherit;-webkit-box-flex:1}:host button.selected{opacity:1;border-bottom:2px solid var(--secondary)}\n"] }]
24
26
  }], propDecorators: { tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
25
27
 
26
28
  class DsvTabsComponent {
29
+ environmentService = inject(EnvironmentService);
27
30
  tabs = input.required(/* @ts-ignore */
28
31
  ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
29
32
  active = input.required(/* @ts-ignore */
30
33
  ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
31
34
  callback = output();
35
+ tabComponents = viewChildren(DsvTabComponent, /* @ts-ignore */
36
+ ...(ngDevMode ? [{ debugName: "tabComponents" }] : /* istanbul ignore next */ []));
37
+ constructor() {
38
+ effect(() => {
39
+ const activeId = this.active().trim();
40
+ const currentTabs = this.tabs();
41
+ const components = this.tabComponents();
42
+ if (!this.environmentService.platformService.isPlatformBrowser() ||
43
+ !activeId ||
44
+ currentTabs.length === 0 ||
45
+ components.length === 0) {
46
+ return;
47
+ }
48
+ const selectedIndex = currentTabs.findIndex((t) => t.id.trim() === activeId);
49
+ if (selectedIndex !== -1 && components[selectedIndex]) {
50
+ components[selectedIndex].elementRef.nativeElement.scrollIntoView({
51
+ behavior: 'smooth',
52
+ block: 'nearest',
53
+ inline: 'center',
54
+ });
55
+ }
56
+ });
57
+ }
32
58
  doClick(tab) {
33
59
  this.callback.emit(tab);
34
60
  }
35
61
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
36
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DsvTabsComponent, isStandalone: true, selector: "dsv-tabs-component", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback" }, ngImport: i0, template: "<div>\n <div>\n @for (tab of tabs(); track tab.id) {\n <dsv-tab-component\n [tab]=\"tab\"\n [isSelected]=\"active().trim() === tab.id.trim()\"\n (callback)=\"doClick($event)\"\n />\n }\n </div>\n</div>\n", styles: [":host{overflow:hidden;min-height:48px;display:flex;width:100%}:host>div{margin-bottom:0;position:relative;display:inline-block;flex:1 1 auto;overflow:auto;scrollbar-width:thin;overflow-x:hidden;width:100%}:host>div>div{display:flex;overflow:auto;scrollbar-width:thin;margin:0 10px}\n"], dependencies: [{ kind: "component", type: DsvTabComponent, selector: "dsv-tab-component", inputs: ["tab", "isSelected"], outputs: ["callback"] }] });
62
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DsvTabsComponent, isStandalone: true, selector: "dsv-tabs-component", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback" }, viewQueries: [{ propertyName: "tabComponents", predicate: DsvTabComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div>\n @for (tab of tabs(); track tab.id) {\n <dsv-tab-component\n #tabElement\n [tab]=\"tab\"\n [isSelected]=\"active().trim() === tab.id.trim()\"\n (callback)=\"doClick($event)\"\n />\n }\n </div>\n</div>\n", styles: [":host{overflow:hidden;min-height:48px;display:flex;width:100%}:host>div{position:relative;display:inline-block;flex:1 1 auto;overflow:hidden;width:100%;margin-bottom:10px}:host>div>div{display:flex;overflow:auto;scrollbar-width:thin;margin:0 10px}\n"], dependencies: [{ kind: "component", type: DsvTabComponent, selector: "dsv-tab-component", inputs: ["tab", "isSelected"], outputs: ["callback"] }] });
37
63
  }
38
64
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DsvTabsComponent, decorators: [{
39
65
  type: Component,
40
- args: [{ selector: 'dsv-tabs-component', imports: [DsvTabComponent], template: "<div>\n <div>\n @for (tab of tabs(); track tab.id) {\n <dsv-tab-component\n [tab]=\"tab\"\n [isSelected]=\"active().trim() === tab.id.trim()\"\n (callback)=\"doClick($event)\"\n />\n }\n </div>\n</div>\n", styles: [":host{overflow:hidden;min-height:48px;display:flex;width:100%}:host>div{margin-bottom:0;position:relative;display:inline-block;flex:1 1 auto;overflow:auto;scrollbar-width:thin;overflow-x:hidden;width:100%}:host>div>div{display:flex;overflow:auto;scrollbar-width:thin;margin:0 10px}\n"] }]
41
- }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
66
+ args: [{ selector: 'dsv-tabs-component', imports: [DsvTabComponent], template: "<div>\n <div>\n @for (tab of tabs(); track tab.id) {\n <dsv-tab-component\n #tabElement\n [tab]=\"tab\"\n [isSelected]=\"active().trim() === tab.id.trim()\"\n (callback)=\"doClick($event)\"\n />\n }\n </div>\n</div>\n", styles: [":host{overflow:hidden;min-height:48px;display:flex;width:100%}:host>div{position:relative;display:inline-block;flex:1 1 auto;overflow:hidden;width:100%;margin-bottom:10px}:host>div>div{display:flex;overflow:auto;scrollbar-width:thin;margin:0 10px}\n"] }]
67
+ }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], callback: [{ type: i0.Output, args: ["callback"] }], tabComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DsvTabComponent), { isSignal: true }] }] } });
42
68
 
43
69
  /**
44
70
  * Generated bundle index. Do not edit.
@@ -1 +1 @@
1
- {"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-tab.mjs","sources":["../../../projects/ng-dsv/ds/tab/tab/component/tab.component.ts","../../../projects/ng-dsv/ds/tab/tab/component/tab.component.html","../../../projects/ng-dsv/ds/tab/tabs/component/tabs.component.ts","../../../projects/ng-dsv/ds/tab/tabs/component/tabs.component.html","../../../projects/ng-dsv/ds/tab/ng-vagabond-lab-ng-dsv-ds-tab.ts"],"sourcesContent":["import { Component, input, output } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { TabDto } from '../dto/tab.dto';\n\n@Component({\n selector: 'dsv-tab-component',\n imports: [TranslatePipe, RouterLink],\n templateUrl: './tab.component.html',\n styleUrls: ['./tab.component.scss'],\n})\nexport class DsvTabComponent {\n readonly tab = input.required<TabDto>();\n readonly isSelected = input<boolean>(false);\n\n readonly callback = output<TabDto>();\n\n doClick(event: Event, tab: TabDto): void {\n if (!tab.url) {\n event.stopPropagation();\n this.callback.emit(tab);\n }\n }\n}\n","<button\n [routerLink]=\"tab().url ?? null\"\n [class.selected]=\"isSelected()\"\n (click)=\"doClick($event, tab())\"\n>\n {{ tab().title | translate }}\n</button>\n","import { Component, input, output } from '@angular/core';\nimport { TabDto } from '../../public-api';\nimport { DsvTabComponent } from '../../tab/component/tab.component';\n\n@Component({\n selector: 'dsv-tabs-component',\n imports: [DsvTabComponent],\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n})\nexport class DsvTabsComponent {\n readonly tabs = input.required<TabDto[]>();\n readonly active = input.required<string>();\n\n readonly callback = output<TabDto>();\n\n doClick(tab: TabDto): void {\n this.callback.emit(tab);\n }\n}\n","<div>\n <div>\n @for (tab of tabs(); track tab.id) {\n <dsv-tab-component\n [tab]=\"tab\"\n [isSelected]=\"active().trim() === tab.id.trim()\"\n (callback)=\"doClick($event)\"\n />\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-tab.mjs","sources":["../../../projects/ng-dsv/ds/tab/tab/component/tab.component.ts","../../../projects/ng-dsv/ds/tab/tab/component/tab.component.html","../../../projects/ng-dsv/ds/tab/tabs/component/tabs.component.ts","../../../projects/ng-dsv/ds/tab/tabs/component/tabs.component.html","../../../projects/ng-dsv/ds/tab/ng-vagabond-lab-ng-dsv-ds-tab.ts"],"sourcesContent":["import { Component, ElementRef, inject, input, output } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { TabDto } from '../dto/tab.dto';\n\n@Component({\n selector: 'dsv-tab-component',\n imports: [TranslatePipe, RouterLink],\n templateUrl: './tab.component.html',\n styleUrls: ['./tab.component.scss'],\n})\nexport class DsvTabComponent {\n readonly tab = input.required<TabDto>();\n readonly isSelected = input<boolean>(false);\n\n readonly callback = output<TabDto>();\n\n readonly elementRef = inject(ElementRef);\n\n doClick(event: Event, tab: TabDto): void {\n if (!tab.url) {\n event.stopPropagation();\n this.callback.emit(tab);\n }\n }\n}\n","<button\n [routerLink]=\"tab().url ?? null\"\n [class.selected]=\"isSelected()\"\n (click)=\"doClick($event, tab())\"\n>\n {{ tab().title | translate }}\n</button>\n","import { Component, effect, inject, input, output, viewChildren } from '@angular/core';\nimport { EnvironmentService } from '@ng-vagabond-lab/ng-dsv/environment';\nimport { TabDto } from '../../public-api';\nimport { DsvTabComponent } from '../../tab/component/tab.component';\n\n@Component({\n selector: 'dsv-tabs-component',\n imports: [DsvTabComponent],\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n})\nexport class DsvTabsComponent {\n readonly environmentService = inject(EnvironmentService);\n\n readonly tabs = input.required<TabDto[]>();\n readonly active = input.required<string>();\n\n readonly callback = output<TabDto>();\n\n private tabComponents = viewChildren(DsvTabComponent);\n\n constructor() {\n effect(() => {\n const activeId = this.active().trim();\n const currentTabs = this.tabs();\n const components = this.tabComponents();\n\n if (\n !this.environmentService.platformService.isPlatformBrowser() ||\n !activeId ||\n currentTabs.length === 0 ||\n components.length === 0\n ) {\n return;\n }\n\n const selectedIndex = currentTabs.findIndex((t) => t.id.trim() === activeId);\n\n if (selectedIndex !== -1 && components[selectedIndex]) {\n components[selectedIndex].elementRef.nativeElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n }\n });\n }\n doClick(tab: TabDto): void {\n this.callback.emit(tab);\n }\n}\n","<div>\n <div>\n @for (tab of tabs(); track tab.id) {\n <dsv-tab-component\n #tabElement\n [tab]=\"tab\"\n [isSelected]=\"active().trim() === tab.id.trim()\"\n (callback)=\"doClick($event)\"\n />\n }\n </div>\n</div>\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": "@ng-vagabond-lab/ng-dsv",
3
- "version": "0.2.27",
3
+ "version": "0.2.28",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.0.0",
6
6
  "@angular/core": "^20.0.0"
@@ -1,4 +1,6 @@
1
1
  import * as _angular_core from '@angular/core';
2
+ import { ElementRef } from '@angular/core';
3
+ import { EnvironmentService } from '@ng-vagabond-lab/ng-dsv/environment';
2
4
 
3
5
  interface TabDto {
4
6
  id: string;
@@ -10,15 +12,19 @@ declare class DsvTabComponent {
10
12
  readonly tab: _angular_core.InputSignal<TabDto>;
11
13
  readonly isSelected: _angular_core.InputSignal<boolean>;
12
14
  readonly callback: _angular_core.OutputEmitterRef<TabDto>;
15
+ readonly elementRef: ElementRef<any>;
13
16
  doClick(event: Event, tab: TabDto): void;
14
17
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsvTabComponent, never>;
15
18
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsvTabComponent, "dsv-tab-component", never, { "tab": { "alias": "tab"; "required": true; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; }, { "callback": "callback"; }, never, never, true, never>;
16
19
  }
17
20
 
18
21
  declare class DsvTabsComponent {
22
+ readonly environmentService: EnvironmentService;
19
23
  readonly tabs: _angular_core.InputSignal<TabDto[]>;
20
24
  readonly active: _angular_core.InputSignal<string>;
21
25
  readonly callback: _angular_core.OutputEmitterRef<TabDto>;
26
+ private tabComponents;
27
+ constructor();
22
28
  doClick(tab: TabDto): void;
23
29
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsvTabsComponent, never>;
24
30
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsvTabsComponent, "dsv-tabs-component", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": true; "isSignal": true; }; }, { "callback": "callback"; }, never, never, true, never>;