@marsaude/sira-components 1.0.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 (15) hide show
  1. package/README.md +63 -0
  2. package/fesm2022/marsaude-sira-components.mjs +956 -0
  3. package/fesm2022/marsaude-sira-components.mjs.map +1 -0
  4. package/package.json +25 -0
  5. package/styles/alert.scss +87 -0
  6. package/styles/badge.scss +52 -0
  7. package/styles/button.scss +267 -0
  8. package/styles/card.scss +79 -0
  9. package/styles/nav-card.scss +140 -0
  10. package/styles/quick-button.scss +78 -0
  11. package/styles/reset.scss +70 -0
  12. package/styles/section.scss +93 -0
  13. package/styles/styles.scss +9 -0
  14. package/styles/tile-card.scss +72 -0
  15. package/types/marsaude-sira-components.d.ts +168 -0
package/styles/nav-card.scss ADDED
@@ -0,0 +1,140 @@
1
+ .sira-nav-card {
2
+ /* Reset de propriedades para comportar <button> e <a> igualmente */
3
+ display: flex;
4
+ align-items: center;
5
+ padding: 0;
6
+ text-decoration: none; /* Caso seja <a> */
7
+ cursor: pointer;
8
+ box-sizing: border-box;
9
+ font: var(--mar-label-md);
10
+ color: inherit;
11
+ overflow: hidden;
12
+
13
+ width: fit-content;
14
+
15
+ &.full {
16
+ width: 100%;
17
+ }
18
+
19
+
20
+ border-radius: var(--mar-border-radius-md);
21
+ border: var(--mar-border-width-thin) solid var(--mar-border-secondary-default);
22
+ background: var(--mar-foreground-secondary-default);
23
+
24
+
25
+ /* Propriedades extras para resetar estilos nativos de <button> */
26
+ appearance: none;
27
+ text-align: left;
28
+ margin: 0;
29
+
30
+ /* Estado HOVER */
31
+ &:hover {
32
+ border: var(--mar-border-width-thin) solid var(--mar-border-secondary-hover);
33
+ background: var(--mar-foreground-secondary-hover);
34
+ }
35
+
36
+ /* --- Mídia (Esquerda) --- */
37
+ .media-container {
38
+ flex-shrink: 0;
39
+ overflow: hidden;
40
+ border-radius: 6px 0 0 6px;
41
+ /* Modo Imagem */
42
+ &.image-mode {
43
+ .image-bg {
44
+ width: 80px;
45
+ height: 92px;
46
+ object-fit: cover;
47
+ display: block;
48
+ background-position: center;
49
+ background-repeat: no-repeat;
50
+ background-size: cover;
51
+ }
52
+ }
53
+
54
+ /* Modo Ícone */
55
+ &.icon-mode {
56
+ width: 80px;
57
+ height: 92px;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ color: var(--mar-foreground-primary-default);
62
+ background: var(--mar-foreground-tertiary-hover);
63
+
64
+ .material-icons {
65
+ font-size: 24px;
66
+ }
67
+ }
68
+ }
69
+
70
+ /* --- Conteúdo (Centro) --- */
71
+ .content {
72
+ flex-grow: 1;
73
+ display: flex;
74
+ flex-direction: column;
75
+ justify-content: center;
76
+ gap: 4px;
77
+ padding-left: var(--mar-spacing-default-component-fixed-lg);
78
+
79
+ .badge-wrapper {
80
+ display: flex;
81
+ margin-bottom: 4px;
82
+
83
+ &:empty {
84
+ display: none;
85
+ }
86
+ }
87
+
88
+ .title {
89
+ font: var(--mar-label-md);
90
+ color: var(--mar-text-primary);
91
+ margin: 0; /* Garante reset de h3/h4 se usados */
92
+ }
93
+
94
+ .subtitle {
95
+ font: var(--mar-caption-default);
96
+ color: var(--mar-text-tertiary);
97
+ margin: 0;
98
+ }
99
+ }
100
+
101
+ .action {
102
+ flex-shrink: 0;
103
+ display: flex;
104
+ align-items: center;
105
+ color: var(--mar-foreground-primary-default);
106
+ padding-right: var(--mar-spacing-default-component-fixed-lg);
107
+ padding-left: var(--mar-spacing-default-component-fixed-xs);
108
+
109
+ .material-icons {
110
+ transition: transform 0.2s ease, color 0.2s ease;
111
+ font-size: 20px;
112
+ }
113
+ }
114
+
115
+ /* --- VARIANTE: SMALL --- */
116
+ /* O & comercial concatena a classe, resultando em .sira-nav-card.sira-nav-card--small */
117
+ &.sira-nav-card--small {
118
+ .media-container {
119
+ &.image-mode {
120
+ width: 72px;
121
+ height: 80px;
122
+ }
123
+
124
+ &.icon-mode {
125
+ width: 72px;
126
+ height: 80px;
127
+
128
+ .material-icons {
129
+ font-size: 24px;
130
+ }
131
+ }
132
+ }
133
+
134
+ .content {
135
+ .title {
136
+ font: var(--mar-label-sm);
137
+ }
138
+ }
139
+ }
140
+ }
package/styles/quick-button.scss ADDED
@@ -0,0 +1,78 @@
1
+ .sira-quick-button {
2
+ /* Layout e Reset */
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: center;
6
+ justify-content: center;
7
+
8
+ /* Dimensões (Estimadas via imagem) */
9
+ width: 100px;
10
+ padding: var(--mar-spacing-default-component-fixed-xs);
11
+ gap: var(--mar-spacing-default-component-fixed-xs);
12
+ box-sizing: border-box;
13
+
14
+ /* Estilo Visual Base (Default) */
15
+ border: 2px solid transparent; /* Reserva espaço para a borda do focus */
16
+ border-radius: var(--mar-spacing-default-component-fixed-sm);
17
+ background: var(--mar-foreground-secondary-default);
18
+
19
+ /* Tipografia e Cursor */
20
+ font: var(--mar-label-md);
21
+ text-decoration: none;
22
+ cursor: pointer;
23
+ color: var(--mar-text-primary);
24
+
25
+
26
+ /* Reset de Botão */
27
+ appearance: none;
28
+ margin: 0;
29
+
30
+ /* --- ESTADOS --- */
31
+
32
+ /* Hover: Fundo azul claro */
33
+ &:hover {
34
+ border-radius: var(--mar-spacing-default-component-fixed-sm);
35
+ background: var(--mar-foreground-secondary-hover);
36
+ }
37
+
38
+ /* Focus: Fundo azul claro + Borda azul */
39
+ &:focus-visible,
40
+ &:focus {
41
+ border: var(--mar-border-width-regular) solid var(--mar-border-focus-primary);
42
+ background: var(--mar-foreground-secondary-hover);
43
+ outline: none;
44
+ }
45
+
46
+ /* Classe utilitária para simular o foco no Storybook (opcional) */
47
+ &.simulated-focus {
48
+ border: var(--mar-border-width-regular) solid var(--mar-border-focus-primary);
49
+ background: var(--mar-foreground-secondary-hover);
50
+ outline: none;
51
+ }
52
+
53
+ /* --- ELEMENTOS INTERNOS --- */
54
+
55
+ .icon-container {
56
+ display: flex;
57
+ padding: var(--mar-spacing-default-component-fixed-md);
58
+ align-items: center;
59
+ border-radius: 50%;
60
+ background: var(--mar-foreground-tertiary-default);
61
+ color: var(--mar-foreground-primary-default);
62
+ width: 48px;
63
+ height: 48px;
64
+ justify-content: center;
65
+
66
+ .material-icons {
67
+ font-size: 24px;
68
+ }
69
+ }
70
+
71
+ .label {
72
+ font: var(--mar-label-md);
73
+ color: var(--mar-text-primary);
74
+ /* Garante que o texto quebre linha se necessário */
75
+ word-wrap: break-word;
76
+ max-width: 100%;
77
+ }
78
+ }
package/styles/reset.scss ADDED
@@ -0,0 +1,70 @@
1
+ /*
2
+ 1. Use a more-intuitive box-sizing model.
3
+ */
4
+ *, *::before, *::after {
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ /*
9
+ 2. Remove default margin
10
+ */
11
+
12
+ /*
13
+ Typographic tweaks!
14
+ 3. Add accessible line-height
15
+ 4. Improve text rendering
16
+ */
17
+ body {
18
+ -webkit-font-smoothing: antialiased;
19
+ }
20
+
21
+ /*
22
+ 5. Improve media defaults
23
+ */
24
+ img, picture, video, canvas {
25
+ display: block;
26
+ max-width: 100%;
27
+ }
28
+
29
+ /*
30
+ 6. Remove built-in form typography styles
31
+ */
32
+ input, button, textarea, select {
33
+ font: inherit;
34
+ }
35
+
36
+ /*
37
+ 7. Avoid text overflows
38
+ */
39
+ p, h1, h2, h3, h4, h5, h6 {
40
+ overflow-wrap: break-word;
41
+ margin: 0;
42
+ }
43
+
44
+ html {
45
+ .mat-typography {
46
+ p, h1, h2, h3, h4, h5, h6 {
47
+ overflow-wrap: break-word;
48
+ margin: 0;
49
+ }
50
+ }
51
+
52
+ p,
53
+ .mat-typography {
54
+ p {
55
+ overflow-wrap: break-word;
56
+ margin: 0;
57
+ }
58
+ }
59
+ }
60
+
61
+ /*
62
+ 8. Create a root stacking context
63
+ */
64
+ #root, #__next {
65
+ isolation: isolate;
66
+ }
67
+
68
+ mat-form-field {
69
+ width: 100%;
70
+ }
package/styles/section.scss ADDED
@@ -0,0 +1,93 @@
1
+ .sira-section {
2
+ display: flex;
3
+ padding: var(--mar-spacing-default-sm) 0;
4
+ flex-direction: column;
5
+ align-items: flex-start;
6
+ align-self: stretch;
7
+
8
+ &--body {
9
+ > .content-wrapper {
10
+ display: flex;
11
+ padding: var(--mar-spacing-default-lg);
12
+ flex-direction: column;
13
+ align-items: flex-start;
14
+ gap: var(--mar-spacing-default-xl);
15
+ align-self: stretch;
16
+ }
17
+ }
18
+
19
+ &--heading {
20
+ .content-wrapper {
21
+ display: flex;
22
+ flex-direction: row;
23
+ width: 100%;
24
+ padding: var(--mar-spacing-default-lg);
25
+ align-items: center;
26
+ gap: var(--mar-spacing-default-sm);
27
+
28
+ .icon {
29
+ width: 40px;
30
+ height: 40px;
31
+ max-width: 40px;
32
+ min-width: 40px;
33
+ max-height: 40px;
34
+ min-height: 40px;
35
+ font-size: 20px;
36
+
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ border-radius: var(--mar-border-radius-sm);
41
+ color: var(--mar-text-inverse);
42
+ }
43
+
44
+ .text {
45
+
46
+ }
47
+ }
48
+
49
+ &-small {
50
+ .content-wrapper {
51
+ .icon {
52
+ width: 36px;
53
+ height: 36px;
54
+ max-width: 36px;
55
+ min-width: 36px;
56
+ max-height: 36px;
57
+ min-height: 36px;
58
+ font-size: 18px;
59
+ }
60
+ }
61
+ }
62
+ }
63
+ }
64
+
65
+ .icon-color {
66
+ &--warning {
67
+ .icon {
68
+ background: var(--mar-text-support-warning);
69
+ }
70
+ }
71
+
72
+ &--success {
73
+ .icon {
74
+ background: var(--mar-text-support-success);
75
+ }
76
+ }
77
+
78
+ &--info {
79
+ .icon {
80
+ background: var(--mar-text-support-info);
81
+ }
82
+ }
83
+
84
+ &--danger {
85
+ .icon {
86
+ background: var(--mar-text-support-danger);
87
+ }
88
+ }
89
+ }
90
+
91
+
92
+
93
+
package/styles/styles.scss ADDED
@@ -0,0 +1,9 @@
1
+ @import "./reset";
2
+ @import "./section";
3
+ @import "./button";
4
+ @import "./quick-button";
5
+ @import "./card";
6
+ @import "./tile-card";
7
+ @import "./nav-card";
8
+ @import "./badge";
9
+ @import "./alert";
package/styles/tile-card.scss ADDED
@@ -0,0 +1,72 @@
1
+ .sira-tile-card {
2
+ /* Reset e Estrutura Base */
3
+ display: flex;
4
+ flex-direction: column;
5
+
6
+ /* Dimensões e Espaçamento */
7
+ /* Ajuste a largura/altura conforme necessário para o seu grid */
8
+ width: 156px;
9
+ height: 168px;
10
+ padding: var(--mar-spacing-default-component-fixed-lg);
11
+ align-items: flex-start;
12
+
13
+ /* Estilo Visual (Estado Default) */
14
+ border-radius: var(--mar-border-radius-md);
15
+ border: var(--mar-border-width-thin) solid var(--mar-border-secondary-default);
16
+ background: var(--mar-foreground-secondary-default);
17
+
18
+ /* Comportamento de Link/Botão */
19
+ text-decoration: none;
20
+ cursor: pointer;
21
+ color: inherit;
22
+ font-family: sans-serif;
23
+
24
+ /* Resets para <button> */
25
+ appearance: none;
26
+ margin: 0;
27
+
28
+ /* Estado HOVER */
29
+ &:hover {
30
+ border-radius: var(--mar-border-radius-md);
31
+ border: var(--mar-border-width-thin, 1px) solid var(--mar-border-secondary-hover);
32
+ background: var(--mar-foreground-secondary-hover);
33
+ }
34
+
35
+ /* --- Ícone (Topo) --- */
36
+ .icon-container {
37
+ display: flex;
38
+ width: 32px;
39
+ height: 32px;
40
+ padding: var(--mar-spacing-default-component-fixed-xs);
41
+ flex-direction: column;
42
+ justify-content: center;
43
+ align-items: center;
44
+
45
+ border-radius: 50%;
46
+ background: var(--mar-foreground-tertiary-default);
47
+ color: var(--mar-foreground-primary-default);
48
+
49
+ .material-icons {
50
+ font-size: 24px;
51
+ }
52
+ }
53
+
54
+ /* --- Título (Centro) --- */
55
+ .title {
56
+ padding-top: var(--mar-spacing-default-component-fixed-md);
57
+ color: var(--mar-text-primary);
58
+ font: var(--mar-label-md);
59
+ width: 100%;
60
+ flex: 1;
61
+ }
62
+
63
+ /* --- Ação (Rodapé) --- */
64
+ .action-footer {
65
+ display: flex;
66
+ align-items: center;
67
+ font: var(--mar-button-sm);
68
+ color: var(--mar-foreground-primary-default);
69
+ justify-content: space-between;
70
+ width: 100%;
71
+ }
72
+ }
package/types/marsaude-sira-components.d.ts ADDED
@@ -0,0 +1,168 @@
1
+ import * as i0 from '@angular/core';
2
+ import { EventEmitter, OnInit, ElementRef, Renderer2, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+
5
+ type AlertTheme = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
6
+ declare class AlertComponent {
7
+ theme: AlertTheme;
8
+ icon: string | undefined;
9
+ title: string | undefined;
10
+ linkText: string | undefined;
11
+ callback: EventEmitter<any>;
12
+ get classes(): string;
13
+ static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
14
+ static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "div[siraAlert]", never, { "theme": { "alias": "theme"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "linkText": { "alias": "linkText"; "required": false; }; }, { "callback": "callback"; }, never, ["*"], true, never>;
15
+ }
16
+
17
+ type BadgeTheme = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
18
+ type BadgeVariant = 'filled' | 'ghost';
19
+ declare class BadgeComponent {
20
+ theme: BadgeTheme;
21
+ variant: BadgeVariant;
22
+ dot: boolean;
23
+ get classes(): string;
24
+ static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
25
+ static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "span[siraBadge]", never, { "theme": { "alias": "theme"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; }, {}, never, ["*"], true, never>;
26
+ }
27
+
28
+ type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'chip';
29
+ declare class ButtonComponent {
30
+ variant: ButtonVariant;
31
+ loading: boolean;
32
+ iconOnly: boolean;
33
+ disabled: boolean;
34
+ get classes(): string;
35
+ get disabledState(): true | null;
36
+ static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
37
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[siraButton], a[siraButton]", never, { "variant": { "alias": "variant"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
38
+ }
39
+
40
+ declare class CardActionComponent {
41
+ get classes(): string;
42
+ static ɵfac: i0.ɵɵFactoryDeclaration<CardActionComponent, never>;
43
+ static ɵcmp: i0.ɵɵComponentDeclaration<CardActionComponent, "div[siraCardAction]", never, {}, {}, never, ["*"], true, never>;
44
+ }
45
+
46
+ declare class CardBodyComponent {
47
+ get classes(): string;
48
+ static ɵfac: i0.ɵɵFactoryDeclaration<CardBodyComponent, never>;
49
+ static ɵcmp: i0.ɵɵComponentDeclaration<CardBodyComponent, "div[siraCardBody]", never, {}, {}, never, ["*"], true, never>;
50
+ }
51
+
52
+ declare class CardImageComponent {
53
+ image: string | undefined;
54
+ alt: string | undefined;
55
+ get classes(): string;
56
+ static ɵfac: i0.ɵɵFactoryDeclaration<CardImageComponent, never>;
57
+ static ɵcmp: i0.ɵɵComponentDeclaration<CardImageComponent, "div[siraCardImage]", never, { "image": { "alias": "image"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; }, {}, never, ["*"], true, never>;
58
+ }
59
+
60
+ type theme = 'warning' | 'success' | 'info' | 'danger';
61
+ declare class CardComponent {
62
+ theme: theme | undefined;
63
+ border: boolean;
64
+ get classes(): string;
65
+ static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
66
+ static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "div[siraCard]", never, { "theme": { "alias": "theme"; "required": false; }; "border": { "alias": "border"; "required": false; }; }, {}, never, ["*"], true, never>;
67
+ }
68
+ declare const SIRA_CARD_COMPONENTS: readonly [typeof CardActionComponent, typeof CardBodyComponent, typeof CardImageComponent, typeof CardComponent];
69
+
70
+ declare class ElementSpacingDirective implements OnInit {
71
+ private el;
72
+ private renderer;
73
+ spacingToken: ElementSpacing;
74
+ constructor(el: ElementRef, renderer: Renderer2);
75
+ ngOnInit(): void;
76
+ private applySpacing;
77
+ static ɵfac: i0.ɵɵFactoryDeclaration<ElementSpacingDirective, never>;
78
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ElementSpacingDirective, "[elementSpacing]", never, { "spacingToken": { "alias": "elementSpacing"; "required": false; }; }, {}, never, never, true, never>;
79
+ }
80
+ type ElementSpacing = 'mar-spacing-0' | 'mar-spacing-50' | 'mar-spacing-100' | 'mar-spacing-150' | 'mar-spacing-200' | 'mar-spacing-250' | 'mar-spacing-300' | 'mar-spacing-350' | 'mar-spacing-400' | 'mar-spacing-450' | 'mar-spacing-500' | 'mar-spacing-550' | 'mar-spacing-600' | 'mar-spacing-650' | 'mar-spacing-700' | 'mar-spacing-750' | 'mar-spacing-800' | 'mar-spacing-850' | 'mar-spacing-900' | 'mar-spacing-950' | 'mar-spacing-1000' | 'mar-spacing-default-xs' | 'mar-spacing-default-sm' | 'mar-spacing-default-md' | 'mar-spacing-default-lg' | 'mar-spacing-default-xl' | 'mar-spacing-default-2xl' | 'mar-spacing-default-3xl' | 'mar-spacing-default-4xl' | 'mar-spacing-default-component-fixed-xs' | 'mar-spacing-default-component-fixed-sm' | 'mar-spacing-default-component-fixed-md' | 'mar-spacing-default-component-fixed-lg' | 'mar-spacing-default-component-fixed-xl' | 'mar-spacing-default-component-responsive-xs' | 'mar-spacing-default-component-responsive-sm';
81
+
82
+ declare class TextStyleDirective implements OnChanges, OnInit, OnDestroy {
83
+ private el;
84
+ private renderer;
85
+ tokens: TokenNames | TokenNames[];
86
+ font?: TokenNames;
87
+ color?: TokenNames;
88
+ size?: TokenNames;
89
+ spacing?: TokenNames;
90
+ bgColor?: TokenNames;
91
+ weight?: TokenNames;
92
+ constructor(el: ElementRef, renderer: Renderer2);
93
+ private resizeSub?;
94
+ ngOnChanges(_: SimpleChanges): void;
95
+ ngOnInit(): void;
96
+ ngOnDestroy(): void;
97
+ private applyStyles;
98
+ static ɵfac: i0.ɵɵFactoryDeclaration<TextStyleDirective, never>;
99
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TextStyleDirective, "[textStyle]", never, { "tokens": { "alias": "textStyle"; "required": false; }; "font": { "alias": "font"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; }, {}, never, never, true, never>;
100
+ }
101
+ type TokenNames = 'mar-primary-50' | 'mar-primary-100' | 'mar-primary-200' | 'mar-primary-300' | 'mar-primary-400' | 'mar-primary-500' | 'mar-primary-600' | 'mar-primary-700' | 'mar-primary-800' | 'mar-primary-900' | 'mar-primary-950' | 'mar-greyscale-0' | 'mar-greyscale-50' | 'mar-greyscale-100' | 'mar-greyscale-200' | 'mar-greyscale-300' | 'mar-greyscale-400' | 'mar-greyscale-500' | 'mar-greyscale-600' | 'mar-greyscale-700' | 'mar-greyscale-800' | 'mar-greyscale-900' | 'mar-greyscale-950' | 'mar-greyscale-1000' | 'mar-support-red-50' | 'mar-support-red-100' | 'mar-support-red-200' | 'mar-support-red-300' | 'mar-support-red-400' | 'mar-support-red-500' | 'mar-support-red-600' | 'mar-support-red-700' | 'mar-support-red-800' | 'mar-support-red-900' | 'mar-support-red-950' | 'mar-support-yellow-50' | 'mar-support-yellow-100' | 'mar-support-yellow-200' | 'mar-support-yellow-300' | 'mar-support-yellow-400' | 'mar-support-yellow-500' | 'mar-support-yellow-600' | 'mar-support-yellow-700' | 'mar-support-yellow-800' | 'mar-support-yellow-900' | 'mar-support-yellow-950' | 'mar-support-green-50' | 'mar-support-green-100' | 'mar-support-green-200' | 'mar-support-green-300' | 'mar-support-green-400' | 'mar-support-green-500' | 'mar-support-green-600' | 'mar-support-green-700' | 'mar-support-green-800' | 'mar-support-green-900' | 'mar-support-green-950' | 'mar-support-blue-50' | 'mar-support-blue-100' | 'mar-support-blue-200' | 'mar-support-blue-300' | 'mar-support-blue-400' | 'mar-support-blue-500' | 'mar-support-blue-600' | 'mar-support-blue-700' | 'mar-support-blue-800' | 'mar-support-blue-900' | 'mar-support-blue-950' | 'mar-font-size-12px' | 'mar-font-size-14px' | 'mar-font-size-16px' | 'mar-font-size-18px' | 'mar-font-size-20px' | 'mar-font-size-22px' | 'mar-font-size-24px' | 'mar-font-size-26px' | 'mar-font-size-28px' | 'mar-font-size-30px' | 'mar-font-size-32px' | 'mar-font-size-36px' | 'mar-font-size-38px' | 'mar-font-size-40px' | 'mar-font-size-42px' | 'mar-font-size-44px' | 'mar-font-size-46px' | 'mar-font-size-48px' | 'mar-font-size-50px' | 'mar-font-size-52px' | 'mar-font-size-54px' | 'mar-font-size-56px' | 'mar-font-size-58px' | 'mar-font-size-60px' | 'mar-text-case-uppercase' | 'mar-text-case-lowercase' | 'mar-text-case-capitalize' | 'mar-text-case-none' | 'mar-text-decoration-none' | 'mar-text-decoration-underline' | 'mar-text-decoration-line-through' | 'mar-font-family-open-sans' | 'mar-line-height-16px' | 'mar-line-height-20px' | 'mar-line-height-24px' | 'mar-line-height-28px' | 'mar-line-height-32px' | 'mar-line-height-36px' | 'mar-line-height-40px' | 'mar-line-height-44px' | 'mar-line-height-48px' | 'mar-line-height-52px' | 'mar-line-height-56px' | 'mar-line-height-60px' | 'mar-line-height-64px' | 'mar-line-height-68px' | 'mar-letter-spacing-0' | 'mar-font-weight-400' | 'mar-font-weight-500' | 'mar-font-weight-600' | 'mar-font-weight-700' | 'mar-spacing-0' | 'mar-spacing-50' | 'mar-spacing-100' | 'mar-spacing-150' | 'mar-spacing-200' | 'mar-spacing-250' | 'mar-spacing-300' | 'mar-spacing-350' | 'mar-spacing-400' | 'mar-spacing-450' | 'mar-spacing-500' | 'mar-spacing-550' | 'mar-spacing-600' | 'mar-spacing-650' | 'mar-spacing-700' | 'mar-spacing-750' | 'mar-spacing-800' | 'mar-spacing-850' | 'mar-spacing-900' | 'mar-spacing-950' | 'mar-spacing-1000' | 'mar-spacing-default-xs' | 'mar-spacing-default-sm' | 'mar-spacing-default-md' | 'mar-spacing-default-lg' | 'mar-spacing-default-xl' | 'mar-spacing-default-2xl' | 'mar-spacing-default-3xl' | 'mar-spacing-default-4xl' | 'mar-spacing-default-component-fixed-xs' | 'mar-spacing-default-component-fixed-sm' | 'mar-spacing-default-component-fixed-md' | 'mar-spacing-default-component-fixed-lg' | 'mar-spacing-default-component-fixed-xl' | 'mar-spacing-default-component-responsive-xs' | 'mar-spacing-default-component-responsive-sm' | 'mar-border-width-none' | 'mar-border-width-thin' | 'mar-border-width-regular' | 'mar-border-radius-none' | 'mar-border-radius-xs' | 'mar-border-radius-sm' | 'mar-border-radius-md' | 'mar-border-radius-lg' | 'mar-border-radius-xl' | 'mar-border-radius-2xl' | 'mar-border-radius-circular' | 'mar-sizing-0' | 'mar-sizing-50' | 'mar-sizing-100' | 'mar-sizing-150' | 'mar-sizing-200' | 'mar-sizing-250' | 'mar-sizing-300' | 'mar-sizing-350' | 'mar-sizing-400' | 'mar-sizing-450' | 'mar-sizing-500' | 'mar-sizing-550' | 'mar-sizing-600' | 'mar-sizing-650' | 'mar-sizing-700' | 'mar-sizing-750' | 'mar-sizing-800' | 'mar-sizing-850' | 'mar-sizing-900' | 'mar-sizing-950' | 'mar-sizing-1000' | 'mar-sizing-fixed-xs' | 'mar-sizing-fixed-sm' | 'mar-sizing-fixed-md' | 'mar-sizing-fixed-lg' | 'mar-sizing-fixed-xl' | 'mar-sizing-fixed-2xl' | 'mar-sizing-fixed-3xl' | 'mar-sizing-fixed-4xl' | 'mar-sizing-responsive-sm' | 'mar-sizing-responsive-md' | 'mar-background-primary' | 'mar-background-secondary' | 'mar-background-inverse' | 'mar-background-brand' | 'mar-surface-primary' | 'mar-surface-secondary' | 'mar-surface-inverse' | 'mar-surface-brand' | 'mar-foreground-primary-default' | 'mar-foreground-primary-hover' | 'mar-foreground-primary-active' | 'mar-foreground-primary-disabled' | 'mar-foreground-secondary-default' | 'mar-foreground-secondary-hover' | 'mar-foreground-secondary-active' | 'mar-foreground-secondary-disabled' | 'mar-foreground-tertiary-default' | 'mar-foreground-tertiary-hover' | 'mar-foreground-tertiary-active' | 'mar-foreground-tertiary-disabled' | 'mar-foreground-support-success' | 'mar-foreground-support-warning' | 'mar-foreground-support-danger' | 'mar-foreground-support-info' | 'mar-border-primary-default' | 'mar-border-primary-hover' | 'mar-border-primary-active' | 'mar-border-primary-disabled' | 'mar-border-secondary-default' | 'mar-border-secondary-hover' | 'mar-border-secondary-active' | 'mar-border-secondary-disabled' | 'mar-border-inverse-default' | 'mar-border-inverse-hover' | 'mar-border-inverse-active' | 'mar-border-inverse-disabled' | 'mar-border-support-success' | 'mar-border-support-warning' | 'mar-border-support-danger' | 'mar-border-support-info' | 'mar-border-focus-primary' | 'mar-text-primary' | 'mar-text-secondary' | 'mar-text-tertiary' | 'mar-text-inverse' | 'mar-text-disabled' | 'mar-text-support-success' | 'mar-text-support-warning' | 'mar-text-support-danger' | 'mar-text-support-info' | 'mar-overlays-default' | 'mar-heading-xxl' | 'mar-heading-xl' | 'mar-heading-lg' | 'mar-heading-md' | 'mar-heading-sm' | 'mar-body-lg' | 'mar-body-md' | 'mar-body-sm' | 'mar-label-lg' | 'mar-label-md' | 'mar-label-sm' | 'mar-caption-default' | 'mar-caption-strong' | 'mar-button-lg' | 'mar-button-md' | 'mar-button-sm' | 'mar-links-lg' | 'mar-links-md' | 'mar-links-sm';
102
+
103
+ declare class NavCardComponent {
104
+ title: string;
105
+ subtitle: string | undefined;
106
+ image: string | undefined;
107
+ icon: string | undefined;
108
+ size: 'default' | 'small';
109
+ full: boolean;
110
+ get classes(): string;
111
+ static ɵfac: i0.ɵɵFactoryDeclaration<NavCardComponent, never>;
112
+ static ɵcmp: i0.ɵɵComponentDeclaration<NavCardComponent, "a[siraNavCard], button[siraNavCard]", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "image": { "alias": "image"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "full": { "alias": "full"; "required": false; }; }, {}, never, ["[siraBadge]"], true, never>;
113
+ }
114
+
115
+ declare class NavbarComponent {
116
+ title: string;
117
+ static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, never>;
118
+ static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "navbar", never, { "title": { "alias": "title"; "required": false; }; }, {}, never, ["[left]", "[right]"], true, never>;
119
+ }
120
+
121
+ declare class SectionComponent {
122
+ get classes(): string;
123
+ static ɵfac: i0.ɵɵFactoryDeclaration<SectionComponent, never>;
124
+ static ɵcmp: i0.ɵɵComponentDeclaration<SectionComponent, "div[siraSection]", never, {}, {}, never, ["*"], true, never>;
125
+ }
126
+
127
+ declare class SectionHeadingComponent {
128
+ size: 'default' | 'small';
129
+ title: string | undefined;
130
+ subtitle: string | undefined;
131
+ icon: string | undefined;
132
+ iconColor: theme | undefined;
133
+ get classes(): string;
134
+ static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeadingComponent, never>;
135
+ static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeadingComponent, "div[siraSectionHeading]", never, { "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; }, {}, never, never, true, never>;
136
+ }
137
+
138
+ declare class SectionBodyComponent {
139
+ get classes(): string;
140
+ static ɵfac: i0.ɵɵFactoryDeclaration<SectionBodyComponent, never>;
141
+ static ɵcmp: i0.ɵɵComponentDeclaration<SectionBodyComponent, "div[siraSectionBody]", never, {}, {}, never, ["*"], true, never>;
142
+ }
143
+
144
+ declare class QuickButtonComponent {
145
+ icon: string;
146
+ label: string;
147
+ get classes(): string;
148
+ static ɵfac: i0.ɵɵFactoryDeclaration<QuickButtonComponent, never>;
149
+ static ɵcmp: i0.ɵɵComponentDeclaration<QuickButtonComponent, "button[siraQuickButton], a[siraQuickButton]", never, { "icon": { "alias": "icon"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
150
+ }
151
+
152
+ declare class TileCardComponent {
153
+ icon: string;
154
+ title: string;
155
+ actionText: string;
156
+ get classes(): string;
157
+ static ɵfac: i0.ɵɵFactoryDeclaration<TileCardComponent, never>;
158
+ static ɵcmp: i0.ɵɵComponentDeclaration<TileCardComponent, "a[siraTileCard], button[siraTileCard]", never, { "icon": { "alias": "icon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "actionText": { "alias": "actionText"; "required": false; }; }, {}, never, never, true, never>;
159
+ }
160
+
161
+ declare class SiraUiModule {
162
+ static ɵfac: i0.ɵɵFactoryDeclaration<SiraUiModule, never>;
163
+ static ɵmod: i0.ɵɵNgModuleDeclaration<SiraUiModule, never, [typeof i1.CommonModule, typeof AlertComponent, typeof BadgeComponent, typeof ButtonComponent, typeof CardComponent, typeof CardBodyComponent, typeof CardActionComponent, typeof CardImageComponent, typeof ElementSpacingDirective, typeof TextStyleDirective, typeof NavCardComponent, typeof NavbarComponent, typeof SectionComponent, typeof SectionHeadingComponent, typeof SectionBodyComponent, typeof QuickButtonComponent, typeof TileCardComponent], [typeof AlertComponent, typeof BadgeComponent, typeof ButtonComponent, typeof CardComponent, typeof CardBodyComponent, typeof CardActionComponent, typeof CardImageComponent, typeof ElementSpacingDirective, typeof TextStyleDirective, typeof NavCardComponent, typeof NavbarComponent, typeof SectionComponent, typeof SectionHeadingComponent, typeof SectionBodyComponent, typeof QuickButtonComponent, typeof TileCardComponent]>;
164
+ static ɵinj: i0.ɵɵInjectorDeclaration<SiraUiModule>;
165
+ }
166
+
167
+ export { AlertComponent, BadgeComponent, ButtonComponent, CardActionComponent, CardBodyComponent, CardComponent, CardImageComponent, ElementSpacingDirective, NavCardComponent, NavbarComponent, QuickButtonComponent, SIRA_CARD_COMPONENTS, SectionBodyComponent, SectionComponent, SectionHeadingComponent, SiraUiModule, TextStyleDirective, TileCardComponent };
168
+ export type { AlertTheme, BadgeTheme, BadgeVariant, ButtonVariant, theme };