@yuuvis/material 2.17.0 → 2.19.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.
Files changed (22) hide show
  1. package/badge/badge.component.d.ts +38 -5
  2. package/badge/index.d.ts +0 -1
  3. package/badge/model/badge.model.d.ts +1 -0
  4. package/fesm2022/yuuvis-material-badge.mjs +47 -13
  5. package/fesm2022/yuuvis-material-badge.mjs.map +1 -1
  6. package/fesm2022/yuuvis-material-layout.mjs +3 -3
  7. package/fesm2022/yuuvis-material-layout.mjs.map +1 -1
  8. package/fesm2022/yuuvis-material-panes.mjs +210 -65
  9. package/fesm2022/yuuvis-material-panes.mjs.map +1 -1
  10. package/fesm2022/yuuvis-material.mjs +179 -48
  11. package/fesm2022/yuuvis-material.mjs.map +1 -1
  12. package/layout/lib/components/master-details-layout/master-details-layout.component.d.ts +2 -2
  13. package/lib/assets/i18n/ar.json +22 -0
  14. package/lib/directives/button/ymt-button.directive.d.ts +3 -2
  15. package/lib/providers/material.providers.d.ts +3 -1
  16. package/lib/services/device.service.d.ts +112 -25
  17. package/package.json +1 -1
  18. package/panes/lib/pane/pane-header/pane-header.component.d.ts +59 -26
  19. package/panes/lib/pane/pane.component.d.ts +114 -34
  20. package/scss/material-components/_button.scss +31 -10
  21. package/scss/material-components/_expansion-panel.scss +17 -0
  22. package/scss/material-components/index.scss +1 -0
package/lib/services/device.service.d.ts CHANGED
@@ -3,57 +3,144 @@ import { Observable } from 'rxjs';
3
3
  import { DeviceScreen } from './device.interface';
4
4
  import * as i0 from "@angular/core";
5
5
  /**
6
- * This service is used to adapt styles and designs of the client to
7
- * different devices and screen sizes.
6
+ * Service that adapts the application layout and behavior to different devices,
7
+ * screen sizes, orientations, and browser zoom levels.
8
8
  *
9
- * Using `screenChange$` observable you are able to monitor changes to
10
- * the screen size and act upon it.
9
+ * This service operates globally as a singleton, listening to window resize events
10
+ * and maintaining reactive state about the current screen and zoom conditions.
11
+ * It also writes attributes to the `<body>` element so that CSS rules can respond
12
+ * to screen state without requiring Angular bindings.
11
13
  *
12
- * This service will also adds attributes to the body tag that reflect the
13
- * current screen/device state. This way you can apply secific styles in your
14
- * css files for different screen resolutions and orientations.
14
+ * **Key Features:**
15
+ * - Screen size classification (s / m / l / xl) based on viewport dimensions
16
+ * - Orientation detection (portrait / landscape), with native API fallback on mobile
17
+ * - Small-screen layout signal for toggling compact UI modes
18
+ * - Browser zoom level tracking via `pageZoomPercentage$`
19
+ * - Automatic `<body>` attribute management for CSS-driven responsive styles
15
20
  *
16
- * Attributes applied to the body tag are:
21
+ * **Usage:**
22
+ * 1. `DeviceService` is initialized automatically by `provideYmtMaterial()` in `app.config.ts`
23
+ * 2. Pass `{ supportsSmallScreens: true }` to `provideYmtMaterial()` if the app has a dedicated compact layout
24
+ * 3. Inject `DeviceService` wherever needed — it is already initialized
25
+ * 4. Subscribe to `screenChange$` or `pageZoomPercentage$` to react to changes
17
26
  *
18
- * - `data-screen` - [s, m, l, xl] - for different screen sizes
19
- * (s: for mobile phone like screen sizes, m: for tablet like screen
20
- * sizes, 'l': for desktop like screen sizes, 'xl': for screen sizes exceeding
21
- * the desktop screen size).
22
- *
23
- * - `data-orientation` - [portrait, landscape] - for the current screen orientation
24
- *
25
- * - `data-touch-enabled` - [true] - if the device has touch capabilities (won't be added if the device doesn't have touch capabilities)
27
+ * **Body attributes written by this service:**
28
+ * - `data-screen-size` — current size bucket: `s` | `m` | `l` | `xl`
29
+ * - `data-screen-orientation` — `portrait` | `landscape`
30
+ * - `data-touch-enabled` — present only when the device supports touch input
26
31
  *
27
32
  * ```html
28
- * <body data-screen-size="s" data-screen-orientation="portrait" data-touch-enabled="true">
29
- * ...
33
+ * <body data-screen-size="l" data-screen-orientation="landscape">
34
+ * ...
30
35
  * </body>
31
36
  * ```
37
+ *
38
+ * **Screen size boundaries:**
39
+ *
40
+ * | Size | Range | Device |
41
+ * |------|----------------------------|-----------------------------------|
42
+ * | `s` | < 600px | mobile phone |
43
+ * | `m` | 600px – 900/1200px | tablet (upper bound by orientation) |
44
+ * | `l` | 900/1200px – 1800px | desktop |
45
+ * | `xl` | ≥ 1800px | wide / large desktop |
46
+ *
47
+ * @see {@link DeviceScreen} for the screen state shape emitted by `screenChange$`
32
48
  */
