@yuuvis/material 2.20.1 → 3.0.0-beta.20.1

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 (50) hide show
  1. package/badge/index.d.ts +53 -1
  2. package/fesm2022/yuuvis-material-badge.mjs +8 -9
  3. package/fesm2022/yuuvis-material-badge.mjs.map +1 -1
  4. package/fesm2022/yuuvis-material-layout.mjs +37 -37
  5. package/fesm2022/yuuvis-material-layout.mjs.map +1 -1
  6. package/fesm2022/yuuvis-material-panes.mjs +48 -48
  7. package/fesm2022/yuuvis-material-panes.mjs.map +1 -1
  8. package/fesm2022/yuuvis-material.mjs +81 -88
  9. package/fesm2022/yuuvis-material.mjs.map +1 -1
  10. package/index.d.ts +358 -4
  11. package/layout/index.d.ts +96 -4
  12. package/package.json +7 -7
  13. package/panes/index.d.ts +300 -9
  14. package/badge/badge.component.d.ts +0 -49
  15. package/badge/model/badge.model.d.ts +0 -1
  16. package/layout/lib/components/master-details-layout/master-details-layout.component.d.ts +0 -49
  17. package/layout/lib/directives/area-cover.directive.d.ts +0 -13
  18. package/layout/lib/directives/layout-pane.directive.d.ts +0 -15
  19. package/layout/lib/layout.interface.d.ts +0 -26
  20. package/layout/lib/layout.module.d.ts +0 -8
  21. package/layout/lib/services/layout.service.d.ts +0 -19
  22. package/lib/assets/i18n/ar.json +0 -22
  23. package/lib/components/datepicker/datepicker-toggle.component.d.ts +0 -21
  24. package/lib/components/datepicker/datepicker.component.d.ts +0 -88
  25. package/lib/components/datepicker/index.d.ts +0 -2
  26. package/lib/components/index.d.ts +0 -1
  27. package/lib/directives/button/index.d.ts +0 -2
  28. package/lib/directives/button/ymt-button.directive.d.ts +0 -18
  29. package/lib/directives/button/ymt-button.model.d.ts +0 -4
  30. package/lib/directives/icon-button/index.d.ts +0 -2
  31. package/lib/directives/icon-button/ymt-icon-button.directive.d.ts +0 -15
  32. package/lib/directives/icon-button/ymt-icon-button.model.d.ts +0 -5
  33. package/lib/directives/index.d.ts +0 -2
  34. package/lib/providers/index.d.ts +0 -1
  35. package/lib/providers/material.providers.d.ts +0 -4
  36. package/lib/services/device.interface.d.ts +0 -15
  37. package/lib/services/device.service.d.ts +0 -147
  38. package/lib/services/index.d.ts +0 -5
  39. package/lib/services/ymt-date-adapter.service.d.ts +0 -25
  40. package/lib/services/ymt-datepicker-intl.service.d.ts +0 -11
  41. package/lib/services/ymt-mat-icon-registry.service.d.ts +0 -13
  42. package/lib/services/ymt-mat-paginator-intl.service.d.ts +0 -12
  43. package/panes/lib/pane/fullscreen.directive.d.ts +0 -37
  44. package/panes/lib/pane/pane-aside/pane-aside.component.d.ts +0 -5
  45. package/panes/lib/pane/pane-body/pane-body.component.d.ts +0 -5
  46. package/panes/lib/pane/pane-footer/pane-footer.component.d.ts +0 -5
  47. package/panes/lib/pane/pane-header/pane-header.component.d.ts +0 -74
  48. package/panes/lib/pane/pane-top-bar/pane-top-bar.component.d.ts +0 -10
  49. package/panes/lib/pane/pane.component.d.ts +0 -168
  50. package/panes/lib/panes.module.d.ts +0 -11
