@webilix/ngx-helper-m3 0.0.3 → 0.0.5

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 (17) hide show
  1. package/fesm2022/webilix-ngx-helper-m3.mjs +134 -83
  2. package/fesm2022/webilix-ngx-helper-m3.mjs.map +1 -1
  3. package/lib/components/card/ngx-helper-card.component.d.ts +46 -0
  4. package/lib/components/card/ngx-helper-card.interface.d.ts +16 -0
  5. package/lib/components/component.service.d.ts +2 -4
  6. package/lib/components/page-group/ngx-helper-page-group.component.d.ts +1 -4
  7. package/lib/components/page-group/ngx-helper-page-group.interface.d.ts +1 -2
  8. package/lib/components/section/ngx-helper-section-sticky.directive.d.ts +1 -0
  9. package/lib/components/section/ngx-helper-section.component.d.ts +3 -5
  10. package/lib/confirm/bottom-sheet/confirm-bottom-sheet.component.d.ts +1 -0
  11. package/lib/confirm/dialog/confirm-dialog.component.d.ts +1 -0
  12. package/lib/container/bottom-sheet/container-bottom-sheet.component.d.ts +1 -0
  13. package/lib/container/dialog/container-dialog.component.d.ts +1 -0
  14. package/lib/ngx-helper.config.d.ts +1 -7
  15. package/ngx-helper-m3.css +275 -0
  16. package/package.json +1 -1
  17. package/public-api.d.ts +2 -0
package/lib/components/section/ngx-helper-section.component.d.ts CHANGED
@@ -1,19 +1,17 @@
1
1
  import { OnInit } from '@angular/core';
2
2
  import { INgxHelperConfig } from '../../ngx-helper.config';
3
- import { ComponentService, IComponentConfig } from '../component.service';
3
+ import { ComponentService } from '../component.service';
4
4
  import * as i0 from "@angular/core";
5
5
  export declare class NgxHelperSectionComponent implements OnInit {
6
6
  private readonly componentService;
7
7
  private readonly config?;
8
8
  private gap;
9
- private backgroundColor;
10
9
  gapSize?: string;
11
- mobileView?: boolean;
10
+ private componentConfig;
12
11
  isMobile: boolean;
13
- componentConfig: IComponentConfig;
14
12
  constructor(componentService: ComponentService, config?: Partial<INgxHelperConfig> | undefined);
15
13
  ngOnInit(): void;
16
14
  onResize(): void;
17
15
  static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperSectionComponent, [null, { optional: true; }]>;
18
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperSectionComponent, "ngx-helper-section", never, { "gapSize": { "alias": "gapSize"; "required": false; }; "mobileView": { "alias": "mobileView"; "required": false; }; }, {}, never, ["*"], true, never>;
16
+ static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperSectionComponent, "ngx-helper-section", never, { "gapSize": { "alias": "gapSize"; "required": false; }; }, {}, never, ["*"], true, never>;
19
17
  }
package/lib/confirm/bottom-sheet/confirm-bottom-sheet.component.d.ts CHANGED
@@ -3,6 +3,7 @@ import { INgxHelperConfirm } from '../confirm.interface';
3
3
  import * as i0 from "@angular/core";
