@webilix/ngx-helper-m3 0.0.20 → 0.0.21
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
2
2
|
import { INgxHelperConfig } from '../../ngx-helper.config';
|
|
3
3
|
import { ComponentService } from '../component.service';
|
|
4
|
-
import {
|
|
4
|
+
import { INgxHelperCardOption, NgxHelperCardAction } from './ngx-helper-card.interface';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
type Button = {
|
|
7
7
|
type: 'BUTTON';
|
|
@@ -30,18 +30,26 @@ export declare class NgxHelperCardComponent implements OnInit, OnChanges {
|
|
|
30
30
|
title: string;
|
|
31
31
|
subTitle?: string;
|
|
32
32
|
icon?: string;
|
|
33
|
-
actions:
|
|
33
|
+
actions: NgxHelperCardAction[];
|
|
34
|
+
option?: INgxHelperCardOption;
|
|
34
35
|
padding: string;
|
|
35
36
|
backgroundColor?: string;
|
|
36
37
|
hasShadow: boolean;
|
|
37
38
|
isMobile: boolean;
|
|
38
39
|
buttons: Button[];
|
|
39
40
|
private componentConfig;
|
|
41
|
+
optionId?: string;
|
|
42
|
+
optionTitle?: string;
|
|
43
|
+
optionItems: ('DIVIDER' | {
|
|
44
|
+
readonly id: string;
|
|
45
|
+
readonly title: string;
|
|
46
|
+
})[];
|
|
40
47
|
constructor(componentService: ComponentService, config?: Partial<INgxHelperConfig> | undefined);
|
|
41
48
|
ngOnInit(): void;
|
|
42
49
|
ngOnChanges(changes: SimpleChanges): void;
|
|
43
50
|
onResize(): void;
|
|
51
|
+
setOption(id: string, firstCheck?: boolean): void;
|
|
44
52
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperCardComponent, [null, { optional: true; }]>;
|
|
45
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperCardComponent, "ngx-helper-card", never, { "title": { "alias": "title"; "required": true; }; "subTitle": { "alias": "subTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "hasShadow": { "alias": "hasShadow"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
53
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperCardComponent, "ngx-helper-card", never, { "title": { "alias": "title"; "required": true; }; "subTitle": { "alias": "subTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "option": { "alias": "option"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "hasShadow": { "alias": "hasShadow"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
46
54
|
}
|
|
47
55
|
export {};
|
|
@@ -12,5 +12,14 @@ interface ICardMenu {
|
|
|
12
12
|
readonly showIcon?: boolean;
|
|
13
13
|
readonly buttons: ('DIVIDER' | ICardButton)[];
|
|
14
14
|
}
|
|
15
|
-
export type
|
|
15
|
+
export type NgxHelperCardAction = ICardButton | ICardMenu;
|
|
16
|
+
export interface INgxHelperCardOption {
|
|
17
|
+
readonly id?: string;
|
|
18
|
+
readonly icon: string;
|
|
19
|
+
readonly items: ('DIVIDER' | {
|
|
20
|
+
readonly id: string;
|
|
21
|
+
readonly title: string;
|
|
22
|
+
})[];
|
|
23
|
+
readonly action: (id: string) => void;
|
|
24
|
+
}
|
|
16
25
|
export {};
|
package/ngx-helper-m3.css
CHANGED
|
@@ -457,6 +457,36 @@
|
|
|
457
457
|
padding: 0 0.5rem;
|
|
458
458
|
}
|
|
459
459
|
}
|
|
460
|
+
|
|
461
|
+
.option {
|
|
462
|
+
margin-right: 0.5rem;
|
|
463
|
+
|
|
464
|
+
button {
|
|
465
|
+
display: flex;
|
|
466
|
+
justify-content: center;
|
|
467
|
+
column-gap: 0.25rem;
|
|
468
|
+
|
|
469
|
+
border-radius: 0;
|
|
470
|
+
padding: 0 0.75rem;
|
|
471
|
+
min-width: auto;
|
|
472
|
+
height: 55px;
|
|
473
|
+
|
|
474
|
+
.title {
|
|
475
|
+
font-size: 90%;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
mat-icon {
|
|
479
|
+
padding: 0 0 0 0.5rem;
|
|
480
|
+
margin: 0;
|
|
481
|
+
font-size: 120%;
|
|
482
|
+
line-height: 1;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
mat-icon.mobile-view {
|
|
486
|
+
padding: 0;
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
}
|
|
460
490
|
}
|
|
461
491
|
|
|
462
492
|
.card-header.has-sub-title {
|