@factor_ec/ui 1.0.11 → 1.0.13

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.
Files changed (123) hide show
  1. package/.browserslistrc +16 -0
  2. package/karma.conf.js +44 -0
  3. package/ng-package.json +7 -0
  4. package/package.json +3 -23
  5. package/src/lib/display/avatar/avatar.component.html +1 -0
  6. package/src/lib/display/avatar/avatar.component.scss +20 -0
  7. package/src/lib/display/avatar/avatar.component.spec.ts +23 -0
  8. package/src/lib/display/avatar/avatar.component.ts +69 -0
  9. package/src/lib/display/content/content.component.html +4 -0
  10. package/src/lib/display/content/content.component.scss +0 -0
  11. package/src/lib/display/content/content.component.spec.ts +23 -0
  12. package/src/lib/display/content/content.component.ts +15 -0
  13. package/src/lib/display/display.module.ts +41 -0
  14. package/src/lib/display/icon/icon.component.html +4 -0
  15. package/src/lib/display/icon/icon.component.scss +47 -0
  16. package/src/lib/display/icon/icon.component.spec.ts +23 -0
  17. package/src/lib/display/icon/icon.component.ts +88 -0
  18. package/src/lib/display/image/image.component.html +2 -0
  19. package/src/lib/display/image/image.component.scss +53 -0
  20. package/src/lib/display/image/image.component.spec.ts +23 -0
  21. package/src/lib/display/image/image.component.ts +71 -0
  22. package/src/lib/display/message/message.component.html +33 -0
  23. package/src/lib/display/message/message.component.scss +25 -0
  24. package/src/lib/display/message/message.component.spec.ts +23 -0
  25. package/src/lib/display/message/message.component.ts +24 -0
  26. package/src/lib/display/message.service.spec.ts +16 -0
  27. package/src/lib/display/message.service.ts +58 -0
  28. package/src/lib/display/observe-intersecting.directive.spec.ts +8 -0
  29. package/src/lib/display/observe-intersecting.directive.ts +34 -0
  30. package/src/lib/display/progress/progress.component.html +6 -0
  31. package/src/lib/display/progress/progress.component.scss +121 -0
  32. package/src/lib/display/progress/progress.component.spec.ts +23 -0
  33. package/src/lib/display/progress/progress.component.ts +36 -0
  34. package/src/lib/display/progress.service.spec.ts +16 -0
  35. package/src/lib/display/progress.service.ts +51 -0
  36. package/src/lib/inputs/inputs.module.ts +17 -0
  37. package/src/lib/inputs/rating/rating.component.html +13 -0
  38. package/src/lib/inputs/rating/rating.component.scss +61 -0
  39. package/src/lib/inputs/rating/rating.component.spec.ts +25 -0
  40. package/src/lib/inputs/rating/rating.component.ts +66 -0
  41. package/src/lib/models/action-group.ts +9 -0
  42. package/{lib/models/action.d.ts → src/lib/models/action.ts} +1 -1
  43. package/{lib/models/content.d.ts → src/lib/models/content.ts} +1 -1
  44. package/{lib/models/icon.d.ts → src/lib/models/icon.ts} +1 -1
  45. package/{lib/models/message-options.d.ts → src/lib/models/message-options.ts} +2 -1
  46. package/src/lib/models/module-configuration.ts +6 -0
  47. package/src/lib/models/ui-configuration.ts +7 -0
  48. package/src/lib/navigation/list/list.component.html +52 -0
  49. package/src/lib/navigation/list/list.component.scss +93 -0
  50. package/src/lib/navigation/list/list.component.spec.ts +23 -0
  51. package/src/lib/navigation/list/list.component.ts +56 -0
  52. package/src/lib/navigation/navbar/navbar.component.html +23 -0
  53. package/src/lib/navigation/navbar/navbar.component.scss +202 -0
  54. package/src/lib/navigation/navbar/navbar.component.spec.ts +23 -0
  55. package/src/lib/navigation/navbar/navbar.component.ts +57 -0
  56. package/src/lib/navigation/navigation.module.ts +34 -0
  57. package/src/lib/navigation/searchbox/searchbox.component.html +34 -0
  58. package/src/lib/navigation/searchbox/searchbox.component.scss +37 -0
  59. package/src/lib/navigation/searchbox/searchbox.component.spec.ts +23 -0
  60. package/src/lib/navigation/searchbox/searchbox.component.ts +94 -0
  61. package/src/lib/navigation/toolbar/toolbar.component.html +43 -0
  62. package/src/lib/navigation/toolbar/toolbar.component.scss +29 -0
  63. package/src/lib/navigation/toolbar/toolbar.component.spec.ts +23 -0
  64. package/src/lib/navigation/toolbar/toolbar.component.ts +43 -0
  65. package/src/lib/scss/breakpoints.scss +123 -0
  66. package/src/lib/scss/variables.scss +8 -0
  67. package/src/lib/ui.module.ts +34 -0
  68. package/{public-api.d.ts → src/public-api.ts} +4 -0
  69. package/src/test.ts +27 -0
  70. package/tsconfig.lib.json +15 -0
  71. package/tsconfig.lib.prod.json +10 -0
  72. package/tsconfig.spec.json +17 -0
  73. package/esm2020/factor_ec-ui.mjs +0 -5
  74. package/esm2020/lib/display/avatar/avatar.component.mjs +0 -74
  75. package/esm2020/lib/display/content/content.component.mjs +0 -19
  76. package/esm2020/lib/display/display.module.mjs +0 -66
  77. package/esm2020/lib/display/icon/icon.component.mjs +0 -97
  78. package/esm2020/lib/display/image/image.component.mjs +0 -80
  79. package/esm2020/lib/display/message/message.component.mjs +0 -30
  80. package/esm2020/lib/display/message.service.mjs +0 -58
  81. package/esm2020/lib/display/observe-intersecting.directive.mjs +0 -43
  82. package/esm2020/lib/display/progress/progress.component.mjs +0 -42
  83. package/esm2020/lib/display/progress.service.mjs +0 -50
  84. package/esm2020/lib/inputs/inputs.module.mjs +0 -24
  85. package/esm2020/lib/inputs/rating/rating.component.mjs +0 -73
  86. package/esm2020/lib/models/action.mjs +0 -2
  87. package/esm2020/lib/models/content.mjs +0 -2
  88. package/esm2020/lib/models/icon.mjs +0 -2
  89. package/esm2020/lib/models/message-options.mjs +0 -2
  90. package/esm2020/lib/models/module-configuration.mjs +0 -2
  91. package/esm2020/lib/models/ui-configuration.mjs +0 -2
  92. package/esm2020/lib/navigation/list/list.component.mjs +0 -69
  93. package/esm2020/lib/navigation/navbar/navbar.component.mjs +0 -74
  94. package/esm2020/lib/navigation/navigation.module.mjs +0 -55
  95. package/esm2020/lib/navigation/searchbox/searchbox.component.mjs +0 -109
  96. package/esm2020/lib/navigation/toolbar/toolbar.component.mjs +0 -53
  97. package/esm2020/lib/ui.module.mjs +0 -47
  98. package/esm2020/public-api.mjs +0 -22
  99. package/fesm2015/factor_ec-ui.mjs +0 -1000
  100. package/fesm2015/factor_ec-ui.mjs.map +0 -1
  101. package/fesm2020/factor_ec-ui.mjs +0 -992
  102. package/fesm2020/factor_ec-ui.mjs.map +0 -1
  103. package/index.d.ts +0 -5
  104. package/lib/display/avatar/avatar.component.d.ts +0 -22
  105. package/lib/display/content/content.component.d.ts +0 -7
  106. package/lib/display/display.module.d.ts +0 -17
  107. package/lib/display/icon/icon.component.d.ts +0 -24
  108. package/lib/display/image/image.component.d.ts +0 -15
  109. package/lib/display/message/message.component.d.ts +0 -11
  110. package/lib/display/message.service.d.ts +0 -15
  111. package/lib/display/observe-intersecting.directive.d.ts +0 -16
  112. package/lib/display/progress/progress.component.d.ts +0 -15
  113. package/lib/display/progress.service.d.ts +0 -15
  114. package/lib/inputs/inputs.module.d.ts +0 -8
  115. package/lib/inputs/rating/rating.component.d.ts +0 -23
  116. package/lib/models/module-configuration.d.ts +0 -6
  117. package/lib/models/ui-configuration.d.ts +0 -7
  118. package/lib/navigation/list/list.component.d.ts +0 -21
  119. package/lib/navigation/navbar/navbar.component.d.ts +0 -23
  120. package/lib/navigation/navigation.module.d.ts +0 -15
  121. package/lib/navigation/searchbox/searchbox.component.d.ts +0 -34
  122. package/lib/navigation/toolbar/toolbar.component.d.ts +0 -18
  123. package/lib/ui.module.d.ts +0 -13