package/panes/index.d.ts CHANGED
@@ -1,9 +1,300 @@
1
- export * from './lib/panes.module';
2
- export * from './lib/pane/pane.component';
3
- export * from './lib/pane/fullscreen.directive';
4
- export * from './lib/pane/pane-header/pane-header.component';
5
- export * from './lib/pane/pane-body/pane-body.component';
6
- export * from './lib/pane/pane-aside/pane-aside.component';
7
- export * from './lib/pane/pane-body/pane-body.component';
8
- export * from './lib/pane/pane-footer/pane-footer.component';
9
- export * from './lib/pane/pane-aside/pane-aside.component';
1
+ import * as _angular_core from '@angular/core';
2
+ import { OnDestroy, TemplateRef } from '@angular/core';
3
+
4
+ /**
5
+ * Directive that enables any host element to toggle into a fullscreen overlay
6
+ * covering the entire viewport. Background content is made inert and body scroll
7
+ * is locked while fullscreen is active.
8
+ *
9
+ * @example
10
+ * ```html
11
+ * <div yuvFullscreen #fs="yuvFullscreen">
12
+ * <button (click)="fs.toggle()">Toggle</button>
13
+ * <p>Content</p>
14
+ * </div>
15
+ * ```
16
+ */
17
+ declare class FullscreenDirective implements OnDestroy {
18
+ #private;
19
+ /** Whether the fullscreen toggle is disabled. */
20
+ disabled: _angular_core.InputSignal<boolean>;
21
+ /** Emitted when fullscreen mode is entered. */
22
+ fullscreenEnter: _angular_core.OutputEmitterRef<void>;
23
+ /** Emitted when fullscreen mode is exited. */
24
+ fullscreenExit: _angular_core.OutputEmitterRef<void>;
25
+ /** Read-only signal indicating whether fullscreen is currently active. */
26
+ active: _angular_core.Signal<boolean>;
27
+ /** Toggle fullscreen on/off. */
28
+ toggle(): void;
29
+ /** Enter fullscreen mode. No-op if already active or disabled. */
30
+ enter(): void;
31
+ /** Exit fullscreen mode. No-op if not active. */
32
+ exit(): void;
33
+ /** @internal */
34
+ onEscape(): void;
35
+ ngOnDestroy(): void;
36
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullscreenDirective, never>;
37
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FullscreenDirective, "[yuvFullscreen]", ["yuvFullscreen"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "fullscreenEnter": "fullscreenEnter"; "fullscreenExit": "fullscreenExit"; }, never, never, true, never>;
38
+ }
39
+
40
+ /**
41
+ * A pane is a container component that unifies the appearance and behavior of
42
+ * content areas in an app. It renders as a bordered, rounded card with a grid
43
+ * layout for its sub-components.
44
+ *
45
+ * ## Structure
46
+ *
47
+ * A pane uses a vertical grid layout with four areas. All sub-components are optional:
48
+ *
49
+ * | Area | Component | Description |
50
+ * |----------|--------------------|----------------------------------------------------|
51
+ * | top-bar | *(internal)* | Rendered automatically when `topBarActions` is set. |
52
+ * | header | `ymt-pane-header` | Title, subtitle, icon, and custom header actions. |
53
+ * | main | `ymt-pane-body` | Scrollable main content area. |
54
+ * | footer | `ymt-pane-footer` | Right-aligned action bar with a top border. |
55
+ *
56
+ * ```html
57
+ * <ymt-pane>
58
+ * <ymt-pane-header title="Users" subtitle="3 selected" [actions]="headerActions" />
59
+ * <ymt-pane-body>Main content</ymt-pane-body>
60
+ * <ymt-pane-footer>
61
+ * <button ymt-button>Save</button>
62
+ * </ymt-pane-footer>
63
+ * </ymt-pane>
64
+ * ```
65
+ *
66
+ * ### `ymt-pane-header`
67
+ *
68
+ * Accepts `title`, `subtitle`, and `icon` as string inputs. For richer content,
69
+ * use the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle` template refs:
70
+ *
71
+ * ```html
72
+ * <ymt-pane-header>
73
+ * <ng-template #yuvPaneHeaderTitle><h2>Custom title</h2></ng-template>
74
+ * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
75
+ * </ymt-pane-header>
76
+ * ```
77
+ *
78
+ * Header actions can be projected via the `[actions]` input (TemplateRef).
79
+ *
80
+ * ### Top bar actions
81
+ *
82
+ * Pass a `TemplateRef` to the `[topBarActions]` input to render icon buttons
83
+ * in a slim top bar above the header:
84
+ *
85
+ * ```html
86
+ * <ymt-pane [topBarActions]="actions">
87
+ * <ymt-pane-body>Content</ymt-pane-body>
88
+ * </ymt-pane>
89
+ *
90
+ * <ng-template #actions>
91
+ * <button ymt-icon-button icon-button-size="small"><mat-icon>settings</mat-icon></button>
92
+ * </ng-template>
93
+ * ```
94
+ *
95
+ * ## Fullscreen
96
+ *
97
+ * Every pane supports fullscreen mode. The pane expands to fill the viewport,
98
+ * background content becomes inert, and pressing <kbd>Escape</kbd> exits.
99
+ *
100
+ * ```html
101
+ * <ymt-pane #pane>
102
+ * <ymt-pane-body>
103
+ * <button (click)="pane.toggleFullscreen()">Toggle fullscreen</button>
104
+ * </ymt-pane-body>
105
+ * </ymt-pane>
106
+ * ```
107
+ *
108
+ * Programmatic API: `enterFullscreen()`, `exitFullscreen()`, `toggleFullscreen()`.
109
+ * Read the current state via the `fullscreenActive` signal.
110
+ * Listen to transitions via the `(fullscreenEnter)` and `(fullscreenExit)` outputs.
111
+ *
112
+ * ## Busy state
113
+ *
114
+ * Set `[busy]="true"` to replace the static border with a rotating
115
+ * conic-gradient border that signals a loading state:
116
+ *
117
+ * ```html
118
+ * <ymt-pane [busy]="isLoading()">
119
+ * <ymt-pane-body>Content</ymt-pane-body>
120
+ * </ymt-pane>
121
+ * ```
122
+ *
123
+ * ## Enter animation
124
+ *
125
+ * Panes fade in on creation (0.15 s ease-out by default). Customize or delay
126
+ * the animation via CSS variables, or disable it entirely with the
127
+ * `[noAnimation]` input:
128
+ *
129
+ * ```css
130
+ * ymt-pane {
131
+ * --enter-animation-duration: 0.3s;
132
+ * --enter-animation-delay: 0.1s;
133
+ * }
134
+ * ```
135
+ *
136
+ * ```html
137
+ * <ymt-pane [noAnimation]="true"> ... </ymt-pane>
138
+ * ```
139
+ *
140
+ * ## Plain mode
141
+ *
142
+ * Set `[plain]="true"` to strip the border, border-radius, and background
143
+ * while keeping the inner grid structure. Useful when embedding a pane inside
144
+ * another styled container.
145
+ *
146
+ * ## CSS custom properties
147
+ *
148
+ * | Property | Default | Description |
149
+ * |-------------------------------|-------------------------------|--------------------------------------|
150
+ * | `--header-area-padding` | `var(--ymt-spacing-xl)` | Padding of the header area. |
151
+ * | `--header-area-background` | `transparent` | Background of the header area. |
152
+ * | `--header-area-border-color` | `transparent` | Bottom border of the header area. |
153
+ * | `--main-area-padding` | `0` | Padding of the body area. |
154
+ * | `--pane-background-color` | `var(--ymt-surface)` | Background of the pane. |
155
+ * | `--busy-border-width` | `2px` | Width of the busy indicator border. |
156
+ * | `--busy-border-color` | `var(--ymt-primary)` | Color of the busy indicator border. |
157
+ * | `--enter-animation-duration` | `0.15s` | Duration of the fade-in animation. |
158
+ * | `--enter-animation-delay` | `0s` | Delay before the fade-in starts. |
159
+ */
160
+ declare class YmtPaneComponent {
161
+ #private;
162
+ /**
163
+ * Template for action buttons rendered in the top bar area of the pane.
164
+ * Use `icon-button-size="small"` or `icon-button-size="extra-small"` on icon
165
+ * buttons for proper alignment.
166
+ *
167
+ * ```html
168
+ * <ymt-pane [topBarActions]="actions">
169
+ * <ymt-pane-body>Content</ymt-pane-body>
170
+ * </ymt-pane>
171
+ *
172
+ * <ng-template #actions>
173
+ * <button ymt-icon-button icon-button-size="small"><mat-icon>settings</mat-icon></button>
174
+ * </ng-template>
175
+ * ```
176
+ */
177
+ topBarActions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
178
+ /**
179
+ * When set to true, the pane border will be replaced with an animated
180
+ * conic-gradient border to indicate a busy/loading state.
181
+ */
182
+ busy: _angular_core.InputSignal<boolean>;
183
+ /**
184
+ * Disable the default fade-in enter animation.
185
+ */
186
+ noAnimation: _angular_core.InputSignal<boolean>;
187
+ /**
188
+ * Setting this to true will remove the default styles for the pane. So it will
189
+ * render without border-radius, border and background color, but keep the inner
190
+ * structure. This is useful when you want to use the pane inside another container
191
+ * and want to apply custom styles to the pane.
192
+ */
193
+ plain: _angular_core.InputSignal<boolean>;
194
+ /** Read-only signal indicating whether fullscreen is currently active. */
195
+ fullscreenActive: _angular_core.Signal<boolean>;
196
+ /** Toggle fullscreen mode on/off. */
197
+ toggleFullscreen(): void;
198
+ /** Enter fullscreen mode. */
199
+ enterFullscreen(): void;
200
+ /** Exit fullscreen mode. */
201
+ exitFullscreen(): void;
202
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtPaneComponent, never>;
203
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<YmtPaneComponent, "ymt-pane", never, { "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "noAnimation": { "alias": "noAnimation"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof FullscreenDirective; inputs: {}; outputs: { "fullscreenEnter": "fullscreenEnter"; "fullscreenExit": "fullscreenExit"; }; }]>;
204
+ }
205
+
206
+ /**
207
+ * Header component for `ymt-pane`. Renders a two-row layout:
208
+ *
209
+ * - **Top row:** icon (optional), title, and actions area
210
+ * - **Bottom row:** subtitle and badges area
211
+ *
212
+ * ## Title & Subtitle
213
+ *
214
+ * Can be set as plain strings via the `title` and `subtitle` inputs,
215
+ * or as rich content via the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle`
216
+ * content child templates. When a template is provided it takes precedence
217
+ * over the corresponding string input.
218
+ *
219
+ * ## Icon
220
+ *
221
+ * Set the `icon` input to a Material Icon ligature to display an icon
222
+ * to the left of the title row.
223
+ *
224
+ * ## Actions & Badges
225
+ *
226
+ * Pass a `TemplateRef` to the `actions` input to render action buttons
227
+ * aligned to the right of the title row. Similarly, pass a `TemplateRef`
228
+ * to the `badges` input to render badges aligned to the right of the
229
+ * subtitle row.
230
+ *
231
+ * @example
232
+ * ```html
233
+ * <!-- Simple usage with string inputs -->
234
+ * <ymt-pane-header
235
+ * [title]="'Documents'"
236
+ * [subtitle]="'12 items'"
237
+ * [icon]="'folder'"
238
+ * [actions]="headerActions"
239
+ * [badges]="headerBadges">
240
+ * </ymt-pane-header>
241
+ *
242
+ * <ng-template #headerActions>
243
+ * <button ymt-icon-button icon="add"></button>
244
+ * </ng-template>
245
+ *
246
+ * <ng-template #headerBadges>
247
+ * <ymt-badge severity="info">active</ymt-badge>
248
+ * </ng-template>
249
+ * ```
250
+ *
251
+ * @example
252
+ * ```html
253
+ * <!-- Rich content via template projection -->
254
+ * <ymt-pane-header [icon]="'lock'">
255
+ * <ng-template #yuvPaneHeaderTitle>Custom <strong>title</strong></ng-template>
256
+ * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
257
+ * </ymt-pane-header>
258
+ * ```
259
+ */
260
+ declare class YmtPaneHeaderComponent {
261
+ /** Plain-text title displayed in the top row. Ignored when a `#yuvPaneHeaderTitle` template is projected. */
262
+ title: _angular_core.InputSignal<string | undefined>;
263
+ /** Material Icon ligature rendered to the left of the title row (e.g. `'folder'`, `'lock'`). */
264
+ icon: _angular_core.InputSignal<string | undefined>;
265
+ /** Plain-text subtitle displayed in the bottom row. Ignored when a `#yuvPaneHeaderSubtitle` template is projected. */
266
+ subtitle: _angular_core.InputSignal<string | undefined>;
267
+ /** Template rendered in the actions area, aligned to the right of the title row. */
268
+ actions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
269
+ /** Template rendered in the badges area, aligned to the right of the subtitle row. */
270
+ badges: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
271
+ /** Content child template for rich title content. Takes precedence over the `title` input. */
272
+ titleSlot: _angular_core.Signal<TemplateRef<unknown> | undefined>;
273
+ /** Content child template for rich subtitle content. Takes precedence over the `subtitle` input. */
274
+ subtitleSlot: _angular_core.Signal<TemplateRef<unknown> | undefined>;
275
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtPaneHeaderComponent, never>;
276
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<YmtPaneHeaderComponent, "ymt-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "badges": { "alias": "badges"; "required": false; "isSignal": true; }; }, {}, ["titleSlot", "subtitleSlot"], never, true, never>;
277
+ }
278
+
279
+ declare class YmtPaneBodyComponent {
280
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtPaneBodyComponent, never>;
281
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<YmtPaneBodyComponent, "ymt-pane-body", never, {}, {}, never, ["*"], true, never>;
282
+ }
283
+
284
+ declare class YmtPaneFooterComponent {
285
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtPaneFooterComponent, never>;
286
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<YmtPaneFooterComponent, "ymt-pane-footer", never, {}, {}, never, ["*"], true, never>;
287
+ }
288
+
289
+ declare class YmtPaneAsideComponent {
290
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtPaneAsideComponent, never>;
291
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<YmtPaneAsideComponent, "ymt-pane-aside", never, {}, {}, never, never, true, never>;
292
+ }
293
+
294
+ declare class YmtPanesModule {
295
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtPanesModule, never>;
296
+ static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YmtPanesModule, never, [typeof YmtPaneComponent, typeof YmtPaneHeaderComponent, typeof YmtPaneBodyComponent, typeof YmtPaneFooterComponent, typeof YmtPaneAsideComponent], [typeof YmtPaneComponent, typeof YmtPaneHeaderComponent, typeof YmtPaneBodyComponent, typeof YmtPaneFooterComponent, typeof YmtPaneAsideComponent]>;
297
+ static ɵinj: _angular_core.ɵɵInjectorDeclaration<YmtPanesModule>;
298
+ }
299
+
300
+ export { FullscreenDirective, YmtPaneAsideComponent, YmtPaneBodyComponent, YmtPaneComponent, YmtPaneFooterComponent, YmtPaneHeaderComponent, YmtPanesModule };
@@ -1,49 +0,0 @@
1
- import { Severity } from './model/badge.model';
2
- import * as i0 from "@angular/core";
3
- /**
4
- * Badge component to display a label with different severity levels.
5
- *
6
- * ### Severity
7
- * Controls the color scheme via the `severity` input. Available values:
8
- * - `neutral` (default) — uses surface container colors
9
- * - `success` — green tones for positive/confirmed states
10
- * - `danger` — red tones for errors or destructive indicators
11
- * - `warning` — yellow/amber tones for caution states
12
- * - `primary` — theme primary color for informational or branded badges
13
- *
14
- * ### Variants
15
- * - **Filled** (default) — solid background with contrasting text color
16
- * - **Outline** — transparent background with a colored border, enabled via the `outline` input
17
- *
18
- * ### Aura
19
- * When `aura` is enabled, the badge renders a soft glowing box-shadow derived from its
20
- * severity color. In filled mode the aura uses a stronger, fully saturated background;
21
- * in outline mode it uses a subtle semi-transparent glow.
22
- *
23
- * ### Theming
24
- * The component exposes CSS custom properties for fine-grained control:
25
- * - `--ymt-badge-corner` — border radius (default: `--ymt-corner-full`)
26
- * - `--ymt-badge-background` — fill color
27
- * - `--ymt-badge-on-background` — text color
28
- * - `--ymt-badge-outline-color` — border color in outline variant
29
- * - `--ymt-badge-outline-text-color` — text color in outline variant
30
- * - `--ymt-badge-aura-size` — aura spread radius (default: `3px`)
31
- *
32
- * ### Accessibility
33
- * Color contrast is handled automatically for each severity/variant combination.
34
- * Add additional ARIA attributes depending on how the badge is used in your application.
35
- *
36
- * @example
37
- * ```html
38
- * <ymt-badge severity="success">Approved</ymt-badge>
39
- * <ymt-badge severity="danger" [outline]="true">Rejected</ymt-badge>
40
- * <ymt-badge severity="warning" [aura]="true">Pending</ymt-badge>
41
- * ```
42
- */
43
- export declare class YmtBadge {
44
- severity: import("@angular/core").InputSignal<Severity>;
45
- outline: import("@angular/core").InputSignal<boolean>;
46
- aura: import("@angular/core").InputSignal<boolean>;
47
- static ɵfac: i0.ɵɵFactoryDeclaration<YmtBadge, never>;
48
- static ɵcmp: i0.ɵɵComponentDeclaration<YmtBadge, "ymt-badge", never, { "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "aura": { "alias": "aura"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
49
- }
@@ -1 +0,0 @@
1
- export type Severity = 'success' | 'danger' | 'warning' | 'primary' | 'neutral';
@@ -1,49 +0,0 @@
1
- import { TemplateRef } from '@angular/core';
2
- import { YmtPaneComponent } from '@yuuvis/material/panes';
3
- import { SplitDirection } from 'angular-split';
4
- import { YmtLayoutPaneDirective } from '../../directives/layout-pane.directive';
5
- import { LayoutOutputData, LayoutSettings, MasterDetailsPaneLayoutOptions } from '../../layout.interface';
6
- import * as i0 from "@angular/core";
7
- export declare class MasterDetailsLayoutComponent {
8
- #private;
9
- masterPaneRef: import("@angular/core").Signal<YmtPaneComponent>;
10
- detailsPaneRef: import("@angular/core").Signal<YmtPaneComponent>;
11
- isDragging: import("@angular/core").WritableSignal<boolean>;
12
- panes: import("@angular/core").Signal<readonly YmtLayoutPaneDirective[]>;
13
- _panes: import("@angular/core").Signal<{
14
- master: YmtLayoutPaneDirective;
15
- details: YmtLayoutPaneDirective;
16
- }>;
17
- detailsPaneTemplateRef: import("@angular/core").Signal<TemplateRef<any>>;
18
- /**
19
- * Setting ID for persisting layout settings. If not set, layout settings won't be persisted.
20
- */
21
- layoutSettingsID: import("@angular/core").InputSignal<string | undefined>;
22
- options: import("@angular/core").InputSignal<MasterDetailsPaneLayoutOptions>;
23
- /**
24
- * The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
25
- */
26
- direction: import("@angular/core").InputSignal<SplitDirection>;
27
- /**
28
- * Size of the gutter in Pixel.
29
- */
30
- gutterSize: import("@angular/core").InputSignal<number>;
31
- _gutterSize: import("@angular/core").WritableSignal<number>;
32
- /**
33
- * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])
34
- */
35
- detailsActive: import("@angular/core").ModelSignal<boolean>;
36
- smallScreenLayout: import("@angular/core").WritableSignal<boolean>;
37
- onDragStart(): void;
38
- onDragEnd(event: LayoutOutputData): void;
39
- hideArea(role: 'master' | 'details'): void;
40
- showArea(role: 'master' | 'details'): void;
41
- toggleArea(role: 'master' | 'details'): void;
42
- isAreaVisible(role: 'master' | 'details'): boolean;
43
- toggleFullscreen(role: 'master' | 'details'): void;
44
- fullscreenActive(role: 'master' | 'details'): boolean;
45
- applyLayoutSettings(settings: LayoutSettings): void;
46
- ngAfterViewInit(): void;
47
- static ɵfac: i0.ɵɵFactoryDeclaration<MasterDetailsLayoutComponent, never>;
48
- static ɵcmp: i0.ɵɵComponentDeclaration<MasterDetailsLayoutComponent, "ymt-master-details-layout", never, { "layoutSettingsID": { "alias": "layoutSettingsID"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; }, { "detailsActive": "detailsActiveChange"; }, ["panes"], never, true, never>;
49
- }
@@ -1,13 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * TODO: This directive is currently used in the MasterDetailsLayoutComponent to add a cover element during dragging of the split area,
4
- * to prevent iframes in the panes from capturing the drag events.
5
- * However, this directive is very generic and can be used in any component that needs to add a cover element during dragging.
6
- * Therefore, it should be moved to @yuuvis/client-components and then replaced with the SplitAreaCoverDirective from the client-framework/split-view library.
7
- */
8
- export declare class AreaCoverDirective {
9
- #private;
10
- yuvSplitAreaCover: import("@angular/core").InputSignal<boolean>;
11
- static ɵfac: i0.ɵɵFactoryDeclaration<AreaCoverDirective, never>;
12
- static ɵdir: i0.ɵɵDirectiveDeclaration<AreaCoverDirective, "[yuvSplitAreaCover]", never, { "yuvSplitAreaCover": { "alias": "yuvSplitAreaCover"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
13
- }
@@ -1,15 +0,0 @@
1
- import { TemplateRef } from '@angular/core';
2
- import { LayoutPaneRole, PaneLayoutSettings } from '../layout.interface';
3
- import * as i0 from "@angular/core";
4
- /**
5
- * Directive to mark a layout pane.
6
- */
7
- export declare class YmtLayoutPaneDirective {
8
- template: TemplateRef<any>;
9
- role: import("@angular/core").InputSignal<LayoutPaneRole>;
10
- topBarActions: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
11
- areaProperties: import("@angular/core").WritableSignal<PaneLayoutSettings>;
12
- updateSettings(settings: PaneLayoutSettings): void;
13
- static ɵfac: i0.ɵɵFactoryDeclaration<YmtLayoutPaneDirective, never>;
14
- static ɵdir: i0.ɵɵDirectiveDeclaration<YmtLayoutPaneDirective, "[ymtLayoutPane]", never, { "role": { "alias": "role"; "required": true; "isSignal": true; }; "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
15
- }
@@ -1,26 +0,0 @@
1
- import { SplitAreaSize, SplitGutterInteractionEvent } from "angular-split";
2
- export type LayoutPaneRole = 'master' | 'details' | 'context';
3
- export interface MasterDetailsPaneLayoutOptions {
4
- detailsSize?: number | 'auto';
5
- detailsMinSize?: number;
6
- detailsMaxSize?: number;
7
- resizable: boolean;
8
- plainMode?: boolean;
9
- }
10
- export interface PaneLayoutSettings {
11
- visible?: boolean;
12
- lockSize?: boolean;
13
- size?: SplitAreaSize;
14
- minSize?: number;
15
- maxSize?: number;
16
- }
17
- export interface LayoutSettings {
18
- disabled?: boolean;
19
- areas: Array<LayoutAreaLayoutSettings>;
20
- }
21
- export interface LayoutAreaLayoutSettings {
22
- visible?: boolean;
23
- lockSize?: boolean;
24
- size?: SplitAreaSize;
25
- }
26
- export type LayoutOutputData = SplitGutterInteractionEvent;
@@ -1,8 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./components/master-details-layout/master-details-layout.component";
3
- import * as i2 from "./directives/layout-pane.directive";
4
- export declare class YmtLayoutModule {
5
- static ɵfac: i0.ɵɵFactoryDeclaration<YmtLayoutModule, never>;
6
- static ɵmod: i0.ɵɵNgModuleDeclaration<YmtLayoutModule, never, [typeof i1.MasterDetailsLayoutComponent, typeof i2.YmtLayoutPaneDirective], [typeof i1.MasterDetailsLayoutComponent, typeof i2.YmtLayoutPaneDirective]>;
7
- static ɵinj: i0.ɵɵInjectorDeclaration<YmtLayoutModule>;
8
- }
@@ -1,19 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Service to store and retrieve layout settings. Those
4
- * settings are stored on the users device because in
5
- * general layout settings like panel widths are highly
6
- * dependent on the current device.
7
- */
8
- export declare class LayoutService {
9
- #private;
10
- DEFAULT_SPLIT_VIEW_GUTTER_SIZE: number;
11
- saveSettings(key: string, settings: unknown): boolean;
12
- getSettings(key: string): unknown | undefined;
13
- /**
14
- * Clears all layout settings.
15
- */
16
- clearSettings(): void;
17
- static ɵfac: i0.ɵɵFactoryDeclaration<LayoutService, never>;
18
- static ɵprov: i0.ɵɵInjectableDeclaration<LayoutService>;
19
- }
@@ -1,22 +0,0 @@
1
- {
2
- "ymt.datepicker.calendarLabel": "التقويم",
3
- "ymt.datepicker.closeCalendarLabel": "إغلاق التقويم",
4
- "ymt.datepicker.comparisonDateLabel": "فترة المرجع",
5
- "ymt.datepicker.endDateLabel": "تاريخ الانتهاء",
6
- "ymt.datepicker.nextMonthLabel": "الشهر التالي",
7
- "ymt.datepicker.nextMultiYearLabel": "السنوات الـ 24 التالية",
8
- "ymt.datepicker.nextYearLabel": "السنة التالية",
9
- "ymt.datepicker.openCalendarLabel": "فتح التقويم",
10
- "ymt.datepicker.prevMonthLabel": "الشهر السابق",
11
- "ymt.datepicker.prevMultiYearLabel": "السنوات الـ 24 السابقة",
12
- "ymt.datepicker.prevYearLabel": "السنة السابقة",
13
- "ymt.datepicker.startDateLabel": "تاريخ البداية",
14
- "ymt.datepicker.switchToMonthViewLabel": "اختيار التاريخ",
15
- "ymt.datepicker.switchToMultiYearViewLabel": "اختيار الشهر والسنة",
16
- "ymt.paginator.firstPageLabel": "الصفحة الأولى",
17
- "ymt.paginator.itemsPerPageLabel": "النتائج لكل صفحة",
18
- "ymt.paginator.lastPageLabel": "الصفحة الأخيرة",
19
- "ymt.paginator.nextPageLabel": "الصفحة التالية",
20
- "ymt.paginator.previousPageLabel": "الصفحة السابقة",
21
- "ymt.paginator.rangeLabelSeparator": "من"
22
- }
@@ -1,21 +0,0 @@
1
- import { OnDestroy, OnInit } from '@angular/core';
2
- import { DatepickerComponent } from '../datepicker';
3
- import { BooleanInput } from '@angular/cdk/coercion';
4
- import { Subject } from 'rxjs';
5
- import * as i0 from "@angular/core";
6
- export declare class DatepickerToggleComponent implements OnInit, OnDestroy {
7
- #private;
8
- set datepicker(v: DatepickerComponent | null);
9
- get datepicker(): DatepickerComponent | null;
10
- set disabled(v: BooleanInput);
11
- get disabled(): boolean;
12
- set ariaLabel(v: string);
13
- get ariaLabel(): string;
14
- stateChanges: Subject<void>;
15
- constructor();
16
- _open(event: Event): void;
17
- ngOnInit(): void;
18
- ngOnDestroy(): void;
19
- static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerToggleComponent, never>;
20
- static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerToggleComponent, "ymt-datepicker-toggle", ["matDatepickerToggle"], { "datepicker": { "alias": "for"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, ["mat-icon"], true, never>;
21
- }
@@ -1,88 +0,0 @@
1
- import { AfterViewInit, OnDestroy } from '@angular/core';
2
- import { AbstractControlDirective, ControlValueAccessor, FormGroup, NgControl } from '@angular/forms';
3
- import { MatFormFieldControl } from '@angular/material/form-field';
4
- import { Subject } from 'rxjs';
5
- import { BooleanInput } from '@angular/cdk/coercion';
6
- import { MatDatepicker, MatDateRangePicker } from '@angular/material/datepicker';
7
- import { MatTimepicker, MatTimepickerInput } from '@angular/material/timepicker';
8
- import * as i0 from "@angular/core";
9
- type DatepickerValue = DatetimeValue;
10
- type DatetimeValue = Date | string | null;
11
- export type DatepickerMode = keyof typeof EnumDatepickerMode;
12
- declare enum EnumDatepickerMode {
13
- DATE = "DATE",
14
- DATE_RANGE = "DATE_RANGE",
15
- TIME = "TIME"
16
- }
17
- export interface DateRangePlaceholder {
18
- startDate: string;
19
- endDate: string;
20
- }
21
- /**
22
- * @deprecated
23
- */
24
- export declare class DatepickerComponent implements MatFormFieldControl<DatepickerValue>, ControlValueAccessor, AfterViewInit, OnDestroy {
25
- #private;
26
- ngControl: NgControl | AbstractControlDirective | null;
27
- stateChanges: Subject<void>;
28
- onFocusIn(): void;
29
- onFocusout(): void;
30
- set value(v: DatepickerValue);
31
- get value(): DatepickerValue;
32
- set disabled(v: BooleanInput);
33
- get disabled(): boolean;
34
- set id(v: string);
35
- get id(): string;
36
- set placeholder(v: string);
37
- get placeholder(): string;
38
- set required(v: BooleanInput);
39
- get required(): boolean;
40
- set userAriaDescribedBy(v: string);
41
- get userAriaDescribedBy(): string;
42
- set empty(v: boolean);
43
- get empty(): boolean;
44
- set errorState(v: boolean);
45
- get errorState(): boolean;
46
- set focused(v: boolean);
47
- get focused(): boolean;
48
- get shouldLabelFloat(): boolean;
49
- readonly autofilled?: boolean;
50
- readonly controlType: string;
51
- readonly disableAutomaticLabeling: boolean;
52
- protected readonly datepickerMode: typeof EnumDatepickerMode;
53
- protected readonly datepicker: import("@angular/core").Signal<MatDatepicker<never> | undefined>;
54
- protected readonly rangepicker: import("@angular/core").Signal<MatDateRangePicker<never> | undefined>;
55
- protected readonly timepicker: import("@angular/core").Signal<MatTimepicker<never> | undefined>;
56
- protected readonly datepickerInput: import("@angular/core").Signal<MatFormFieldControl<never> | undefined>;
57
- protected readonly timepickerInput: import("@angular/core").Signal<MatTimepickerInput<never> | undefined>;
58
- set mode(v: DatepickerMode);
59
- get mode(): DatepickerMode;
60
- set min(v: DatepickerValue);
61
- get min(): DatepickerValue;
62
- set max(v: DatepickerValue);
63
- get max(): DatepickerValue;
64
- set rangePlaceholder(v: DateRangePlaceholder);
65
- get rangePlaceholder(): DateRangePlaceholder;
66
- rangeValue: {
67
- start: string;
68
- end: string;
69
- };
70
- startDateFormControlName: import("@angular/core").InputSignal<string>;
71
- endDateFormControlName: import("@angular/core").InputSignal<string>;
72
- formGroup: import("@angular/core").InputSignal<FormGroup<any> | undefined>;
73
- constructor();
74
- propagateChange: (_: any) => void;
75
- propagateTouched: () => void;
76
- registerOnChange(fn: any): void;
77
- registerOnTouched(fn: any): void;
78
- writeValue(date: DatepickerValue): void;
79
- setDisabledState(isDisabled: boolean): void;
80
- onContainerClick(event: MouseEvent): void;
81
- setDescribedByIds(ids: string[]): void;
82
- ngAfterViewInit(): void;
83
- ngOnDestroy(): void;
84
- open(): void;
85
- static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
86
- static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "ymt-datepicker", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "userAriaDescribedBy": { "alias": "userAriaDescribedBy"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "rangePlaceholder": { "alias": "rangePlaceholder"; "required": false; }; "startDateFormControlName": { "alias": "startDateFormControlName"; "required": false; "isSignal": true; }; "endDateFormControlName": { "alias": "endDateFormControlName"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
87
- }
88
- export {};
@@ -1,2 +0,0 @@
1
- export * from './datepicker.component';
2
- export * from './datepicker-toggle.component';
@@ -1 +0,0 @@
1
- export * from './datepicker';
@@ -1,2 +0,0 @@
1
- export * from './ymt-button.directive';
2
- export * from './ymt-button.model';