@muxima-ui/core 1.0.0 → 1.2.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 (55) hide show
  1. package/README.md +12 -4
  2. package/fesm2022/muxima-ui-core-carousel.mjs +377 -0
  3. package/fesm2022/muxima-ui-core-carousel.mjs.map +1 -0
  4. package/fesm2022/muxima-ui-core-chips.mjs +349 -0
  5. package/fesm2022/muxima-ui-core-chips.mjs.map +1 -0
  6. package/fesm2022/muxima-ui-core-clipboard.mjs +110 -0
  7. package/fesm2022/muxima-ui-core-clipboard.mjs.map +1 -0
  8. package/fesm2022/muxima-ui-core-color-picker.mjs +755 -0
  9. package/fesm2022/muxima-ui-core-color-picker.mjs.map +1 -0
  10. package/fesm2022/muxima-ui-core-date-picker.mjs +494 -12
  11. package/fesm2022/muxima-ui-core-date-picker.mjs.map +1 -1
  12. package/fesm2022/muxima-ui-core-file-upload.mjs +392 -0
  13. package/fesm2022/muxima-ui-core-file-upload.mjs.map +1 -0
  14. package/fesm2022/muxima-ui-core-notification-center.mjs +487 -0
  15. package/fesm2022/muxima-ui-core-notification-center.mjs.map +1 -0
  16. package/fesm2022/muxima-ui-core-rating.mjs +212 -0
  17. package/fesm2022/muxima-ui-core-rating.mjs.map +1 -0
  18. package/fesm2022/muxima-ui-core-sidebar.mjs +333 -0
  19. package/fesm2022/muxima-ui-core-sidebar.mjs.map +1 -0
  20. package/fesm2022/muxima-ui-core-slider.mjs +211 -3
  21. package/fesm2022/muxima-ui-core-slider.mjs.map +1 -1
  22. package/fesm2022/muxima-ui-core-time-picker.mjs +389 -0
  23. package/fesm2022/muxima-ui-core-time-picker.mjs.map +1 -0
  24. package/fesm2022/muxima-ui-core-timeline.mjs +117 -0
  25. package/fesm2022/muxima-ui-core-timeline.mjs.map +1 -0
  26. package/fesm2022/muxima-ui-core.mjs +1 -1
  27. package/fesm2022/muxima-ui-core.mjs.map +1 -1
  28. package/package.json +41 -1
  29. package/styles/base.css +21 -1
  30. package/styles/components/carousel.css +113 -0
  31. package/styles/components/chips.css +170 -0
  32. package/styles/components/clipboard.css +52 -0
  33. package/styles/components/color-picker.css +207 -0
  34. package/styles/components/date-picker.css +135 -0
  35. package/styles/components/file-upload.css +164 -0
  36. package/styles/components/notification-center.css +220 -0
  37. package/styles/components/rating.css +89 -0
  38. package/styles/components/sidebar.css +211 -0
  39. package/styles/components/slider.css +111 -0
  40. package/styles/components/time-picker.css +39 -0
  41. package/styles/components/timeline.css +180 -0
  42. package/styles/muxima.css +10 -0
  43. package/types/muxima-ui-core-carousel.d.ts +72 -0
  44. package/types/muxima-ui-core-chips.d.ts +120 -0
  45. package/types/muxima-ui-core-clipboard.d.ts +42 -0
  46. package/types/muxima-ui-core-color-picker.d.ts +153 -0
  47. package/types/muxima-ui-core-date-picker.d.ts +130 -2
  48. package/types/muxima-ui-core-file-upload.d.ts +96 -0
  49. package/types/muxima-ui-core-notification-center.d.ts +91 -0
  50. package/types/muxima-ui-core-rating.d.ts +64 -0
  51. package/types/muxima-ui-core-sidebar.d.ts +115 -0
  52. package/types/muxima-ui-core-slider.d.ts +68 -6
  53. package/types/muxima-ui-core-time-picker.d.ts +83 -0
  54. package/types/muxima-ui-core-timeline.d.ts +59 -0
  55. package/types/muxima-ui-core.d.ts +1 -1
