@muxima-ui/core 1.1.0 → 1.3.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/README.md +15 -0
- package/fesm2022/muxima-ui-core-carousel.mjs +377 -0
- package/fesm2022/muxima-ui-core-carousel.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-color-picker.mjs +755 -0
- package/fesm2022/muxima-ui-core-color-picker.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-data-grid.mjs +1187 -0
- package/fesm2022/muxima-ui-core-data-grid.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-editor.mjs +575 -0
- package/fesm2022/muxima-ui-core-editor.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-image-cropper.mjs +568 -0
- package/fesm2022/muxima-ui-core-image-cropper.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-kanban.mjs +369 -0
- package/fesm2022/muxima-ui-core-kanban.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-notification-center.mjs +487 -0
- package/fesm2022/muxima-ui-core-notification-center.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-sidebar.mjs +333 -0
- package/fesm2022/muxima-ui-core-sidebar.mjs.map +1 -0
- package/fesm2022/muxima-ui-core-timeline.mjs +117 -0
- package/fesm2022/muxima-ui-core-timeline.mjs.map +1 -0
- package/fesm2022/muxima-ui-core.mjs +1 -1
- package/fesm2022/muxima-ui-core.mjs.map +1 -1
- package/package.json +57 -2
- package/styles/base.css +17 -0
- package/styles/components/carousel.css +113 -0
- package/styles/components/color-picker.css +207 -0
- package/styles/components/data-grid.css +235 -0
- package/styles/components/editor.css +187 -0
- package/styles/components/image-cropper.css +113 -0
- package/styles/components/kanban.css +115 -0
- package/styles/components/notification-center.css +220 -0
- package/styles/components/sidebar.css +211 -0
- package/styles/components/timeline.css +180 -0
- package/styles/muxima.css +9 -0
- package/types/muxima-ui-core-carousel.d.ts +72 -0
- package/types/muxima-ui-core-color-picker.d.ts +153 -0
- package/types/muxima-ui-core-data-grid.d.ts +175 -0
- package/types/muxima-ui-core-editor.d.ts +104 -0
- package/types/muxima-ui-core-image-cropper.d.ts +105 -0
- package/types/muxima-ui-core-kanban.d.ts +83 -0
- package/types/muxima-ui-core-notification-center.d.ts +91 -0
- package/types/muxima-ui-core-sidebar.d.ts +115 -0
- package/types/muxima-ui-core-timeline.d.ts +59 -0
- package/types/muxima-ui-core.d.ts +1 -1
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Navegação lateral que recolhe para só ícones. O conteúdo fica dentro de um `<nav>`;
|
|
5
|
+
* recolhida, os nomes continuam lá para o leitor de ecrã e aparecem numa dica ao passar
|
|
6
|
+
* o rato ou com o foco.
|
|
7
|
+
*
|
|
8
|
+
* ```html
|
|
9
|
+
* <mx-sidebar [(collapsed)]="recolhida" aria-label="Principal">
|
|
10
|
+
* <div mxSidebarHeader>Kianda</div>
|
|
11
|
+
* <mx-sidebar-group label="Gestão">
|
|
12
|
+
* <li><a mxSidebarItem routerLink="/facturas" routerLinkActive ariaCurrentWhenActive="page">
|
|
13
|
+
* <svg mxSidebarIcon>...</svg><span mxSidebarLabel>Facturas</span>
|
|
14
|
+
* </a></li>
|
|
15
|
+
* </mx-sidebar-group>
|
|
16
|
+
* <div mxSidebarFooter>...</div>
|
|
17
|
+
* </mx-sidebar>
|
|
18
|
+
* <button mxSidebarToggle [sidebar]="menu">...</button>
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* O item da página actual leva aria-current="page" (o routerLinkActive faz isso com
|
|
22
|
+
* ariaCurrentWhenActive).
|
|
23
|
+
*/
|
|
24
|
+
declare class MxSidebar {
|
|
25
|
+
readonly collapsed: i0.ModelSignal<boolean>;
|
|
26
|
+
readonly ariaLabel: i0.InputSignal<string>;
|
|
27
|
+
/** `default` com fundo de superfície; `subtle` com o fundo do papel. */
|
|
28
|
+
readonly variant: i0.InputSignal<"default" | "subtle">;
|
|
29
|
+
readonly id: i0.InputSignal<string>;
|
|
30
|
+
private readonly doc;
|
|
31
|
+
/** A dica vive no body, para não ser cortada nem deslocada por contentores da página. */
|
|
32
|
+
private tipEl?;
|
|
33
|
+
constructor();
|
|
34
|
+
toggle(): void;
|
|
35
|
+
/** Mostra a dica de um item (só com a barra recolhida). */
|
|
36
|
+
showTip(el: HTMLElement): void;
|
|
37
|
+
hideTip(): void;
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebar, never>;
|
|
39
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MxSidebar, "mx-sidebar", ["mxSidebar"], { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[mxSidebarHeader]", "*", "[mxSidebarFooter]"], true, never>;
|
|
40
|
+
}
|
|
41
|
+
/** Link ou botão da barra. Põe o texto em `mxSidebarLabel` e o ícone em `mxSidebarIcon`. */
|
|
42
|
+
declare class MxSidebarItem {
|
|
43
|
+
protected readonly sidebar: MxSidebar | null;
|
|
44
|
+
protected readonly el: HTMLElement;
|
|
45
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarItem, never>;
|
|
46
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarItem, "a[mxSidebarItem], button[mxSidebarItem]", ["mxSidebarItem"], {}, {}, never, never, true, never>;
|
|
47
|
+
}
|
|
48
|
+
declare class MxSidebarLabel {
|
|
49
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarLabel, never>;
|
|
50
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarLabel, "[mxSidebarLabel]", never, {}, {}, never, never, true, never>;
|
|
51
|
+
}
|
|
52
|
+
declare class MxSidebarIcon {
|
|
53
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarIcon, never>;
|
|
54
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarIcon, "[mxSidebarIcon]", never, {}, {}, never, never, true, never>;
|
|
55
|
+
}
|
|
56
|
+
/** Contagem ou estado à direita do item; recolhida, passa a ponto. */
|
|
57
|
+
declare class MxSidebarBadge {
|
|
58
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarBadge, never>;
|
|
59
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarBadge, "[mxSidebarBadge]", never, {}, {}, never, never, true, never>;
|
|
60
|
+
}
|
|
61
|
+
declare class MxSidebarHeader {
|
|
62
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarHeader, never>;
|
|
63
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarHeader, "[mxSidebarHeader]", never, {}, {}, never, never, true, never>;
|
|
64
|
+
}
|
|
65
|
+
declare class MxSidebarFooter {
|
|
66
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarFooter, never>;
|
|
67
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarFooter, "[mxSidebarFooter]", never, {}, {}, never, never, true, never>;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Grupo de itens com título. O título dá nome à lista (aria-labelledby); recolhida,
|
|
71
|
+
* o título fica escondido só visualmente. Os itens vão em `<li>`.
|
|
72
|
+
*/
|
|
73
|
+
declare class MxSidebarGroup {
|
|
74
|
+
readonly label: i0.InputSignal<string>;
|
|
75
|
+
protected readonly labelId: string;
|
|
76
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarGroup, never>;
|
|
77
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MxSidebarGroup, "mx-sidebar-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Secção que abre e fecha (botão com aria-expanded). Com a barra recolhida, carregar na
|
|
81
|
+
* secção expande a barra e abre a secção.
|
|
82
|
+
*
|
|
83
|
+
* ```html
|
|
84
|
+
* <li><mx-sidebar-section label="Relatórios" [(open)]="aberta">
|
|
85
|
+
* <svg mxSidebarIcon>...</svg>
|
|
86
|
+
* <li><a mxSidebarItem routerLink="/vendas"><span mxSidebarLabel>Vendas</span></a></li>
|
|
87
|
+
* </mx-sidebar-section></li>
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
declare class MxSidebarSection {
|
|
91
|
+
readonly label: i0.InputSignal<string>;
|
|
92
|
+
readonly open: i0.ModelSignal<boolean>;
|
|
93
|
+
readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
|
|
94
|
+
private readonly sidebar;
|
|
95
|
+
protected readonly listId: string;
|
|
96
|
+
/** Recolhida, a secção não mostra os filhos. */
|
|
97
|
+
protected readonly isOpen: i0.Signal<boolean>;
|
|
98
|
+
protected toggle(): void;
|
|
99
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarSection, never>;
|
|
100
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MxSidebarSection, "mx-sidebar-section", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[mxSidebarIcon]", "*"], true, never>;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Botão que recolhe e expande a barra. Tem aria-expanded e aria-controls; o nome muda
|
|
104
|
+
* entre "Recolher menu" e "Expandir menu" (ou os textos que passares).
|
|
105
|
+
*/
|
|
106
|
+
declare class MxSidebarToggle {
|
|
107
|
+
readonly sidebar: i0.InputSignal<MxSidebar>;
|
|
108
|
+
readonly collapseLabel: i0.InputSignal<string>;
|
|
109
|
+
readonly expandLabel: i0.InputSignal<string>;
|
|
110
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxSidebarToggle, never>;
|
|
111
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxSidebarToggle, "button[mxSidebarToggle]", ["mxSidebarToggle"], { "sidebar": { "alias": "sidebar"; "required": true; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
112
|
+
}
|
|
113
|
+
declare const MX_SIDEBAR: readonly [typeof MxSidebar, typeof MxSidebarItem, typeof MxSidebarLabel, typeof MxSidebarIcon, typeof MxSidebarBadge, typeof MxSidebarHeader, typeof MxSidebarFooter, typeof MxSidebarGroup, typeof MxSidebarSection, typeof MxSidebarToggle];
|
|
114
|
+
|
|
115
|
+
export { MX_SIDEBAR, MxSidebar, MxSidebarBadge, MxSidebarFooter, MxSidebarGroup, MxSidebarHeader, MxSidebarIcon, MxSidebarItem, MxSidebarLabel, MxSidebarSection, MxSidebarToggle };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
type MxTimelineVariant = 'default' | 'accent' | 'success' | 'warning' | 'danger';
|
|
4
|
+
/**
|
|
5
|
+
* Acontecimentos por ordem, sobre uma lista ordenada nativa: o leitor de ecrã anuncia
|
|
6
|
+
* "lista, 4 itens" e a posição de cada um.
|
|
7
|
+
*
|
|
8
|
+
* ```html
|
|
9
|
+
* <ol mxTimeline>
|
|
10
|
+
* <li mxTimelineItem variant="success">
|
|
11
|
+
* <time mxTimelineTime datetime="2026-10-27T09:40">27 out, 09:40</time>
|
|
12
|
+
* <p mxTimelineTitle>Factura paga</p>
|
|
13
|
+
* <p mxTimelineDescription>Banco Mutamba pagou FT 2026/0196.</p>
|
|
14
|
+
* </li>
|
|
15
|
+
* </ol>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
declare class MxTimeline {
|
|
19
|
+
readonly orientation: i0.InputSignal<"vertical" | "horizontal">;
|
|
20
|
+
readonly size: i0.InputSignal<"sm" | "md">;
|
|
21
|
+
/** `alternate` põe os itens alternadamente dos dois lados da linha (só vertical, ecrãs largos). */
|
|
22
|
+
readonly align: i0.InputSignal<"start" | "alternate">;
|
|
23
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxTimeline, never>;
|
|
24
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxTimeline, "ol[mxTimeline], ul[mxTimeline]", ["mxTimeline"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Um acontecimento. O marcador fica na linha; com `pending` aparece tracejado
|
|
28
|
+
* (passo ainda por acontecer). Diz isso também no texto, para o leitor de ecrã.
|
|
29
|
+
*/
|
|
30
|
+
declare class MxTimelineItem {
|
|
31
|
+
readonly variant: i0.InputSignal<MxTimelineVariant>;
|
|
32
|
+
readonly pending: i0.InputSignalWithTransform<boolean, unknown>;
|
|
33
|
+
/** Marcador maior, com espaço para um ícone (mxTimelineIcon). */
|
|
34
|
+
readonly icon: i0.InputSignalWithTransform<boolean, unknown>;
|
|
35
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxTimelineItem, never>;
|
|
36
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxTimelineItem, "li[mxTimelineItem]", ["mxTimelineItem"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
37
|
+
}
|
|
38
|
+
/** Ícone dentro do marcador (svg decorativo). Usa com `icon` no item. */
|
|
39
|
+
declare class MxTimelineIcon {
|
|
40
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxTimelineIcon, never>;
|
|
41
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxTimelineIcon, "[mxTimelineIcon]", never, {}, {}, never, never, true, never>;
|
|
42
|
+
}
|
|
43
|
+
/** Data ou hora do acontecimento. Usa um `<time datetime>`. */
|
|
44
|
+
declare class MxTimelineTime {
|
|
45
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxTimelineTime, never>;
|
|
46
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxTimelineTime, "[mxTimelineTime]", never, {}, {}, never, never, true, never>;
|
|
47
|
+
}
|
|
48
|
+
declare class MxTimelineTitle {
|
|
49
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxTimelineTitle, never>;
|
|
50
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxTimelineTitle, "[mxTimelineTitle]", never, {}, {}, never, never, true, never>;
|
|
51
|
+
}
|
|
52
|
+
declare class MxTimelineDescription {
|
|
53
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MxTimelineDescription, never>;
|
|
54
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MxTimelineDescription, "[mxTimelineDescription]", never, {}, {}, never, never, true, never>;
|
|
55
|
+
}
|
|
56
|
+
declare const MX_TIMELINE: readonly [typeof MxTimeline, typeof MxTimelineItem, typeof MxTimelineIcon, typeof MxTimelineTime, typeof MxTimelineTitle, typeof MxTimelineDescription];
|
|
57
|
+
|
|
58
|
+
export { MX_TIMELINE, MxTimeline, MxTimelineDescription, MxTimelineIcon, MxTimelineItem, MxTimelineTime, MxTimelineTitle };
|
|
59
|
+
export type { MxTimelineVariant };
|