valtech-components 1.11.26 → 1.11.30

package/fesm2022/valtech-components.mjs

@@ -354,6 +354,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }] } });
 
+class BoxComponent {
+    constructor() {
+        this.color = 'dark';
+        this.bordered = false;
+        this.leftBorder = false;
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler() {
+        this.onClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BoxComponent, selector: "val-box", inputs: { color: "color", icon: "icon", bordered: "bordered", leftBorder: "leftBorder" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-card class=\"box\" [color]=\"color\" [class.bordered]=\"bordered\" [class.left-border]=\"leftBorder\">\n  <ion-icon *ngIf=\"!!icon\" class=\"icon\" [name]=\"icon\" (click)=\"clickHandler()\"></ion-icon>\n  <ng-content select=\"[body]\"></ng-content>\n</ion-card>\n", styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-box', template: "<ion-card class=\"box\" [color]=\"color\" [class.bordered]=\"bordered\" [class.left-border]=\"leftBorder\">\n  <ion-icon *ngIf=\"!!icon\" class=\"icon\" [name]=\"icon\" (click)=\"clickHandler()\"></ion-icon>\n  <ng-content select=\"[body]\"></ng-content>\n</ion-card>\n", styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], leftBorder: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class IconComponent {
+    constructor() {
+        this.size = 'small';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: IconComponent, selector: "val-icon", inputs: { size: "size", color: "color", name: "name" }, ngImport: i0, template: "<ion-icon [ngClass]=\"[size]\" [name]=\"name\" [color]=\"color\"></ion-icon>\n", styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-icon', template: "<ion-icon [ngClass]=\"[size]\" [name]=\"name\" [color]=\"color\"></ion-icon>\n", styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
 class ContentLoaderComponent {
     constructor() {
         this.color = 'primary';
@@ -433,6 +481,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Output
             }] } });
 
+class ButtonGroupComponent {
+    constructor() {
+        this.position = 'left';
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ButtonGroupComponent, selector: "val-button-group", inputs: { buttons: "buttons", position: "position" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"['group-container', position]\">\n  <val-button *ngFor=\"let b of buttons\" [props]=\"b\" (click)=\"clickHandler(b?.token)\"></val-button>\n</div>\n", styles: ["val-button{display:inline-block}.group-container{width:100%;padding:.25rem}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}@media (min-width: 768px){.group-container{padding:.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-button-group', template: "<div [ngClass]=\"['group-container', position]\">\n  <val-button *ngFor=\"let b of buttons\" [props]=\"b\" (click)=\"clickHandler(b?.token)\"></val-button>\n</div>\n", styles: ["val-button{display:inline-block}.group-container{width:100%;padding:.25rem}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}@media (min-width: 768px){.group-container{padding:.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { buttons: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class TitleBlockComponent {
+    constructor() {
+        this.position = 'left';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleBlockComponent, selector: "val-title-block", inputs: { position: "position", title: "title", aboveTitle: "aboveTitle", bellowTitle: "bellowTitle" }, ngImport: i0, template: "<div [ngClass]=\"['titles-container', position]\">\n  <val-title\n    *ngIf=\"aboveTitle\"\n    [size]=\"aboveTitle.size\"\n    [color]=\"aboveTitle.color\"\n    content=\"{{ aboveTitle.text | uppercase }}\"\n  ></val-title>\n  <val-display\n    *ngIf=\"title\"\n    [size]=\"title.size\"\n    [color]=\"title.color\"\n    [content]=\"title.text\"\n  ></val-display>\n  <val-title\n    *ngIf=\"bellowTitle\"\n    [size]=\"bellowTitle.size\"\n    [color]=\"bellowTitle.color\"\n    [content]=\"bellowTitle.text\"\n  ></val-title>\n</div>\n", styles: ["val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;padding:.25rem;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}@media (min-width: 768px){.titles-container{padding:.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["size", "color", "content"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["size", "color", "content"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-title-block', template: "<div [ngClass]=\"['titles-container', position]\">\n  <val-title\n    *ngIf=\"aboveTitle\"\n    [size]=\"aboveTitle.size\"\n    [color]=\"aboveTitle.color\"\n    content=\"{{ aboveTitle.text | uppercase }}\"\n  ></val-title>\n  <val-display\n    *ngIf=\"title\"\n    [size]=\"title.size\"\n    [color]=\"title.color\"\n    [content]=\"title.text\"\n  ></val-display>\n  <val-title\n    *ngIf=\"bellowTitle\"\n    [size]=\"bellowTitle.size\"\n    [color]=\"bellowTitle.color\"\n    [content]=\"bellowTitle.text\"\n  ></val-title>\n</div>\n", styles: ["val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;padding:.25rem;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}@media (min-width: 768px){.titles-container{padding:.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { position: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], aboveTitle: [{
+                type: Input
+            }], bellowTitle: [{
+                type: Input
+            }] } });
+
 class ToolbarComponent {
     constructor(navCtrl) {
         this.navCtrl = navCtrl;
@@ -446,11 +538,11 @@ class ToolbarComponent {
         this.navCtrl.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ToolbarComponent, selector: "val-toolbar", inputs: { withBack: "withBack", withActions: "withActions", color: "color", textColor: "textColor", title: "title" }, ngImport: i0, template: "<ion-toolbar [color]=\"color\">\n  <ion-buttons slot=\"start\" *ngIf=\"withBack\">\n    <ion-button fill=\"clear\" (click)=\"goBack()\" [color]=\"textColor\">\n      <ion-icon slot=\"start\" name=\"chevron-back-outline\"></ion-icon>\n      <ion-text>Volver</ion-text>\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot=\"end\" *ngIf=\"withActions\">\n    <ng-content select=\"[toolbar-right-side]\"></ng-content>\n  </ion-buttons>\n  <ion-title [color]=\"textColor\">{{ title }}</ion-title>\n</ion-toolbar>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ToolbarComponent, selector: "val-toolbar", inputs: { withBack: "withBack", withActions: "withActions", color: "color", textColor: "textColor", title: "title" }, ngImport: i0, template: "<ion-toolbar [color]=\"color\">\n  <ion-buttons slot=\"start\" *ngIf=\"withBack\">\n    <ion-button fill=\"clear\" (click)=\"goBack()\" [color]=\"textColor\">\n      <ion-icon slot=\"start\" name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot=\"end\" *ngIf=\"withActions\">\n    <ng-content select=\"[toolbar-right-side]\"></ng-content>\n  </ion-buttons>\n  <ion-title [color]=\"textColor\">{{ title }}</ion-title>\n</ion-toolbar>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-toolbar', template: "<ion-toolbar [color]=\"color\">\n  <ion-buttons slot=\"start\" *ngIf=\"withBack\">\n    <ion-button fill=\"clear\" (click)=\"goBack()\" [color]=\"textColor\">\n      <ion-icon slot=\"start\" name=\"chevron-back-outline\"></ion-icon>\n      <ion-text>Volver</ion-text>\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot=\"end\" *ngIf=\"withActions\">\n    <ng-content select=\"[toolbar-right-side]\"></ng-content>\n  </ion-buttons>\n  <ion-title [color]=\"textColor\">{{ title }}</ion-title>\n</ion-toolbar>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
+            args: [{ selector: 'val-toolbar', template: "<ion-toolbar [color]=\"color\">\n  <ion-buttons slot=\"start\" *ngIf=\"withBack\">\n    <ion-button fill=\"clear\" (click)=\"goBack()\" [color]=\"textColor\">\n      <ion-icon slot=\"start\" name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n  <ion-buttons slot=\"end\" *ngIf=\"withActions\">\n    <ng-content select=\"[toolbar-right-side]\"></ng-content>\n  </ion-buttons>\n  <ion-title [color]=\"textColor\">{{ title }}</ion-title>\n</ion-toolbar>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NavController }], propDecorators: { withBack: [{
                 type: Input
             }], withActions: [{
@@ -463,6 +555,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }] } });
 
+class NotesBoxComponent {
+    constructor() {
+        this.color = 'light';
+        this.size = 'small';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NotesBoxComponent, selector: "val-notes-box", inputs: { color: "color", textColor: "textColor", prefix: "prefix", text: "text", size: "size" }, ngImport: i0, template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\" [leftBorder]=\"true\">\n  <div [ngClass]=\"['content-container', size]\" body>\n    <val-text [content]=\"prefix\" [size]=\"size\" [bold]=\"true\" [color]=\"textColor\"></val-text>\n    <val-text [content]=\"text\" [size]=\"size\" [bold]=\"false\" [color]=\"textColor\"></val-text>\n  </div>\n</val-box>\n", styles: [".content-container{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NotesBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-notes-box', template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\" [leftBorder]=\"true\">\n  <div [ngClass]=\"['content-container', size]\" body>\n    <val-text [content]=\"prefix\" [size]=\"size\" [bold]=\"true\" [color]=\"textColor\"></val-text>\n    <val-text [content]=\"text\" [size]=\"size\" [bold]=\"false\" [color]=\"textColor\"></val-text>\n  </div>\n</val-box>\n", styles: [".content-container{display:inline-grid}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class AlertBoxComponent {
+    constructor() {
+        this.color = 'warning';
+        this.icon = 'alert-circle-outline';
+        this.bold = false;
+        this.size = 'small';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: AlertBoxComponent, selector: "val-alert-box", inputs: { color: "color", icon: "icon", text: "text", bold: "bold", size: "size" }, ngImport: i0, template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\">\n  <div class=\"content-container\" body>\n    <val-icon [name]=\"icon\" [size]=\"size\"></val-icon>\n    <val-text class=\"text\" [content]=\"text\" [size]=\"size\" [bold]=\"bold\"></val-text>\n  </div>\n</val-box>\n", styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }, { kind: "component", type: IconComponent, selector: "val-icon", inputs: ["size", "color", "name"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlertBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-alert-box', template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\">\n  <div class=\"content-container\" body>\n    <val-icon [name]=\"icon\" [size]=\"size\"></val-icon>\n    <val-text class=\"text\" [content]=\"text\" [size]=\"size\" [bold]=\"bold\"></val-text>\n  </div>\n</val-box>\n", styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], bold: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class BannerComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onClose = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    closeHandler() {
+        this.onClose.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BannerComponent, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, ngImport: i0, template: "<val-box color=\"light\" [icon]=\"props.closable ? 'close-outline' : ''\" [bordered]=\"props.bordered\" (onClick)=\"closeHandler()\">\n  <div [ngClass]=\"['content-container', props.mode]\" body>\n    <val-title-block\n      [aboveTitle]=\"{ color: 'medium', size: 'small', text: 'Sample above title' }\"\n      [title]=\"{ color: 'primary', size: 'small', text: 'Sample title super cool content for you' }\"\n      [bellowTitle]=\"{ color: 'dark', size: 'small', text: 'Sample bellow title' }\"\n    ></val-title-block>\n    <val-button-group class=\"buttons-container\" [buttons]=\"props.actions\" (onClick)=\"clickHandler($event)\"></val-button-group>\n  </div>\n</val-box>\n", styles: [".content-container{display:flex;justify-content:space-between}.content-container.column{flex-direction:row}.content-container.row,.content-container.hybrid{flex-direction:column}@media (min-width: 768px){.content-container.hybrid{flex-direction:row}}.buttons-container{align-items:center;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["position", "title", "aboveTitle", "bellowTitle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-banner', template: "<val-box color=\"light\" [icon]=\"props.closable ? 'close-outline' : ''\" [bordered]=\"props.bordered\" (onClick)=\"closeHandler()\">\n  <div [ngClass]=\"['content-container', props.mode]\" body>\n    <val-title-block\n      [aboveTitle]=\"{ color: 'medium', size: 'small', text: 'Sample above title' }\"\n      [title]=\"{ color: 'primary', size: 'small', text: 'Sample title super cool content for you' }\"\n      [bellowTitle]=\"{ color: 'dark', size: 'small', text: 'Sample bellow title' }\"\n    ></val-title-block>\n    <val-button-group class=\"buttons-container\" [buttons]=\"props.actions\" (onClick)=\"clickHandler($event)\"></val-button-group>\n  </div>\n</val-box>\n", styles: [".content-container{display:flex;justify-content:space-between}.content-container.column{flex-direction:row}.content-container.row,.content-container.hybrid{flex-direction:column}@media (min-width: 768px){.content-container.hybrid{flex-direction:row}}.buttons-container{align-items:center;display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }] } });
+
 class TextContent {
     constructor(text) {
         this.text = text;
@@ -575,13 +743,14 @@ class ValtechComponentsModule {
                 ThemeService,
                 {
                     provide: ValtechConfigService,
-                    useValue: config
-                }
-            ]
+                    useValue: config,
+                },
+            ],
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, declarations: [ButtonComponent,
+            BoxComponent,
             DisplayComponent,
             TextComponent,
             TitleComponent,
@@ -590,7 +759,14 @@ class ValtechComponentsModule {
             ContentLoaderComponent,
             LinkComponent,
             SearchbarComponent,
-            ToolbarComponent], imports: [CommonModule, HttpClientModule, IonicModule], exports: [ButtonComponent,
+            ToolbarComponent,
+            IconComponent,
+            ButtonGroupComponent,
+            TitleBlockComponent,
+            AlertBoxComponent,
+            BannerComponent,
+            NotesBoxComponent], imports: [CommonModule, HttpClientModule, IonicModule], exports: [ButtonComponent,
+            BoxComponent,
             DisplayComponent,
             TextComponent,
             TitleComponent,
@@ -599,7 +775,13 @@ class ValtechComponentsModule {
             ContentLoaderComponent,
             LinkComponent,
             SearchbarComponent,
-            ToolbarComponent] }); }
+            ToolbarComponent,
+            IconComponent,
+            ButtonGroupComponent,
+            TitleBlockComponent,
+            AlertBoxComponent,
+            BannerComponent,
+            NotesBoxComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, imports: [CommonModule, HttpClientModule, IonicModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, decorators: [{
@@ -607,6 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             args: [{
                     declarations: [
                         ButtonComponent,
+                        BoxComponent,
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
@@ -616,10 +799,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         LinkComponent,
                         SearchbarComponent,
                         ToolbarComponent,
+                        IconComponent,
+                        ButtonGroupComponent,
+                        TitleBlockComponent,
+                        AlertBoxComponent,
+                        BannerComponent,
+                        NotesBoxComponent,
                     ],
                     imports: [CommonModule, HttpClientModule, IonicModule],
                     exports: [
                         ButtonComponent,
+                        BoxComponent,
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
@@ -629,6 +819,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         LinkComponent,
                         SearchbarComponent,
                         ToolbarComponent,
+                        IconComponent,
+                        ButtonGroupComponent,
+                        TitleBlockComponent,
+                        AlertBoxComponent,
+                        BannerComponent,
+                        NotesBoxComponent,
                     ],
                 }]
         }] });
@@ -673,5 +869,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, BaseDefault, ButtonComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, ComponentStates, ContentLoaderComponent, DisplayComponent, DividerComponent, Icon, LangOption, LangService, LinkComponent, LocalStorageService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, ThemeOption, ThemeService, TitleComponent, ToolbarComponent, ValtechComponentsModule, ValtechConfigService };
+export { AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, ComponentStates, ContentLoaderComponent, DisplayComponent, DividerComponent, Icon, IconComponent, LangOption, LangService, LinkComponent, LocalStorageService, NotesBoxComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToolbarComponent, ValtechComponentsModule, ValtechConfigService };
 //# sourceMappingURL=valtech-components.mjs.map