33
49
  export declare class DeviceService {
34
50
  #private;
51
+ /**
52
+ * Emits the current {@link DeviceScreen} state whenever the window is resized.
53
+ *
54
+ * The emitted value includes the size bucket (`s` | `m` | `l` | `xl`), orientation,
55
+ * and the raw viewport dimensions in pixels. Use this stream to reactively adapt
56
+ * layout or behavior whenever the screen state changes.
57
+ *
58
+ * Replay buffer of 1 — late subscribers always receive the most recent value
59
+ * without waiting for the next resize event.
60
+ *
61
+ * @example
62
+ * ```ts
63
+ * deviceService.screenChange$.subscribe(screen => {
64
+ * console.log(screen.size); // 'l'
65
+ * console.log(screen.orientation); // 'landscape'
66
+ * console.log(screen.width); // 1440
67
+ * });
68
+ * ```
69
+ */
35
70
  screenChange$: Observable<DeviceScreen>;
36
71
  /**
37
- * Signal to indicate if the screen size is small (e.g. mobile phone).
38
- * This will only be triggered if `supportsSmallScreens` is set to true.
39
- * Major components will use this metric to adapt to 'small screen behavior' and so can you
72
+ * Signal that indicates whether the app should render in a compact small-screen layout.
73
+ *
74
+ * This is `true` only when all three conditions are met:
75
+ * 1. `supportsSmallScreens` was passed as `true` to {@link init}
76
+ * 2. The current screen size bucket is `s` (< 600px viewport width)
77
+ * 3. The current orientation is `portrait`
78
+ *
79
+ * Components that have a dedicated compact mode should read this signal
80
+ * and switch their layout accordingly.
81
+ *
82
+ * @default false
40
83
  */
41
84
  smallScreenLayout: import("@angular/core").WritableSignal<boolean>;
42
85
  /**
43
- * if the device is a mobile device (android / iPhone / windows-phone etc)
86
+ * `true` if the current device is a mobile phone (Android, iPhone, Windows Phone, etc.).
87
+ * Populated once at service creation from `ngx-device-detector`.
44
88
  */
45
89
  isMobile: boolean;
46
90
  /**
47
- * if the device us a tablet (iPad etc)
91
+ * `true` if the current device is a tablet (e.g. iPad).
92
+ * Populated once at service creation from `ngx-device-detector`.
48
93
  */
49
94
  isTablet: boolean;
50
95
  /**
51
- * if the app is running on a Desktop browser
96
+ * `true` if the app is running in a desktop browser.
97
+ * Populated once at service creation from `ngx-device-detector`.
52
98
  */
53
99
  isDesktop: boolean;
100
+ /**
101
+ * Detailed device and browser information provided by `ngx-device-detector`.
102
+ * Includes OS, browser name and version, device type, and user agent.
103
+ */
54
104
  info?: DeviceInfo;
105
+ /**
106
+ * `true` if the device supports touch input.
107
+ * Detected via `ontouchstart` presence or `navigator.maxTouchPoints > 0`.
108
+ */
55
109
  isTouchEnabled: boolean;
56
- constructor();
110
+ /**
111
+ * Emits the current browser zoom level as a percentage whenever it changes.
112
+ *
113
+ * The value is derived from `window.outerWidth / window.innerWidth * 100`.
114
+ * At 100% zoom the value is `100`, at 150% it is `150`, and so on.
115
+ *
116
+ * Emits only when the value actually changes (no duplicate emissions).
117
+ * Updates are driven by the window `resize` event, which all major browsers
118
+ * fire when the user changes the zoom level via Ctrl+/- or Ctrl+scroll.
119
+ * On desktop there is a 500ms debounce; on mobile, no debounce is applied.
120
+ *
121
+ * @example
122
+ * ```ts
123
+ * deviceService.pageZoomPercentage$.subscribe(zoom => {
124
+ * console.log(`Current zoom: ${zoom}%`); // e.g. "Current zoom: 150%"
125
+ * });
126
+ * ```
127
+ */
128
+ pageZoomPercentage$: Observable<number>;
129
+ /**
130
+ * Initializes the service and performs the first screen state evaluation.
131
+ *
132
+ * Called automatically by `provideYmtMaterial()` during application startup.
133
+ *
134
+ * Immediately evaluates the current viewport dimensions, classifies the screen size
135
+ * and orientation, writes the result to the `<body>` attributes, and emits the initial
136
+ * value on `screenChange$`. Subsequent updates are handled automatically via the
137
+ * internal resize listener.
138
+ *
139
+ * @param supportsSmallScreens - Set to `true` if the application has a dedicated compact
140
+ * layout for small portrait screens. When `true`, the {@link smallScreenLayout} signal
141
+ * will be set to `true` whenever the screen bucket is `s` and orientation is `portrait`.
142
+ * Defaults to `false`.
143
+ */
57
144
  init(supportsSmallScreens?: boolean): void;
58
145
  static ɵfac: i0.ɵɵFactoryDeclaration<DeviceService, never>;
59
146
  static ɵprov: i0.ɵɵInjectableDeclaration<DeviceService>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuuvis/material",
3
- "version": "2.17.0",
3
+ "version": "2.19.0",
4
4
  "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/panes/lib/pane/pane-header/pane-header.component.d.ts CHANGED
@@ -1,41 +1,74 @@
1
1
  import { TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  /**
4
- * Component for the pane header. It can be used to display a title,
5
- * subtitle and actions in the pane header.
4
+ * Header component for `ymt-pane`. Renders a two-row layout:
6
5
  *
7
- * The title and subtitle can be set via the `title` and `subtitle` inputs
8
- * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:
6
+ * - **Top row:** icon (optional), title, and actions area
7
+ * - **Bottom row:** subtitle and badges area
9
8
  *
9
+ * ## Title & Subtitle
10
+ *
11
+ * Can be set as plain strings via the `title` and `subtitle` inputs,
12
+ * or as rich content via the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle`
13
+ * content child templates. When a template is provided it takes precedence
14
+ * over the corresponding string input.
15
+ *
16
+ * ## Icon
17
+ *
18
+ * Set the `icon` input to a Material Icon ligature to display an icon
19
+ * to the left of the title row.
20
+ *
21
+ * ## Actions & Badges
22
+ *
23
+ * Pass a `TemplateRef` to the `actions` input to render action buttons
24
+ * aligned to the right of the title row. Similarly, pass a `TemplateRef`
25
+ * to the `badges` input to render badges aligned to the right of the
26
+ * subtitle row.
27
+ *
28
+ * @example
29
+ * ```html
30
+ * <!-- Simple usage with string inputs -->
31
+ * <ymt-pane-header
32
+ * [title]="'Documents'"
33
+ * [subtitle]="'12 items'"
34
+ * [icon]="'folder'"
35
+ * [actions]="headerActions"
36
+ * [badges]="headerBadges">
37
+ * </ymt-pane-header>
38
+ *
39
+ * <ng-template #headerActions>
40
+ * <button ymt-icon-button icon="add"></button>
41
+ * </ng-template>
42
+ *
43
+ * <ng-template #headerBadges>
44
+ * <ymt-badge severity="info">active</ymt-badge>
45
+ * </ng-template>
46
+ * ```
47
+ *
48
+ * @example
10
49
  * ```html
11
- * <!-- Using inputs -->
12
- * <ymt-pane-header [title]="'Pane Title'" [subtitle]="'Pane Subtitle'"></ymt-pane-header>
13
- * <!-- Using template refs -->
14
- * <ymt-pane-header>
15
- * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>
16
- * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
50
+ * <!-- Rich content via template projection -->
51
+ * <ymt-pane-header [icon]="'lock'">
52
+ * <ng-template #yuvPaneHeaderTitle>Custom <strong>title</strong></ng-template>
53
+ * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
17
54
  * </ymt-pane-header>
18
55
  * ```
19
56
  */
20
57
  export declare class YmtPaneHeaderComponent {
21
- /**
22
- * Title of the pane
23
- */
58
+ /** Plain-text title displayed in the top row. Ignored when a `#yuvPaneHeaderTitle` template is projected. */
24
59
  title: import("@angular/core").InputSignal<string | undefined>;
25
- /**
26
- * Icon of the pane
27
- */
60
+ /** Material Icon ligature rendered to the left of the title row (e.g. `'folder'`, `'lock'`). */
28
61
  icon: import("@angular/core").InputSignal<string | undefined>;
29
- /**
30
- * Subtitle of the pane
31
- */
62
+ /** Plain-text subtitle displayed in the bottom row. Ignored when a `#yuvPaneHeaderSubtitle` template is projected. */
32
63
  subtitle: import("@angular/core").InputSignal<string | undefined>;
33
- /**
34
- * TemplateRef for actions area in the pane header.
35
- */
36
- actions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
37
- titleSlot: import("@angular/core").Signal<TemplateRef<any> | undefined>;
38
- subtitleSlot: import("@angular/core").Signal<TemplateRef<any> | undefined>;
64
+ /** Template rendered in the actions area, aligned to the right of the title row. */
65
+ actions: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
66
+ /** Template rendered in the badges area, aligned to the right of the subtitle row. */
67
+ badges: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
68
+ /** Content child template for rich title content. Takes precedence over the `title` input. */
69
+ titleSlot: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
70
+ /** Content child template for rich subtitle content. Takes precedence over the `subtitle` input. */
71
+ subtitleSlot: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
39
72
  static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneHeaderComponent, never>;
40
- static ɵcmp: i0.ɵɵ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; }; }, {}, ["titleSlot", "subtitleSlot"], never, true, never>;
73
+ static ɵcmp: i0.ɵɵ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>;
41
74
  }
