@smartsoft001-mobilems/angular 2.14.0 → 2.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
# @smartsoft001-mobilems/angular
|
|
2
|
+
|
|
3
|
+
Shared Angular functionality for the MobileMS Framework.
|
|
4
|
+
|
|
5
|
+
## Components
|
|
6
|
+
|
|
7
|
+
### HeaderComponent
|
|
8
|
+
|
|
9
|
+
Base header component with TypeScript logic for managing header state and navigation. Designed to be extended by child components with custom templates.
|
|
10
|
+
|
|
11
|
+
**Features:**
|
|
12
|
+
|
|
13
|
+
- WCAG configuration toggle
|
|
14
|
+
- Search panel toggle
|
|
15
|
+
- User authentication state
|
|
16
|
+
- Local collection counter
|
|
17
|
+
- Responsive mobile detection
|
|
18
|
+
- Configuration-driven visibility
|
|
19
|
+
- Modern Angular signals for reactive state
|
|
20
|
+
|
|
21
|
+
**Usage:**
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { Component } from '@angular/core';
|
|
25
|
+
import { HeaderComponent } from '@smartsoft001-mobilems/angular';
|
|
26
|
+
|
|
27
|
+
@Component({
|
|
28
|
+
selector: 'app-custom-header',
|
|
29
|
+
standalone: true,
|
|
30
|
+
imports: [],
|
|
31
|
+
template: `
|
|
32
|
+
<header class="smart-bg-white smart-border-b smart-border-gray-200">
|
|
33
|
+
<div class="smart-container smart-mx-auto smart-px-4">
|
|
34
|
+
@if (isWcagVisible()) {
|
|
35
|
+
<div class="smart-py-4">
|
|
36
|
+
<button
|
|
37
|
+
(click)="toggleWcagConfig()"
|
|
38
|
+
class="smart-px-4 smart-py-2 smart-bg-blue-500 smart-text-white smart-rounded hover:smart-bg-blue-600"
|
|
39
|
+
>
|
|
40
|
+
WCAG Settings
|
|
41
|
+
</button>
|
|
42
|
+
</div>
|
|
43
|
+
} @if (user()) {
|
|
44
|
+
<div class="smart-py-4">
|
|
45
|
+
<span>Welcome, {{ user()?.userID }}</span>
|
|
46
|
+
<button
|
|
47
|
+
(click)="routeToUserAccount()"
|
|
48
|
+
class="smart-ml-4 smart-px-4 smart-py-2 smart-bg-green-500 smart-text-white smart-rounded hover:smart-bg-green-600"
|
|
49
|
+
>
|
|
50
|
+
My Account
|
|
51
|
+
</button>
|
|
52
|
+
</div>
|
|
53
|
+
} @else {
|
|
54
|
+
<button
|
|
55
|
+
(click)="routeToLogin()"
|
|
56
|
+
class="smart-px-4 smart-py-2 smart-bg-gray-500 smart-text-white smart-rounded hover:smart-bg-gray-600"
|
|
57
|
+
>
|
|
58
|
+
Login
|
|
59
|
+
</button>
|
|
60
|
+
} @if (isLocalCollectionVisible()) {
|
|
61
|
+
<button
|
|
62
|
+
(click)="routeToLocalCollection()"
|
|
63
|
+
class="smart-px-4 smart-py-2 smart-bg-purple-500 smart-text-white smart-rounded hover:smart-bg-purple-600"
|
|
64
|
+
>
|
|
65
|
+
My Collection ({{ localCollectionCount() }})
|
|
66
|
+
</button>
|
|
67
|
+
}
|
|
68
|
+
</div>
|
|
69
|
+
</header>
|
|
70
|
+
`,
|
|
71
|
+
})
|
|
72
|
+
export class CustomHeaderComponent extends HeaderComponent {
|
|
73
|
+
override ngOnInit() {
|
|
74
|
+
super.ngOnInit();
|
|
75
|
+
// Custom initialization logic
|
|
76
|
+
this.setUser({ userID: 'john.doe@example.com' });
|
|
77
|
+
this.setLocalCollectionCount(5);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
**API:**
|
|
83
|
+
|
|
84
|
+
**Signals:**
|
|
85
|
+
|
|
86
|
+
- `showWcagConfig: Signal<boolean>` - WCAG panel visibility state
|
|
87
|
+
- `showSearchPanel: Signal<boolean>` - Search panel visibility state
|
|
88
|
+
- `user: Signal<IHeaderUser | null>` - Current user state
|
|
89
|
+
- `localCollectionCount: Signal<number>` - Local collection items count
|
|
90
|
+
|
|
91
|
+
**Computed Signals:**
|
|
92
|
+
|
|
93
|
+
- `config: Signal<IHeaderConfig>` - Header configuration from ConfigsFacade
|
|
94
|
+
- `isMobile: Signal<boolean>` - Mobile device detection
|
|
95
|
+
- `headerConfig: Signal<IHeaderConfig['theme']>` - Theme-specific header config
|
|
96
|
+
- `isWcagVisible: Signal<boolean>` - WCAG panel visibility based on config and state
|
|
97
|
+
- `isSearchVisible: Signal<boolean>` - Search visibility based on config
|
|
98
|
+
- `isLocalCollectionVisible: Signal<boolean>` - Local collection button visibility
|
|
99
|
+
- `isLanguageSelectorVisible: Signal<boolean>` - Language selector visibility
|
|
100
|
+
- `isUserAccountVisible: Signal<boolean>` - User account button visibility
|
|
101
|
+
|
|
102
|
+
**Methods:**
|
|
103
|
+
|
|
104
|
+
- `toggleWcagConfig(): void` - Toggle WCAG configuration panel
|
|
105
|
+
- `toggleSearchPanel(): void` - Toggle search panel
|
|
106
|
+
- `onWcagCloseButtonEvent(closed: boolean): void` - Handle WCAG panel close event
|
|
107
|
+
- `onSearchPanelButtonEvent(opened: boolean): void` - Handle search panel open event
|
|
108
|
+
- `routeToLogin(): void` - Navigate to login page
|
|
109
|
+
- `routeToUserAccount(): void` - Navigate to user account page
|
|
110
|
+
- `routeToLocalCollection(): void` - Navigate to local collection page
|
|
111
|
+
- `setUser(user: IHeaderUser | null): void` - Set current user
|
|
112
|
+
- `setLocalCollectionCount(count: number): void` - Set local collection count
|
|
113
|
+
- `getUser(): IHeaderUser | null` - Get current user
|
|
114
|
+
- `getLocalCollectionCount(): number` - Get local collection count
|
|
115
|
+
- `updateConfig(): void` - Update header configuration
|
|
116
|
+
|
|
117
|
+
**Types:**
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
export interface IHeaderUser {
|
|
121
|
+
userID: string;
|
|
122
|
+
[key: string]: unknown;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
export interface IHeaderConfig {
|
|
126
|
+
theme?: {
|
|
127
|
+
header?: {
|
|
128
|
+
showWcagConfig?: boolean;
|
|
129
|
+
showSearch?: boolean;
|
|
130
|
+
showLocalCollection?: boolean;
|
|
131
|
+
showLanguageSelector?: boolean;
|
|
132
|
+
showUserAccount?: boolean;
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### FooterComponent
|
|
139
|
+
|
|
140
|
+
Base footer component with TypeScript logic for managing footer state and static pages. Designed to be extended by child components with custom templates.
|
|
141
|
+
|
|
142
|
+
## Services
|
|
143
|
+
|
|
144
|
+
## State Management
|
|
@@ -8,8 +8,8 @@ import * as moment from 'moment';
|
|
|
8
8
|
import { lastValueFrom, combineLatest, firstValueFrom, Subject, of, throwError } from 'rxjs';
|
|
9
9
|
import { map, filter, catchError } from 'rxjs/operators';
|
|
10
10
|
import * as i1 from '@angular/common';
|
|
11
|
-
import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
|
|
12
|
-
import { Router, ActivatedRoute, NavigationEnd, RouterOutlet, RouterModule } from '@angular/router';
|
|
11
|
+
import { isPlatformBrowser, CommonModule, DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
12
|
+
import { Router, ActivatedRoute, NavigationEnd, RouterOutlet, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
|
|
13
13
|
import { TranslateService } from '@ngx-translate/core';
|
|
14
14
|
import { CrudService, CrudFacade } from '@smartsoft001/crud-shell-angular';
|
|
15
15
|
import * as _ from 'lodash';
|
|
@@ -1529,6 +1529,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
|
|
|
1529
1529
|
args: [{ selector: 'smart-mobilems-footer', standalone: true, imports: [], template: `` }]
|
|
1530
1530
|
}] });
|
|
1531
1531
|
|
|
1532
|
+
class HeaderComponent {
|
|
1533
|
+
constructor() {
|
|
1534
|
+
this.configsFacade = inject(ConfigsFacade);
|
|
1535
|
+
this.router = inject(Router);
|
|
1536
|
+
this.platformId = inject(PLATFORM_ID);
|
|
1537
|
+
this.config = computed(() => this.configsFacade.data, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1538
|
+
this.isMobile = computed(() => {
|
|
1539
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
1540
|
+
return false;
|
|
1541
|
+
}
|
|
1542
|
+
return typeof window !== 'undefined' && window.innerWidth <= 640;
|
|
1543
|
+
}, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
1544
|
+
this.showWcagConfig = signal(false, ...(ngDevMode ? [{ debugName: "showWcagConfig" }] : []));
|
|
1545
|
+
this.showSearchPanel = signal(false, ...(ngDevMode ? [{ debugName: "showSearchPanel" }] : []));
|
|
1546
|
+
this.user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
|
|
1547
|
+
this.localCollectionCount = signal(0, ...(ngDevMode ? [{ debugName: "localCollectionCount" }] : []));
|
|
1548
|
+
this.headerConfig = computed(() => {
|
|
1549
|
+
const config = this.config();
|
|
1550
|
+
return config?.theme ?? {};
|
|
1551
|
+
}, ...(ngDevMode ? [{ debugName: "headerConfig" }] : []));
|
|
1552
|
+
this.isWcagVisible = computed(() => {
|
|
1553
|
+
return (this.showWcagConfig() &&
|
|
1554
|
+
this.headerConfig()?.header?.showWcagConfig !== false);
|
|
1555
|
+
}, ...(ngDevMode ? [{ debugName: "isWcagVisible" }] : []));
|
|
1556
|
+
this.isSearchVisible = computed(() => {
|
|
1557
|
+
return this.headerConfig()?.header?.showSearch !== false;
|
|
1558
|
+
}, ...(ngDevMode ? [{ debugName: "isSearchVisible" }] : []));
|
|
1559
|
+
this.isLocalCollectionVisible = computed(() => {
|
|
1560
|
+
return this.headerConfig()?.header?.showLocalCollection !== false;
|
|
1561
|
+
}, ...(ngDevMode ? [{ debugName: "isLocalCollectionVisible" }] : []));
|
|
1562
|
+
this.isLanguageSelectorVisible = computed(() => {
|
|
1563
|
+
return this.headerConfig()?.header?.showLanguageSelector !== false;
|
|
1564
|
+
}, ...(ngDevMode ? [{ debugName: "isLanguageSelectorVisible" }] : []));
|
|
1565
|
+
this.isUserAccountVisible = computed(() => {
|
|
1566
|
+
return this.headerConfig()?.header?.showUserAccount !== false;
|
|
1567
|
+
}, ...(ngDevMode ? [{ debugName: "isUserAccountVisible" }] : []));
|
|
1568
|
+
}
|
|
1569
|
+
toggleWcagConfig() {
|
|
1570
|
+
this.showWcagConfig.update((value) => !value);
|
|
1571
|
+
}
|
|
1572
|
+
toggleSearchPanel() {
|
|
1573
|
+
this.showSearchPanel.update((value) => !value);
|
|
1574
|
+
}
|
|
1575
|
+
onWcagCloseButtonEvent(closed) {
|
|
1576
|
+
this.showWcagConfig.set(!closed);
|
|
1577
|
+
}
|
|
1578
|
+
onSearchPanelButtonEvent(opened) {
|
|
1579
|
+
this.showSearchPanel.set(opened);
|
|
1580
|
+
}
|
|
1581
|
+
routeToLogin() {
|
|
1582
|
+
this.router.navigate(['/login']);
|
|
1583
|
+
}
|
|
1584
|
+
routeToUserAccount() {
|
|
1585
|
+
this.router.navigate(['/profile']);
|
|
1586
|
+
}
|
|
1587
|
+
routeToLocalCollection() {
|
|
1588
|
+
this.router.navigate(['/my-collection']);
|
|
1589
|
+
}
|
|
1590
|
+
setUser(user) {
|
|
1591
|
+
this.user.set(user);
|
|
1592
|
+
}
|
|
1593
|
+
setLocalCollectionCount(count) {
|
|
1594
|
+
this.localCollectionCount.set(count);
|
|
1595
|
+
}
|
|
1596
|
+
getUser() {
|
|
1597
|
+
return this.user();
|
|
1598
|
+
}
|
|
1599
|
+
getLocalCollectionCount() {
|
|
1600
|
+
return this.localCollectionCount();
|
|
1601
|
+
}
|
|
1602
|
+
updateConfig() {
|
|
1603
|
+
const current = this.config();
|
|
1604
|
+
if (!current)
|
|
1605
|
+
return;
|
|
1606
|
+
}
|
|
1607
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1608
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: HeaderComponent, isStandalone: true, selector: "smart-mobilems-header", ngImport: i0, template: ``, isInline: true }); }
|
|
1609
|
+
}
|
|
1610
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1611
|
+
type: Component,
|
|
1612
|
+
args: [{ selector: 'smart-mobilems-header', standalone: true, imports: [], template: `` }]
|
|
1613
|
+
}] });
|
|
1614
|
+
|
|
1615
|
+
class MenuComponent {
|
|
1616
|
+
constructor() {
|
|
1617
|
+
this.configsFacade = inject(ConfigsFacade);
|
|
1618
|
+
this.router = inject(Router);
|
|
1619
|
+
this.platformId = inject(PLATFORM_ID);
|
|
1620
|
+
this.menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
|
|
1621
|
+
this.searchEnabled = input(false, ...(ngDevMode ? [{ debugName: "searchEnabled" }] : []));
|
|
1622
|
+
this.config = computed(() => this.configsFacade.data, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1623
|
+
this.menuConfig = computed(() => {
|
|
1624
|
+
const config = this.config();
|
|
1625
|
+
return config?.theme ?? {};
|
|
1626
|
+
}, ...(ngDevMode ? [{ debugName: "menuConfig" }] : []));
|
|
1627
|
+
this.mobileBreakpoint = computed(() => {
|
|
1628
|
+
return this.menuConfig()?.menu?.mobileBreakpoint ?? 960;
|
|
1629
|
+
}, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
|
|
1630
|
+
this.isMobileMenu = computed(() => {
|
|
1631
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
1632
|
+
return false;
|
|
1633
|
+
}
|
|
1634
|
+
return (typeof window !== 'undefined' &&
|
|
1635
|
+
window.innerWidth <= this.mobileBreakpoint());
|
|
1636
|
+
}, ...(ngDevMode ? [{ debugName: "isMobileMenu" }] : []));
|
|
1637
|
+
this._menuOpenState = false;
|
|
1638
|
+
}
|
|
1639
|
+
toggleMenu() {
|
|
1640
|
+
this._menuOpenState = !this._menuOpenState;
|
|
1641
|
+
}
|
|
1642
|
+
closeMenu() {
|
|
1643
|
+
this._menuOpenState = false;
|
|
1644
|
+
}
|
|
1645
|
+
isOpened() {
|
|
1646
|
+
return this._menuOpenState;
|
|
1647
|
+
}
|
|
1648
|
+
isRouteActive(route) {
|
|
1649
|
+
return this.router.isActive(route, {
|
|
1650
|
+
paths: 'exact',
|
|
1651
|
+
queryParams: 'exact',
|
|
1652
|
+
fragment: 'ignored',
|
|
1653
|
+
matrixParams: 'ignored',
|
|
1654
|
+
});
|
|
1655
|
+
}
|
|
1656
|
+
getMenuItemTitle(item) {
|
|
1657
|
+
if (item.title) {
|
|
1658
|
+
return item.title;
|
|
1659
|
+
}
|
|
1660
|
+
return this.isRouteActive(item.route)
|
|
1661
|
+
? `${item.label} (active)`
|
|
1662
|
+
: item.label;
|
|
1663
|
+
}
|
|
1664
|
+
getMenuItemAriaLabel(item) {
|
|
1665
|
+
if (item.ariaLabel) {
|
|
1666
|
+
return item.ariaLabel;
|
|
1667
|
+
}
|
|
1668
|
+
return this.isRouteActive(item.route)
|
|
1669
|
+
? `${item.label} - Current page`
|
|
1670
|
+
: item.label;
|
|
1671
|
+
}
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1673
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: MenuComponent, isStandalone: true, selector: "smart-mobilems-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, searchEnabled: { classPropertyName: "searchEnabled", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!searchEnabled()) {\n <h2 class=\"smart-sr-only\">Main Menu</h2>\n\n @if (isMobileMenu()) {\n <div\n class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-py-[1.2rem]\"\n [ngClass]=\"isOpened() ? '' : ''\"\n role=\"navigation\"\n attr.aria-label=\"Main Menu\"\n >\n <button\n class=\"smart-h-[3.6rem] smart-relative smart-bg-transparent smart-border-0 smart-left-0 smart-flex smart-flex-row smart-items-center smart-text-[1.8rem] smart-font-bold smart-cursor-pointer\"\n (click)=\"toggleMenu()\"\n attr.aria-expanded=\"{{ isOpened() }}\"\n attr.aria-label=\"{{ isOpened() ? 'Close menu' : 'Open menu' }}\"\n >\n @if (!isOpened()) {\n <span\n class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n >menu</span\n >\n } @else {\n <span\n class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n >close</span\n >\n }\n </button>\n </div>\n }\n\n @if (!isMobileMenu()) {\n <div\n class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-h-full smart-p-0\"\n role=\"navigation\"\n attr.aria-label=\"Main Menu\"\n >\n <div role=\"menubar\">\n <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n </div>\n </div>\n }\n\n @if (isMobileMenu() && isOpened()) {\n <div\n class=\"smart-w-full smart-flex smart-flex-row smart-justify-center smart-h-full smart-p-0 smart-border smart-border-[#f3f3f3] smart-bg-[#fefefe] smart-mb-[2.4rem] smart-shadow-[0_0.6rem_1.2rem_#efefef] smart-p-[1.2rem]\"\n >\n <div role=\"navigation\" aria-label=\"Main\">\n <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n </div>\n </div>\n }\n}\n\n<ng-template #menuTemplate>\n <ul\n id=\"main-menu\"\n role=\"menu\"\n class=\"smart-h-full smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-flex-nowrap smart-list-none smart-p-0 smart-m-0 smart-gap-x-[0.3rem]\"\n [ngClass]=\"\n isMobileMenu()\n ? 'smart-flex-wrap smart-justify-center smart-p-[1.2rem] smart-m-0'\n : ''\n \"\n >\n @for (item of menuItems(); track item.route) {\n <li\n class=\"smart-inline-flex smart-relative smart-w-auto smart-m-0\"\n [ngClass]=\"isMobileMenu() ? 'smart-w-full smart-max-w-full' : ''\"\n >\n <a\n class=\"smart-flex smart-items-center smart-flex-nowrap smart-text-black smart-transition-[border] smart-ease-in-out smart-duration-500 smart-border-b-[0.6rem] smart-border-b-transparent smart-cursor-pointer smart-justify-center smart-h-full smart-w-full smart-py-[1.2rem] smart-px-[1.8rem] smart-text-[1.6rem] smart-font-medium smart-whitespace-nowrap smart-m-0 smart-no-underline hover:smart-text-black hover:smart-bg-transparent hover:smart-border-b-[0.6rem] hover:smart-border-b-black\"\n role=\"menuitem\"\n [routerLink]=\"[item.route]\"\n routerLinkActive=\"smart-cursor-default smart-text-black smart-bg-transparent smart-border-b-[0.6rem] smart-border-b-black\"\n (click)=\"closeMenu()\"\n [attr.title]=\"getMenuItemTitle(item)\"\n [attr.aria-label]=\"getMenuItemAriaLabel(item)\"\n >\n @if (item.icon) {\n <span\n class=\"smart-text-[2.2rem] smart-mr-[0.4rem] smart-material-icons\"\n >{{ item.icon }}</span\n >\n }\n <span class=\"smart-inline-block\">{{ item.label }}</span>\n </a>\n </li>\n }\n </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
|
|
1674
|
+
}
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
1676
|
+
type: Component,
|
|
1677
|
+
args: [{ selector: 'smart-mobilems-menu', standalone: true, imports: [NgClass, NgTemplateOutlet, RouterLink, RouterLinkActive], template: "@if (!searchEnabled()) {\n <h2 class=\"smart-sr-only\">Main Menu</h2>\n\n @if (isMobileMenu()) {\n <div\n class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-py-[1.2rem]\"\n [ngClass]=\"isOpened() ? '' : ''\"\n role=\"navigation\"\n attr.aria-label=\"Main Menu\"\n >\n <button\n class=\"smart-h-[3.6rem] smart-relative smart-bg-transparent smart-border-0 smart-left-0 smart-flex smart-flex-row smart-items-center smart-text-[1.8rem] smart-font-bold smart-cursor-pointer\"\n (click)=\"toggleMenu()\"\n attr.aria-expanded=\"{{ isOpened() }}\"\n attr.aria-label=\"{{ isOpened() ? 'Close menu' : 'Open menu' }}\"\n >\n @if (!isOpened()) {\n <span\n class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n >menu</span\n >\n } @else {\n <span\n class=\"smart-text-[3rem] smart-text-black smart-mr-[0.6rem] smart-material-icons\"\n >close</span\n >\n }\n </button>\n </div>\n }\n\n @if (!isMobileMenu()) {\n <div\n class=\"smart-w-full smart-flex smart-flex-row smart-justify-end smart-h-full smart-p-0\"\n role=\"navigation\"\n attr.aria-label=\"Main Menu\"\n >\n <div role=\"menubar\">\n <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n </div>\n </div>\n }\n\n @if (isMobileMenu() && isOpened()) {\n <div\n class=\"smart-w-full smart-flex smart-flex-row smart-justify-center smart-h-full smart-p-0 smart-border smart-border-[#f3f3f3] smart-bg-[#fefefe] smart-mb-[2.4rem] smart-shadow-[0_0.6rem_1.2rem_#efefef] smart-p-[1.2rem]\"\n >\n <div role=\"navigation\" aria-label=\"Main\">\n <ng-container *ngTemplateOutlet=\"menuTemplate\"></ng-container>\n </div>\n </div>\n }\n}\n\n<ng-template #menuTemplate>\n <ul\n id=\"main-menu\"\n role=\"menu\"\n class=\"smart-h-full smart-w-full smart-flex smart-flex-row smart-justify-end smart-items-stretch smart-flex-nowrap smart-list-none smart-p-0 smart-m-0 smart-gap-x-[0.3rem]\"\n [ngClass]=\"\n isMobileMenu()\n ? 'smart-flex-wrap smart-justify-center smart-p-[1.2rem] smart-m-0'\n : ''\n \"\n >\n @for (item of menuItems(); track item.route) {\n <li\n class=\"smart-inline-flex smart-relative smart-w-auto smart-m-0\"\n [ngClass]=\"isMobileMenu() ? 'smart-w-full smart-max-w-full' : ''\"\n >\n <a\n class=\"smart-flex smart-items-center smart-flex-nowrap smart-text-black smart-transition-[border] smart-ease-in-out smart-duration-500 smart-border-b-[0.6rem] smart-border-b-transparent smart-cursor-pointer smart-justify-center smart-h-full smart-w-full smart-py-[1.2rem] smart-px-[1.8rem] smart-text-[1.6rem] smart-font-medium smart-whitespace-nowrap smart-m-0 smart-no-underline hover:smart-text-black hover:smart-bg-transparent hover:smart-border-b-[0.6rem] hover:smart-border-b-black\"\n role=\"menuitem\"\n [routerLink]=\"[item.route]\"\n routerLinkActive=\"smart-cursor-default smart-text-black smart-bg-transparent smart-border-b-[0.6rem] smart-border-b-black\"\n (click)=\"closeMenu()\"\n [attr.title]=\"getMenuItemTitle(item)\"\n [attr.aria-label]=\"getMenuItemAriaLabel(item)\"\n >\n @if (item.icon) {\n <span\n class=\"smart-text-[2.2rem] smart-mr-[0.4rem] smart-material-icons\"\n >{{ item.icon }}</span\n >\n }\n <span class=\"smart-inline-block\">{{ item.label }}</span>\n </a>\n </li>\n }\n </ul>\n</ng-template>\n" }]
|
|
1678
|
+
}] });
|
|
1679
|
+
|
|
1532
1680
|
const COMPONENTS = [AppComponent];
|
|
1533
1681
|
|
|
1534
1682
|
/**
|
|
@@ -1778,5 +1926,5 @@ const unauthorizedGuard = () => {
|
|
|
1778
1926
|
* Generated bundle index. Do not edit.
|
|
1779
1927
|
*/
|
|
1780
1928
|
|
|
1781
|
-
export { AppComponent, AuthStorageService, COMPONENTS, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HoverDirective, ImageBox, ListMode, MetaService, ModalContainerComponent, ModalRef, ModalService, PageComponent, SERVICES, ScrollTopComponent, ScrollableDirective, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, authenticationGuard, environment, setTranslationsAndLang, unauthorizedGuard };
|
|
1929
|
+
export { AppComponent, AuthStorageService, COMPONENTS, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HeaderComponent, HoverDirective, ImageBox, ListMode, MenuComponent, MetaService, ModalContainerComponent, ModalRef, ModalService, PageComponent, SERVICES, ScrollTopComponent, ScrollableDirective, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, authenticationGuard, environment, setTranslationsAndLang, unauthorizedGuard };
|
|
1782
1930
|
//# sourceMappingURL=smartsoft001-mobilems-angular.mjs.map
|