@@ -1,992 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, Input, HostBinding, Inject, EventEmitter, Output, Injectable, ApplicationRef, PLATFORM_ID, Directive, NgModule, forwardRef, ViewChild } from '@angular/core';
3
- import * as i1 from '@factor_ec/utils';
4
- import * as i1$1 from '@angular/common';
5
- import { isPlatformBrowser, CommonModule } from '@angular/common';
6
- import * as i1$2 from '@angular/material/snack-bar';
7
- import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
8
- import * as i3 from '@angular/material/dialog';
9
- import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
10
- import * as i2 from '@angular/material/button';
11
- import { MatButtonModule } from '@angular/material/button';
12
- import { ReplaySubject } from 'rxjs';
13
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
14
- import * as i1$3 from '@angular/router';
15
- import { RouterModule } from '@angular/router';
16
- import * as i4 from '@angular/material/menu';
17
- import { MatMenuModule } from '@angular/material/menu';
18
-
19
- class AvatarComponent {
20
- constructor(colorService) {
21
- this.colorService = colorService;
22
- this.class = '';
23
- }
24
- set src(value) {
25
- if (value && value.trim() != '') {
26
- this._src = value;
27
- let image = new Image();
28
- image.src = value;
29
- image.onload = () => {
30
- if ("decode" in image) {
31
- image.decode().then(() => {
32
- this.loaded = true;
33
- });
34
- }
35
- else {
36
- console.error('Image.decode not available.');
37
- }
38
- };
39
- }
40
- }
41
- set label(value) {
42
- this._label = value;
43
- this.initials = this.getInitials(value);
44
- }
45
- get backgroundColor() {
46
- return this.color || this.colorService.hex(this._label);
47
- }
48
- get backgroundImage() {
49
- return this._src ? `url(${this._src})` : '';
50
- }
51
- get hostClasses() {
52
- return [
53
- 'ft-avatar',
54
- this.class
55
- ].join(' ');
56
- }
57
- ngOnInit() {
58
- }
59
- getInitials(value) {
60
- let allInitials = value.match(/\b\w/g) || [];
61
- let initials = ((allInitials.shift() || '') + (allInitials.pop() || '')).toUpperCase();
62
- return initials;
63
- }
64
- }
65
- AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.ColorService }], target: i0.ɵɵFactoryTarget.Component });
66
- AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AvatarComponent, selector: "ft-avatar", inputs: { color: "color", class: "class", src: "src", label: "label" }, host: { properties: { "style.background-color": "this.backgroundColor", "style.background-image": "this.backgroundImage", "class": "this.hostClasses" } }, ngImport: i0, template: "<div *ngIf=\"!loaded\">{{ initials }}</div>\n", styles: [":host{--default-size: var(--size, 3rem);display:inline-flex;align-items:center;justify-content:center;color:#fff;background-size:cover;background-repeat:no-repeat;border-radius:calc(var(--default-size) / 2);font-size:calc(var(--default-size) - var(--default-size) * .6);min-width:var(--default-size);min-height:var(--default-size);cursor:default;-webkit-user-select:none;user-select:none}div{font-size:1em;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
67
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarComponent, decorators: [{
68
- type: Component,
69
- args: [{ selector: 'ft-avatar', template: "<div *ngIf=\"!loaded\">{{ initials }}</div>\n", styles: [":host{--default-size: var(--size, 3rem);display:inline-flex;align-items:center;justify-content:center;color:#fff;background-size:cover;background-repeat:no-repeat;border-radius:calc(var(--default-size) / 2);font-size:calc(var(--default-size) - var(--default-size) * .6);min-width:var(--default-size);min-height:var(--default-size);cursor:default;-webkit-user-select:none;user-select:none}div{font-size:1em;line-height:1em}\n"] }]
70
- }], ctorParameters: function () { return [{ type: i1.ColorService }]; }, propDecorators: { color: [{
71
- type: Input
72
- }], class: [{
73
- type: Input
74
- }], src: [{
75
- type: Input
76
- }], label: [{
77
- type: Input
78
- }], backgroundColor: [{
79
- type: HostBinding,
80
- args: ['style.background-color']
81
- }], backgroundImage: [{
82
- type: HostBinding,
83
- args: ['style.background-image']
84
- }], hostClasses: [{
85
- type: HostBinding,
86
- args: ['class']
87
- }] } });
88
-
89
- class IconComponent {
90
- constructor(configuration) {
91
- this.configuration = configuration;
92
- this.class = '';
93
- }
94
- set collection(collection) {
95
- this._collection = collection;
96
- this.update();
97
- }
98
- set mode(mode) {
99
- this._mode = mode;
100
- this.update();
101
- }
102
- set name(name) {
103
- this._name = name;
104
- this.update();
105
- }
106
- set path(path) {
107
- this._path = path;
108
- this.update();
109
- }
110
- get hostClasses() {
111
- return [
112
- 'ft-icon',
113
- this.class
114
- ].join(' ');
115
- }
116
- ngOnInit() {
117
- this.update();
118
- }
119
- update() {
120
- // Set the default collection if the mode is external
121
- if (!this._collection) {
122
- if (this.configuration.icon && this.configuration.icon.collection) {
123
- this._collection = this.configuration.icon.collection;
124
- }
125
- else if (this._mode === 'external') {
126
- this._collection = 'icons';
127
- }
128
- }
129
- if (!this._mode) {
130
- if (this.configuration.icon && this.configuration.icon.mode) {
131
- this._mode = this.configuration.icon.mode;
132
- }
133
- else {
134
- this._mode = 'external';
135
- }
136
- }
137
- if (this._mode === 'external') {
138
- // If the icon mode is external
139
- if (!this._path) {
140
- if (this.configuration.icon && this.configuration.icon.path) {
141
- this._path = this.configuration.icon.path;
142
- }
143
- else {
144
- this._path = 'assets';
145
- }
146
- }
147
- this.url = `${this._path}/${this._collection}.svg#${this._name}`;
148
- }
149
- else {
150
- // If the icon mode is inline
151
- const name = this._collection && this._collection !== 'unset' ? `${this._collection}--${this._name}` : this._name;
152
- this.url = `#${name}`;
153
- }
154
- }
155
- }
156
- IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IconComponent, deps: [{ token: 'FactorUiConfiguration' }], target: i0.ɵɵFactoryTarget.Component });
157
- IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IconComponent, selector: "ft-icon", inputs: { class: "class", collection: "collection", mode: "mode", name: "name", path: "path", size: "size", src: "src" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg *ngIf=\"!src; else imageTemplate\"><use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" /></svg>\n<ng-template #imageTemplate>\n <img [src]=\"src\" />\n</ng-template>", styles: [":host{line-height:0;display:inline-block}:host[size=\"1\"],:host.ft-icon--1{font-size:1rem}:host[size=\"2\"],:host.ft-icon--2{font-size:1.5rem}:host[size=\"3\"],:host.ft-icon--3{font-size:2rem}:host[size=\"4\"],:host.ft-icon--4{font-size:3rem}:host[size=\"5\"],:host.ft-icon--5{font-size:4.5rem}:host[size=\"6\"],:host.ft-icon--6{font-size:8rem}:host[size=\"7\"],:host.ft-icon--7{font-size:16rem}:host[size=\"8\"],:host.ft-icon--8{font-size:32rem}svg{width:1em;height:1em;vertical-align:middle;fill:currentColor}img{height:1em;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
158
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IconComponent, decorators: [{
159
- type: Component,
160
- args: [{ selector: 'ft-icon', template: "<svg *ngIf=\"!src; else imageTemplate\"><use attr.xlink:href=\"{{ url }}\" attr.href=\"{{ url }}\" /></svg>\n<ng-template #imageTemplate>\n <img [src]=\"src\" />\n</ng-template>", styles: [":host{line-height:0;display:inline-block}:host[size=\"1\"],:host.ft-icon--1{font-size:1rem}:host[size=\"2\"],:host.ft-icon--2{font-size:1.5rem}:host[size=\"3\"],:host.ft-icon--3{font-size:2rem}:host[size=\"4\"],:host.ft-icon--4{font-size:3rem}:host[size=\"5\"],:host.ft-icon--5{font-size:4.5rem}:host[size=\"6\"],:host.ft-icon--6{font-size:8rem}:host[size=\"7\"],:host.ft-icon--7{font-size:16rem}:host[size=\"8\"],:host.ft-icon--8{font-size:32rem}svg{width:1em;height:1em;vertical-align:middle;fill:currentColor}img{height:1em;vertical-align:middle}\n"] }]
161
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
162
- type: Inject,
163
- args: ['FactorUiConfiguration']
164
- }] }]; }, propDecorators: { class: [{
165
- type: Input
166
- }], collection: [{
167
- type: Input
168
- }], mode: [{
169
- type: Input
170
- }], name: [{
171
- type: Input
172
- }], path: [{
173
- type: Input
174
- }], size: [{
175
- type: Input
176
- }], src: [{
177
- type: Input
178
- }], hostClasses: [{
179
- type: HostBinding,
180
- args: ['class']
181
- }] } });
182
-
183
- class ImageComponent {
184
- constructor(element) {
185
- this.element = element;
186
- this.class = '';
187
- this.loading = false;
188
- this.shown = false;
189
- }
190
- ngOnInit() {
191
- if ("IntersectionObserver" in window) {
192
- let elementObserver = new IntersectionObserver((entries, observer) => {
193
- entries.forEach((entry) => {
194
- if (entry.isIntersecting) {
195
- let image = new Image();
196
- image.src = this.src;
197
- setTimeout(() => {
198
- if (!this.shown && !this.error) {
199
- this.loading = true;
200
- }
201
- }, 100);
202
- image.onerror = () => {
203
- this.error = true;
204
- this.loading = false;
205
- };
206
- image.onload = () => {
207
- if ("decode" in image) {
208
- image.decode().then(() => {
209
- this.loading = false;
210
- this.shown = true;
211
- });
212
- }
213
- else {
214
- this.loading = false;
215
- this.shown = true;
216
- }
217
- };
218
- elementObserver.unobserve(this.element.nativeElement);
219
- }
220
- });
221
- }, {
222
- rootMargin: "0px 0px 200px 0px"
223
- });
224
- elementObserver.observe(this.element.nativeElement);
225
- }
226
- else {
227
- console.error('IntersectionObserver not available.');
228
- this.loading = false;
229
- this.shown = true;
230
- }
231
- }
232
- get hostClasses() {
233
- return [
234
- 'ft-image',
235
- this.class
236
- ].join(' ');
237
- }
238
- }
239
- ImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
240
- ImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ImageComponent, selector: "ft-image", inputs: { class: "class", src: "src" }, host: { properties: { "class.ft-image--error": "this.error", "class.ft-image--loading": "this.loading", "class": "this.hostClasses" } }, ngImport: i0, template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n", styles: [":host{display:inline-block;overflow:hidden;display:flex;align-items:center;justify-content:center}:host.ft-image--loading{background-color:#00000008;position:relative;overflow:hidden}:host.ft-image--loading:after{content:\"\";display:block;background-color:#00000005;position:absolute;top:0;bottom:0;width:100%;height:100%;transform:translate(0);animation:1.5s placeholder-loading ease-in-out infinite}:host.ft-image--error{background-color:#ff000008}:host.ft-image--error ft-icon{color:var(--danger)}img{position:relative;z-index:1;max-width:100%;max-height:100%;animation:fade-in .3s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes placeholder-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
241
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ImageComponent, decorators: [{
242
- type: Component,
243
- args: [{ selector: 'ft-image', template: "<img *ngIf=\"shown\" [src]=\"src\" />\n<ft-icon name=\"warning\" size=\"2\" *ngIf=\"error\"></ft-icon>\n", styles: [":host{display:inline-block;overflow:hidden;display:flex;align-items:center;justify-content:center}:host.ft-image--loading{background-color:#00000008;position:relative;overflow:hidden}:host.ft-image--loading:after{content:\"\";display:block;background-color:#00000005;position:absolute;top:0;bottom:0;width:100%;height:100%;transform:translate(0);animation:1.5s placeholder-loading ease-in-out infinite}:host.ft-image--error{background-color:#ff000008}:host.ft-image--error ft-icon{color:var(--danger)}img{position:relative;z-index:1;max-width:100%;max-height:100%;animation:fade-in .3s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes placeholder-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
244
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { class: [{
245
- type: Input
246
- }], error: [{
247
- type: HostBinding,
248
- args: ['class.ft-image--error']
249
- }], loading: [{
250
- type: HostBinding,
251
- args: ['class.ft-image--loading']
252
- }], src: [{
253
- type: Input
254
- }], hostClasses: [{
255
- type: HostBinding,
256
- args: ['class']
257
- }] } });
258
-
259
- class ContentComponent {
260
- constructor(data) {
261
- this.data = data;
262
- }
263
- }
264
- ContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ContentComponent, deps: [{ token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
265
- ContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ContentComponent, selector: "lib-content", ngImport: i0, template: "<ng-container [ngSwitch]=\"data.message?.type\">\n <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
266
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ContentComponent, decorators: [{
267
- type: Component,
268
- args: [{ selector: 'lib-content', template: "<ng-container [ngSwitch]=\"data.message?.type\">\n <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n</ng-container>" }]
269
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
270
- type: Inject,
271
- args: [MAT_SNACK_BAR_DATA]
272
- }] }]; } });
273
-
274
- class MessageComponent {
275
- constructor(data) {
276
- this.data = data;
277
- this.beforeSelect = new EventEmitter();
278
- }
279
- ngOnInit() {
280
- }
281
- select(value) {
282
- this.beforeSelect.emit(value);
283
- }
284
- }
285
- MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
286
- MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: MessageComponent, selector: "ft-message", outputs: { beforeSelect: "beforeSelect" }, ngImport: i0, template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n <div>{{ data.options?.title }}</div>\n </h1>\n <div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n <ng-container [ngSwitch]=\"data.message?.type\">\n <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n </ng-container>\n </div>\n <div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n <ng-container [ngSwitch]=\"action.type\">\n <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\">{{ action.label }}</button>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n <ng-template #acceptTemplate>\n <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n </ng-template>", styles: [".mat-dialog-title{display:flex;align-items:center}.mat-dialog-title ft-icon{margin-right:.5rem}.mat-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-dialog-content ft-icon{margin-right:.5rem}.mat-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }] });
287
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageComponent, decorators: [{
288
- type: Component,
289
- args: [{ selector: 'ft-message', template: "<h1 mat-dialog-title class=\"ft-message__title\" *ngIf=\"data.options?.title\">\n <ft-icon *ngIf=\"data.options?.titleIcon\" [name]=\"data.options?.titleIcon?.name\"\n [collection]=\"data.options?.titleIcon?.collection\" [ngClass]=\"data.options?.titleIcon?.class\"\n [size]=\"data.options?.titleIcon?.size || 2\"></ft-icon>\n <div>{{ data.options?.title }}</div>\n </h1>\n <div mat-dialog-content class=\"ft-message__content\" [ngClass]=\"data.options?.class\">\n <ft-icon *ngIf=\"data.options?.icon\" [name]=\"data.options?.icon?.name\" [collection]=\"data.options?.icon?.collection\"\n [ngClass]=\"data.options?.icon?.class\" [size]=\"data.options?.icon?.size || 2\"></ft-icon>\n <ng-container [ngSwitch]=\"data.message?.type\">\n <div *ngSwitchCase=\"'html'\" [innerHTML]=\"data.message?.content\"></div>\n <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>\n </ng-container>\n </div>\n <div mat-dialog-actions class=\"ft-message__actions\" *ngIf=\"data.options.actionsVisible\">\n <ng-container *ngIf=\"data.options?.actions?.length > 0; else acceptTemplate\">\n <ng-container *ngFor=\"let action of data.options?.actions; let i = index\">\n <ng-container [ngSwitch]=\"action.type\">\n <button type=\"button\" *ngSwitchCase=\"'raised'\" mat-raised-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n <button type=\"button\" *ngSwitchCase=\"'flat'\" mat-flat-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n <button type=\"button\" *ngSwitchCase=\"'stroked'\" mat-stroked-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\" autofocus>{{ action.label }}</button>\n <button type=\"button\" *ngSwitchDefault mat-button [color]=\"action.metadata?.color\"\n (click)=\"select(action.value)\">{{ action.label }}</button>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n <ng-template #acceptTemplate>\n <button type=\"button\" mat-stroked-button color=\"primary\" autofocus (click)=\"select('-1')\" i18n>Accept</button>\n </ng-template>", styles: [".mat-dialog-title{display:flex;align-items:center}.mat-dialog-title ft-icon{margin-right:.5rem}.mat-dialog-content{display:flex;align-items:center;margin-bottom:.5rem}.mat-dialog-content ft-icon{margin-right:.5rem}.mat-dialog-actions{display:flex;align-items:center;justify-content:flex-end;padding-bottom:1.5rem}\n"] }]
290
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
291
- type: Inject,
292
- args: [MAT_DIALOG_DATA]
293
- }] }]; }, propDecorators: { beforeSelect: [{
294
- type: Output
295
- }] } });
296
-
297
- class MessageService {
298
- constructor(snackBar, dialog) {
299
- this.snackBar = snackBar;
300
- this.dialog = dialog;
301
- }
302
- show(message, options) {
303
- let selectionSource = new ReplaySubject(undefined);
304
- let selection = selectionSource.asObservable();
305
- const defaults = {
306
- type: 'notification',
307
- duration: 2000,
308
- actionsVisible: true
309
- };
310
- options = Object.assign(defaults, options);
311
- const data = { message: typeof message === 'string' ? { content: message, type: 'text' } : message, options };
312
- switch (options.type) {
313
- default:
314
- case 'notification':
315
- this.snackBar.openFromComponent(ContentComponent, {
316
- data,
317
- panelClass: ['ft-message', 'ft-message--notification'],
318
- duration: options.duration || 2000,
319
- });
320
- break;
321
- case 'modal':
322
- const dialogRef = this.dialog.open(MessageComponent, {
323
- width: options.width || '350px',
324
- data,
325
- panelClass: ['ft-message', 'ft-message--modal'],
326
- autoFocus: false,
327
- disableClose: true
328
- });
329
- dialogRef.componentInstance.beforeSelect.subscribe(response => {
330
- selectionSource.next(response);
331
- dialogRef.close();
332
- });
333
- this.snackBar.dismiss();
334
- break;
335
- }
336
- return selection;
337
- }
338
- }
339
- MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageService, deps: [{ token: i1$2.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
340
- MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageService, providedIn: 'root' });
341
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MessageService, decorators: [{
342
- type: Injectable,
343
- args: [{
344
- providedIn: 'root'
345
- }]
346
- }], ctorParameters: function () { return [{ type: i1$2.MatSnackBar }, { type: i3.MatDialog }]; } });
347
-
348
- class ProgressComponent {
349
- constructor() {
350
- this.class = '';
351
- this.mode = 'indeterminate';
352
- this.overlay = false;
353
- }
354
- ngOnInit() {
355
- this.value = 0;
356
- }
357
- get hostClasses() {
358
- return [
359
- 'ft-progress',
360
- this.overlay ? 'ft-progress--overlay' : '',
361
- this.class
362
- ].join(' ');
363
- }
364
- }
365
- ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
366
- ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ProgressComponent, selector: "ft-progress", inputs: { class: "class", color: "color", mode: "mode", overlay: "overlay", size: "size", value: "value" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<svg [ngStyle]=\"{'--bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n <circle class=\"track\" cx=\"50\" cy=\"50\" r=\"40\" />\n <circle class=\"bar\" [ngClass]=\"mode\" cx=\"50\" cy=\"50\" r=\"40\"\n [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n </circle>\n</svg>", styles: [":host{--track-color: rgba(0, 0, 0, .08);--bar-color: var(--primary);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-index-modal, 1000);top:0;left:0;right:0;bottom:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .bar.indeterminate{animation:progress-rotation 2s infinite linear}svg .bar.determinate{stroke-dasharray:251.327412288}@keyframes progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
367
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressComponent, decorators: [{
368
- type: Component,
369
- args: [{ selector: 'ft-progress', template: "<svg [ngStyle]=\"{'--bar-color': color}\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n <circle class=\"track\" cx=\"50\" cy=\"50\" r=\"40\" />\n <circle class=\"bar\" [ngClass]=\"mode\" cx=\"50\" cy=\"50\" r=\"40\"\n [ngStyle]=\"{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}\">\n </circle>\n</svg>", styles: [":host{--track-color: rgba(0, 0, 0, .08);--bar-color: var(--primary);line-height:0;display:inline-block}:host.ft-progress--1{font-size:1rem}:host.ft-progress--2{font-size:1.5rem}:host.ft-progress--3{font-size:2rem}:host.ft-progress--4{font-size:3rem}:host.ft-progress--5{font-size:4.5rem}:host.ft-progress--6{font-size:8rem}:host.ft-progress--7{font-size:16rem}:host.ft-progress--8{font-size:32rem}:host.ft-progress--overlay{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-index-modal, 1000);top:0;left:0;right:0;bottom:0;font-size:42px}:host.ft-progress--overlay svg{background:rgba(255,255,255,.6);-webkit-backdrop-filter:saturate(50%) blur(3px);backdrop-filter:saturate(50%) blur(3px);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;border-radius:100vh;padding:.3125rem;animation:progress-reveal .2s;animation-fill-mode:forwards}:host.ft-progress--overlay svg .track{display:none}svg{width:1em;height:1em;vertical-align:middle}svg .track{fill:none;stroke-width:10;stroke:var(--track-color)}svg .bar{fill:none;stroke-opacity:.9;stroke-width:6;stroke:var(--bar-color)}svg .bar.indeterminate{animation:progress-rotation 2s infinite linear}svg .bar.determinate{stroke-dasharray:251.327412288}@keyframes progress-reveal{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes progress-rotation{0%{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}}\n"] }]
370
- }], ctorParameters: function () { return []; }, propDecorators: { class: [{
371
- type: Input
372
- }], color: [{
373
- type: Input
374
- }], mode: [{
375
- type: Input
376
- }], overlay: [{
377
- type: Input
378
- }], size: [{
379
- type: Input
380
- }], value: [{
381
- type: Input
382
- }], hostClasses: [{
383
- type: HostBinding,
384
- args: ['class']
385
- }] } });
386
-
387
- class ProgressService {
388
- constructor(componentFactoryResolver, injector) {
389
- this.componentFactoryResolver = componentFactoryResolver;
390
- this.injector = injector;
391
- }
392
- show() {
393
- if (!this.componentRef) {
394
- this.appRef = this.injector.get(ApplicationRef);
395
- // 1. Create a component reference from the component
396
- this.componentRef = this.componentFactoryResolver
397
- .resolveComponentFactory(ProgressComponent)
398
- .create(this.injector);
399
- // 2. Attach component to the appRef so that it's inside the ng component tree
400
- this.appRef.attachView(this.componentRef.hostView);
401
- this.componentRef.instance.overlay = true;
402
- // 3. Get DOM element from component
403
- const domElem = this.componentRef.hostView
404
- .rootNodes[0];
405
- // 4. Append DOM element to the body
406
- document.body.appendChild(domElem);
407
- return true;
408
- }
409
- else {
410
- return false;
411
- }
412
- }
413
- hide() {
414
- if (this.componentRef) {
415
- this.appRef.detachView(this.componentRef.hostView);
416
- this.componentRef.destroy();
417
- this.componentRef = null;
418
- return true;
419
- }
420
- else {
421
- return false;
422
- }
423
- }
424
- }
425
- ProgressService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
426
- ProgressService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressService, providedIn: 'root' });
427
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ProgressService, decorators: [{
428
- type: Injectable,
429
- args: [{
430
- providedIn: 'root'
431
- }]
432
- }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; } });
433
-
434
- class ObserveIntersectingDirective {
435
- constructor(element, platformId) {
436
- this.element = element;
437
- this.platformId = platformId;
438
- this.event = new EventEmitter();
439
- }
440
- ngOnInit() {
441
- if (isPlatformBrowser(this.platformId)) {
442
- if ("IntersectionObserver" in window) {
443
- const elementObserver = new IntersectionObserver((entries, observer) => {
444
- entries.forEach((entry) => {
445
- this.event.emit(entry.isIntersecting);
446
- });
447
- }, this.options);
448
- elementObserver.observe(this.element.nativeElement);
449
- }
450
- else {
451
- console.error('ftObserveIntersecting not available in this browser.');
452
- }
453
- }
454
- }
455
- }
456
- ObserveIntersectingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ObserveIntersectingDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
457
- ObserveIntersectingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ObserveIntersectingDirective, selector: "[ftObserveIntersecting]", inputs: { options: ["ftObserveIntersectingOptions", "options"] }, outputs: { event: "ftObserveIntersecting" }, ngImport: i0 });
458
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ObserveIntersectingDirective, decorators: [{
459
- type: Directive,
460
- args: [{
461
- selector: '[ftObserveIntersecting]'
462
- }]
463
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Object, decorators: [{
464
- type: Inject,
465
- args: [PLATFORM_ID]
466
- }] }]; }, propDecorators: { options: [{
467
- type: Input,
468
- args: ['ftObserveIntersectingOptions']
469
- }], event: [{
470
- type: Output,
471
- args: ['ftObserveIntersecting']
472
- }] } });
473
-
474
- class DisplayModule {
475
- }
476
- DisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
477
- DisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, declarations: [AvatarComponent,
478
- IconComponent,
479
- ImageComponent,
480
- ProgressComponent,
481
- ObserveIntersectingDirective,
482
- MessageComponent,
483
- ContentComponent], imports: [CommonModule,
484
- MatButtonModule,
485
- MatDialogModule,
486
- MatSnackBarModule], exports: [AvatarComponent,
487
- IconComponent,
488
- ImageComponent,
489
- ProgressComponent,
490
- ObserveIntersectingDirective,
491
- MessageComponent,
492
- ContentComponent] });
493
- DisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, imports: [CommonModule,
494
- MatButtonModule,
495
- MatDialogModule,
496
- MatSnackBarModule] });
497
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisplayModule, decorators: [{
498
- type: NgModule,
499
- args: [{
500
- declarations: [
501
- AvatarComponent,
502
- IconComponent,
503
- ImageComponent,
504
- ProgressComponent,
505
- ObserveIntersectingDirective,
506
- MessageComponent,
507
- ContentComponent
508
- ],
509
- exports: [
510
- AvatarComponent,
511
- IconComponent,
512
- ImageComponent,
513
- ProgressComponent,
514
- ObserveIntersectingDirective,
515
- MessageComponent,
516
- ContentComponent
517
- ],
518
- imports: [
519
- CommonModule,
520
- MatButtonModule,
521
- MatDialogModule,
522
- MatSnackBarModule
523
- ]
524
- }]
525
- }] });
526
-
527
- class RatingComponent {
528
- constructor() {
529
- this.disabled = false;
530
- this.propagateChange = (_) => { };
531
- this.readOnly = false;
532
- this.stars = [
533
- { value: 1 },
534
- { value: 2 },
535
- { value: 3 },
536
- { value: 4 },
537
- { value: 5 }
538
- ];
539
- }
540
- ngOnInit() {
541
- }
542
- get value() {
543
- return this._value;
544
- }
545
- set value(value) {
546
- this._value = value;
547
- this.propagateChange(this._value);
548
- }
549
- registerOnChange(fn) {
550
- this.propagateChange = fn;
551
- }
552
- registerOnTouched(fn) {
553
- //this.propagateChange = fn;
554
- }
555
- setDisabledState(isDisabled) {
556
- this.disabled = isDisabled;
557
- }
558
- setRate(value, isHover) {
559
- if (isHover) {
560
- this.hoverValue = value;
561
- }
562
- else {
563
- this.value = value;
564
- }
565
- }
566
- updateValue(event) {
567
- this.value = event.target.value;
568
- }
569
- writeValue(value) {
570
- this.value = value;
571
- }
572
- }
573
- RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
574
- RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: RatingComponent, selector: "ft-rating", inputs: { readOnly: "readOnly", value: "value" }, providers: [
575
- {
576
- provide: NG_VALUE_ACCESSOR,
577
- useExisting: forwardRef(() => RatingComponent),
578
- multi: true
579
- }
580
- ], ngImport: i0, template: "<ng-container *ngFor=\"let star of stars\">\n <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n <button type=\"button\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\" (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\" (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n <svg [ngClass]=\"{hover: hoverValue >= star.value, active: value >= star.value}\" viewBox=\"0 0 24 24\">\n <path d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n </svg>\n</ng-template>\n", styles: [":host{line-height:0;display:inline-flex}:host:hover button{color:var(--primary)}:host:hover button svg:not(.hover){color:var(--gray)}:host[size=\"1\"]{font-size:1rem}:host[size=\"2\"]{font-size:1.5rem}:host[size=\"3\"]{font-size:2rem}:host[size=\"4\"]{font-size:3rem}:host[size=\"5\"]{font-size:4.5rem}:host[size=\"6\"]{font-size:8rem}:host[size=\"7\"]{font-size:16rem}:host[size=\"8\"]{font-size:32rem}svg{width:1em;height:1em;display:block}svg path{fill:none;stroke-width:1;stroke:currentColor}svg.hover path,svg.active path{fill:currentColor}button{border:0;background:transparent;padding:0}button:focus,button:active{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
581
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RatingComponent, decorators: [{
582
- type: Component,
583
- args: [{ selector: 'ft-rating', providers: [
584
- {
585
- provide: NG_VALUE_ACCESSOR,
586
- useExisting: forwardRef(() => RatingComponent),
587
- multi: true
588
- }
589
- ], template: "<ng-container *ngFor=\"let star of stars\">\n <ng-container *ngTemplateOutlet=\"!readOnly? buttonTemplate : starTemplate; context:{star:star}\"></ng-container>\n</ng-container>\n<ng-template #buttonTemplate let-star=\"star\">\n <button type=\"button\" *ngIf=\"!readOnly; else starTemplate\" [disabled]=\"disabled\" (mouseover)=\"setRate(star.value, true)\" (focus)=\"setRate(star.value, true)\" (blur)=\"setRate(0, true)\" (mouseout)=\"setRate(0, true)\" (click)=\"setRate(star.value)\">\n <ng-container *ngTemplateOutlet=\"starTemplate; context:{star:star}\"></ng-container>\n </button>\n</ng-template>\n<ng-template #starTemplate let-star=\"star\">\n <svg [ngClass]=\"{hover: hoverValue >= star.value, active: value >= star.value}\" viewBox=\"0 0 24 24\">\n <path d=\"M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z\" />\n </svg>\n</ng-template>\n", styles: [":host{line-height:0;display:inline-flex}:host:hover button{color:var(--primary)}:host:hover button svg:not(.hover){color:var(--gray)}:host[size=\"1\"]{font-size:1rem}:host[size=\"2\"]{font-size:1.5rem}:host[size=\"3\"]{font-size:2rem}:host[size=\"4\"]{font-size:3rem}:host[size=\"5\"]{font-size:4.5rem}:host[size=\"6\"]{font-size:8rem}:host[size=\"7\"]{font-size:16rem}:host[size=\"8\"]{font-size:32rem}svg{width:1em;height:1em;display:block}svg path{fill:none;stroke-width:1;stroke:currentColor}svg.hover path,svg.active path{fill:currentColor}button{border:0;background:transparent;padding:0}button:focus,button:active{outline:none}\n"] }]
590
- }], ctorParameters: function () { return []; }, propDecorators: { readOnly: [{
591
- type: Input
592
- }], value: [{
593
- type: Input
594
- }] } });
595
-
596
- class InputsModule {
597
- }
598
- InputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
599
- InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, declarations: [RatingComponent], imports: [CommonModule], exports: [RatingComponent] });
600
- InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, imports: [CommonModule] });
601
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: InputsModule, decorators: [{
602
- type: NgModule,
603
- args: [{
604
- declarations: [
605
- RatingComponent
606
- ],
607
- exports: [
608
- RatingComponent
609
- ],
610
- imports: [
611
- CommonModule
612
- ]
613
- }]
614
- }] });
615
-
616
- class ListComponent {
617
- constructor(router) {
618
- this.router = router;
619
- this.change = new EventEmitter();
620
- this.iconNameField = 'iconName';
621
- this.labelField = 'label';
622
- this.class = '';
623
- }
624
- get hostClasses() {
625
- return [
626
- 'ft-list',
627
- this.class
628
- ].join(' ');
629
- }
630
- ;
631
- getComponentType(item) {
632
- let type = 'text';
633
- if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
634
- type = 'button';
635
- }
636
- else {
637
- type = 'link';
638
- }
639
- return type;
640
- }
641
- setItem(item) {
642
- if (item.url) {
643
- if (item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
644
- window.location.href = item.url;
645
- }
646
- }
647
- else if (item.click) {
648
- item.click();
649
- }
650
- }
651
- toggleCollapsible(action) {
652
- action.metadata.show = !action.metadata.show;
653
- this.change.emit(action);
654
- }
655
- }
656
- ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
657
- ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListComponent, selector: "ft-list", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", iconPath: "iconPath", labelField: "labelField", items: "items", class: "class" }, outputs: { change: "change" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n <ng-container *ngSwitchCase=\"'collapsible'\">\n <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'header'\">\n <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-list__item\" [ngClass]=\"item.class\"\n (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-active\" matRipple class=\"ft-list__item\"\n [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n <button type=\"button\" matRipple class=\"ft-collapsible-header ft-list__item\"\n [ngClass]=\"{ 'ft-show': item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div>\n <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"ft-collapsible\" [ngClass]=\"{ 'ft-show': item.metadata?.show }\" *ngIf=\"item.children\">\n <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n <div class=\"header\" [ngClass]=\"item.class\">\n {{ item[labelField] }}\n </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n <div class=\"d-flex align-items-center\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>", styles: [":host{--background-color: var(--background-color, #f8f9fa);--background-color-hover: rgba(0, 0, 0, .03);--background-color-active: rgba(var(--primary-rgb), .1);--text-color: #333;--text-color-hover: var(--primary);--text-color-active: var(--primary);display:block;overflow:auto}.ft-list__item{border:0;box-sizing:border-box;color:var(--text-color);background-color:var(--background-color);cursor:pointer;display:flex;outline:none;transition:background-color .3s,color .3s;text-align:left;padding:.75rem 1.5rem;width:100%}@media (min-width: var(--breakpoint-md)){.ft-list__item{width:100%}}.ft-list__item:hover{text-decoration:none}.ft-list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.ft-list__item.ft-active,.ft-list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.ft-list__item>div{max-width:100%}.ft-list__item .ft-item__icon{font-size:1.5rem}.ft-list__item .ft-item__icon+.ft-item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ft-list__item .ft-item__icon,.ft-list__item .ft-item__label{transition:margin-left .3s}.ft-list__item .ft-item__toggle{transition:transform .2s}.ft-list__item .ft-item__label{flex-grow:1}.ft-collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.ft-collapsible-header{font-weight:500}.ft-collapsible-header>div{display:flex;align-items:center;flex-grow:1}.ft-collapsible-header.ft-show .ft-item__toggle{transform:rotate(90deg)}.ft-collapsible:not(.ft-show){max-height:0;background-color:transparent}.ft-header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
658
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListComponent, decorators: [{
659
- type: Component,
660
- args: [{ selector: 'ft-list', template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n <ng-container *ngSwitchCase=\"'collapsible'\">\n <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'header'\">\n <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-list__item\" [ngClass]=\"item.class\"\n (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-active\" matRipple class=\"ft-list__item\"\n [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n <button type=\"button\" matRipple class=\"ft-collapsible-header ft-list__item\"\n [ngClass]=\"{ 'ft-show': item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div>\n <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"ft-collapsible\" [ngClass]=\"{ 'ft-show': item.metadata?.show }\" *ngIf=\"item.children\">\n <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n <div class=\"header\" [ngClass]=\"item.class\">\n {{ item[labelField] }}\n </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n <div class=\"d-flex align-items-center\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>", styles: [":host{--background-color: var(--background-color, #f8f9fa);--background-color-hover: rgba(0, 0, 0, .03);--background-color-active: rgba(var(--primary-rgb), .1);--text-color: #333;--text-color-hover: var(--primary);--text-color-active: var(--primary);display:block;overflow:auto}.ft-list__item{border:0;box-sizing:border-box;color:var(--text-color);background-color:var(--background-color);cursor:pointer;display:flex;outline:none;transition:background-color .3s,color .3s;text-align:left;padding:.75rem 1.5rem;width:100%}@media (min-width: var(--breakpoint-md)){.ft-list__item{width:100%}}.ft-list__item:hover{text-decoration:none}.ft-list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.ft-list__item.ft-active,.ft-list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.ft-list__item>div{max-width:100%}.ft-list__item .ft-item__icon{font-size:1.5rem}.ft-list__item .ft-item__icon+.ft-item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ft-list__item .ft-item__icon,.ft-list__item .ft-item__label{transition:margin-left .3s}.ft-list__item .ft-item__toggle{transition:transform .2s}.ft-list__item .ft-item__label{flex-grow:1}.ft-collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.ft-collapsible-header{font-weight:500}.ft-collapsible-header>div{display:flex;align-items:center;flex-grow:1}.ft-collapsible-header.ft-show .ft-item__toggle{transform:rotate(90deg)}.ft-collapsible:not(.ft-show){max-height:0;background-color:transparent}.ft-header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"] }]
661
- }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { change: [{
662
- type: Output
663
- }], iconCollection: [{
664
- type: Input
665
- }], iconNameField: [{
666
- type: Input
667
- }], iconPath: [{
668
- type: Input
669
- }], labelField: [{
670
- type: Input
671
- }], items: [{
672
- type: Input
673
- }], class: [{
674
- type: Input
675
- }], hostClasses: [{
676
- type: HostBinding,
677
- args: ['class']
678
- }] } });
679
-
680
- class NavbarComponent {
681
- constructor(router) {
682
- this.router = router;
683
- this.iconNameField = 'iconName';
684
- this.labelField = 'label';
685
- this.labelPlacement = 'auto';
686
- this.position = 'auto';
687
- this.class = '';
688
- }
689
- get hostClasses() {
690
- return [
691
- 'ft-navbar',
692
- this.class,
693
- this.position
694
- ].join(' ');
695
- }
696
- ;
697
- ngOnInit() { }
698
- getComponentType(item) {
699
- let type = 'text';
700
- if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
701
- type = 'button';
702
- }
703
- else {
704
- type = 'link';
705
- }
706
- return type;
707
- }
708
- setItem(item) {
709
- if (item.url) {
710
- if (item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
711
- window.location.href = item.url;
712
- }
713
- }
714
- else if (item.click) {
715
- item.click();
716
- }
717
- }
718
- toggleCollapsible(action) {
719
- action.metadata.show = !action.metadata.show;
720
- }
721
- trackByItem(index, item) {
722
- return `${item.label} ${item.url}`;
723
- }
724
- }
725
- NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
726
- NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavbarComponent, selector: "ft-navbar", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", labelField: "labelField", labelPlacement: "labelPlacement", items: "items", position: "position", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n <div class=\"item\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", styles: [":host{--min-width: 4rem;--min-height: 3.5rem;--background-color: #FFF;--background-color-hover: rgba(0, 0, 0, .1);--background-color-active: rgba(0, 0, 0, .1);--text-color: #333;--text-color-hover: #333;--text-color-active: #FFF;background-color:var(--background-color);position:fixed;transition:transform .3s ease-in-out,width .3s,color .3s,background-color .3s;z-index:var(--z-index, 990);font-size:.875rem;display:flex}@media (min-width: 576px){:host{--min-width: 13.75rem}}:host.left,:host.right{top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width)}:host.left{left:0}:host.right{right:0}:host.bottom,:host.top{left:0;right:0;min-height:var(--min-height)}:host.bottom .list,:host.top .list{display:flex}:host.bottom .list__item,:host.top .list__item{flex-grow:1;justify-content:center}:host.bottom{bottom:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f}:host.top{top:0;box-shadow:0 0 1px #00000024,0 1px 3px #0000001f}@media (min-width: 768px){:host.auto{left:0;top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width);flex-direction:column}}@media (max-width: 767.98px){:host.auto{bottom:0;left:0;right:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f;min-height:var(--min-height)}:host.auto .list{display:flex}}.list{display:block;flex-grow:1;overflow:auto}.list__item{border:0;box-sizing:border-box;color:var(--text-color);cursor:pointer;outline:none;transition:background-color .3s,color .3s;display:flex;align-items:center;padding:.75rem 1rem;width:100%}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){background:var(--hover-background-color);color:var(--hover-text-color)}.list__item.active{background:var(--active-background-color);color:var(--active-text-color)}.list__item.left{justify-content:flex-start}.list__item.left .item__icon{margin-right:.5rem}.list__item.right{justify-content:flex-end}.list__item.right .item{flex-direction:row-reverse}.list__item.right .item__icon{margin-left:.5rem}.list__item.top{justify-content:center;flex-grow:1;padding:.5rem}.list__item.top .item{flex-direction:column-reverse}.list__item.bottom{justify-content:center;flex-grow:1;padding:.5rem}.list__item.bottom .item{flex-direction:column}@media (min-width: 768px){.list__item.auto .item{flex-direction:row}.list__item.auto .item__icon{margin-right:.5rem}}@media (max-width: 767.98px){.list__item.auto{justify-content:center;flex-grow:1;padding:.5rem}.list__item.auto .item{flex-direction:column;font-size:.6875rem}}.list__item .item{display:flex;align-items:center}.list__item .item__icon{font-size:1.5rem}.list__item .item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
727
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavbarComponent, decorators: [{
728
- type: Component,
729
- args: [{ selector: 'ft-navbar', template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n <div class=\"item\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", styles: [":host{--min-width: 4rem;--min-height: 3.5rem;--background-color: #FFF;--background-color-hover: rgba(0, 0, 0, .1);--background-color-active: rgba(0, 0, 0, .1);--text-color: #333;--text-color-hover: #333;--text-color-active: #FFF;background-color:var(--background-color);position:fixed;transition:transform .3s ease-in-out,width .3s,color .3s,background-color .3s;z-index:var(--z-index, 990);font-size:.875rem;display:flex}@media (min-width: 576px){:host{--min-width: 13.75rem}}:host.left,:host.right{top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width)}:host.left{left:0}:host.right{right:0}:host.bottom,:host.top{left:0;right:0;min-height:var(--min-height)}:host.bottom .list,:host.top .list{display:flex}:host.bottom .list__item,:host.top .list__item{flex-grow:1;justify-content:center}:host.bottom{bottom:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f}:host.top{top:0;box-shadow:0 0 1px #00000024,0 1px 3px #0000001f}@media (min-width: 768px){:host.auto{left:0;top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width);flex-direction:column}}@media (max-width: 767.98px){:host.auto{bottom:0;left:0;right:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f;min-height:var(--min-height)}:host.auto .list{display:flex}}.list{display:block;flex-grow:1;overflow:auto}.list__item{border:0;box-sizing:border-box;color:var(--text-color);cursor:pointer;outline:none;transition:background-color .3s,color .3s;display:flex;align-items:center;padding:.75rem 1rem;width:100%}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){background:var(--hover-background-color);color:var(--hover-text-color)}.list__item.active{background:var(--active-background-color);color:var(--active-text-color)}.list__item.left{justify-content:flex-start}.list__item.left .item__icon{margin-right:.5rem}.list__item.right{justify-content:flex-end}.list__item.right .item{flex-direction:row-reverse}.list__item.right .item__icon{margin-left:.5rem}.list__item.top{justify-content:center;flex-grow:1;padding:.5rem}.list__item.top .item{flex-direction:column-reverse}.list__item.bottom{justify-content:center;flex-grow:1;padding:.5rem}.list__item.bottom .item{flex-direction:column}@media (min-width: 768px){.list__item.auto .item{flex-direction:row}.list__item.auto .item__icon{margin-right:.5rem}}@media (max-width: 767.98px){.list__item.auto{justify-content:center;flex-grow:1;padding:.5rem}.list__item.auto .item{flex-direction:column;font-size:.6875rem}}.list__item .item{display:flex;align-items:center}.list__item .item__icon{font-size:1.5rem}.list__item .item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
730
- }], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { iconCollection: [{
731
- type: Input
732
- }], iconNameField: [{
733
- type: Input
734
- }], labelField: [{
735
- type: Input
736
- }], labelPlacement: [{
737
- type: Input
738
- }], items: [{
739
- type: Input
740
- }], position: [{
741
- type: Input
742
- }], class: [{
743
- type: Input
744
- }], hostClasses: [{
745
- type: HostBinding,
746
- args: ['class']
747
- }] } });
748
-
749
- class SearchboxComponent {
750
- constructor() {
751
- this.execute = new EventEmitter();
752
- this.showChange = new EventEmitter();
753
- this.class = '';
754
- this.onChange = (_) => { };
755
- this.onTouched = (_) => { };
756
- }
757
- get hostClasses() {
758
- return [
759
- 'ft-searchbox',
760
- this.class,
761
- this.shown ? 'show' : ''
762
- ].join(' ');
763
- }
764
- ;
765
- set show(value) {
766
- this.shown = value;
767
- if (value) {
768
- setTimeout(() => {
769
- this.getNativeElement().focus();
770
- }, 300);
771
- }
772
- }
773
- set value(value) {
774
- this._value = value || '';
775
- this.getNativeElement().value = this._value;
776
- this.onChange(this._value);
777
- this.onTouched(this._value);
778
- }
779
- get value() {
780
- return this._value;
781
- }
782
- ngOnInit() {
783
- }
784
- closeSearch() {
785
- this.showChange.emit(false);
786
- }
787
- getNativeElement() {
788
- const input = this.placeholder ? this.inputPlaceholder : this.input;
789
- return input.nativeElement;
790
- }
791
- registerOnChange(fn) {
792
- this.onChange = fn;
793
- }
794
- registerOnTouched(fn) {
795
- this.onTouched = fn;
796
- }
797
- setDisabledState(isDisabled) {
798
- this.disabled = isDisabled;
799
- }
800
- onSearch(event) {
801
- event.preventDefault();
802
- this.getNativeElement().value = '';
803
- this.execute.emit(this._value);
804
- }
805
- updateValue(event) {
806
- this.value = event.target.value;
807
- }
808
- writeValue(value) {
809
- this.value = value;
810
- }
811
- }
812
- SearchboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SearchboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
813
- SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SearchboxComponent, selector: "ft-searchbox", inputs: { placeholder: "placeholder", class: "class", show: "show", value: "value" }, outputs: { execute: "execute", showChange: "showChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [
814
- {
815
- provide: NG_VALUE_ACCESSOR,
816
- useExisting: forwardRef(() => SearchboxComponent),
817
- multi: true
818
- }
819
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputPlaceholder", first: true, predicate: ["inputPlaceholder"], descendants: true }], ngImport: i0, template: "<form (submit)=\"onSearch($event)\" class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n <div class=\"d-flex align-items-center\">\n <button type=\"button\" mat-icon-button class=\"p-2 mr-2\" (click)=\"closeSearch()\">\n <ft-icon name=\"arrow-left\" size=\"2\"></ft-icon>\n </button>\n <input\n #input\n type=\"search\"\n matInput\n class=\"flex-grow-1\"\n i18n-placeholder\n placeholder=\"Search criteria\"\n [disabled]=\"disabled\"\n (change)=\"updateValue($event)\"\n (keyup)=\"updateValue($event)\"\n *ngIf=\"!placeholder\"\n />\n <input\n #inputPlaceholder\n type=\"search\"\n matInput\n class=\"flex-grow-1\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (change)=\"updateValue($event)\"\n (keyup)=\"updateValue($event)\"\n *ngIf=\"placeholder\"\n />\n <button type=\"submit\" mat-icon-button class=\"p-2 ml-2\">\n <ft-icon name=\"search\" size=\"2\"></ft-icon>\n </button>\n </div>\n </form>\n ", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);display:block;transition:background-color .2s,box-shadow .2s;position:sticky;top:-1px;margin-top:-3.5rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}:host.show{opacity:1;visibility:visible}@media (min-width: 576px){:host{margin-top:-4.5rem}}@media (min-width: 768px){:host{top:-2rem;margin-top:-6.5rem}}:host button{min-width:0;line-height:inherit}:host input{border:0;background-color:transparent}:host input:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
820
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SearchboxComponent, decorators: [{
821
- type: Component,
822
- args: [{ selector: 'ft-searchbox', providers: [
823
- {
824
- provide: NG_VALUE_ACCESSOR,
825
- useExisting: forwardRef(() => SearchboxComponent),
826
- multi: true
827
- }
828
- ], template: "<form (submit)=\"onSearch($event)\" class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n <div class=\"d-flex align-items-center\">\n <button type=\"button\" mat-icon-button class=\"p-2 mr-2\" (click)=\"closeSearch()\">\n <ft-icon name=\"arrow-left\" size=\"2\"></ft-icon>\n </button>\n <input\n #input\n type=\"search\"\n matInput\n class=\"flex-grow-1\"\n i18n-placeholder\n placeholder=\"Search criteria\"\n [disabled]=\"disabled\"\n (change)=\"updateValue($event)\"\n (keyup)=\"updateValue($event)\"\n *ngIf=\"!placeholder\"\n />\n <input\n #inputPlaceholder\n type=\"search\"\n matInput\n class=\"flex-grow-1\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (change)=\"updateValue($event)\"\n (keyup)=\"updateValue($event)\"\n *ngIf=\"placeholder\"\n />\n <button type=\"submit\" mat-icon-button class=\"p-2 ml-2\">\n <ft-icon name=\"search\" size=\"2\"></ft-icon>\n </button>\n </div>\n </form>\n ", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);display:block;transition:background-color .2s,box-shadow .2s;position:sticky;top:-1px;margin-top:-3.5rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}:host.show{opacity:1;visibility:visible}@media (min-width: 576px){:host{margin-top:-4.5rem}}@media (min-width: 768px){:host{top:-2rem;margin-top:-6.5rem}}:host button{min-width:0;line-height:inherit}:host input{border:0;background-color:transparent}:host input:focus{outline:none}\n"] }]
829
- }], ctorParameters: function () { return []; }, propDecorators: { input: [{
830
- type: ViewChild,
831
- args: ['input', { static: false }]
832
- }], inputPlaceholder: [{
833
- type: ViewChild,
834
- args: ['inputPlaceholder', { static: false }]
835
- }], placeholder: [{
836
- type: Input
837
- }], execute: [{
838
- type: Output
839
- }], showChange: [{
840
- type: Output
841
- }], class: [{
842
- type: Input
843
- }], hostClasses: [{
844
- type: HostBinding,
845
- args: ['class']
846
- }], show: [{
847
- type: Input
848
- }], value: [{
849
- type: Input
850
- }] } });
851
-
852
- class ToolbarComponent {
853
- constructor() {
854
- this.rootMargin = { rootMargin: '0px 0px 0px 0px' };
855
- this.class = '';
856
- const breakpointSm = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm'));
857
- if (window.innerWidth < breakpointSm) {
858
- this.rootMargin = { rootMargin: '0px 0px 0px 0px' };
859
- }
860
- }
861
- get hostClasses() {
862
- return [
863
- 'ft-toolbar',
864
- this.class,
865
- this.overlapped ? 'overlapped' : ''
866
- ].join(' ');
867
- }
868
- ;
869
- ngOnInit() {
870
- if (this.titleOptions && !this.currentTitleOption) {
871
- this.currentTitleOption = this.titleOptions[0];
872
- }
873
- }
874
- setOverlapped(overlapped) {
875
- this.overlapped = !overlapped;
876
- }
877
- }
878
- ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
879
- ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToolbarComponent, selector: "ft-toolbar", inputs: { actionOptions: "actionOptions", currentTitleOption: "currentTitleOption", title: "title", titleOptions: "titleOptions", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div (ftObserveIntersecting)=\"setOverlapped($event)\" [ftObserveIntersectingOptions]=\"rootMargin\"></div>\n<div class=\"content\">\n <div class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n <div class=\"d-flex align-items-center\">\n <h5 class=\"title ml-2 ml-md-0 mb-0 mr-auto\" *ngIf=\"!titleOptions; else titleForm\">{{ title }}</h5>\n <ng-container *ngFor=\"let option of actionOptions\">\n <button type=\"button\" class=\"p-2\" mat-button [ngClass]=\"option.class || ''\" *ngIf=\"!option.children\" (click)=\"option.click ? option.click($event) : null\" title=\"{{ option.label }}\">\n <div class=\"d-flex align-items-center\">\n <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n </div>\n </button>\n <ng-container *ngIf=\"option.children\">\n <button type=\"button\" class=\"p-2\" mat-button [matMenuTriggerFor]=\"menu\" [ngClass]=\"option.class || ''\" title=\"{{ option.label }}\">\n <div class=\"d-flex align-items-center\">\n <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n </div>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item *ngFor=\"let childOption of option.children\" (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label }}</button>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n<ng-template #titleForm>\n <button type=\"button\" class=\"title p-2 pl-3 mr-auto\" mat-button [matMenuTriggerFor]=\"titleMenu\">\n <div class=\"d-flex align-items-center\">\n <div class=\"label mr-1\">{{ currentTitleOption.label }}</div>\n <ft-icon name=\"angle-down\" size=\"1\"></ft-icon>\n </div>\n </button>\n <mat-menu #titleMenu=\"matMenu\">\n <button class=\"mr-4\" mat-menu-item [disabled]=\"option == currentTitleOption\" *ngFor=\"let option of titleOptions\" (click)=\"currentTitleOption = option; option.click ? option.click($event) : null\">\n <div class=\"d-flex align-items-center\">\n <ft-icon [name]=\"option == currentTitleOption? 'check' : ''\" class=\"mr-1\"></ft-icon>\n <div>{{ option.label }}</div>\n </div>\n </button>\n </mat-menu>\n</ng-template>\n", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);transition:background-color .2s,box-shadow .2s;display:block;position:sticky;top:-1px}:host.overlapped{box-shadow:0 0 1px #00000024,0 0 6px #0000001f}@media (min-width: 768px){:host{top:-2rem}}.content button{min-width:0}.content button .label{line-height:initial}.content .title{font-size:1.21rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: ObserveIntersectingDirective, selector: "[ftObserveIntersecting]", inputs: ["ftObserveIntersectingOptions"], outputs: ["ftObserveIntersecting"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
880
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToolbarComponent, decorators: [{
881
- type: Component,
882
- args: [{ selector: 'ft-toolbar', template: "<div (ftObserveIntersecting)=\"setOverlapped($event)\" [ftObserveIntersectingOptions]=\"rootMargin\"></div>\n<div class=\"content\">\n <div class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n <div class=\"d-flex align-items-center\">\n <h5 class=\"title ml-2 ml-md-0 mb-0 mr-auto\" *ngIf=\"!titleOptions; else titleForm\">{{ title }}</h5>\n <ng-container *ngFor=\"let option of actionOptions\">\n <button type=\"button\" class=\"p-2\" mat-button [ngClass]=\"option.class || ''\" *ngIf=\"!option.children\" (click)=\"option.click ? option.click($event) : null\" title=\"{{ option.label }}\">\n <div class=\"d-flex align-items-center\">\n <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n </div>\n </button>\n <ng-container *ngIf=\"option.children\">\n <button type=\"button\" class=\"p-2\" mat-button [matMenuTriggerFor]=\"menu\" [ngClass]=\"option.class || ''\" title=\"{{ option.label }}\">\n <div class=\"d-flex align-items-center\">\n <ft-icon *ngIf=\"option.iconName\" [name]=\"option.iconName\" size=\"2\"></ft-icon>\n <div *ngIf=\"option.label\" class=\"label d-none d-sm-inline-block ml-1\">{{ option.label }}</div>\n </div>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item *ngFor=\"let childOption of option.children\" (click)=\"childOption.click ? childOption.click($event): null\">{{ childOption.label }}</button>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n<ng-template #titleForm>\n <button type=\"button\" class=\"title p-2 pl-3 mr-auto\" mat-button [matMenuTriggerFor]=\"titleMenu\">\n <div class=\"d-flex align-items-center\">\n <div class=\"label mr-1\">{{ currentTitleOption.label }}</div>\n <ft-icon name=\"angle-down\" size=\"1\"></ft-icon>\n </div>\n </button>\n <mat-menu #titleMenu=\"matMenu\">\n <button class=\"mr-4\" mat-menu-item [disabled]=\"option == currentTitleOption\" *ngFor=\"let option of titleOptions\" (click)=\"currentTitleOption = option; option.click ? option.click($event) : null\">\n <div class=\"d-flex align-items-center\">\n <ft-icon [name]=\"option == currentTitleOption? 'check' : ''\" class=\"mr-1\"></ft-icon>\n <div>{{ option.label }}</div>\n </div>\n </button>\n </mat-menu>\n</ng-template>\n", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);transition:background-color .2s,box-shadow .2s;display:block;position:sticky;top:-1px}:host.overlapped{box-shadow:0 0 1px #00000024,0 0 6px #0000001f}@media (min-width: 768px){:host{top:-2rem}}.content button{min-width:0}.content button .label{line-height:initial}.content .title{font-size:1.21rem;font-weight:500}\n"] }]
883
- }], ctorParameters: function () { return []; }, propDecorators: { actionOptions: [{
884
- type: Input
885
- }], currentTitleOption: [{
886
- type: Input
887
- }], title: [{
888
- type: Input
889
- }], titleOptions: [{
890
- type: Input
891
- }], class: [{
892
- type: Input
893
- }], hostClasses: [{
894
- type: HostBinding,
895
- args: ['class']
896
- }] } });
897
-
898
- class NavigationModule {
899
- }
900
- NavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
901
- NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, declarations: [ListComponent,
902
- NavbarComponent,
903
- ToolbarComponent,
904
- SearchboxComponent], imports: [CommonModule,
905
- DisplayModule,
906
- RouterModule,
907
- MatMenuModule,
908
- MatButtonModule], exports: [ListComponent,
909
- NavbarComponent,
910
- ToolbarComponent,
911
- SearchboxComponent] });
912
- NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, imports: [CommonModule,
913
- DisplayModule,
914
- RouterModule,
915
- MatMenuModule,
916
- MatButtonModule] });
917
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavigationModule, decorators: [{
918
- type: NgModule,
919
- args: [{
920
- declarations: [
921
- ListComponent,
922
- NavbarComponent,
923
- ToolbarComponent,
924
- SearchboxComponent
925
- ],
926
- exports: [
927
- ListComponent,
928
- NavbarComponent,
929
- ToolbarComponent,
930
- SearchboxComponent
931
- ],
932
- imports: [
933
- CommonModule,
934
- DisplayModule,
935
- RouterModule,
936
- MatMenuModule,
937
- MatButtonModule
938
- ]
939
- }]
940
- }] });
941
-
942
- class UiModule {
943
- static forRoot(configuration) {
944
- return {
945
- ngModule: UiModule,
946
- providers: [
947
- { provide: 'FactorUiConfiguration', useValue: configuration }
948
- ]
949
- };
950
- }
951
- }
952
- UiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
953
- UiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: UiModule, imports: [CommonModule,
954
- DisplayModule,
955
- InputsModule,
956
- NavigationModule], exports: [DisplayModule,
957
- InputsModule,
958
- NavigationModule] });
959
- UiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, imports: [CommonModule,
960
- DisplayModule,
961
- InputsModule,
962
- NavigationModule, DisplayModule,
963
- InputsModule,
964
- NavigationModule] });
965
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, decorators: [{
966
- type: NgModule,
967
- args: [{
968
- declarations: [],
969
- imports: [
970
- CommonModule,
971
- DisplayModule,
972
- InputsModule,
973
- NavigationModule
974
- ],
975
- exports: [
976
- DisplayModule,
977
- InputsModule,
978
- NavigationModule
979
- ]
980
- }]
981
- }] });
982
-
983
- /*
984
- * Public API Surface of ui
985
- */
986
-
987
- /**
988
- * Generated bundle index. Do not edit.
989
- */
990
-
991
- export { AvatarComponent, ContentComponent, DisplayModule, IconComponent, ImageComponent, InputsModule, ListComponent, MessageComponent, MessageService, NavbarComponent, NavigationModule, ObserveIntersectingDirective, ProgressComponent, ProgressService, RatingComponent, SearchboxComponent, ToolbarComponent, UiModule };
992
- //# sourceMappingURL=factor_ec-ui.mjs.map