package/panes/lib/pane/pane.component.d.ts CHANGED
@@ -2,72 +2,152 @@ import { TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "./fullscreen.directive";
4
4
  /**
5
- * Pane component.
5
+ * A pane is a container component that unifies the appearance and behavior of
6
+ * content areas in an app. It renders as a bordered, rounded card with a grid
7
+ * layout for its sub-components.
6
8
  *
7
- * A pane has a header and a main area. You may choose to not show a header at all:
9
+ * ## Structure
10
+ *
11
+ * A pane uses a vertical grid layout with four areas. All sub-components are optional:
12
+ *
13
+ * | Area | Component | Description |
14
+ * |----------|--------------------|----------------------------------------------------|
15
+ * | top-bar | *(internal)* | Rendered automatically when `topBarActions` is set. |
16
+ * | header | `ymt-pane-header` | Title, subtitle, icon, and custom header actions. |
17
+ * | main | `ymt-pane-body` | Scrollable main content area. |
18
+ * | footer | `ymt-pane-footer` | Right-aligned action bar with a top border. |
8
19
  *
9
20
  * ```html
10
21
  * <ymt-pane>
11
- * Pane content goes here.
22
+ * <ymt-pane-header title="Users" subtitle="3 selected" [actions]="headerActions" />
23
+ * <ymt-pane-body>Main content</ymt-pane-body>
24
+ * <ymt-pane-footer>
25
+ * <button ymt-button>Save</button>
26
+ * </ymt-pane-footer>
12
27
  * </ymt-pane>
13
28
  * ```
14
29
  *
15
- * There are other components to be used within a pane:
16
- * - `ymt-pane-header`: Renders a pre-styled header area for the pane.
17
- * - `ymt-pane-body`: The main content area of the pane.
18
- * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.
30
+ * ### `ymt-pane-header`
19
31
  *
20
- * You can change the appearance of the header area via CSS variables:
21
- * ```css
22
- * ymt-pane {
23
- * --header-area-background: var(--ymt-surface-container-low);
24
- * --header-area-border-color: var(--ymt-outline-variant);
25
- * }
26
- * ```
32
+ * Accepts `title`, `subtitle`, and `icon` as string inputs. For richer content,
33
+ * use the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle` template refs:
27
34
  *
28
- * The main area has a padding by default. You can customize or remove the padding via
29
- * CSS variables:
30
- * ```css
31
- * ymt-pane {
32
- * --main-area-padding: 0;
33
- * }
35
+ * ```html
36
+ * <ymt-pane-header>
37
+ * <ng-template #yuvPaneHeaderTitle><h2>Custom title</h2></ng-template>
38
+ * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
39
+ * </ymt-pane-header>
34
40
  * ```
35
41
  *
36
- * Add actions to a pane:
42
+ * Header actions can be projected via the `[actions]` input (TemplateRef).
43
+ *
44
+ * ### Top bar actions
45
+ *
46
+ * Pass a `TemplateRef` to the `[topBarActions]` input to render icon buttons
47
+ * in a slim top bar above the header:
48
+ *
37
49
  * ```html
38
- * <ymt-pane title="My Pane" subTitle="Pane Subtitle">
39
- * <ng-template #yuvPaneActions>
40
- * <button ymt-icon-button><mat-icon>settings</mat-icon></button>
41
- * <button ymt-icon-button><mat-icon>more</mat-icon></button>
42
- * </ng-template>
50
+ * <ymt-pane [topBarActions]="actions">
51
+ * <ymt-pane-body>Content</ymt-pane-body>
43
52
  * </ymt-pane>
53
+ *
54
+ * <ng-template #actions>
55
+ * <button ymt-icon-button icon-button-size="small"><mat-icon>settings</mat-icon></button>
56
+ * </ng-template>
44
57
  * ```
45
58
  *
46
- * Toggle fullscreen mode:
59
+ * ## Fullscreen
60
+ *
61
+ * Every pane supports fullscreen mode. The pane expands to fill the viewport,
62
+ * background content becomes inert, and pressing <kbd>Escape</kbd> exits.
63
+ *
47
64
  * ```html
48
65
  * <ymt-pane #pane>
49
66
  * <ymt-pane-body>
50
- * <button (click)="pane.toggleFullscreen()">Fullscreen</button>
67
+ * <button (click)="pane.toggleFullscreen()">Toggle fullscreen</button>
51
68
  * </ymt-pane-body>
52
69
  * </ymt-pane>
53
70
  * ```
54
71
  *
72
+ * Programmatic API: `enterFullscreen()`, `exitFullscreen()`, `toggleFullscreen()`.
73
+ * Read the current state via the `fullscreenActive` signal.
74
+ * Listen to transitions via the `(fullscreenEnter)` and `(fullscreenExit)` outputs.
75
+ *
76
+ * ## Busy state
77
+ *
78
+ * Set `[busy]="true"` to replace the static border with a rotating
79
+ * conic-gradient border that signals a loading state:
80
+ *
81
+ * ```html
82
+ * <ymt-pane [busy]="isLoading()">
83
+ * <ymt-pane-body>Content</ymt-pane-body>
84
+ * </ymt-pane>
85
+ * ```
86
+ *
87
+ * ## Enter animation
88
+ *
89
+ * Panes fade in on creation (0.15 s ease-out by default). Customize or delay
90
+ * the animation via CSS variables, or disable it entirely with the
91
+ * `[noAnimation]` input:
92
+ *
93
+ * ```css
94
+ * ymt-pane {
95
+ * --enter-animation-duration: 0.3s;
96
+ * --enter-animation-delay: 0.1s;
97
+ * }
98
+ * ```
99
+ *
100
+ * ```html
101
+ * <ymt-pane [noAnimation]="true"> ... </ymt-pane>
102
+ * ```
103
+ *
104
+ * ## Plain mode
105
+ *
106
+ * Set `[plain]="true"` to strip the border, border-radius, and background
107
+ * while keeping the inner grid structure. Useful when embedding a pane inside
108
+ * another styled container.
109
+ *
110
+ * ## CSS custom properties
111
+ *
112
+ * | Property | Default | Description |
113
+ * |-------------------------------|-------------------------------|--------------------------------------|
114
+ * | `--header-area-padding` | `var(--ymt-spacing-xl)` | Padding of the header area. |
115
+ * | `--header-area-background` | `transparent` | Background of the header area. |
116
+ * | `--header-area-border-color` | `transparent` | Bottom border of the header area. |
117
+ * | `--main-area-padding` | `0` | Padding of the body area. |
118
+ * | `--pane-background-color` | `var(--ymt-surface)` | Background of the pane. |
119
+ * | `--busy-border-width` | `2px` | Width of the busy indicator border. |
120
+ * | `--busy-border-color` | `var(--ymt-primary)` | Color of the busy indicator border. |
121
+ * | `--enter-animation-duration` | `0.15s` | Duration of the fade-in animation. |
122
+ * | `--enter-animation-delay` | `0s` | Delay before the fade-in starts. |
55
123
  */
56
124
  export declare class YmtPaneComponent {
57
125
  #private;
58
126
  /**
59
- * TemplateRef for actions area in the top bar. These actions will be placed at the end of
60
- * the top bar.
127
+ * Template for action buttons rendered in the top bar area of the pane.
128
+ * Use `icon-button-size="small"` or `icon-button-size="extra-small"` on icon
129
+ * buttons for proper alignment.
61
130
  *
62
131
  * ```html
63
- * <ymt-pane title="My Pane" subTitle="Pane Subtitle" [topBarActions]="topBarActions"></ymt-pane>
64
- * <ng-template #topBarActions>
132
+ * <ymt-pane [topBarActions]="actions">
133
+ * <ymt-pane-body>Content</ymt-pane-body>
134
+ * </ymt-pane>
135
+ *
136
+ * <ng-template #actions>
65
137
  * <button ymt-icon-button icon-button-size="small"><mat-icon>settings</mat-icon></button>
66
138
  * </ng-template>
67
139
  * ```
68
- * Make sure to set the `icon-button-size="small"` for proper alignment in the top bar.
69
140
  */
70
141
  topBarActions: import("@angular/core").InputSignal<TemplateRef<unknown> | undefined>;
142
+ /**
143
+ * When set to true, the pane border will be replaced with an animated
144
+ * conic-gradient border to indicate a busy/loading state.
145
+ */
146
+ busy: import("@angular/core").InputSignal<boolean>;
147
+ /**
148
+ * Disable the default fade-in enter animation.
149
+ */
150
+ noAnimation: import("@angular/core").InputSignal<boolean>;
71
151
  /**
72
152
  * Setting this to true will remove the default styles for the pane. So it will
73
153
  * render without border-radius, border and background color, but keep the inner
@@ -84,5 +164,5 @@ export declare class YmtPaneComponent {
84
164
  /** Exit fullscreen mode. */
85
165
  exitFullscreen(): void;
86
166
  static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneComponent, never>;
87
- static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneComponent, "ymt-pane", never, { "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.FullscreenDirective; inputs: {}; outputs: { "fullscreenEnter": "fullscreenEnter"; "fullscreenExit": "fullscreenExit"; }; }]>;
167
+ static ɵcmp: i0.ɵɵ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 i1.FullscreenDirective; inputs: {}; outputs: { "fullscreenEnter": "fullscreenEnter"; "fullscreenExit": "fullscreenExit"; }; }]>;
88
168
  }