@@ -0,0 +1,91 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { TemplateRef } from '@angular/core';
3
+
4
+ interface MxNotification<D = unknown> {
5
+ id: string | number;
6
+ title: string;
7
+ description?: string;
8
+ time: Date;
9
+ read?: boolean;
10
+ /** Cor do marcador: info em Kwanza, success, warning, danger. */
11
+ variant?: 'default' | 'info' | 'success' | 'warning' | 'danger';
12
+ /** Agrupa por categoria nos filtros (ex.: "Facturas"). */
13
+ category?: string;
14
+ data?: D;
15
+ }
16
+ /** "agora", "há 5 min", "ontem", "há 3 dias" e, depois de uma semana, a data. */
17
+ declare function mxRelativeTime(date: Date, now?: Date, locale?: string): string;
18
+ /** Modelo para o conteúdo de cada notificação: `<ng-template mxNotificationContent let-n>`. */
19
+ declare class MxNotificationContent {
20
+ readonly template: TemplateRef<any>;
21
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxNotificationContent, never>;
22
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxNotificationContent, "ng-template[mxNotificationContent]", never, {}, {}, never, never, true, never>;
23
+ }
24
+ /**
25
+ * Lista de notificações com por ler e lidas, filtro "Por ler", "Marcar todas como lidas"
26
+ * e acções por notificação. Usa-se dentro de um popover, de um drawer ou numa página.
27
+ *
28
+ * ```html
29
+ * <mx-notification-center [items]="notificacoes()" (opened)="abrir($event)"
30
+ * (markRead)="marcar($event)" (markAllRead)="marcarTodas()" (dismiss)="remover($event)" />
31
+ * ```
32
+ *
33
+ * O componente não guarda estado: recebe a lista e emite o que a pessoa fez.
34
+ * Quando chegam notificações novas por ler, anuncia-as ao leitor de ecrã.
35
+ */
36
+ declare class MxNotificationCenter<D = unknown> {
37
+ readonly items: _angular_core.InputSignal<readonly MxNotification<D>[]>;
38
+ readonly title: _angular_core.InputSignal<string>;
39
+ /** Nível do título para o leitor de ecrã (h2 por omissão). */
40
+ readonly headingLevel: _angular_core.InputSignal<number>;
41
+ readonly markAllText: _angular_core.InputSignal<string>;
42
+ readonly emptyText: _angular_core.InputSignal<string>;
43
+ readonly emptyUnreadText: _angular_core.InputSignal<string>;
44
+ readonly filterLabel: _angular_core.InputSignal<string>;
45
+ /** Mostra os filtros Todas, Por ler e as categorias. */
46
+ readonly showFilter: _angular_core.InputSignalWithTransform<boolean, unknown>;
47
+ /** Mostra o botão de remover em cada notificação. */
48
+ readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
49
+ /** Marca como lida ao abrir (emite markRead além de opened). */
50
+ readonly markReadOnOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
51
+ /** Anuncia ao leitor de ecrã quando chegam notificações por ler. */
52
+ readonly announce: _angular_core.InputSignalWithTransform<boolean, unknown>;
53
+ readonly locale: _angular_core.InputSignal<string>;
54
+ readonly opened: _angular_core.OutputEmitterRef<MxNotification<D>>;
55
+ readonly markRead: _angular_core.OutputEmitterRef<MxNotification<D>>;
56
+ readonly markAllRead: _angular_core.OutputEmitterRef<void>;
57
+ readonly dismiss: _angular_core.OutputEmitterRef<MxNotification<D>>;
58
+ protected readonly contentTpl: _angular_core.Signal<MxNotificationContent | undefined>;
59
+ private readonly announcer;
60
+ protected readonly titleId: string;
61
+ readonly filter: _angular_core.WritableSignal<string>;
62
+ /** Muda a cada minuto, para "há 5 min" se actualizar. */
63
+ private readonly now;
64
+ readonly unread: _angular_core.Signal<number>;
65
+ protected readonly categories: _angular_core.Signal<string[]>;
66
+ protected readonly visible: _angular_core.Signal<MxNotification<D>[]>;
67
+ constructor();
68
+ protected relative(d: Date): string;
69
+ protected open(n: MxNotification<D>): void;
70
+ protected dismissItem(n: MxNotification<D>): void;
71
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxNotificationCenter<any>, never>;
72
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxNotificationCenter<any>, "mx-notification-center", ["mxNotificationCenter"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "markAllText": { "alias": "markAllText"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "emptyUnreadText": { "alias": "emptyUnreadText"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "markReadOnOpen": { "alias": "markReadOnOpen"; "required": false; "isSignal": true; }; "announce": { "alias": "announce"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "markRead": "markRead"; "markAllRead": "markAllRead"; "dismiss": "dismiss"; }, ["contentTpl"], ["[mxNotificationFooter]"], true, never>;
73
+ }
74
+ /**
75
+ * Botão do sino com a contagem por ler. O nome inclui a contagem:
76
+ * "Notificações, 3 por ler".
77
+ *
78
+ * ```html
79
+ * <button mxNotificationBell [count]="porLer()" [mxPopoverTrigger]="painel"></button>
80
+ * ```
81
+ */
82
+ declare class MxNotificationBell {
83
+ readonly count: _angular_core.InputSignal<number>;
84
+ readonly max: _angular_core.InputSignal<number>;
85
+ readonly label: _angular_core.InputSignal<string>;
86
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxNotificationBell, never>;
87
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxNotificationBell, "button[mxNotificationBell]", ["mxNotificationBell"], { "count": { "alias": "count"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
88
+ }
89
+
90
+ export { MxNotificationBell, MxNotificationCenter, MxNotificationContent, mxRelativeTime };
91
+ export type { MxNotification };
@@ -0,0 +1,64 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { ControlValueAccessor } from '@angular/forms';
3
+ import { MxFormFieldControl, MxFormField } from '@muxima-ui/core/form-field';
4
+
5
+ /**
6
+ * Avaliação com estrelas. Para escolher, são botões de rádio nativos (setas mudam a nota,
7
+ * Tab sai do grupo); em `readonly` é uma imagem com o texto "4 de 5 estrelas".
8
+ *
9
+ * ```html
10
+ * <mx-form-field>
11
+ * <label mxLabel>Como correu o atendimento?</label>
12
+ * <mx-rating formControlName="nota" />
13
+ * </mx-form-field>
14
+ * <mx-rating [value]="4.5" readonly />
15
+ * ```
16
+ */
17
+ declare class MxRating implements ControlValueAccessor, MxFormFieldControl {
18
+ readonly value: _angular_core.ModelSignal<number | null>;
19
+ readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
20
+ /** Só mostra a nota (aceita meias estrelas, ex.: 4,5). */
21
+ readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
22
+ /** Carregar outra vez na nota escolhida limpa a avaliação. */
23
+ readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
24
+ /** Mostra o número ao lado ("4,5"). */
25
+ readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
26
+ readonly starLabel: _angular_core.InputSignal<(n: number) => string>;
27
+ readonly locale: _angular_core.InputSignal<string>;
28
+ readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
29
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
30
+ readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
31
+ readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
32
+ readonly id: _angular_core.InputSignal<string | undefined>;
33
+ readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
34
+ protected readonly field: MxFormField | null;
35
+ private readonly ngControl;
36
+ protected readonly star = "M12 3.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 17l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z";
37
+ protected readonly name: string;
38
+ private readonly generatedId;
39
+ readonly controlId: _angular_core.Signal<string>;
40
+ protected readonly hover: _angular_core.WritableSignal<number>;
41
+ private readonly formDisabled;
42
+ protected readonly isDisabled: _angular_core.Signal<boolean>;
43
+ protected readonly stars: _angular_core.Signal<number[]>;
44
+ protected readonly shown: _angular_core.Signal<number>;
45
+ protected readonly valueText: _angular_core.Signal<string>;
46
+ protected readonly readonlyLabel: _angular_core.Signal<string>;
47
+ private onChange;
48
+ protected onTouched: () => void;
49
+ constructor();
50
+ protected fillPct(s: number): number;
51
+ protected choose(s: number): void;
52
+ protected onClick(s: number): void;
53
+ private set;
54
+ errorState(): boolean;
55
+ isRequired(): boolean;
56
+ writeValue(value: number | null): void;
57
+ registerOnChange(fn: (value: number | null) => void): void;
58
+ registerOnTouched(fn: () => void): void;
59
+ setDisabledState(isDisabled: boolean): void;
60
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxRating, never>;
61
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxRating, "mx-rating", ["mxRating"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "starLabel": { "alias": "starLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
62
+ }
63
+
64
+ export { MxRating };
@@ -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 };
@@ -1,6 +1,7 @@
1
- import * as i0 from '@angular/core';
1
+ import * as _angular_core from '@angular/core';
2
2
  import { OnInit } from '@angular/core';
3
- import { MxNativeControl } from '@muxima-ui/core/form-field';
3
+ import { MxNativeControl, MxFormFieldControl, MxFormField } from '@muxima-ui/core/form-field';
4
+ import { ControlValueAccessor } from '@angular/forms';
4
5
 
5
6
  /**
6
7
  * Cursor de intervalo sobre o `<input type="range">` nativo: setas, Page Up/Down,
@@ -15,13 +16,74 @@ import { MxNativeControl } from '@muxima-ui/core/form-field';
15
16
  */
16
17
  declare class MxSlider extends MxNativeControl implements OnInit {
17
18
  /** Espessura da barra: sm 4 px, md 6 px, lg 8 px. */
18
- readonly size: i0.InputSignal<"sm" | "md" | "lg">;
19
+ readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
19
20
  constructor();
20
21
  private readonly destroyRef;
21
22
  ngOnInit(): void;
22
23
  protected paint(): void;
23
- static ɵfac: i0.ɵɵFactoryDeclaration<MxSlider, never>;
24
- static ɵdir: i0.ɵɵDirectiveDeclaration<MxSlider, "input[type=range][mxSlider]", ["mxSlider"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
24
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxSlider, never>;
25
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxSlider, "input[type=range][mxSlider]", ["mxSlider"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
25
26
  }
26
27
 
27
- export { MxSlider };
28
+ /**
29
+ * Intervalo com dois cursores (mínimo e máximo), feito com dois `<input type="range">`
30
+ * nativos: cada cursor tem o seu teclado e é anunciado como "Preço, mínimo, 20 000 Kz".
31
+ *
32
+ * ```html
33
+ * <mx-form-field>
34
+ * <label mxLabel>Preço</label>
35
+ * <mx-range-slider formControlName="preco" [min]="0" [max]="100000" [step]="1000" [format]="kz" />
36
+ * </mx-form-field>
37
+ * ```
38
+ *
39
+ * O valor é `[mínimo, máximo]`. Os cursores não se cruzam: ficam a pelo menos `minGap` um do outro.
40
+ */
41
+ declare class MxRangeSlider implements ControlValueAccessor, MxFormFieldControl {
42
+ readonly value: _angular_core.ModelSignal<[number, number] | null>;
43
+ readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
44
+ readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
45
+ readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
46
+ /** Distância mínima entre os dois cursores. */
47
+ readonly minGap: _angular_core.InputSignalWithTransform<number, unknown>;
48
+ /** Texto de cada valor, para o leitor de ecrã e as etiquetas. */
49
+ readonly format: _angular_core.InputSignal<(v: number) => string>;
50
+ /** Mostra os dois valores por baixo da barra. */
51
+ readonly showValues: _angular_core.InputSignalWithTransform<boolean, unknown>;
52
+ readonly lowLabel: _angular_core.InputSignal<string>;
53
+ readonly highLabel: _angular_core.InputSignal<string>;
54
+ readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
55
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
56
+ readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
57
+ readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
58
+ readonly id: _angular_core.InputSignal<string | undefined>;
59
+ readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
60
+ protected readonly field: MxFormField | null;
61
+ private readonly ngControl;
62
+ private readonly generatedId;
63
+ readonly controlId: _angular_core.Signal<string>;
64
+ protected readonly lowId: string;
65
+ protected readonly highId: string;
66
+ protected readonly nameId: string;
67
+ private readonly formDisabled;
68
+ protected readonly isDisabled: _angular_core.Signal<boolean>;
69
+ protected readonly low: _angular_core.Signal<number>;
70
+ protected readonly high: _angular_core.Signal<number>;
71
+ private pct;
72
+ protected readonly fromPct: _angular_core.Signal<number>;
73
+ protected readonly toPct: _angular_core.Signal<number>;
74
+ private onChange;
75
+ protected onTouched: () => void;
76
+ constructor();
77
+ protected labelledBy(partId: string): string;
78
+ protected onInput(which: 0 | 1, event: Event): void;
79
+ errorState(): boolean;
80
+ isRequired(): boolean;
81
+ writeValue(value: [number, number] | null): void;
82
+ registerOnChange(fn: (value: [number, number] | null) => void): void;
83
+ registerOnTouched(fn: () => void): void;
84
+ setDisabledState(isDisabled: boolean): void;
85
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxRangeSlider, never>;
86
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxRangeSlider, "mx-range-slider", ["mxRangeSlider"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "minGap": { "alias": "minGap"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "lowLabel": { "alias": "lowLabel"; "required": false; "isSignal": true; }; "highLabel": { "alias": "highLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
87
+ }
88
+
89
+ export { MxRangeSlider, MxSlider };
@@ -0,0 +1,83 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { ConnectedPosition } from '@angular/cdk/overlay';
3
+ import { ControlValueAccessor } from '@angular/forms';
4
+ import { MxFormFieldControl, MxFormField } from '@muxima-ui/core/form-field';
5
+
6
+ /**
7
+ * Converte o que se escreve numa hora "HH:mm". Aceita "9", "930", "9:30", "9h30", "9.30" e "21h".
8
+ * Devolve null se não for uma hora válida.
9
+ */
10
+ declare function mxParseTime(text: string): string | null;
11
+ /** Minutos desde a meia-noite de uma hora "HH:mm". */
12
+ declare function mxTimeToMinutes(time: string): number;
13
+ /**
14
+ * Campo de hora: escreve-se (9, 930, 9h30, 09:30) ou escolhe-se numa lista com o intervalo
15
+ * definido em `step`. Padrão WAI-ARIA "combobox com lista".
16
+ *
17
+ * ```html
18
+ * <mx-form-field>
19
+ * <label mxLabel>Hora da reunião</label>
20
+ * <mx-time-picker formControlName="hora" [step]="15" min="08:00" max="18:00" />
21
+ * </mx-form-field>
22
+ * ```
23
+ *
24
+ * O valor é uma string "HH:mm" (24 horas) ou null. Uma hora fora de min/max deixa o campo com erro.
25
+ * Para uma hora isolada sem lista, o input type=time nativo com mxInput também serve.
26
+ */
27
+ declare class MxTimePicker implements ControlValueAccessor, MxFormFieldControl {
28
+ readonly value: _angular_core.ModelSignal<string | null>;
29
+ /** Minutos entre as horas da lista. */
30
+ readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
31
+ /** Primeira e última hora permitidas, "HH:mm". */
32
+ readonly min: _angular_core.InputSignal<string | null>;
33
+ readonly max: _angular_core.InputSignal<string | null>;
34
+ readonly placeholder: _angular_core.InputSignal<string>;
35
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
36
+ readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
37
+ readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
38
+ readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
39
+ readonly id: _angular_core.InputSignal<string | undefined>;
40
+ readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
41
+ protected readonly field: MxFormField | null;
42
+ private readonly ngControl;
43
+ private readonly host;
44
+ protected readonly positions: ConnectedPosition[];
45
+ protected readonly listId: string;
46
+ private readonly generatedId;
47
+ readonly controlId: _angular_core.Signal<string>;
48
+ protected readonly isOpen: _angular_core.WritableSignal<boolean>;
49
+ protected readonly panelWidth: _angular_core.WritableSignal<number>;
50
+ protected readonly active: _angular_core.WritableSignal<number>;
51
+ private readonly draft;
52
+ private readonly formDisabled;
53
+ protected readonly isDisabled: _angular_core.Signal<boolean>;
54
+ protected readonly text: _angular_core.Signal<string>;
55
+ protected readonly slots: _angular_core.Signal<string[]>;
56
+ /** Texto que não é hora, ou hora fora de min/max. */
57
+ readonly badValue: _angular_core.Signal<boolean>;
58
+ private onChange;
59
+ private onTouched;
60
+ constructor();
61
+ protected optionId(i: number): string;
62
+ /** Índice da hora da lista mais próxima de um valor (ou da hora actual). */
63
+ private nearest;
64
+ open(): void;
65
+ close(): void;
66
+ protected scrollToActive(): void;
67
+ protected choose(time: string): void;
68
+ protected onInput(event: Event): void;
69
+ protected onKeydown(event: KeyboardEvent): void;
70
+ protected onOutside(event: MouseEvent): void;
71
+ protected onBlur(): void;
72
+ private setValue;
73
+ errorState(): boolean;
74
+ isRequired(): boolean;
75
+ writeValue(value: string | null): void;
76
+ registerOnChange(fn: (value: string | null) => void): void;
77
+ registerOnTouched(fn: () => void): void;
78
+ setDisabledState(isDisabled: boolean): void;
79
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxTimePicker, never>;
80
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxTimePicker, "mx-time-picker", ["mxTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
81
+ }
82
+
83
+ export { MxTimePicker, mxParseTime, mxTimeToMinutes };
@@ -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 };
@@ -1,3 +1,3 @@
1
- declare const MUXIMA_VERSION = "1.0.0";
1
+ declare const MUXIMA_VERSION = "1.2.0";
2
2
 
3
3
  export { MUXIMA_VERSION };