@marsaude/sira-components 1.0.0

package/fesm2022/marsaude-sira-components.mjs

@@ -0,0 +1,956 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostBinding, Output, Input, Component, Directive, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+class AlertComponent {
+    theme = 'neutral';
+    icon;
+    title;
+    linkText;
+    callback = new EventEmitter();
+    get classes() {
+        return [
+            'sira-alert',
+            `sira-alert--${this.theme}`
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AlertComponent, isStandalone: true, selector: "div[siraAlert]", inputs: { theme: "theme", icon: "icon", title: "title", linkText: "linkText" }, outputs: { callback: "callback" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    @if (icon) {
+      <div class="alert-icon">
+        <i class="material-icons">{{ icon }}</i>
+      </div>
+    }
+
+    <div class="alert-content">
+      
+      @if (title) {
+        <h4 class="alert-title">{{ title }}</h4>
+      }
+      
+      <div class="alert-description">
+        <ng-content></ng-content>
+      </div>
+
+      @if (linkText) {
+        <a href="javascript:void(0)" (click)="callback.emit(true)" class="alert-link">{{ linkText }}</a>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraAlert]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (icon) {
+      <div class="alert-icon">
+        <i class="material-icons">{{ icon }}</i>
+      </div>
+    }
+
+    <div class="alert-content">
+      
+      @if (title) {
+        <h4 class="alert-title">{{ title }}</h4>
+      }
+      
+      <div class="alert-description">
+        <ng-content></ng-content>
+      </div>
+
+      @if (linkText) {
+        <a href="javascript:void(0)" (click)="callback.emit(true)" class="alert-link">{{ linkText }}</a>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { theme: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], linkText: [{
+                type: Input
+            }], callback: [{
+                type: Output
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class BadgeComponent {
+    theme = 'neutral';
+    variant = 'filled';
+    dot = false;
+    get classes() {
+        return [
+            'sira-badge',
+            `sira-badge--${this.theme}`,
+            `sira-badge--${this.variant}`,
+            this.dot ? 'sira-badge--has-dot' : ''
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BadgeComponent, isStandalone: true, selector: "span[siraBadge]", inputs: { theme: "theme", variant: "variant", dot: "dot" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    @if (dot) {
+      <span class="sira-badge-dot"></span>
+    }
+    
+    <span class="text">
+      <ng-content></ng-content>  
+    </span>
+    
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[siraBadge]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (dot) {
+      <span class="sira-badge-dot"></span>
+    }
+    
+    <span class="text">
+      <ng-content></ng-content>  
+    </span>
+    
+  `,
+                }]
+        }], propDecorators: { theme: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class QuickButtonComponent {
+    icon = '';
+    label = '';
+    get classes() {
+        return 'sira-quick-button';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuickButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: QuickButtonComponent, isStandalone: true, selector: "button[siraQuickButton], a[siraQuickButton]", inputs: { icon: "icon", label: "label" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <div class="icon-container">
+      @if (icon) {
+        <i class="material-icons">{{ icon }}</i>
+      }
+    </div>
+    <span class="label">{{ label }}</span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuickButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[siraQuickButton], a[siraQuickButton]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div class="icon-container">
+      @if (icon) {
+        <i class="material-icons">{{ icon }}</i>
+      }
+    </div>
+    <span class="label">{{ label }}</span>
+  `,
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardActionComponent {
+    get classes() {
+        return [
+            'sira-card--action',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CardActionComponent, isStandalone: true, selector: "div[siraCardAction]", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <span class="content-wrapper">
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraCardAction]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span class="content-wrapper">
+      <ng-content></ng-content>
+    </span>
+  `,
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardBodyComponent {
+    get classes() {
+        return [
+            'sira-card--body',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CardBodyComponent, isStandalone: true, selector: "div[siraCardBody]", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <span class="content-wrapper">
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraCardBody]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span class="content-wrapper">
+      <ng-content></ng-content>
+    </span>
+  `,
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardImageComponent {
+    image;
+    alt;
+    get classes() {
+        return [
+            'sira-card--image',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CardImageComponent, isStandalone: true, selector: "div[siraCardImage]", inputs: { image: "image", alt: "alt" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <div class="image" style="background-image: url({{ image }})">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraCardImage]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div class="image" style="background-image: url({{ image }})">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { image: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardComponent {
+    theme;
+    border = true;
+    get classes() {
+        return [
+            'sira-card',
+            !this.border ? `sira-card--border-none` : '',
+            this.theme ? `sira-card--${this.theme}` : '',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CardComponent, isStandalone: true, selector: "div[siraCard]", inputs: { theme: "theme", border: "border" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <span class="content-wrapper">
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraCard]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span class="content-wrapper">
+      <ng-content></ng-content>
+    </span>
+  `,
+                }]
+        }], propDecorators: { theme: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+const SIRA_CARD_COMPONENTS = [
+    CardActionComponent,
+    CardBodyComponent,
+    CardImageComponent,
+    CardComponent
+];
+
+class NavCardComponent {
+    title = '';
+    subtitle;
+    image;
+    icon;
+    size = 'default';
+    full = false;
+    get classes() {
+        return [
+            'sira-nav-card',
+            `sira-nav-card--${this.size}`,
+            this.image ? 'has-image' : 'has-icon',
+            this.full ? 'full' : ''
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NavCardComponent, isStandalone: true, selector: "a[siraNavCard], button[siraNavCard]", inputs: { title: "title", subtitle: "subtitle", image: "image", icon: "icon", size: "size", full: "full" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    @if (image) {
+      <div class="media-container image-mode">
+        <div class="image-bg" style="background-image: url('{{image}}')"></div>
+      </div>
+    } @else if (icon) {
+      <div class="media-container icon-mode">
+        <i class="material-icons">{{ icon }}</i>
+      </div>
+    }
+
+    <div class="content">
+      <div class="badge-wrapper">
+        <ng-content select="[siraBadge]"></ng-content>
+      </div>
+
+      <span class="title">{{ title }}</span>
+
+      @if (subtitle) {
+        <span class="subtitle">{{ subtitle }}</span>
+      }
+    </div>
+
+    <div class="action">
+      <i class="material-icons">arrow_forward</i>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[siraNavCard], button[siraNavCard]', // Funciona como link ou botão
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (image) {
+      <div class="media-container image-mode">
+        <div class="image-bg" style="background-image: url('{{image}}')"></div>
+      </div>
+    } @else if (icon) {
+      <div class="media-container icon-mode">
+        <i class="material-icons">{{ icon }}</i>
+      </div>
+    }
+
+    <div class="content">
+      <div class="badge-wrapper">
+        <ng-content select="[siraBadge]"></ng-content>
+      </div>
+
+      <span class="title">{{ title }}</span>
+
+      @if (subtitle) {
+        <span class="subtitle">{{ subtitle }}</span>
+      }
+    </div>
+
+    <div class="action">
+      <i class="material-icons">arrow_forward</i>
+    </div>
+  `,
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], full: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class TileCardComponent {
+    icon = '';
+    title = '';
+    actionText = 'Acessar'; // Texto padrão conforme a imagem
+    get classes() {
+        return ['sira-tile-card'].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TileCardComponent, isStandalone: true, selector: "a[siraTileCard], button[siraTileCard]", inputs: { icon: "icon", title: "title", actionText: "actionText" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <div class="icon-container">
+      @if (icon) {
+        <i class="material-icons">{{ icon }}</i>
+      }
+    </div>
+
+    <span class="title">{{ title }}</span>
+
+    <div class="action-footer">
+      <span class="action-text">{{ actionText }}</span>
+      <i class="material-icons action-icon">arrow_forward</i>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TileCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[siraTileCard], button[siraTileCard]', // Permite ser um link ou botão
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div class="icon-container">
+      @if (icon) {
+        <i class="material-icons">{{ icon }}</i>
+      }
+    </div>
+
+    <span class="title">{{ title }}</span>
+
+    <div class="action-footer">
+      <span class="action-text">{{ actionText }}</span>
+      <i class="material-icons action-icon">arrow_forward</i>
+    </div>
+  `,
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], actionText: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class TextStyleDirective {
+    el;
+    renderer;
+    tokens = [];
+    font;
+    color;
+    size;
+    spacing;
+    bgColor;
+    weight;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    resizeSub;
+    ngOnChanges(_) {
+        this.applyStyles();
+    }
+    ngOnInit() {
+        // Recalcula estilos quando o tamanho da janela mudar (tokens responsivos)
+        this.resizeSub = fromEvent(window, 'resize')
+            .pipe(debounceTime(150))
+            .subscribe(() => this.applyStyles());
+    }
+    ngOnDestroy() {
+        this.resizeSub?.unsubscribe();
+    }
+    applyStyles() {
+        const element = this.el.nativeElement;
+        const rootStyles = window.getComputedStyle(document.documentElement);
+        const styleObj = {};
+        const tokenList = Array.isArray(this.tokens)
+            ? this.tokens
+            : this.tokens?.split(' ').filter(Boolean) ?? [];
+        const regex = /(\d{3})\s+([\d.]+px)\/([\d.]+px)\s+(?:"([^"]+)"|'([^']+)')/;
+        // Tokens combinados
+        tokenList.forEach(token => {
+            const tokenValue = rootStyles.getPropertyValue(`--${token.trim()}`).trim();
+            const match = tokenValue.match(regex);
+            if (match) {
+                const [, weight, size, lineHeight, font1, font2] = match;
+                const fontFamily = font1 || font2;
+                Object.assign(styleObj, {
+                    'font-weight': weight,
+                    'font-size': size,
+                    'line-height': lineHeight,
+                    'font-family': fontFamily,
+                });
+            }
+        });
+        // Inputs isolados (também via tokens)
+        const resolveTokenValue = (tokenName) => {
+            if (!tokenName)
+                return;
+            return rootStyles.getPropertyValue(`--${tokenName.trim()}`).trim() || tokenName;
+        };
+        const fontResolved = resolveTokenValue(this.font);
+        if (fontResolved) {
+            // Tenta aplicar parsing como se fosse shorthand de fonte
+            const match = fontResolved.match(regex);
+            if (match) {
+                const [, weight, size, lineHeight, font1, font2] = match;
+                styleObj['font-weight'] = weight;
+                styleObj['font-size'] = size;
+                styleObj['line-height'] = lineHeight;
+                styleObj['font-family'] = font1 || font2;
+            }
+            else {
+                styleObj['font-family'] = fontResolved;
+            }
+        }
+        const colorResolved = resolveTokenValue(this.color);
+        if (colorResolved)
+            styleObj['color'] = colorResolved;
+        const sizeResolved = resolveTokenValue(this.size);
+        if (sizeResolved)
+            styleObj['font-size'] = sizeResolved;
+        const weightResolved = resolveTokenValue(this.weight);
+        if (weightResolved)
+            styleObj['font-weight'] = weightResolved;
+        const spacingResolved = resolveTokenValue(this.spacing);
+        if (spacingResolved)
+            styleObj['margin-bottom'] = spacingResolved;
+        const bgColorResolved = resolveTokenValue(this.bgColor);
+        if (bgColorResolved)
+            styleObj['background-color'] = bgColorResolved;
+        // Aplica os estilos no elemento
+        Object.entries(styleObj).forEach(([prop, val]) => {
+            this.renderer.setStyle(element, prop, val);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextStyleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TextStyleDirective, isStandalone: true, selector: "[textStyle]", inputs: { tokens: ["textStyle", "tokens"], font: "font", color: "color", size: "size", spacing: "spacing", bgColor: "bgColor", weight: "weight" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TextStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[textStyle]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tokens: [{
+                type: Input,
+                args: ['textStyle']
+            }], font: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], spacing: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }] } });
+
+class SectionHeadingComponent {
+    size = 'default';
+    title;
+    subtitle;
+    icon;
+    iconColor;
+    get classes() {
+        return [
+            'sira-section--heading',
+            this.size === 'small' ? 'sira-section--heading-small' : '',
+            !!this.iconColor ? `icon-color--${this.iconColor}` : '',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SectionHeadingComponent, isStandalone: true, selector: "div[siraSectionHeading]", inputs: { size: "size", title: "title", subtitle: "subtitle", icon: "icon", iconColor: "iconColor" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <span class="content-wrapper">
+      @if (icon) {
+        <div class="icon">
+          <i class="material-icons">{{ icon }}</i>
+        </div>
+      }
+      <div class="text">
+        <h2 [textStyle]="size === 'small'? 'mar-label-md': 'mar-label-lg'" color="mar-text-primary">{{ title }}</h2>
+        @if (subtitle) {
+          <p textStyle="mar-caption-default" color="mar-text-tertiary">{{ subtitle }}</p>
+        }
+      </div>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TextStyleDirective, selector: "[textStyle]", inputs: ["textStyle", "font", "color", "size", "spacing", "bgColor", "weight"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionHeadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraSectionHeading]',
+                    standalone: true,
+                    imports: [CommonModule, TextStyleDirective],
+                    template: `
+    <span class="content-wrapper">
+      @if (icon) {
+        <div class="icon">
+          <i class="material-icons">{{ icon }}</i>
+        </div>
+      }
+      <div class="text">
+        <h2 [textStyle]="size === 'small'? 'mar-label-md': 'mar-label-lg'" color="mar-text-primary">{{ title }}</h2>
+        @if (subtitle) {
+          <p textStyle="mar-caption-default" color="mar-text-tertiary">{{ subtitle }}</p>
+        }
+      </div>
+    </span>
+  `,
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ButtonComponent {
+    variant = 'primary';
+    loading = false;
+    iconOnly = false;
+    disabled = false;
+    get classes() {
+        return [
+            'sira-btn',
+            `sira-btn--${this.variant}`,
+            this.iconOnly ? 'sira-btn--icon-only' : '',
+            this.loading ? 'sira-btn--loading' : ''
+        ].join(' ');
+    }
+    get disabledState() {
+        // Fica desabilitado se estiver carregando OU se estiver marcado como disabled
+        return (this.loading || this.disabled) ? true : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ButtonComponent, isStandalone: true, selector: "button[siraButton], a[siraButton]", inputs: { variant: "variant", loading: "loading", iconOnly: "iconOnly", disabled: "disabled" }, host: { properties: { "class": "this.classes", "disabled": "this.disabledState" } }, ngImport: i0, template: `
+    @if (loading) {
+    <span class="loader-overlay">
+      <span class="spinner"></span>
+    </span>
+    }
+    <span class="content-wrapper" [style.opacity]="loading ? '0' : '1'">
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[siraButton], a[siraButton]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (loading) {
+    <span class="loader-overlay">
+      <span class="spinner"></span>
+    </span>
+    }
+    <span class="content-wrapper" [style.opacity]="loading ? '0' : '1'">
+      <ng-content></ng-content>
+    </span>
+  `,
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], iconOnly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], disabledState: [{
+                type: HostBinding,
+                args: ['disabled']
+            }] } });
+
+class ElementSpacingDirective {
+    el;
+    renderer;
+    spacingToken;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.applySpacing();
+    }
+    applySpacing() {
+        const element = this.el.nativeElement;
+        const rootStyles = getComputedStyle(document.documentElement);
+        if (!this.spacingToken)
+            return;
+        const spacingValue = rootStyles
+            .getPropertyValue(`--${this.spacingToken.trim()}`)
+            .trim();
+        if (!spacingValue) {
+            console.warn(`Token "--${this.spacingToken}" não encontrado no :root.`);
+            return;
+        }
+        this.renderer.setStyle(element, 'padding-top', spacingValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ElementSpacingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ElementSpacingDirective, isStandalone: true, selector: "[elementSpacing]", inputs: { spacingToken: ["elementSpacing", "spacingToken"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ElementSpacingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elementSpacing]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { spacingToken: [{
+                type: Input,
+                args: ['elementSpacing']
+            }] } });
+
+class NavbarComponent {
+    title = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NavbarComponent, isStandalone: true, selector: "navbar", inputs: { title: "title" }, ngImport: i0, template: `
+    <header class="navbar-container">
+
+      <div class="navbar-slot start">
+        <ng-content select="[left]"></ng-content>
+      </div>
+
+      <div class="navbar-slot center">
+        @if (title) {
+          <h1 class="navbar-title">
+            {{ title }}
+          </h1>
+        }
+      </div>
+
+      <div class="navbar-slot end">
+        <ng-content select="[right]"></ng-content>
+      </div>
+
+    </header>
+  `, isInline: true, styles: [":host{display:block;width:100%}.navbar-container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:54px;padding:var(--mar-spacing-default-xs) var(--mar-spacing-default-sm)}.navbar-slot{display:flex;align-items:center}.navbar-slot.start{justify-content:flex-start}.navbar-slot.center{justify-content:center;padding:0 8px;min-width:0;overflow:hidden}.navbar-slot.end{justify-content:flex-end}.navbar-title{color:var(--mar-text-primary);text-align:center;font:var(--mar-label-md);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'navbar', standalone: true, imports: [CommonModule], template: `
+    <header class="navbar-container">
+
+      <div class="navbar-slot start">
+        <ng-content select="[left]"></ng-content>
+      </div>
+
+      <div class="navbar-slot center">
+        @if (title) {
+          <h1 class="navbar-title">
+            {{ title }}
+          </h1>
+        }
+      </div>
+
+      <div class="navbar-slot end">
+        <ng-content select="[right]"></ng-content>
+      </div>
+
+    </header>
+  `, styles: [":host{display:block;width:100%}.navbar-container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:54px;padding:var(--mar-spacing-default-xs) var(--mar-spacing-default-sm)}.navbar-slot{display:flex;align-items:center}.navbar-slot.start{justify-content:flex-start}.navbar-slot.center{justify-content:center;padding:0 8px;min-width:0;overflow:hidden}.navbar-slot.end{justify-content:flex-end}.navbar-title{color:var(--mar-text-primary);text-align:center;font:var(--mar-label-md);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class SectionComponent {
+    get classes() {
+        return [
+            'sira-section',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: SectionComponent, isStandalone: true, selector: "div[siraSection]", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <span class="content-wrapper">
+         <ng-content></ng-content>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraSection]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span class="content-wrapper">
+         <ng-content></ng-content>
+    </span>
+  `,
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SectionBodyComponent {
+    get classes() {
+        return [
+            'sira-section--body',
+        ].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: SectionBodyComponent, isStandalone: true, selector: "div[siraSectionBody]", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    <span class="content-wrapper">
+         <ng-content></ng-content>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SectionBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[siraSectionBody]',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <span class="content-wrapper">
+         <ng-content></ng-content>
+    </span>
+  `,
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+// Importe os wrappers de Section se houver (SectionComponent, SectionBodyComponent)
+const COMPONENTS = [
+    AlertComponent,
+    BadgeComponent,
+    ButtonComponent,
+    CardComponent,
+    CardBodyComponent,
+    CardActionComponent,
+    CardImageComponent,
+    ElementSpacingDirective,
+    TextStyleDirective,
+    NavCardComponent,
+    NavbarComponent,
+    SectionComponent,
+    SectionHeadingComponent,
+    SectionBodyComponent,
+    QuickButtonComponent,
+    TileCardComponent,
+];
+class SiraUiModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SiraUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: SiraUiModule, imports: [CommonModule, AlertComponent,
+            BadgeComponent,
+            ButtonComponent,
+            CardComponent,
+            CardBodyComponent,
+            CardActionComponent,
+            CardImageComponent,
+            ElementSpacingDirective,
+            TextStyleDirective,
+            NavCardComponent,
+            NavbarComponent,
+            SectionComponent,
+            SectionHeadingComponent,
+            SectionBodyComponent,
+            QuickButtonComponent,
+            TileCardComponent], exports: [AlertComponent,
+            BadgeComponent,
+            ButtonComponent,
+            CardComponent,
+            CardBodyComponent,
+            CardActionComponent,
+            CardImageComponent,
+            ElementSpacingDirective,
+            TextStyleDirective,
+            NavCardComponent,
+            NavbarComponent,
+            SectionComponent,
+            SectionHeadingComponent,
+            SectionBodyComponent,
+            QuickButtonComponent,
+            TileCardComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SiraUiModule, imports: [CommonModule, AlertComponent,
+            BadgeComponent,
+            ButtonComponent,
+            CardComponent,
+            CardBodyComponent,
+            CardActionComponent,
+            CardImageComponent,
+            NavCardComponent,
+            NavbarComponent,
+            SectionComponent,
+            SectionHeadingComponent,
+            SectionBodyComponent,
+            QuickButtonComponent,
+            TileCardComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SiraUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ...COMPONENTS // Importa os standalones para dentro do módulo
+                    ],
+                    exports: [
+                        ...COMPONENTS // Exporta para quem importar o SiraUiModule
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of sira-components
+ */
+// Exporta o Módulo Principal
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent, BadgeComponent, ButtonComponent, CardActionComponent, CardBodyComponent, CardComponent, CardImageComponent, ElementSpacingDirective, NavCardComponent, NavbarComponent, QuickButtonComponent, SIRA_CARD_COMPONENTS, SectionBodyComponent, SectionComponent, SectionHeadingComponent, SiraUiModule, TextStyleDirective, TileCardComponent };
+//# sourceMappingURL=marsaude-sira-components.mjs.map