package/scss/material-components/_button.scss CHANGED
@@ -4,21 +4,42 @@
4
4
  // small
5
5
  .ymt-button--size-s.mdc-button {
6
6
  @include mat.button-density(-2);
7
- @include mat.button-overrides((
8
- filled-label-text-size: var(--mat-sys-label-medium-size),
9
- filled-horizontal-padding: t.use-token(spacing-m),
10
- outlined-horizontal-padding: t.use-token(spacing-m),
11
- outlined-label-text-size: var(--mat-sys-label-medium-size),
12
- text-label-text-size: var(--mat-sys-label-medium-size),
13
- text-horizontal-padding: t.use-token(spacing-m),
14
- ));
7
+ @include mat.button-overrides(
8
+ (
9
+ filled-label-text-size: var(--mat-sys-label-medium-size),
10
+ filled-horizontal-padding: t.use-token(spacing-m),
11
+ outlined-horizontal-padding: t.use-token(spacing-m),
12
+ outlined-label-text-size: var(--mat-sys-label-medium-size),
13
+ text-label-text-size: var(--mat-sys-label-medium-size),
14
+ text-horizontal-padding: t.use-token(spacing-m)
15
+ )
16
+ );
15
17
  }
16
18
 
17
19
  // medium (default)
18
20
  // .ymt-button--size-m.mdc-button {}
