@yuuvis/material 2.20.0 → 3.0.0-beta.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/badge/index.d.ts +53 -1
- package/fesm2022/yuuvis-material-badge.mjs +8 -9
- package/fesm2022/yuuvis-material-badge.mjs.map +1 -1
- package/fesm2022/yuuvis-material-layout.mjs +37 -37
- package/fesm2022/yuuvis-material-layout.mjs.map +1 -1
- package/fesm2022/yuuvis-material-panes.mjs +48 -48
- package/fesm2022/yuuvis-material-panes.mjs.map +1 -1
- package/fesm2022/yuuvis-material.mjs +81 -88
- package/fesm2022/yuuvis-material.mjs.map +1 -1
- package/index.d.ts +358 -4
- package/layout/index.d.ts +96 -4
- package/package.json +6 -6
- package/panes/index.d.ts +300 -9
- package/badge/badge.component.d.ts +0 -49
- package/badge/model/badge.model.d.ts +0 -1
- package/layout/lib/components/master-details-layout/master-details-layout.component.d.ts +0 -49
- package/layout/lib/directives/area-cover.directive.d.ts +0 -13
- package/layout/lib/directives/layout-pane.directive.d.ts +0 -15
- package/layout/lib/layout.interface.d.ts +0 -26
- package/layout/lib/layout.module.d.ts +0 -8
- package/layout/lib/services/layout.service.d.ts +0 -19
- package/lib/assets/i18n/ar.json +0 -22
- package/lib/components/datepicker/datepicker-toggle.component.d.ts +0 -21
- package/lib/components/datepicker/datepicker.component.d.ts +0 -88
- package/lib/components/datepicker/index.d.ts +0 -2
- package/lib/components/index.d.ts +0 -1
- package/lib/directives/button/index.d.ts +0 -2
- package/lib/directives/button/ymt-button.directive.d.ts +0 -18
- package/lib/directives/button/ymt-button.model.d.ts +0 -4
- package/lib/directives/icon-button/index.d.ts +0 -2
- package/lib/directives/icon-button/ymt-icon-button.directive.d.ts +0 -15
- package/lib/directives/icon-button/ymt-icon-button.model.d.ts +0 -5
- package/lib/directives/index.d.ts +0 -2
- package/lib/providers/index.d.ts +0 -1
- package/lib/providers/material.providers.d.ts +0 -4
- package/lib/services/device.interface.d.ts +0 -15
- package/lib/services/device.service.d.ts +0 -147
- package/lib/services/index.d.ts +0 -5
- package/lib/services/ymt-date-adapter.service.d.ts +0 -25
- package/lib/services/ymt-datepicker-intl.service.d.ts +0 -11
- package/lib/services/ymt-mat-icon-registry.service.d.ts +0 -13
- package/lib/services/ymt-mat-paginator-intl.service.d.ts +0 -12
- package/panes/lib/pane/fullscreen.directive.d.ts +0 -37
- package/panes/lib/pane/pane-aside/pane-aside.component.d.ts +0 -5
- package/panes/lib/pane/pane-body/pane-body.component.d.ts +0 -5
- package/panes/lib/pane/pane-footer/pane-footer.component.d.ts +0 -5
- package/panes/lib/pane/pane-header/pane-header.component.d.ts +0 -74
- package/panes/lib/pane/pane-top-bar/pane-top-bar.component.d.ts +0 -10
- package/panes/lib/pane/pane.component.d.ts +0 -168
- package/panes/lib/panes.module.d.ts +0 -11
package/index.d.ts
CHANGED
|
@@ -1,4 +1,358 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { EnvironmentProviders, ErrorHandler, Provider, AfterViewInit, OnInit, OnDestroy } from '@angular/core';
|
|
3
|
+
import { MatIconRegistry } from '@angular/material/icon';
|
|
4
|
+
import { HttpClient } from '@angular/common/http';
|
|
5
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
|
+
import { MatDatepickerIntl, MatDatepicker, MatDateRangePicker } from '@angular/material/datepicker';
|
|
7
|
+
import { MatDateFormats, NativeDateAdapter } from '@angular/material/core';
|
|
8
|
+
import { DeviceInfo } from 'ngx-device-detector';
|
|
9
|
+
import { Observable, Subject } from 'rxjs';
|
|
10
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
|
11
|
+
import { ControlValueAccessor, NgControl, AbstractControlDirective, FormGroup } from '@angular/forms';
|
|
12
|
+
import { MatFormFieldControl } from '@angular/material/form-field';
|
|
13
|
+
import { MatTimepicker, MatTimepickerInput } from '@angular/material/timepicker';
|
|
14
|
+
|
|
15
|
+
declare const provideYmtMaterial: (customTheme?: any[], options?: {
|
|
16
|
+
supportsSmallScreens: boolean;
|
|
17
|
+
}) => EnvironmentProviders;
|
|
18
|
+
|
|
19
|
+
declare class YmtMatIconRegistryService extends MatIconRegistry {
|
|
20
|
+
#private;
|
|
21
|
+
constructor(_httpClient: HttpClient, _sanitizer: DomSanitizer, document: any, _errorHandler: ErrorHandler);
|
|
22
|
+
setDefaultFontSetClass(...classnames: string[]): this;
|
|
23
|
+
static isFontIcon(input: string | null): boolean;
|
|
24
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtMatIconRegistryService, never>;
|
|
25
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<YmtMatIconRegistryService>;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
declare class YmtDatepickerIntlService extends MatDatepickerIntl {
|
|
29
|
+
#private;
|
|
30
|
+
constructor();
|
|
31
|
+
translateLabels(): void;
|
|
32
|
+
formatYearRange(start: string, end: string): string;
|
|
33
|
+
formatYearRangeLabel(start: string, end: string): string;
|
|
34
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtDatepickerIntlService, never>;
|
|
35
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<YmtDatepickerIntlService>;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* @deprecated Use `YMT_DATE_FORMATS` instead.
|
|
40
|
+
* @see YMT_DATE_FORMATS
|
|
41
|
+
* fixes typo in the name
|
|
42
|
+
*/
|
|
43
|
+
declare const YMT_DATE_FROMATS: MatDateFormats;
|
|
44
|
+
declare const YMT_DATE_FORMATS: MatDateFormats;
|
|
45
|
+
declare function provideYmtDateAdapter(formats?: MatDateFormats): Provider[];
|
|
46
|
+
interface IParseFormats {
|
|
47
|
+
separator: '.' | '/' | '-' | string;
|
|
48
|
+
order: 'mdy' | 'dmy' | 'ymd';
|
|
49
|
+
}
|
|
50
|
+
declare class YmtDateAdapterService extends NativeDateAdapter {
|
|
51
|
+
#private;
|
|
52
|
+
locale: string;
|
|
53
|
+
constructor();
|
|
54
|
+
parse(value: any, parseFormat?: any): Date | null;
|
|
55
|
+
parseDateString(value: string, config: IParseFormats): Date;
|
|
56
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtDateAdapterService, never>;
|
|
57
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<YmtDateAdapterService>;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
declare enum DeviceScreenOrientation {
|
|
61
|
+
PORTRAIT = "portrait",
|
|
62
|
+
LANDSCAPE = "landscape"
|
|
63
|
+
}
|
|
64
|
+
interface DeviceScreen {
|
|
65
|
+
size: ScreenSize;
|
|
66
|
+
orientation: DeviceScreenOrientation;
|
|
67
|
+
width: number;
|
|
68
|
+
height: number;
|
|
69
|
+
}
|
|
70
|
+
interface DeviceScreenBounds {
|
|
71
|
+
width: number;
|
|
72
|
+
height: number;
|
|
73
|
+
}
|
|
74
|
+
type ScreenSize = 's' | 'm' | 'l' | 'xl';
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Service that adapts the application layout and behavior to different devices,
|
|
78
|
+
* screen sizes, orientations, and browser zoom levels.
|
|
79
|
+
*
|
|
80
|
+
* This service operates globally as a singleton, listening to window resize events
|
|
81
|
+
* and maintaining reactive state about the current screen and zoom conditions.
|
|
82
|
+
* It also writes attributes to the `<body>` element so that CSS rules can respond
|
|
83
|
+
* to screen state without requiring Angular bindings.
|
|
84
|
+
*
|
|
85
|
+
* **Key Features:**
|
|
86
|
+
* - Screen size classification (s / m / l / xl) based on viewport dimensions
|
|
87
|
+
* - Orientation detection (portrait / landscape), with native API fallback on mobile
|
|
88
|
+
* - Small-screen layout signal for toggling compact UI modes
|
|
89
|
+
* - Browser zoom level tracking via `pageZoomPercentage$`
|
|
90
|
+
* - Automatic `<body>` attribute management for CSS-driven responsive styles
|
|
91
|
+
*
|
|
92
|
+
* **Usage:**
|
|
93
|
+
* 1. `DeviceService` is initialized automatically by `provideYmtMaterial()` in `app.config.ts`
|
|
94
|
+
* 2. Pass `{ supportsSmallScreens: true }` to `provideYmtMaterial()` if the app has a dedicated compact layout
|
|
95
|
+
* 3. Inject `DeviceService` wherever needed — it is already initialized
|
|
96
|
+
* 4. Subscribe to `screenChange$` or `pageZoomPercentage$` to react to changes
|
|
97
|
+
*
|
|
98
|
+
* **Body attributes written by this service:**
|
|
99
|
+
* - `data-screen-size` — current size bucket: `s` | `m` | `l` | `xl`
|
|
100
|
+
* - `data-screen-orientation` — `portrait` | `landscape`
|
|
101
|
+
* - `data-touch-enabled` — present only when the device supports touch input
|
|
102
|
+
*
|
|
103
|
+
* ```html
|
|
104
|
+
* <body data-screen-size="l" data-screen-orientation="landscape">
|
|
105
|
+
* ...
|
|
106
|
+
* </body>
|
|
107
|
+
* ```
|
|
108
|
+
*
|
|
109
|
+
* **Screen size boundaries:**
|
|
110
|
+
*
|
|
111
|
+
* | Size | Range | Device |
|
|
112
|
+
* |------|----------------------------|-----------------------------------|
|
|
113
|
+
* | `s` | < 600px | mobile phone |
|
|
114
|
+
* | `m` | 600px – 900/1200px | tablet (upper bound by orientation) |
|
|
115
|
+
* | `l` | 900/1200px – 1800px | desktop |
|
|
116
|
+
* | `xl` | ≥ 1800px | wide / large desktop |
|
|
117
|
+
*
|
|
118
|
+
* @see {@link DeviceScreen} for the screen state shape emitted by `screenChange$`
|
|
119
|
+
*/
|
|
120
|
+
declare class DeviceService {
|
|
121
|
+
#private;
|
|
122
|
+
/**
|
|
123
|
+
* Emits the current {@link DeviceScreen} state whenever the window is resized.
|
|
124
|
+
*
|
|
125
|
+
* The emitted value includes the size bucket (`s` | `m` | `l` | `xl`), orientation,
|
|
126
|
+
* and the raw viewport dimensions in pixels. Use this stream to reactively adapt
|
|
127
|
+
* layout or behavior whenever the screen state changes.
|
|
128
|
+
*
|
|
129
|
+
* Replay buffer of 1 — late subscribers always receive the most recent value
|
|
130
|
+
* without waiting for the next resize event.
|
|
131
|
+
*
|
|
132
|
+
* @example
|
|
133
|
+
* ```ts
|
|
134
|
+
* deviceService.screenChange$.subscribe(screen => {
|
|
135
|
+
* console.log(screen.size); // 'l'
|
|
136
|
+
* console.log(screen.orientation); // 'landscape'
|
|
137
|
+
* console.log(screen.width); // 1440
|
|
138
|
+
* });
|
|
139
|
+
* ```
|
|
140
|
+
*/
|
|
141
|
+
screenChange$: Observable<DeviceScreen>;
|
|
142
|
+
/**
|
|
143
|
+
* Signal that indicates whether the app should render in a compact small-screen layout.
|
|
144
|
+
*
|
|
145
|
+
* This is `true` only when all three conditions are met:
|
|
146
|
+
* 1. `supportsSmallScreens` was passed as `true` to {@link init}
|
|
147
|
+
* 2. The current screen size bucket is `s` (< 600px viewport width)
|
|
148
|
+
* 3. The current orientation is `portrait`
|
|
149
|
+
*
|
|
150
|
+
* Components that have a dedicated compact mode should read this signal
|
|
151
|
+
* and switch their layout accordingly.
|
|
152
|
+
*
|
|
153
|
+
* @default false
|
|
154
|
+
*/
|
|
155
|
+
smallScreenLayout: _angular_core.WritableSignal<boolean>;
|
|
156
|
+
/**
|
|
157
|
+
* `true` if the current device is a mobile phone (Android, iPhone, Windows Phone, etc.).
|
|
158
|
+
* Populated once at service creation from `ngx-device-detector`.
|
|
159
|
+
*/
|
|
160
|
+
isMobile: boolean;
|
|
161
|
+
/**
|
|
162
|
+
* `true` if the current device is a tablet (e.g. iPad).
|
|
163
|
+
* Populated once at service creation from `ngx-device-detector`.
|
|
164
|
+
*/
|
|
165
|
+
isTablet: boolean;
|
|
166
|
+
/**
|
|
167
|
+
* `true` if the app is running in a desktop browser.
|
|
168
|
+
* Populated once at service creation from `ngx-device-detector`.
|
|
169
|
+
*/
|
|
170
|
+
isDesktop: boolean;
|
|
171
|
+
/**
|
|
172
|
+
* Detailed device and browser information provided by `ngx-device-detector`.
|
|
173
|
+
* Includes OS, browser name and version, device type, and user agent.
|
|
174
|
+
*/
|
|
175
|
+
info?: DeviceInfo;
|
|
176
|
+
/**
|
|
177
|
+
* `true` if the device supports touch input.
|
|
178
|
+
* Detected via `ontouchstart` presence or `navigator.maxTouchPoints > 0`.
|
|
179
|
+
*/
|
|
180
|
+
isTouchEnabled: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Emits the current browser zoom level as a percentage whenever it changes.
|
|
183
|
+
*
|
|
184
|
+
* The value is derived from `window.outerWidth / window.innerWidth * 100`.
|
|
185
|
+
* At 100% zoom the value is `100`, at 150% it is `150`, and so on.
|
|
186
|
+
*
|
|
187
|
+
* Emits only when the value actually changes (no duplicate emissions).
|
|
188
|
+
* Updates are driven by the window `resize` event, which all major browsers
|
|
189
|
+
* fire when the user changes the zoom level via Ctrl+/- or Ctrl+scroll.
|
|
190
|
+
* On desktop there is a 500ms debounce; on mobile, no debounce is applied.
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
* ```ts
|
|
194
|
+
* deviceService.pageZoomPercentage$.subscribe(zoom => {
|
|
195
|
+
* console.log(`Current zoom: ${zoom}%`); // e.g. "Current zoom: 150%"
|
|
196
|
+
* });
|
|
197
|
+
* ```
|
|
198
|
+
*/
|
|
199
|
+
pageZoomPercentage$: Observable<number>;
|
|
200
|
+
/**
|
|
201
|
+
* Initializes the service and performs the first screen state evaluation.
|
|
202
|
+
*
|
|
203
|
+
* Called automatically by `provideYmtMaterial()` during application startup.
|
|
204
|
+
*
|
|
205
|
+
* Immediately evaluates the current viewport dimensions, classifies the screen size
|
|
206
|
+
* and orientation, writes the result to the `<body>` attributes, and emits the initial
|
|
207
|
+
* value on `screenChange$`. Subsequent updates are handled automatically via the
|
|
208
|
+
* internal resize listener.
|
|
209
|
+
*
|
|
210
|
+
* @param supportsSmallScreens - Set to `true` if the application has a dedicated compact
|
|
211
|
+
* layout for small portrait screens. When `true`, the {@link smallScreenLayout} signal
|
|
212
|
+
* will be set to `true` whenever the screen bucket is `s` and orientation is `portrait`.
|
|
213
|
+
* Defaults to `false`.
|
|
214
|
+
*/
|
|
215
|
+
init(supportsSmallScreens?: boolean): void;
|
|
216
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeviceService, never>;
|
|
217
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<DeviceService>;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
declare enum YMT_ICON_BUTTON_SIZE {
|
|
221
|
+
extraSmall = "extra-small",
|
|
222
|
+
small = "small",
|
|
223
|
+
medium = "medium"
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
declare class YmtIconButtonDirective implements AfterViewInit {
|
|
227
|
+
#private;
|
|
228
|
+
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
229
|
+
disableRipple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
230
|
+
ariaDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
231
|
+
disabledInteractive: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
232
|
+
size: _angular_core.InputSignal<"small" | "extra-small" | "medium" | YMT_ICON_BUTTON_SIZE>;
|
|
233
|
+
constructor();
|
|
234
|
+
ngAfterViewInit(): void;
|
|
235
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtIconButtonDirective, never>;
|
|
236
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YmtIconButtonDirective, "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; "isSignal": true; }; "size": { "alias": "icon-button-size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
declare enum YMT_BUTTON_SIZE {
|
|
240
|
+
small = "small",
|
|
241
|
+
medium = "medium"
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
|
|
245
|
+
declare class YmtButtonDirective implements OnInit, AfterViewInit {
|
|
246
|
+
#private;
|
|
247
|
+
ymtButton: _angular_core.InputSignal<ButtonType>;
|
|
248
|
+
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
249
|
+
ariaDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
250
|
+
disableRipple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
251
|
+
disabledInteractive: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
252
|
+
size: _angular_core.InputSignal<"small" | "medium" | YMT_BUTTON_SIZE>;
|
|
253
|
+
constructor();
|
|
254
|
+
ngOnInit(): void;
|
|
255
|
+
ngAfterViewInit(): void;
|
|
256
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtButtonDirective, never>;
|
|
257
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YmtButtonDirective, "button[ymtButton], a[ymtButton]", never, { "ymtButton": { "alias": "ymtButton"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; "isSignal": true; }; "size": { "alias": "button-size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
type DatepickerValue = DatetimeValue;
|
|
261
|
+
type DatetimeValue = Date | string | null;
|
|
262
|
+
type DatepickerMode = keyof typeof EnumDatepickerMode;
|
|
263
|
+
declare enum EnumDatepickerMode {
|
|
264
|
+
DATE = "DATE",
|
|
265
|
+
DATE_RANGE = "DATE_RANGE",
|
|
266
|
+
TIME = "TIME"
|
|
267
|
+
}
|
|
268
|
+
interface DateRangePlaceholder {
|
|
269
|
+
startDate: string;
|
|
270
|
+
endDate: string;
|
|
271
|
+
}
|
|
272
|
+
/**
|
|
273
|
+
* @deprecated
|
|
274
|
+
*/
|
|
275
|
+
declare class DatepickerComponent implements MatFormFieldControl<DatepickerValue>, ControlValueAccessor, AfterViewInit, OnDestroy {
|
|
276
|
+
#private;
|
|
277
|
+
ngControl: NgControl | AbstractControlDirective | null;
|
|
278
|
+
stateChanges: Subject<void>;
|
|
279
|
+
onFocusIn(): void;
|
|
280
|
+
onFocusout(): void;
|
|
281
|
+
set value(v: DatepickerValue);
|
|
282
|
+
get value(): DatepickerValue;
|
|
283
|
+
set disabled(v: BooleanInput);
|
|
284
|
+
get disabled(): boolean;
|
|
285
|
+
set id(v: string);
|
|
286
|
+
get id(): string;
|
|
287
|
+
set placeholder(v: string);
|
|
288
|
+
get placeholder(): string;
|
|
289
|
+
set required(v: BooleanInput);
|
|
290
|
+
get required(): boolean;
|
|
291
|
+
set userAriaDescribedBy(v: string);
|
|
292
|
+
get userAriaDescribedBy(): string;
|
|
293
|
+
set empty(v: boolean);
|
|
294
|
+
get empty(): boolean;
|
|
295
|
+
set errorState(v: boolean);
|
|
296
|
+
get errorState(): boolean;
|
|
297
|
+
set focused(v: boolean);
|
|
298
|
+
get focused(): boolean;
|
|
299
|
+
get shouldLabelFloat(): boolean;
|
|
300
|
+
readonly autofilled?: boolean;
|
|
301
|
+
readonly controlType: string;
|
|
302
|
+
readonly disableAutomaticLabeling: boolean;
|
|
303
|
+
protected readonly datepickerMode: typeof EnumDatepickerMode;
|
|
304
|
+
protected readonly datepicker: _angular_core.Signal<MatDatepicker<never> | undefined>;
|
|
305
|
+
protected readonly rangepicker: _angular_core.Signal<MatDateRangePicker<never> | undefined>;
|
|
306
|
+
protected readonly timepicker: _angular_core.Signal<MatTimepicker<never> | undefined>;
|
|
307
|
+
protected readonly datepickerInput: _angular_core.Signal<MatFormFieldControl<never> | undefined>;
|
|
308
|
+
protected readonly timepickerInput: _angular_core.Signal<MatTimepickerInput<never> | undefined>;
|
|
309
|
+
set mode(v: DatepickerMode);
|
|
310
|
+
get mode(): DatepickerMode;
|
|
311
|
+
set min(v: DatepickerValue);
|
|
312
|
+
get min(): DatepickerValue;
|
|
313
|
+
set max(v: DatepickerValue);
|
|
314
|
+
get max(): DatepickerValue;
|
|
315
|
+
set rangePlaceholder(v: DateRangePlaceholder);
|
|
316
|
+
get rangePlaceholder(): DateRangePlaceholder;
|
|
317
|
+
rangeValue: {
|
|
318
|
+
start: string;
|
|
319
|
+
end: string;
|
|
320
|
+
};
|
|
321
|
+
startDateFormControlName: _angular_core.InputSignal<string>;
|
|
322
|
+
endDateFormControlName: _angular_core.InputSignal<string>;
|
|
323
|
+
formGroup: _angular_core.InputSignal<FormGroup<any> | undefined>;
|
|
324
|
+
constructor();
|
|
325
|
+
propagateChange: (_: any) => void;
|
|
326
|
+
propagateTouched: () => void;
|
|
327
|
+
registerOnChange(fn: any): void;
|
|
328
|
+
registerOnTouched(fn: any): void;
|
|
329
|
+
writeValue(date: DatepickerValue): void;
|
|
330
|
+
setDisabledState(isDisabled: boolean): void;
|
|
331
|
+
onContainerClick(event: MouseEvent): void;
|
|
332
|
+
setDescribedByIds(ids: string[]): void;
|
|
333
|
+
ngAfterViewInit(): void;
|
|
334
|
+
ngOnDestroy(): void;
|
|
335
|
+
open(): void;
|
|
336
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
|
|
337
|
+
static ɵcmp: _angular_core.ɵɵ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>;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
declare class DatepickerToggleComponent implements OnInit, OnDestroy {
|
|
341
|
+
#private;
|
|
342
|
+
set datepicker(v: DatepickerComponent | null);
|
|
343
|
+
get datepicker(): DatepickerComponent | null;
|
|
344
|
+
set disabled(v: BooleanInput);
|
|
345
|
+
get disabled(): boolean;
|
|
346
|
+
set ariaLabel(v: string);
|
|
347
|
+
get ariaLabel(): string;
|
|
348
|
+
stateChanges: Subject<void>;
|
|
349
|
+
constructor();
|
|
350
|
+
_open(event: Event): void;
|
|
351
|
+
ngOnInit(): void;
|
|
352
|
+
ngOnDestroy(): void;
|
|
353
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerToggleComponent, never>;
|
|
354
|
+
static ɵcmp: _angular_core.ɵɵ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>;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
export { DatepickerComponent, DatepickerToggleComponent, DeviceScreenOrientation, DeviceService, YMT_BUTTON_SIZE, YMT_DATE_FORMATS, YMT_DATE_FROMATS, YMT_ICON_BUTTON_SIZE, YmtButtonDirective, YmtDateAdapterService, YmtDatepickerIntlService, YmtIconButtonDirective, YmtMatIconRegistryService, provideYmtDateAdapter, provideYmtMaterial };
|
|
358
|
+
export type { ButtonType, DateRangePlaceholder, DatepickerMode, DeviceScreen, DeviceScreenBounds, ScreenSize };
|
package/layout/index.d.ts
CHANGED
|
@@ -1,4 +1,96 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { TemplateRef } from '@angular/core';
|
|
3
|
+
import { YmtPaneComponent } from '@yuuvis/material/panes';
|
|
4
|
+
import { SplitAreaSize, SplitGutterInteractionEvent, SplitDirection } from 'angular-split';
|
|
5
|
+
|
|
6
|
+
type LayoutPaneRole = 'master' | 'details' | 'context';
|
|
7
|
+
interface MasterDetailsPaneLayoutOptions {
|
|
8
|
+
detailsSize?: number | 'auto';
|
|
9
|
+
detailsMinSize?: number;
|
|
10
|
+
detailsMaxSize?: number;
|
|
11
|
+
resizable: boolean;
|
|
12
|
+
plainMode?: boolean;
|
|
13
|
+
}
|
|
14
|
+
interface PaneLayoutSettings {
|
|
15
|
+
visible?: boolean;
|
|
16
|
+
lockSize?: boolean;
|
|
17
|
+
size?: SplitAreaSize;
|
|
18
|
+
minSize?: number;
|
|
19
|
+
maxSize?: number;
|
|
20
|
+
}
|
|
21
|
+
interface LayoutSettings {
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
areas: Array<LayoutAreaLayoutSettings>;
|
|
24
|
+
}
|
|
25
|
+
interface LayoutAreaLayoutSettings {
|
|
26
|
+
visible?: boolean;
|
|
27
|
+
lockSize?: boolean;
|
|
28
|
+
size?: SplitAreaSize;
|
|
29
|
+
}
|
|
30
|
+
type LayoutOutputData = SplitGutterInteractionEvent;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Directive to mark a layout pane.
|
|
34
|
+
*/
|
|
35
|
+
declare class YmtLayoutPaneDirective {
|
|
36
|
+
template: TemplateRef<any>;
|
|
37
|
+
role: _angular_core.InputSignal<LayoutPaneRole>;
|
|
38
|
+
topBarActions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
|
|
39
|
+
areaProperties: _angular_core.WritableSignal<PaneLayoutSettings>;
|
|
40
|
+
updateSettings(settings: PaneLayoutSettings): void;
|
|
41
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtLayoutPaneDirective, never>;
|
|
42
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<YmtLayoutPaneDirective, "[ymtLayoutPane]", never, { "role": { "alias": "role"; "required": true; "isSignal": true; }; "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
declare class MasterDetailsLayoutComponent {
|
|
46
|
+
#private;
|
|
47
|
+
masterPaneRef: _angular_core.Signal<YmtPaneComponent>;
|
|
48
|
+
detailsPaneRef: _angular_core.Signal<YmtPaneComponent>;
|
|
49
|
+
isDragging: _angular_core.WritableSignal<boolean>;
|
|
50
|
+
panes: _angular_core.Signal<readonly YmtLayoutPaneDirective[]>;
|
|
51
|
+
_panes: _angular_core.Signal<{
|
|
52
|
+
master: YmtLayoutPaneDirective;
|
|
53
|
+
details: YmtLayoutPaneDirective;
|
|
54
|
+
}>;
|
|
55
|
+
detailsPaneTemplateRef: _angular_core.Signal<TemplateRef<any>>;
|
|
56
|
+
/**
|
|
57
|
+
* Setting ID for persisting layout settings. If not set, layout settings won't be persisted.
|
|
58
|
+
*/
|
|
59
|
+
layoutSettingsID: _angular_core.InputSignal<string | undefined>;
|
|
60
|
+
options: _angular_core.InputSignal<MasterDetailsPaneLayoutOptions>;
|
|
61
|
+
/**
|
|
62
|
+
* The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
|
|
63
|
+
*/
|
|
64
|
+
direction: _angular_core.InputSignal<SplitDirection>;
|
|
65
|
+
/**
|
|
66
|
+
* Size of the gutter in Pixel.
|
|
67
|
+
*/
|
|
68
|
+
gutterSize: _angular_core.InputSignal<number>;
|
|
69
|
+
_gutterSize: _angular_core.WritableSignal<number>;
|
|
70
|
+
/**
|
|
71
|
+
* Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])
|
|
72
|
+
*/
|
|
73
|
+
detailsActive: _angular_core.ModelSignal<boolean>;
|
|
74
|
+
smallScreenLayout: _angular_core.WritableSignal<boolean>;
|
|
75
|
+
onDragStart(): void;
|
|
76
|
+
onDragEnd(event: LayoutOutputData): void;
|
|
77
|
+
hideArea(role: 'master' | 'details'): void;
|
|
78
|
+
showArea(role: 'master' | 'details'): void;
|
|
79
|
+
toggleArea(role: 'master' | 'details'): void;
|
|
80
|
+
isAreaVisible(role: 'master' | 'details'): boolean;
|
|
81
|
+
toggleFullscreen(role: 'master' | 'details'): void;
|
|
82
|
+
fullscreenActive(role: 'master' | 'details'): boolean;
|
|
83
|
+
applyLayoutSettings(settings: LayoutSettings): void;
|
|
84
|
+
ngAfterViewInit(): void;
|
|
85
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MasterDetailsLayoutComponent, never>;
|
|
86
|
+
static ɵcmp: _angular_core.ɵɵ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>;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
declare class YmtLayoutModule {
|
|
90
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<YmtLayoutModule, never>;
|
|
91
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YmtLayoutModule, never, [typeof MasterDetailsLayoutComponent, typeof YmtLayoutPaneDirective], [typeof MasterDetailsLayoutComponent, typeof YmtLayoutPaneDirective]>;
|
|
92
|
+
static ɵinj: _angular_core.ɵɵInjectorDeclaration<YmtLayoutModule>;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export { MasterDetailsLayoutComponent, YmtLayoutModule, YmtLayoutPaneDirective };
|
|
96
|
+
export type { LayoutAreaLayoutSettings, LayoutOutputData, LayoutPaneRole, LayoutSettings, MasterDetailsPaneLayoutOptions, PaneLayoutSettings };
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yuuvis/material",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-beta.20.0",
|
|
4
4
|
"author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"peerDependencies": {
|
|
7
|
-
"@angular/common": "^
|
|
8
|
-
"@angular/core": "^
|
|
9
|
-
"@angular/material": "^
|
|
7
|
+
"@angular/common": "^20.0.0",
|
|
8
|
+
"@angular/core": "^20.0.0",
|
|
9
|
+
"@angular/material": "^20.0.0",
|
|
10
10
|
"modern-normalize": "^3.0.1",
|
|
11
|
-
"@ngx-translate/core": "^
|
|
12
|
-
"angular-split": "^
|
|
11
|
+
"@ngx-translate/core": "^17.0.0",
|
|
12
|
+
"angular-split": "^20.0.0",
|
|
13
13
|
"ngx-device-detector": "^9.0.0"
|
|
14
14
|
},
|
|
15
15
|
"sideEffects": false,
|