4
4
  export declare class ConfirmBottomSheetComponent {
5
5
  private readonly matBottomSheetRef;
6
+ private className;
6
7
  confirm: INgxHelperConfirm;
7
8
  constructor(matBottomSheetRef: MatBottomSheetRef<ConfirmBottomSheetComponent>);
8
9
  close(confirmed?: boolean): void;
package/lib/confirm/dialog/confirm-dialog.component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { INgxHelperConfirm } from '../confirm.interface';
2
2
  import * as i0 from "@angular/core";
3
3
  export declare class ConfirmDialogComponent {
4
+ private className;
4
5
  confirm: INgxHelperConfirm;
5
6
  static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmDialogComponent, never>;
6
7
  static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmDialogComponent, "ng-component", never, {}, {}, never, never, true, never>;
package/lib/container/bottom-sheet/container-bottom-sheet.component.d.ts CHANGED
@@ -5,6 +5,7 @@ import { INgxHelperContainerConfig } from '../container.interface';
5
5
  import * as i0 from "@angular/core";
6
6
  export declare class ContainerBottomSheetComponent implements OnInit {
7
7
  private readonly matBottomSheetRef;
8
+ private className;
8
9
  container: {
9
10
  component: ComponentType<any>;
10
11
  readonly title: string;
package/lib/container/dialog/container-dialog.component.d.ts CHANGED
@@ -5,6 +5,7 @@ import { INgxHelperContainerConfig } from '../container.interface';
5
5
  import * as i0 from "@angular/core";
6
6
  export declare class ContainerDialogComponent implements OnInit {
7
7
  private readonly matDialogRef;
8
+ private className;
8
9
  container: {
9
10
  component: ComponentType<any>;
10
11
  readonly title: string;
package/lib/ngx-helper.config.d.ts CHANGED
@@ -1,13 +1,7 @@
1
1
  import { EnvironmentProviders, InjectionToken } from '@angular/core';
2
2
  export interface INgxHelperConfig {
3
3
  readonly mobileWidth: number;
4
- readonly sidebarWidth: string;
5
- readonly colors: {
6
- readonly border?: string;
7
- readonly background?: string;
8
- readonly highlightText?: string;
9
- readonly highlightBackground?: string;
10
- };
4
+ readonly pageGroupSidebarWidth: string;
11
5
  readonly stickyView: {
12
6
  readonly top?: string | {
13
7
  readonly desktopView: string;
package/ngx-helper-m3.css ADDED
@@ -0,0 +1,275 @@
1
+ /* GLOBAL VALUES */
2
+ :root {
3
+ --ngx-helper-m3-font-small: 90%;
4
+ --ngx-helper-m3-font-large: 110%;
5
+
6
+ --ngx-helper-m3-toolbar-height: 40px;
7
+ }
8
+
9
+ /* NGX HELPER CONFIRM */
10
+ .ngx-helper-m3-confirm {
11
+ display: block;
12
+ margin: 1.5rem 1.5rem 1rem 1.5rem;
13
+
14
+ content {
15
+ display: flex;
16
+ align-items: flex-start;
17
+ column-gap: 1rem;
18
+
19
+ mat-icon {
20
+ font-size: 200%;
21
+ }
22
+
23
+ .confirm {
24
+ flex: 1;
25
+
26
+ .question {
27
+ text-align: justify;
28
+ }
29
+
30
+ .description {
31
+ text-align: justify;
32
+ font-size: var(--ngx-helper-m3-font-small);
33
+ }
34
+
35
+ .data {
36
+ display: flex;
37
+ align-items: center;
38
+ column-gap: 1rem;
39
+ font-size: var(--ngx-helper-m3-font-small);
40
+ margin-top: 1rem;
41
+ }
42
+ }
43
+ }
44
+
45
+ footer {
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: flex-end;
49
+ column-gap: 1rem;
50
+ margin-top: 1rem;
51
+ }
52
+ }
53
+
54
+ /* NGX HELPER CONTAINER */
55
+ .ngx-helper-m3-container {
56
+ display: block;
57
+ max-height: 80vh;
58
+ overflow: hidden;
59
+
60
+ header {
61
+ display: flex;
62
+ align-items: center;
63
+
64
+ height: 65px;
65
+ line-height: 65px;
66
+ font-size: var(--ngx-helper-m3-font-large);
67
+ padding: 0 0.5rem;
68
+ border-bottom: 1px solid var(--outline-variant);
69
+ background-color: var(--surface-container);
70
+
71
+ .title {
72
+ flex: 1;
73
+ padding-right: 0.5rem;
74
+ }
75
+ }
76
+
77
+ content {
78
+ display: block;
79
+ max-height: calc(80vh - 67px);
80
+ overflow: auto;
81
+ box-sizing: border-box;
82
+ }
83
+ }
84
+
85
+ /* NGX HELPER PAGE GROUP */
86
+ .ngx-helper-m3-page-group {
87
+ direction: rtl;
88
+ display: flex;
89
+ align-items: flex-start;
90
+ column-gap: 1rem;
91
+
92
+ aside {
93
+ display: flex;
94
+ flex-direction: column;
95
+ row-gap: 1rem;
96
+
97
+ box-sizing: border-box;
98
+ padding: 1rem;
99
+ background-color: var(--surface-container-high);
100
+
101
+ .page {
102
+ display: flex;
103
+ align-items: center;
104
+ column-gap: 0.5rem;
105
+
106
+ padding: 0.5rem 0.75rem;
107
+ transition: all 0.3s ease-in-out;
108
+
109
+ .title {
110
+ flex: 1;
111
+
112
+ white-space: nowrap;
113
+ overflow: hidden;
114
+ text-overflow: ellipsis;
115
+ }
116
+
117
+ mat-icon {
118
+ font-size: 120%;
119
+ }
120
+ }
121
+
122
+ .active {
123
+ border-radius: 4px;
124
+ color: var(--on-primary);
125
+ background-color: var(--primary);
126
+ }
127
+ }
128
+
129
+ content {
130
+ flex: 1;
131
+ display: block;
132
+
133
+ header {
134
+ background-color: var(--background);
135
+
136
+ .spacer {
137
+ z-index: 2;
138
+ height: 1rem;
139
+ width: 100%;
140
+ }
141
+ }
142
+ }
143
+ }
144
+
145
+ .ngx-helper-m3-page-group.mobile-view {
146
+ flex-direction: column;
147
+ column-gap: 0;
148
+
149
+ nav {
150
+ display: flex;
151
+ align-items: center;
152
+
153
+ box-sizing: border-box;
154
+ background-color: var(--surface-container-high);
155
+ height: calc(var(--ngx-helper-m3-toolbar-height));
156
+ overflow: hidden;
157
+ width: 100%;
158
+ z-index: 2;
159
+
160
+ .page {
161
+ display: flex;
162
+ align-items: center;
163
+ column-gap: 0.25rem;
164
+
165
+ padding: 0 1rem;
166
+ height: var(--ngx-helper-m3-toolbar-height);
167
+ transition: all 0.3s ease-in-out;
168
+
169
+ .title {
170
+ flex: 1;
171
+ font-size: var(--ngx-helper-m3-font-small);
172
+ white-space: nowrap;
173
+ overflow: hidden;
174
+ text-overflow: ellipsis;
175
+ }
176
+ }
177
+
178
+ .active {
179
+ flex: 1;
180
+ width: 0;
181
+ color: var(--on-primary);
182
+ background-color: var(--primary);
183
+
184
+ mat-icon {
185
+ font-size: 120%;
186
+ }
187
+ }
188
+ }
189
+
190
+ .toolbar-spacer {
191
+ height: 1rem;
192
+ width: 100%;
193
+ background-color: var(--background);
194
+ }
195
+
196
+ content {
197
+ flex: none;
198
+ width: 100%;
199
+ }
200
+ }
201
+
202
+ /* NGX HELPER CARD */
203
+ .ngx-helper-m3-card {
204
+ display: block;
205
+ direction: rtl;
206
+
207
+ border-radius: 8px;
208
+ border: 1px solid var(--outline-variant);
209
+
210
+ header {
211
+ display: flex;
212
+ align-items: center;
213
+ column-gap: 0.5rem;
214
+
215
+ height: 50px;
216
+ line-height: 50px;
217
+ font-size: var(--ngx-helper-m3-font-large);
218
+ padding-right: 1rem;
219
+ border-radius: 8px 8px 0 0;
220
+ border-bottom: 1px solid var(--outline-variant);
221
+ background-color: var(--surface-container-high);
222
+
223
+ mat-icon {
224
+ font-size: 120%;
225
+ }
226
+
227
+ .content {
228
+ flex: 1;
229
+ }
230
+
231
+ .buttons {
232
+ display: flex;
233
+ align-items: center;
234
+ column-gap: 0.5rem;
235
+ padding-left: 0.5rem;
236
+
237
+ button {
238
+ display: flex;
239
+ justify-content: center;
240
+ column-gap: 0.25rem;
241
+
242
+ padding: 0 0.75rem;
243
+ min-width: auto;
244
+ height: 50px;
245
+
246
+ .title {
247
+ font-size: var(--ngx-helper-m3-font-small);
248
+ }
249
+
250
+ mat-icon {
251
+ padding: 0;
252
+ margin: 0;
253
+ font-size: 120%;
254
+ line-height: 1;
255
+ }
256
+ }
257
+ }
258
+
259
+ .buttons.mobile-view {
260
+ column-gap: 0;
261
+ padding-left: 0;
262
+
263
+ button {
264
+ padding: 0 0.5rem;
265
+ }
266
+ }
267
+ }
268
+
269
+ content {
270
+ display: block;
271
+ overflow: hidden;
272
+ border-radius: 0 0 8px 8px;
273
+ background-color: var(--surface-container-low);
274
+ }
275
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webilix/ngx-helper-m3",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "author": "Ali Amirnezhad",
5
5
  "description": "Helper library for Angular and Material 3",
6
6
  "repository": {
package/public-api.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  export * from './lib/ngx-helper.config';
2
+ export * from './lib/components/card/ngx-helper-card.component';
3
+ export * from './lib/components/card/ngx-helper-card.interface';
2
4
  export * from './lib/components/page-group/ngx-helper-page-group.component';
3
5
  export * from './lib/components/page-group/ngx-helper-page-group.interface';
4
6
  export * from './lib/components/section/ngx-helper-section-sticky.directive';