19
21
 
22
+ // danger
23
+ .ymt-button--danger.mdc-button {
24
+ @include mat.button-overrides(
25
+ (
26
+ filled-container-color: t.use-token(danger),
27
+ filled-label-text-color: t.use-token(on-danger),
28
+ filled-state-layer-color: t.use-token(on-danger),
29
+ filled-ripple-color: t.use-token(on-danger)
30
+ )
31
+ );
32
+ }
20
33
 
21
- .mdc-button .mdc-button__label{
34
+ .mdc-button .mdc-button__label {
22
35
  line-height: 1;
23
- text-box: trim-both cap alphabetic
36
+ text-box: trim-both cap alphabetic;
24
37
  }
38
+
39
+ // button groups
40
+ @include mat.button-toggle-overrides(
41
+ (
42
+ shape: t.use-token(corner-s),
43
+ height: 2em
44
+ )
45
+ );
package/scss/material-components/_expansion-panel.scss ADDED
@@ -0,0 +1,17 @@
1
+ @use '@angular/material' as mat;
2
+ @use './../token/token.tools' as t;
3
+
4
+ $expansion-outline-color: t.use-token(outline-variant);
5
+
6
+ @include mat.expansion-overrides(
7
+ (
8
+ container-shape: t.use-token(corner-s),
9
+ container-background-color: t.use-token(surface-panel)
10
+ )
11
+ );
12
+
13
+ .mat-expansion-panel {
14
+ // TODO: Should be obsolete after update to A21 (use elevation override instead)
15
+ box-shadow: none !important;
16
+ border: 1px solid $expansion-outline-color;
17
+ }
package/scss/material-components/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @forward 'icon';
2
2
  @forward 'icon-button';
3
3
  @forward 'button';
4
+ @forward 'expansion-panel';
4
5
  @forward 'select';
5
6
  @forward 'progress';
6
7
  @forward 'menu';