@sarasanalytics-com/design-system 0.0.3 → 0.0.4

package/esm2022/lib/datepicker/datepicker.component.mjs

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { NgFor } from '@angular/common';
+import { NgIf } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType } from '@ngx-formly/core';
+import { CalendarHeaderComponent } from '../calendar-header/calendar-header.component';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/form-field";
+import * as i2 from "@angular/material/datepicker";
+import * as i3 from "@angular/forms";
+export class DatepickerComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.CalendarHeaderComponent = CalendarHeaderComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [provideNativeDateAdapter()], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-datepicker', standalone: true, providers: [provideNativeDateAdapter()], imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        NgFor,
+                        NgIf,
+                        ReactiveFormsModule,
+                        CalendarHeaderComponent,
+                        CommonModule,
+                    ], template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
+        }], propDecorators: { range: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFnQixLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbkUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxFQUFFLFNBQVMsRUFBbUIsTUFBTSxrQkFBa0IsQ0FBQztBQUM5RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUV2RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBb0IvQyxNQUFNLE9BQU8sbUJBQW9CLFNBQVEsU0FBMEI7SUFqQm5FOztRQW9CVyw0QkFBdUIsR0FBRyx1QkFBdUIsQ0FBQztLQUU1RDs4R0FMWSxtQkFBbUI7a0dBQW5CLG1CQUFtQix3RkFkbkIsQ0FBQyx3QkFBd0IsRUFBRSxDQUFDLGlEQ2pCekMsMmtCQVdBLHcrQkRRSSxrQkFBa0IsbWdCQUNsQixjQUFjLDhCQUNkLG1CQUFtQixvekJBR25CLG1CQUFtQixtMkJBRW5CLFlBQVk7OzJGQUtILG1CQUFtQjtrQkFqQi9CLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksYUFDTCxDQUFDLHdCQUF3QixFQUFFLENBQUMsV0FDOUI7d0JBQ1Asa0JBQWtCO3dCQUNsQixjQUFjO3dCQUNkLG1CQUFtQjt3QkFDbkIsS0FBSzt3QkFDTCxJQUFJO3dCQUNKLG1CQUFtQjt3QkFDbkIsdUJBQXVCO3dCQUN2QixZQUFZO3FCQUNiOzhCQUtRLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXREYXRlcGlja2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGF0ZXBpY2tlcic7XG5pbXBvcnQgeyBNYXRJbnB1dE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2lucHV0JztcbmltcG9ydCB7IE1hdEZvcm1GaWVsZE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHsgcHJvdmlkZU5hdGl2ZURhdGVBZGFwdGVyIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQgeyBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBGaWVsZFR5cGUsIEZpZWxkVHlwZUNvbmZpZyB9IGZyb20gJ0BuZ3gtZm9ybWx5L2NvcmUnO1xuaW1wb3J0IHsgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQgfSBmcm9tICcuLi9jYWxlbmRhci1oZWFkZXIvY2FsZW5kYXItaGVhZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGb3JtQ29udHJvbCwgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEJyb3dzZXJBbmltYXRpb25zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlci9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtZGF0ZXBpY2tlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHByb3ZpZGVyczogW3Byb3ZpZGVOYXRpdmVEYXRlQWRhcHRlcigpXSxcbiAgaW1wb3J0czogW1xuICAgIE1hdEZvcm1GaWVsZE1vZHVsZSxcbiAgICBNYXRJbnB1dE1vZHVsZSxcbiAgICBNYXREYXRlcGlja2VyTW9kdWxlLFxuICAgIE5nRm9yLFxuICAgIE5nSWYsXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICBDYWxlbmRhckhlYWRlckNvbXBvbmVudCxcbiAgICBDb21tb25Nb2R1bGUsXG4gIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRlcGlja2VyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2RhdGVwaWNrZXIuY29tcG9uZW50LmNzcydcbn0pXG5leHBvcnQgY2xhc3MgRGF0ZXBpY2tlckNvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZTxGaWVsZFR5cGVDb25maWc+IHtcbiAgQElucHV0KCkgcmFuZ2U6IGFueTtcblxuICByZWFkb25seSBDYWxlbmRhckhlYWRlckNvbXBvbmVudCA9IENhbGVuZGFySGVhZGVyQ29tcG9uZW50O1xuXG59XG4iLCI8bWF0LWZvcm0tZmllbGQgY2xhc3M9XCJkYXRlLXBpY2tlclwiPlxuICA8bWF0LWxhYmVsPkNob29zZSBhIGRhdGU8L21hdC1sYWJlbD5cbiAgPG1hdC1kYXRlLXJhbmdlLWlucHV0IFtyYW5nZVBpY2tlcl09XCJwaWNrZXJcIiBbZm9ybUdyb3VwXT1cInJhbmdlXCI+XG4gICAgPGlucHV0IGZvcm1Db250cm9sTmFtZT1cInN0YXJ0XCIgbWF0U3RhcnREYXRlIHBsYWNlaG9sZGVyPVwiU3RhcnQgZGF0ZVwiPlxuICAgIDxpbnB1dCBmb3JtQ29udHJvbE5hbWU9XCJlbmRcIiBtYXRFbmREYXRlIHBsYWNlaG9sZGVyPVwiRW5kIGRhdGVcIj5cbiAgPC9tYXQtZGF0ZS1yYW5nZS1pbnB1dD5cbiAgPG1hdC1oaW50Pk1NL0REL1lZWVk8L21hdC1oaW50PlxuICA8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdEljb25TdWZmaXggW2Zvcl09XCJwaWNrZXJcIj48L21hdC1kYXRlcGlja2VyLXRvZ2dsZT5cbiAgPG1hdC1kYXRlLXJhbmdlLXBpY2tlciBbY2FsZW5kYXJIZWFkZXJDb21wb25lbnRdPVwiQ2FsZW5kYXJIZWFkZXJDb21wb25lbnRcIiAjcGlja2VyPlxuICA8L21hdC1kYXRlLXJhbmdlLXBpY2tlcj5cbjwvbWF0LWZvcm0tZmllbGQ+XG4iXX0=

package/esm2022/lib/form-select/form-select.component.mjs

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormlyModule } from '@ngx-formly/core';
+import { FieldType } from '@ngx-formly/core';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { ChipsComponent } from '../chips/chips.component';
+import { NgIf, NgFor } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@ngx-formly/core";
+import * as i3 from "@ng-select/ng-select";
+export class FormSelectComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.svgStyle = {};
+        this.openState = false;
+        this.startInd = 0;
+        this.labelLimit = 2;
+    }
+    ngOnInit() {
+        this.selectables = this.field.props.options;
+        this.params = this.field.props['params'];
+        this.svgStyle = {
+            '-webkit-mask-image': `url(${this.params.dropIcon})})`,
+            'mask-image': `url(${this.params.dropIcon})`,
+        };
+    }
+    openClose(state) {
+        if (this.field.props.disabled)
+            return;
+        this.openState = state;
+    }
+    shiftLabel(action) {
+        if (action == 'clicked')
+            this.startInd++;
+        if (action == 'cleared')
+            this.startInd = 0;
+        if (action == 'removed' && this.startInd > 0)
+            this.startInd--;
+    }
+    checkForZero(selected) {
+        this.topLabel = selected.length == 0 ? false : true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    placeholder={{params.label}} bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>\n", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:min-content;min-width:100px;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-select', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        FormlyModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        ChipsComponent,
+                        NgIf,
+                        NgFor
+                    ], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    placeholder={{params.label}} bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>\n", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:min-content;min-width:100px;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1zZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9mb3JtLXNlbGVjdC9mb3JtLXNlbGVjdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2Zvcm0tc2VsZWN0L2Zvcm0tc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxTQUFTLEVBQW1CLE1BQU0sa0JBQWtCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7OztBQWlCOUMsTUFBTSxPQUFPLG1CQUFvQixTQUFRLFNBQTBCO0lBZm5FOztRQW1CRSxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUUzQixhQUFRLEdBQVcsQ0FBQyxDQUFDO1FBQ3JCLGVBQVUsR0FBVyxDQUFDLENBQUM7S0FzQnhCO0lBcEJDLFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQztRQUM1QyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxRQUFRLEdBQUc7WUFDZCxvQkFBb0IsRUFBRSxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxLQUFLO1lBQ3RELFlBQVksRUFBRSxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxHQUFHO1NBQzdDLENBQUE7SUFDSCxDQUFDO0lBQ0QsU0FBUyxDQUFDLEtBQWM7UUFDdEIsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRO1lBQUUsT0FBTztRQUN0QyxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBQ0QsVUFBVSxDQUFDLE1BQWM7UUFDdkIsSUFBSSxNQUFNLElBQUksU0FBUztZQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUN6QyxJQUFJLE1BQU0sSUFBSSxTQUFTO1lBQUUsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUM7UUFDM0MsSUFBSSxNQUFNLElBQUksU0FBUyxJQUFJLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQztZQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNoRSxDQUFDO0lBQ0QsWUFBWSxDQUFDLFFBQWE7UUFDeEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUMsTUFBTSxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDdEQsQ0FBQzs4R0E3QlUsbUJBQW1CO2tHQUFuQixtQkFBbUIsa0dDdkJoQywwMEVBc0NBLG04RUQxQkksbUJBQW1CLHlUQUNuQixZQUFZLHFKQUVaLGNBQWMscy9CQUNkLGNBQWMsbU1BQ2QsSUFBSSw2RkFDSixLQUFLOzsyRkFLSSxtQkFBbUI7a0JBZi9CLFNBQVM7K0JBQ0UsaUJBQWlCLGNBQ2YsSUFBSSxXQUNQO3dCQUNQLG1CQUFtQjt3QkFDbkIsWUFBWTt3QkFDWixtQkFBbUI7d0JBQ25CLGNBQWM7d0JBQ2QsY0FBYzt3QkFDZCxJQUFJO3dCQUNKLEtBQUs7cUJBQ04iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBGb3JtbHlNb2R1bGUgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcbmltcG9ydCB7IEZpZWxkVHlwZSwgRmllbGRUeXBlQ29uZmlnIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBOZ1NlbGVjdE1vZHVsZSB9IGZyb20gJ0BuZy1zZWxlY3Qvbmctc2VsZWN0JztcbmltcG9ydCB7IENoaXBzQ29tcG9uZW50IH0gZnJvbSAnLi4vY2hpcHMvY2hpcHMuY29tcG9uZW50JztcbmltcG9ydCB7IE5nSWYsIE5nRm9yIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWZvcm0tc2VsZWN0JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgRm9ybWx5TW9kdWxlLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgTmdTZWxlY3RNb2R1bGUsXG4gICAgQ2hpcHNDb21wb25lbnQsXG4gICAgTmdJZixcbiAgICBOZ0ZvclxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZm9ybS1zZWxlY3QuY29tcG9uZW50LmNzcydcbn0pXG5leHBvcnQgY2xhc3MgRm9ybVNlbGVjdENvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZTxGaWVsZFR5cGVDb25maWc+IHtcbiAgc2VsZWN0YWJsZXM6IGFueTtcbiAgcGFyYW1zOiBhbnk7XG5cbiAgc3ZnU3R5bGUgPSB7fTtcbiAgb3BlblN0YXRlOiBib29sZWFuID0gZmFsc2U7XG4gIHRvcExhYmVsOiBib29sZWFuO1xuICBzdGFydEluZDogbnVtYmVyID0gMDtcbiAgbGFiZWxMaW1pdDogbnVtYmVyID0gMjtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNlbGVjdGFibGVzID0gdGhpcy5maWVsZC5wcm9wcy5vcHRpb25zO1xuICAgIHRoaXMucGFyYW1zID0gdGhpcy5maWVsZC5wcm9wc1sncGFyYW1zJ107XG4gICAgdGhpcy5zdmdTdHlsZSA9IHtcbiAgICAgICctd2Via2l0LW1hc2staW1hZ2UnOiBgdXJsKCR7dGhpcy5wYXJhbXMuZHJvcEljb259KX0pYCxcbiAgICAgICdtYXNrLWltYWdlJzogYHVybCgke3RoaXMucGFyYW1zLmRyb3BJY29ufSlgLFxuICAgIH1cbiAgfVxuICBvcGVuQ2xvc2Uoc3RhdGU6IGJvb2xlYW4pIHtcbiAgICBpZiAodGhpcy5maWVsZC5wcm9wcy5kaXNhYmxlZCkgcmV0dXJuO1xuICAgIHRoaXMub3BlblN0YXRlID0gc3RhdGU7XG4gIH1cbiAgc2hpZnRMYWJlbChhY3Rpb246IHN0cmluZykge1xuICAgIGlmIChhY3Rpb24gPT0gJ2NsaWNrZWQnKSB0aGlzLnN0YXJ0SW5kKys7XG4gICAgaWYgKGFjdGlvbiA9PSAnY2xlYXJlZCcpIHRoaXMuc3RhcnRJbmQgPSAwO1xuICAgIGlmIChhY3Rpb24gPT0gJ3JlbW92ZWQnICYmIHRoaXMuc3RhcnRJbmQgPiAwKSB0aGlzLnN0YXJ0SW5kLS07XG4gIH1cbiAgY2hlY2tGb3JaZXJvKHNlbGVjdGVkOiBhbnkpIHtcbiAgICB0aGlzLnRvcExhYmVsID0gc2VsZWN0ZWQubGVuZ3RoID09IDAgPyBmYWxzZSA6IHRydWU7XG4gIH1cbn1cbiIsIjxkaXYgW3N0eWxlLnZpc2liaWxpdHldPVwiKG9wZW5TdGF0ZSB8fCB0b3BMYWJlbCkgPyAndmlzaWJsZScgOiAnaGlkZGVuJ1wiIGNsYXNzPVwiY2xpY2tlZC1sYWJlbFwiPnt7cGFyYW1zLmxhYmVsfX08L2Rpdj5cbjxkaXYgY2xhc3M9XCJuZy1zZWxlY3QtZmllbGQge3tvcGVuU3RhdGUgPyAnYWN0aXZhdGVkJyA6ICdpZGxlJ319IHt7ZmllbGQucHJvcHMuZGlzYWJsZWQgPyAnZGlzYWJsZWQnIDogJyd9fVwiPlxuXG4gIDxkaXYgcm9sZT1cImJ1dHRvblwiIHRpdGxlPVwiZHJvcC1idXR0b25cIiB0YWJpbmRleD1cIjBcIiBjbGFzcz1cImxlZnQtaWNvbiBzdmctaWNvblwiIFtzdHlsZV09XCJzdmdTdHlsZVwiXG4gICAgKGNsaWNrKT1cIm9wZW5DbG9zZSh0cnVlKVwiIChibHVyKT1cIm9wZW5DbG9zZShmYWxzZSlcIlxuICAgICpuZ0lmPVwiKHBhcmFtcy5kcm9wSWNvblBvc2l0aW9uID09ICdsZWZ0JyB8fCBwYXJhbXMuZHJvcEljb25Qb3NpdGlvbiA9PSAnYm90aCcpXCI+XG4gIDwvZGl2PlxuXG4gIDxuZy1zZWxlY3QgKGNoYW5nZSk9XCJjaGVja0Zvclplcm8oJGV2ZW50KVwiIChyZW1vdmUpPVwic2hpZnRMYWJlbCgncmVtb3ZlZCcpXCIgKGNsZWFyKT1cInNoaWZ0TGFiZWwoJ2NsZWFyZWQnKVwiXG4gICAgKHNlYXJjaCk9XCJvcGVuQ2xvc2UodHJ1ZSlcIiAoZm9jdXMpPVwib3BlbkNsb3NlKHRydWUpXCIgKGJsdXIpPVwiIG9wZW5DbG9zZShmYWxzZSlcIiBbaXNPcGVuXT1cIm9wZW5TdGF0ZVwiXG4gICAgcGxhY2Vob2xkZXI9e3twYXJhbXMubGFiZWx9fSBiaW5kTGFiZWw9XCJuYW1lXCIgW2l0ZW1zXT1cInNlbGVjdGFibGVzXCIgW211bHRpcGxlXT1cInBhcmFtcy5tdWx0aXBsZVwiXG4gICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCIgW3N0eWxlXSBbZm9ybWx5QXR0cmlidXRlc109XCJmaWVsZFwiPlxuICAgIDxuZy10ZW1wbGF0ZSBuZy1tdWx0aS1sYWJlbC10bXAgbGV0LWl0ZW1zPVwiaXRlbXNcIiBsZXQtY2xlYXI9XCJjbGVhclwiPlxuICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbSBvZiAoaXRlbXMgPyBpdGVtcy5zbGljZShzdGFydEluZCxzdGFydEluZCtsYWJlbExpbWl0KTogW10pXCI+XG4gICAgICAgIDxzYS1jaGlwIChvbkNsaWNrRXZlbnQpPVwiICghZmllbGQucHJvcHMuZGlzYWJsZWQpID8gIGNsZWFyKGl0ZW0pIDogbnVsbFwiIFtpZF09XCJpdGVtLmlkXCJcbiAgICAgICAgICBbaWNvblBhdGhdPVwicGFyYW1zLmljb25QYXRoXCIgW3RleHRdPVwiaXRlbS5uYW1lXCIgW3R5cGVdPVwicGFyYW1zLnR5cGVcIlxuICAgICAgICAgIFtzdGF0ZV09XCJmaWVsZC5wcm9wcy5kaXNhYmxlZCA/ICduZXV0cmFsJyA6IHBhcmFtcy5zdGF0ZVwiIFtmaWxsaW5nXT1cInBhcmFtcy5maWxsaW5nXCJcbiAgICAgICAgICBbaWNvblBvc2l0aW9uXT1cInBhcmFtcy5pY29uUG9zaXRpb25cIj5cbiAgICAgICAgPC9zYS1jaGlwPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IChjbGljayk9XCJzaGlmdExhYmVsKCdjbGlja2VkJylcIiBjbGFzcz1cIm5nLXZhbHVlIG92ZXJmbG93LWxhYmVsXCIgKm5nSWY9XCJpdGVtcy5sZW5ndGggPiAoc3RhcnRJbmQrbGFiZWxMaW1pdClcIj5cbiAgICAgICAgPHNhLWNoaXAgdGV4dD1cIit7e2l0ZW1zLmxlbmd0aC0oc3RhcnRJbmQrbGFiZWxMaW1pdCl9fVwiIHR5cGU9XCJyZWd1bGFyXCIgc3RhdGU9XCJkZWZhdWx0XCIgZmlsbGluZz1cImZpbGxlZFwiPlxuICAgICAgICA8L3NhLWNoaXA+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgKGNsaWNrKT1cInNoaWZ0TGFiZWwoJ2NsZWFyZWQnKVwiICpuZ0lmPVwic3RhcnRJbmQgPT0gaXRlbXMubGVuZ3RoLWxhYmVsTGltaXRcIiBjbGFzcz1cIm5nLXZhbHVlIG92ZXJmbG93LWxhYmVsXCI+XG4gICAgICAgIDxzYS1jaGlwIHRleHQ9XCIuLi5cIiB0eXBlPVwicmVndWxhclwiIHN0YXRlPVwiZGVmYXVsdFwiIGZpbGxpbmc9XCJmaWxsZWRcIj5cbiAgICAgICAgPC9zYS1jaGlwPlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgPC9uZy1zZWxlY3Q+XG5cbiAgPGRpdiByb2xlPVwiYnV0dG9uXCIgdGl0bGU9XCJkcm9wLWJ1dHRvblwiIHRhYmluZGV4PVwiMFwiIGNsYXNzPVwicmlnaHQtaWNvbiBzdmctaWNvblwiIFtzdHlsZV09XCJzdmdTdHlsZVwiXG4gICAgKGNsaWNrKT1cIm9wZW5DbG9zZSh0cnVlKVwiIChibHVyKT1cIm9wZW5DbG9zZShmYWxzZSlcIlxuICAgICpuZ0lmPVwiKHBhcmFtcy5kcm9wSWNvblBvc2l0aW9uID09ICdyaWdodCcgfHwgcGFyYW1zLmRyb3BJY29uUG9zaXRpb24gPT0gJ2JvdGgnKVwiPlxuICA8L2Rpdj5cblxuPC9kaXY+XG48ZGl2IGNsYXNzPVwic3VwcG9ydC1sYWJlbFwiPnt7cGFyYW1zLnN1cHBvcnRUZXh0fX08L2Rpdj5cbiJdfQ==

package/esm2022/lib/grid-cell/grid-cell.component.mjs

@@ -0,0 +1,84 @@
+import { Component, EventEmitter } from '@angular/core';
+import { Output } from '@angular/core';
+import { AvatarComponent } from '../avatar/avatar.component';
+import { ChipsComponent } from '../chips/chips.component';
+import { ButtonComponent } from '../button/button.component';
+import { NgFor } from '@angular/common';
+import * as i0 from "@angular/core";
+export class GridCellComponent {
+    constructor() {
+        this.onClickButtonEvent = new EventEmitter();
+        this.onClickChipEvent = new EventEmitter();
+        this.onClickLinkEvent = new EventEmitter();
+        this.onClickAvatarEvent = new EventEmitter();
+    }
+    buttonClicked(evt) {
+        this.params.buttonClicked && this.params.buttonClicked({
+            ...evt,
+            rowId: this.rowNum
+        });
+        this.onClickButtonEvent.emit({ ...evt, rowId: this.rowNum }); // this event isn't caught by anything. 
+    }
+    // above function behavior is same for all functions in this class
+    chipClicked(evt) {
+        this.params.chipClicked && this.params.chipClicked({
+            ...evt,
+            rowId: this.rowNum
+        });
+        this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
+    }
+    linkClicked() {
+        if (this.params.cellType != "interactive")
+            return;
+        this.params.linkClicked && this.params.linkClicked({
+            rowId: this.rowNum
+        });
+        if (this.params.interactiveLink != "") {
+            if (this.params.interactiveLinkTarget == "blank") {
+                window.open(this.params.interactiveLink);
+            }
+            else if (this.params.interactiveLinkTarget == "self") {
+                location.href = this.params.interactiveLink;
+            }
+        }
+        this.onClickLinkEvent.emit({ rowId: this.rowNum });
+    }
+    avatarClicked(evt) {
+        this.params.avatarClicked && this.params.avatarClicked({
+            ...evt,
+            rowId: this.rowNum
+        });
+        this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
+    }
+    agInit(inParams) {
+        this.rowNum = inParams.rowIndex;
+        this.params = inParams.value; // inParams.value exists when gridCell is rendered as cell, `cellRenderer: GridCellComponent`
+        if (inParams.value == undefined) { // inParams.value is undefined when gridCell is rendered as header, `headerComponent: GridCellComponent`, 
+            this.params = inParams;
+        }
+        // console.log(this.params);
+    }
+    refresh(params) {
+        return false; // not sure what this return value does.
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n  <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n    [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n    [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n  </sa-avatar>\n\n  <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n    <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n    </div>\n\n    <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n  </div>\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n  <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n    id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n    [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n    [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n  <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n    [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n    [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n    [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n    (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-cell', standalone: true, imports: [
+                        AvatarComponent,
+                        ChipsComponent,
+                        ButtonComponent,
+                        NgFor
+                    ], template: "<div class=\"grid-cell {{params.cellType}}\">\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n  <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n    [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n    [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n  </sa-avatar>\n\n  <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n    <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n    </div>\n\n    <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n  </div>\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n  <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n    id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n    [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n    [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n  <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n    [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n    [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n    [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n    (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"] }]
+        }], propDecorators: { onClickButtonEvent: [{
+                type: Output
+            }], onClickChipEvent: [{
+                type: Output
+            }], onClickLinkEvent: [{
+                type: Output
+            }], onClickAvatarEvent: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1jZWxsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvZ3JpZC1jZWxsL2dyaWQtY2VsbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2dyaWQtY2VsbC9ncmlkLWNlbGwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDL0QsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBZ0J4QyxNQUFNLE9BQU8saUJBQWlCO0lBWjlCO1FBZ0JZLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDeEMscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN0QyxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3RDLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7S0E0RG5EO0lBMURDLGFBQWEsQ0FBQyxHQUFVO1FBQ3RCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDO1lBQ3JELEdBQUcsR0FBRztZQUNOLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTTtTQUNuQixDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxHQUFHLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLENBQU0sd0NBQXdDO0lBQzdHLENBQUM7SUFFRCxrRUFBa0U7SUFFbEUsV0FBVyxDQUFDLEdBQVU7UUFDcEIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUM7WUFDakQsR0FBRyxHQUFHO1lBQ04sS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNO1NBQ25CLENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEdBQUcsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxJQUFJLGFBQWE7WUFBRSxPQUFPO1FBRWxELElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDO1lBQ2pELEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTTtTQUNuQixDQUFDLENBQUM7UUFFSCxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsZUFBZSxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQ3RDLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxxQkFBcUIsSUFBSSxPQUFPLEVBQUUsQ0FBQztnQkFDakQsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGVBQWUsQ0FBRSxDQUFDO1lBQzVDLENBQUM7aUJBQ0ksSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLHFCQUFxQixJQUFJLE1BQU0sRUFBRSxDQUFDO2dCQUNyRCxRQUFRLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsZUFBZ0IsQ0FBQztZQUMvQyxDQUFDO1FBQ0gsQ0FBQztRQUNELElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVELGFBQWEsQ0FBQyxHQUFVO1FBQ3RCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDO1lBQ3JELEdBQUcsR0FBRztZQUNOLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTTtTQUNuQixDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxHQUFHLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFFRCxNQUFNLENBQUMsUUFBYTtRQUVsQixJQUFJLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQyxRQUFRLENBQUM7UUFDaEMsSUFBSSxDQUFDLE1BQU0sR0FBRyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQU8sNkZBQTZGO1FBQ2pJLElBQUksUUFBUSxDQUFDLEtBQUssSUFBSSxTQUFTLEVBQUUsQ0FBQyxDQUFJLDBHQUEwRztZQUM5SSxJQUFJLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQTtRQUN4QixDQUFDO1FBQ0QsNEJBQTRCO0lBQzlCLENBQUM7SUFFRCxPQUFPLENBQUMsTUFBVztRQUNqQixPQUFPLEtBQUssQ0FBQyxDQUFXLHdDQUF3QztJQUNsRSxDQUFDOzhHQWpFVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixzUENyQjlCLHE1REErQkEsbW5DRGxCSSxlQUFlLHNLQUNmLGNBQWMsbU1BQ2QsZUFBZSxzT0FDZixLQUFLOzsyRkFLSSxpQkFBaUI7a0JBWjdCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUDt3QkFDUCxlQUFlO3dCQUNmLGNBQWM7d0JBQ2QsZUFBZTt3QkFDZixLQUFLO3FCQUNOOzhCQVFTLGtCQUFrQjtzQkFBM0IsTUFBTTtnQkFDRyxnQkFBZ0I7c0JBQXpCLE1BQU07Z0JBQ0csZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUNHLGtCQUFrQjtzQkFBM0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBdmF0YXJDb21wb25lbnQgfSBmcm9tICcuLi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDaGlwc0NvbXBvbmVudCB9IGZyb20gJy4uL2NoaXBzL2NoaXBzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJQ2VsbFJlbmRlcmVyQW5ndWxhckNvbXAsIElIZWFkZXJBbmd1bGFyQ29tcCB9IGZyb20gJ2FnLWdyaWQtYW5ndWxhcic7XG5pbXBvcnQgeyBHcmlkSW50ZXJmYWNlIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9ncmlkLWludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1ncmlkLWNlbGwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQXZhdGFyQ29tcG9uZW50LFxuICAgIENoaXBzQ29tcG9uZW50LFxuICAgIEJ1dHRvbkNvbXBvbmVudCxcbiAgICBOZ0ZvclxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3JpZC1jZWxsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2dyaWQtY2VsbC5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBHcmlkQ2VsbENvbXBvbmVudCBpbXBsZW1lbnRzIElDZWxsUmVuZGVyZXJBbmd1bGFyQ29tcCwgSUhlYWRlckFuZ3VsYXJDb21wIHtcbiAgcGFyYW1zOiBHcmlkSW50ZXJmYWNlO1xuICByb3dOdW06IG51bWJlcjtcblxuICBAT3V0cHV0KCkgb25DbGlja0J1dHRvbkV2ZW50ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgb25DbGlja0NoaXBFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIG9uQ2xpY2tMaW5rRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBvbkNsaWNrQXZhdGFyRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgYnV0dG9uQ2xpY2tlZChldnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5wYXJhbXMuYnV0dG9uQ2xpY2tlZCAmJiB0aGlzLnBhcmFtcy5idXR0b25DbGlja2VkKHsgICAgICAgICAgICAvLyBjYWxscyB0aGUgZnVuY3Rpb24gcGFzc2VkIHZpYSBwYXJhbXMgaW4gZ3JpZEludGVyZmFjZS5cbiAgICAgIC4uLmV2dCxcbiAgICAgIHJvd0lkOiB0aGlzLnJvd051bVxuICAgIH0pO1xuICAgIHRoaXMub25DbGlja0J1dHRvbkV2ZW50LmVtaXQoeyAuLi5ldnQsIHJvd0lkOiB0aGlzLnJvd051bSB9KTsgICAgICAvLyB0aGlzIGV2ZW50IGlzbid0IGNhdWdodCBieSBhbnl0aGluZy4gXG4gIH1cblxuICAvLyBhYm92ZSBmdW5jdGlvbiBiZWhhdmlvciBpcyBzYW1lIGZvciBhbGwgZnVuY3Rpb25zIGluIHRoaXMgY2xhc3NcblxuICBjaGlwQ2xpY2tlZChldnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5wYXJhbXMuY2hpcENsaWNrZWQgJiYgdGhpcy5wYXJhbXMuY2hpcENsaWNrZWQoe1xuICAgICAgLi4uZXZ0LFxuICAgICAgcm93SWQ6IHRoaXMucm93TnVtXG4gICAgfSk7XG4gICAgdGhpcy5vbkNsaWNrQ2hpcEV2ZW50LmVtaXQoeyAuLi5ldnQsIHJvd0lkOiB0aGlzLnJvd051bSB9KTtcbiAgfVxuXG4gIGxpbmtDbGlja2VkKCkge1xuICAgIGlmICh0aGlzLnBhcmFtcy5jZWxsVHlwZSAhPSBcImludGVyYWN0aXZlXCIpIHJldHVybjtcblxuICAgIHRoaXMucGFyYW1zLmxpbmtDbGlja2VkICYmIHRoaXMucGFyYW1zLmxpbmtDbGlja2VkKHsgICAgICAgICAvL2NhbGxpbmcgZnVuY3Rpb24gcGFzc2VkIGluIHBhcmFtcyB3aXRoIHJvd0lkIG9iamVjdCBpbiBhcmd1bWVudHNcbiAgICAgIHJvd0lkOiB0aGlzLnJvd051bVxuICAgIH0pO1xuXG4gICAgaWYgKHRoaXMucGFyYW1zLmludGVyYWN0aXZlTGluayAhPSBcIlwiKSB7XG4gICAgICBpZiAodGhpcy5wYXJhbXMuaW50ZXJhY3RpdmVMaW5rVGFyZ2V0ID09IFwiYmxhbmtcIikge1xuICAgICAgICB3aW5kb3cub3Blbih0aGlzLnBhcmFtcy5pbnRlcmFjdGl2ZUxpbmspITtcbiAgICAgIH1cbiAgICAgIGVsc2UgaWYgKHRoaXMucGFyYW1zLmludGVyYWN0aXZlTGlua1RhcmdldCA9PSBcInNlbGZcIikge1xuICAgICAgICBsb2NhdGlvbi5ocmVmID0gdGhpcy5wYXJhbXMuaW50ZXJhY3RpdmVMaW5rITtcbiAgICAgIH1cbiAgICB9XG4gICAgdGhpcy5vbkNsaWNrTGlua0V2ZW50LmVtaXQoeyByb3dJZDogdGhpcy5yb3dOdW0gfSk7XG4gIH1cblxuICBhdmF0YXJDbGlja2VkKGV2dDogRXZlbnQpIHtcbiAgICB0aGlzLnBhcmFtcy5hdmF0YXJDbGlja2VkICYmIHRoaXMucGFyYW1zLmF2YXRhckNsaWNrZWQoe1xuICAgICAgLi4uZXZ0LFxuICAgICAgcm93SWQ6IHRoaXMucm93TnVtXG4gICAgfSk7XG4gICAgdGhpcy5vbkNsaWNrQ2hpcEV2ZW50LmVtaXQoeyAuLi5ldnQsIHJvd0lkOiB0aGlzLnJvd051bSB9KTtcbiAgfVxuXG4gIGFnSW5pdChpblBhcmFtczogYW55KTogdm9pZCB7ICAgICAgICAgIC8vIG11c3QgZXhpc3Qgd2hlbiBjbGFzcyBpbXBsZW1lbnRzIElDZWxsUmVuZGVyZXJBbmd1bGFyQ29tcCAvIElIZWFkZXJBbmd1bGFyQ29tcFxuXG4gICAgdGhpcy5yb3dOdW0gPSBpblBhcmFtcy5yb3dJbmRleDtcbiAgICB0aGlzLnBhcmFtcyA9IGluUGFyYW1zLnZhbHVlOyAgICAgICAvLyBpblBhcmFtcy52YWx1ZSBleGlzdHMgd2hlbiBncmlkQ2VsbCBpcyByZW5kZXJlZCBhcyBjZWxsLCBgY2VsbFJlbmRlcmVyOiBHcmlkQ2VsbENvbXBvbmVudGBcbiAgICBpZiAoaW5QYXJhbXMudmFsdWUgPT0gdW5kZWZpbmVkKSB7ICAgIC8vIGluUGFyYW1zLnZhbHVlIGlzIHVuZGVmaW5lZCB3aGVuIGdyaWRDZWxsIGlzIHJlbmRlcmVkIGFzIGhlYWRlciwgYGhlYWRlckNvbXBvbmVudDogR3JpZENlbGxDb21wb25lbnRgLCBcbiAgICAgIHRoaXMucGFyYW1zID0gaW5QYXJhbXNcbiAgICB9XG4gICAgLy8gY29uc29sZS5sb2codGhpcy5wYXJhbXMpO1xuICB9XG5cbiAgcmVmcmVzaChwYXJhbXM6IGFueSkgeyAgICAgLy8gbXVzdCBleGlzdCB3aGVuIGNsYXNzIGltcGxlbWVudHMgSUNlbGxSZW5kZXJlckFuZ3VsYXJDb21wIC8gSUhlYWRlckFuZ3VsYXJDb21wXG4gICAgcmV0dXJuIGZhbHNlOyAgICAgICAgICAgLy8gbm90IHN1cmUgd2hhdCB0aGlzIHJldHVybiB2YWx1ZSBkb2VzLlxuICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJncmlkLWNlbGwge3twYXJhbXMuY2VsbFR5cGV9fVwiPlxuXG4gIDxpbWcgY2xhc3M9XCJpY29uc1wiIHNyYz17e3BhcmFtcy5pY29uUGF0aH19IFtzdHlsZS5kaXNwbGF5XT1cIihwYXJhbXMudmlld0xlYWRpbmdJY29uKSA/ICdibG9jaycgOiAnbm9uZSdcIiBhbHQ9XCJcIj5cblxuICA8c2EtYXZhdGFyIFtpZF09XCJwYXJhbXMuYXZhdGFyQ29uZmlnPy5pZFwiIFthbHRUZXh0XT1cInBhcmFtcy5hdmF0YXJDb25maWc/LmFsdFRleHRcIlxuICAgIFtpbWFnZVBhdGhdPVwicGFyYW1zLmF2YXRhckNvbmZpZz8uaW1hZ2VQYXRoXCIgW3NpemVdPVwicGFyYW1zLmF2YXRhckNvbmZpZz8uc2l6ZVwiXG4gICAgW3N0eWxlLmRpc3BsYXldPVwiKHBhcmFtcy52aWV3QXZhdGFyKSA/ICdibG9jaycgOiAnbm9uZSdcIiAob25DbGlja0V2ZW50KT1cImF2YXRhckNsaWNrZWQoJGV2ZW50KVwiPlxuICA8L3NhLWF2YXRhcj5cblxuICA8ZGl2IGNsYXNzPVwiZ3JpZC10ZXh0XCIgW3N0eWxlLmRpc3BsYXldPVwiKHBhcmFtcy52aWV3VGV4dCkgPyAnYmxvY2snIDogJ25vbmUnXCI+XG4gICAgPGRpdiBbc3R5bGUuZGlzcGxheV09XCIocGFyYW1zLnRleHQpID8gJ2Jsb2NrJyA6ICdub25lJ1wiIChjbGljayk9XCJsaW5rQ2xpY2tlZCgpXCIgY2xhc3M9XCJtYWluLXRleHRcIj57e3BhcmFtcy50ZXh0fX1cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgW3N0eWxlLmRpc3BsYXldPVwiKHBhcmFtcy5zdWJUZXh0KSA/ICdibG9jaycgOiAnbm9uZSdcIiBjbGFzcz1cInN1Yi10ZXh0XCI+e3twYXJhbXMuc3ViVGV4dH19PC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxpbWcgY2xhc3M9XCJpY29uc1wiIHNyYz17e3BhcmFtcy5pY29uUGF0aH19IFtzdHlsZS5kaXNwbGF5XT1cIihwYXJhbXMudmlld1RyYWlsaW5nSWNvbikgPyAnYmxvY2snIDogJ25vbmUnXCIgYWx0PVwiXCI+XG5cblxuICA8c2EtY2hpcCAqbmdGb3I9XCJsZXQgY29uZmlnIG9mIHBhcmFtcy5jaGlwQ29uZmlnLCBsZXQgaSA9IGluZGV4XCIgW2lkXT1cImNvbmZpZy5pZFwiIFtmaWxsaW5nXT1cImNvbmZpZy5maWxsaW5nXCJcbiAgICBpZD1cImNoaXBfe3tyb3dOdW19fV97e2NvbmZpZy5pZH19XCIgW2ljb25QYXRoXT1cImNvbmZpZy5pY29uUGF0aFwiIFtpY29uUG9zaXRpb25dPVwiY29uZmlnLmljb25Qb3NpdGlvblwiXG4gICAgW2xhcmdlU3RhdGVJY29uXT1cImNvbmZpZy5sYXJnZVN0YXRlSWNvblwiIFtzdGF0ZV09XCJjb25maWcuc3RhdGVcIiBbdHlwZV09XCJjb25maWcudHlwZVwiIFt0ZXh0XT1cImNvbmZpZy50ZXh0XCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIocGFyYW1zLnZpZXdDaGlwKSA/ICdibG9jaycgOiAnbm9uZSdcIiAob25DbGlja0V2ZW50KT1cImNoaXBDbGlja2VkKCRldmVudClcIj48L3NhLWNoaXA+XG5cbiAgPHNhLWJ1dHRvbiBbaWNvblBvc2l0aW9uXT1cInBhcmFtcy5idXR0b25Db25maWc/Lmljb25Qb3NpdGlvblwiIFtJbWFnZVBhdGhdPVwicGFyYW1zLmJ1dHRvbkNvbmZpZz8uaW1hZ2VQYXRoXCJcbiAgICBbaWRdPVwicGFyYW1zLmJ1dHRvbkNvbmZpZz8uaWRcIiBbc2l6ZV09XCJwYXJhbXMuYnV0dG9uQ29uZmlnPy5zaXplXCIgW3N0YXRlXT1cInBhcmFtcy5idXR0b25Db25maWc/LnN0YXRlXCJcbiAgICBbdHlwZV09XCJwYXJhbXMuYnV0dG9uQ29uZmlnPy50eXBlXCIgW3RleHRdPVwicGFyYW1zLmJ1dHRvbkNvbmZpZz8udGV4dFwiIFtocmVmXT1cInBhcmFtcy5idXR0b25Db25maWc/LmhyZWZcIlxuICAgIFtocmVmVGFyZ2V0XT1cInBhcmFtcy5idXR0b25Db25maWc/LmhyZWZUYXJnZXRcIiBbc3R5bGUuZGlzcGxheV09XCIocGFyYW1zLnZpZXdCdXR0b24pID8gJ2Jsb2NrJyA6ICdub25lJ1wiXG4gICAgKG9uQ2xpY2tFdmVudCk9XCJidXR0b25DbGlja2VkKCRldmVudClcIj48L3NhLWJ1dHRvbj5cblxuPC9kaXY+XG4iXX0=

package/esm2022/lib/header/header.component.mjs

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { ChipsComponent } from '../chips/chips.component';
+import { Input } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { ButtonComponent } from '../button/button.component';
+import { NgIf } from '@angular/common';
+import * as i0 from "@angular/core";
+export class HeaderComponent {
+    constructor() {
+        this.mainButtonClicked = new EventEmitter();
+        this.helperButtonClicked = new EventEmitter();
+    }
+    clicked(num) {
+        num ? this.mainButtonClicked.emit() : this.helperButtonClicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"header-content\">\n    <div class=\"heading\">\n      <div class=\"header-name\">{{headerName}}</div>\n      <div *ngFor=\"let chip of chipConfig\">\n        <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n      </div>\n    </div>\n    <div class=\"header-info\">\n      <div class=\"info-item\" *ngFor=\"let item of info\">\n        <img [src]=\"item[1]\" alt=\"\">\n        {{item[0]}}\n      </div>\n    </div>\n  </div>\n  <div class=\"actions\">\n    <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n      state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n      state=\"default\"></sa-button>\n  </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\n  <div class=\"header-content\">\n    <div class=\"heading\">\n      <div class=\"header-name\">{{headerName}}</div>\n      <div *ngFor=\"let chip of chipConfig\">\n        <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n      </div>\n    </div>\n    <div class=\"header-info\">\n      <div class=\"info-item\" *ngFor=\"let item of info\">\n        <img [src]=\"item[1]\" alt=\"\">\n        {{item[0]}}\n      </div>\n    </div>\n  </div>\n  <div class=\"actions\">\n    <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n      state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n      state=\"default\"></sa-button>\n  </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"] }]
+        }], propDecorators: { info: [{
+                type: Input
+            }], headerName: [{
+                type: Input
+            }], chipConfig: [{
+                type: Input
+            }], buttonHelper: [{
+                type: Input
+            }], buttonMain: [{
+                type: Input
+            }], mainButtonClicked: [{
+                type: Output
+            }], helperButtonClicked: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvaGVhZGVyL2hlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2hlYWRlci9oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFTLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQVN2QyxNQUFNLE9BQU8sZUFBZTtJQVA1QjtRQWNZLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdkMsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztLQUtwRDtJQUhDLE9BQU8sQ0FBQyxHQUFXO1FBQ2pCLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDeEUsQ0FBQzs4R0FaVSxlQUFlO2tHQUFmLGVBQWUsNFNDZDVCLDYzQkF1QkEsODdCRGJZLGNBQWMsbU1BQUUsS0FBSyxtSEFBRSxlQUFlLHNPQUFFLElBQUk7OzJGQUkzQyxlQUFlO2tCQVAzQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1AsQ0FBQyxjQUFjLEVBQUUsS0FBSyxFQUFFLGVBQWUsRUFBRSxJQUFJLENBQUM7OEJBSzlDLElBQUk7c0JBQVosS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVJLGlCQUFpQjtzQkFBMUIsTUFBTTtnQkFDRyxtQkFBbUI7c0JBQTVCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgT3V0cHV0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2hpcHNDb21wb25lbnQgfSBmcm9tICcuLi9jaGlwcy9jaGlwcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nRm9yIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYS1oZWFkZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2hpcHNDb21wb25lbnQsIE5nRm9yLCBCdXR0b25Db21wb25lbnQsIE5nSWZdLFxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2hlYWRlci5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBIZWFkZXJDb21wb25lbnQge1xuICBASW5wdXQoKSBpbmZvOiBzdHJpbmdbXVtdO1xuICBASW5wdXQoKSBoZWFkZXJOYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNoaXBDb25maWc6IHN0cmluZ1tdW107XG4gIEBJbnB1dCgpIGJ1dHRvbkhlbHBlcjogc3RyaW5nO1xuICBASW5wdXQoKSBidXR0b25NYWluOiBzdHJpbmc7XG5cbiAgQE91dHB1dCgpIG1haW5CdXR0b25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgaGVscGVyQnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBjbGlja2VkKG51bTogbnVtYmVyKSB7XG4gICAgbnVtID8gdGhpcy5tYWluQnV0dG9uQ2xpY2tlZC5lbWl0KCkgOiB0aGlzLmhlbHBlckJ1dHRvbkNsaWNrZWQuZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiaGVhZGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJoZWFkZXItY29udGVudFwiPlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkaW5nXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyLW5hbWVcIj57e2hlYWRlck5hbWV9fTwvZGl2PlxuICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgY2hpcCBvZiBjaGlwQ29uZmlnXCI+XG4gICAgICAgIDxzYS1jaGlwIHR5cGU9XCJyZWd1bGFyXCIgW3N0YXRlXT1cImNoaXBbMV1cIiBmaWxsaW5nPVwiZmlsbGVkXCIgW3RleHRdPVwiY2hpcFswXVwiPjwvc2EtY2hpcD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkZXItaW5mb1wiPlxuICAgICAgPGRpdiBjbGFzcz1cImluZm8taXRlbVwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGluZm9cIj5cbiAgICAgICAgPGltZyBbc3JjXT1cIml0ZW1bMV1cIiBhbHQ9XCJcIj5cbiAgICAgICAge3tpdGVtWzBdfX1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImFjdGlvbnNcIj5cbiAgICA8c2EtYnV0dG9uICpuZ0lmPVwiYnV0dG9uSGVscGVyXCIgKG9uQ2xpY2tFdmVudCk9XCJjbGlja2VkKDApXCIgW3RleHRdPVwiYnV0dG9uSGVscGVyXCIgdHlwZT1cInRyYW5zcGFyZW50XCIgc2l6ZT1cIm1lZGl1bVwiXG4gICAgICBzdGF0ZT1cImRlZmF1bHRcIj5cbiAgICA8L3NhLWJ1dHRvbj5cbiAgICA8c2EtYnV0dG9uICpuZ0lmPVwiYnV0dG9uTWFpblwiIChvbkNsaWNrRXZlbnQpPVwiY2xpY2tlZCgxKVwiIFt0ZXh0XT1cImJ1dHRvbk1haW5cIiB0eXBlPVwicHJpbWFyeVwiIHNpemU9XCJtZWRpdW1cIlxuICAgICAgc3RhdGU9XCJkZWZhdWx0XCI+PC9zYS1idXR0b24+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/lib/stepper/stepper.component.mjs

@@ -0,0 +1,64 @@
+import { Component, EventEmitter, Input } from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+import { NgFor, NgIf } from '@angular/common';
+import { Output } from '@angular/core';
+import * as i0 from "@angular/core";
+let nextId = 0; // used to give unique ids to inputs used in html
+export class StepperComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.latestStep = -1;
+        this.editable = true;
+        this.stepped = new EventEmitter;
+        this.uuid = nextId++;
+        this.isDisabled = false;
+        this.tickIcon = {};
+    }
+    // {
+    //   '-webkit-mask-image': `url(${this.ImagePath})`,
+    //   'mask-image': `url(${this.ImagePath})`,
+    // }
+    ngOnInit() {
+        if (this.field.props) {
+            this.stepLabels = this.field.props.options;
+            this.editable = this.field.props['params'].editable;
+            this.latestStep = this.model[`${this.key}`] ? this.model[`${this.key}`].id : -1;
+            this.doneIcon = this.field.props['params'].doneIcon;
+            this.isDisabled = this.field.props.disabled;
+        }
+        console.log(this.doneIcon);
+        this.tickIcon = {
+            '-webkit-mask-image': `url(${this.doneIcon})`,
+            'mask-image': `url(${this.doneIcon})`
+        };
+    }
+    update(chosen) {
+        if (!this.editable || this.field.props?.disabled)
+            return;
+        this.latestStep = chosen;
+        if (!this.formControl) {
+            this.stepped.emit(this.latestStep);
+            return;
+        }
+        this.formControl.setValue({
+            id: this.latestStep
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n  <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n    <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n      [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n    <div\n      class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n      <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n        class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n      </label>\n      <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n    </div>\n    <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n  </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n  <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n    <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n      [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n    <div\n      class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n      <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n        class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n      </label>\n      <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n    </div>\n    <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n  </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
+        }], propDecorators: { latestStep: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], stepLabels: [{
+                type: Input
+            }], doneIcon: [{
+                type: Input
+            }], stepped: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0QsT0FBTyxFQUFFLFNBQVMsRUFBbUIsTUFBTSxrQkFBa0IsQ0FBQztBQUM5RCxPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRXZDLElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFJLGlEQUFpRDtBQVNwRSxNQUFNLE9BQU8sZ0JBQWlCLFNBQVEsU0FBMEI7SUFQaEU7O1FBUVcsZUFBVSxHQUFXLENBQUMsQ0FBQyxDQUFDO1FBQ3hCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFJeEIsWUFBTyxHQUFHLElBQUksWUFBWSxDQUFDO1FBRXJDLFNBQUksR0FBVyxNQUFNLEVBQUUsQ0FBQztRQUV4QixlQUFVLEdBQVksS0FBSyxDQUFDO1FBRTVCLGFBQVEsR0FBRyxFQUFFLENBQUM7S0FrQ2Y7SUFoQ0MsSUFBSTtJQUNKLG9EQUFvRDtJQUNwRCw0Q0FBNEM7SUFDNUMsSUFBSTtJQUVKLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDckIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUM7WUFDM0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxRQUFRLENBQUM7WUFDcEQsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ2hGLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsUUFBUSxDQUFDO1lBRXBELElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUyxDQUFDO1FBQy9DLENBQUM7UUFDRCxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsUUFBUSxHQUFHO1lBQ2Qsb0JBQW9CLEVBQUUsT0FBTyxJQUFJLENBQUMsUUFBUSxHQUFHO1lBQzdDLFlBQVksRUFBRSxPQUFPLElBQUksQ0FBQyxRQUFRLEdBQUc7U0FDdEMsQ0FBQztJQUNKLENBQUM7SUFFRCxNQUFNLENBQUMsTUFBYztRQUNuQixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRSxRQUFRO1lBQUUsT0FBTztRQUN6RCxJQUFJLENBQUMsVUFBVSxHQUFHLE1BQU0sQ0FBQztRQUN6QixJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztZQUNuQyxPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDO1lBQ3hCLEVBQUUsRUFBRSxJQUFJLENBQUMsVUFBVTtTQUNwQixDQUFDLENBQUM7SUFDTCxDQUFDOzhHQTdDVSxnQkFBZ0I7a0dBQWhCLGdCQUFnQiwwT0NkN0IsODJCQWNBLDAwQ0RKWSxLQUFLLG1IQUFFLElBQUk7OzJGQUlWLGdCQUFnQjtrQkFQNUIsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUNQLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQzs4QkFLYixVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZpZWxkVHlwZSwgRmllbGRUeXBlQ29uZmlnIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBOZ0ZvciwgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxubGV0IG5leHRJZCA9IDA7ICAgIC8vIHVzZWQgdG8gZ2l2ZSB1bmlxdWUgaWRzIHRvIGlucHV0cyB1c2VkIGluIGh0bWxcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2Etc3RlcHBlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0ZvciwgTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGVwcGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3N0ZXBwZXIuY29tcG9uZW50LmNzcydcbn0pXG5leHBvcnQgY2xhc3MgU3RlcHBlckNvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZTxGaWVsZFR5cGVDb25maWc+IHtcbiAgQElucHV0KCkgbGF0ZXN0U3RlcDogbnVtYmVyID0gLTE7XG4gIEBJbnB1dCgpIGVkaXRhYmxlOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgc3RlcExhYmVsczogYW55O1xuICBASW5wdXQoKSBkb25lSWNvbjogc3RyaW5nO1xuXG4gIEBPdXRwdXQoKSBzdGVwcGVkID0gbmV3IEV2ZW50RW1pdHRlcjtcblxuICB1dWlkOiBudW1iZXIgPSBuZXh0SWQrKztcblxuICBpc0Rpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgdGlja0ljb24gPSB7fTtcblxuICAvLyB7XG4gIC8vICAgJy13ZWJraXQtbWFzay1pbWFnZSc6IGB1cmwoJHt0aGlzLkltYWdlUGF0aH0pYCxcbiAgLy8gICAnbWFzay1pbWFnZSc6IGB1cmwoJHt0aGlzLkltYWdlUGF0aH0pYCxcbiAgLy8gfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmZpZWxkLnByb3BzKSB7XG4gICAgICB0aGlzLnN0ZXBMYWJlbHMgPSB0aGlzLmZpZWxkLnByb3BzLm9wdGlvbnM7XG4gICAgICB0aGlzLmVkaXRhYmxlID0gdGhpcy5maWVsZC5wcm9wc1sncGFyYW1zJ10uZWRpdGFibGU7XG4gICAgICB0aGlzLmxhdGVzdFN0ZXAgPSB0aGlzLm1vZGVsW2Ake3RoaXMua2V5fWBdID8gdGhpcy5tb2RlbFtgJHt0aGlzLmtleX1gXS5pZCA6IC0xO1xuICAgICAgdGhpcy5kb25lSWNvbiA9IHRoaXMuZmllbGQucHJvcHNbJ3BhcmFtcyddLmRvbmVJY29uO1xuXG4gICAgICB0aGlzLmlzRGlzYWJsZWQgPSB0aGlzLmZpZWxkLnByb3BzLmRpc2FibGVkITtcbiAgICB9XG4gICAgY29uc29sZS5sb2codGhpcy5kb25lSWNvbik7XG4gICAgdGhpcy50aWNrSWNvbiA9IHtcbiAgICAgICctd2Via2l0LW1hc2staW1hZ2UnOiBgdXJsKCR7dGhpcy5kb25lSWNvbn0pYCxcbiAgICAgICdtYXNrLWltYWdlJzogYHVybCgke3RoaXMuZG9uZUljb259KWBcbiAgICB9O1xuICB9XG5cbiAgdXBkYXRlKGNob3NlbjogbnVtYmVyKSB7XG4gICAgaWYgKCF0aGlzLmVkaXRhYmxlIHx8IHRoaXMuZmllbGQucHJvcHM/LmRpc2FibGVkKSByZXR1cm47XG4gICAgdGhpcy5sYXRlc3RTdGVwID0gY2hvc2VuO1xuICAgIGlmICghdGhpcy5mb3JtQ29udHJvbCkge1xuICAgICAgdGhpcy5zdGVwcGVkLmVtaXQodGhpcy5sYXRlc3RTdGVwKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5mb3JtQ29udHJvbC5zZXRWYWx1ZSh7XG4gICAgICBpZDogdGhpcy5sYXRlc3RTdGVwXG4gICAgfSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJzdGVwcGVyIHt7aXNEaXNhYmxlZCA/ICdkaXNhYmxlZCcgOiAnYWN0aXZlJ319XCI+XG4gIDxkaXYgY2xhc3M9XCJzdGVwc1wiICpuZ0Zvcj1cImxldCBsYWJlbCBvZiBzdGVwTGFiZWxzOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgPGlucHV0IGlkPVwic3RlcHBlci17e3V1aWR9fS17e2l9fVwiIChjaGFuZ2UpPVwidXBkYXRlKGkpXCIgbmFtZT1cInN0ZXBwZXItcmFkaW8te3t1dWlkfX1cIlxuICAgICAgW2NoZWNrZWRdPVwiaSA9PSBsYXRlc3RTdGVwID8gdHJ1ZTogZmFsc2VcIiBjbGFzcz1cInN0ZXAtaGlkZVwiIHR5cGU9XCJyYWRpb1wiPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwibGFiZWwtd3JhcHBlciB7e2kgPCBsYXRlc3RTdGVwID8gJ2RvbmUnIDogJyd9fSB7e2kgPiBsYXRlc3RTdGVwID8gJ2RlZmF1bHQnIDogJyd9fSB7e2kgPT0gbGF0ZXN0U3RlcCA/ICdsYXRlc3QnIDogJyd9fVwiPlxuICAgICAgPGxhYmVsIFtzdHlsZV09XCJpIDwgbGF0ZXN0U3RlcCA/IHRpY2tJY29uIDogJydcIiBmb3I9XCJzdGVwcGVyLXt7dXVpZH19LXt7aX19XCJcbiAgICAgICAgY2xhc3M9XCJzdGVwLWxhYmVsLWljb24ge3tpID4gbGF0ZXN0U3RlcCA/ICd1bmRvbmUnIDogJyd9fVwiPlxuICAgICAgPC9sYWJlbD5cbiAgICAgIDxsYWJlbCBmb3I9XCJzdGVwcGVyLXt7dXVpZH19LXt7aX19XCIgY2xhc3M9XCJzdGVwLWxhYmVsLXRleHRcIj57e2xhYmVsLm5hbWV9fTwvbGFiZWw+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cIiBpICE9c3RlcExhYmVscy5sZW5ndGgtMVwiIGNsYXNzPVwibGluZSB7e2kgPCBsYXRlc3RTdGVwID8gJ2RvbmUnIDogJ2RlZmF1bHQnfX1cIj48L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/tabs/tabs.component.mjs

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { NgIf } from '@angular/common';
+import * as i0 from "@angular/core";
+let nextId = 0; // used to give unique ids to inputs used in html
+export class TabsComponent {
+    constructor() {
+        this.tabChanged = new EventEmitter();
+        this.uuid = nextId++;
+        this.svgStyle = [];
+    }
+    ngOnChanges() {
+        this.svgStyle = this.tabs.map((item) => {
+            return {
+                '-webkit-mask-image': `url(${item.tabIcon})`,
+                'mask-image': `url(${item.tabIcon})`,
+            };
+        });
+    }
+    tabChange(evt) {
+        this.tabChanged.emit(evt.target.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n  <div class=\"tabs\">\n    <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n      <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n        id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n      <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n        <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        {{item.tabName}}\n        <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n      </label>\n    </div>\n  </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\n  <div class=\"tabs\">\n    <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n      <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n        id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n      <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n        <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        {{item.tabName}}\n        <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n      </label>\n    </div>\n  </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], defaultTab: [{
+                type: Input
+            }], tabChanged: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3RhYnMvdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3RhYnMvdGFicy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBR3ZDLElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFVLGlEQUFpRDtBQVExRSxNQUFNLE9BQU8sYUFBYTtJQVAxQjtRQVlZLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRzFDLFNBQUksR0FBVyxNQUFNLEVBQUUsQ0FBQztRQUN4QixhQUFRLEdBQVEsRUFBRSxDQUFDO0tBYXBCO0lBWEMsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUNyQyxPQUFPO2dCQUNMLG9CQUFvQixFQUFFLE9BQU8sSUFBSSxDQUFDLE9BQU8sR0FBRztnQkFDNUMsWUFBWSxFQUFFLE9BQU8sSUFBSSxDQUFDLE9BQU8sR0FBRzthQUNyQyxDQUFBO1FBQ0gsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBQ0QsU0FBUyxDQUFDLEdBQVE7UUFDaEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUN4QyxDQUFDOzhHQXJCVSxhQUFhO2tHQUFiLGFBQWEsaU1DZDFCLGkyQkFnQkEsa3dERE5ZLEtBQUssbUhBQUUsSUFBSTs7MkZBSVYsYUFBYTtrQkFQekIsU0FBUzsrQkFDRSxTQUFTLGNBQ1AsSUFBSSxXQUNQLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQzs4QkFLYixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUYWJJbnRlcmZhY2UgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL3RhYi1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgTmdGb3IgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cblxubGV0IG5leHRJZCA9IDA7ICAgICAgICAgIC8vIHVzZWQgdG8gZ2l2ZSB1bmlxdWUgaWRzIHRvIGlucHV0cyB1c2VkIGluIGh0bWxcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLXRhYnMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdGb3IsIE5nSWZdLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFicy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIFRhYnNDb21wb25lbnQge1xuICBASW5wdXQoKSB0YWJzOiBUYWJJbnRlcmZhY2VbXTtcbiAgQElucHV0KCkgdHlwZTogc3RyaW5nO1xuICBASW5wdXQoKSBkZWZhdWx0VGFiOiBudW1iZXI7XG5cbiAgQE91dHB1dCgpIHRhYkNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblxuICB1dWlkOiBudW1iZXIgPSBuZXh0SWQrKztcbiAgc3ZnU3R5bGU6IGFueSA9IFtdO1xuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuc3ZnU3R5bGUgPSB0aGlzLnRhYnMubWFwKChpdGVtKSA9PiB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICAnLXdlYmtpdC1tYXNrLWltYWdlJzogYHVybCgke2l0ZW0udGFiSWNvbn0pYCxcbiAgICAgICAgJ21hc2staW1hZ2UnOiBgdXJsKCR7aXRlbS50YWJJY29ufSlgLFxuICAgICAgfVxuICAgIH0pXG4gIH1cbiAgdGFiQ2hhbmdlKGV2dDogYW55KSB7XG4gICAgdGhpcy50YWJDaGFuZ2VkLmVtaXQoZXZ0LnRhcmdldC52YWx1ZSlcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRhYi13cmFwcGVyIHt7dHlwZX19XCI+XG4gIDxkaXYgY2xhc3M9XCJ0YWJzXCI+XG4gICAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbSBvZiB0YWJzLCBsZXQgaSA9IGluZGV4XCIgY2xhc3M9XCJ0YWItaXRlbVwiPlxuICAgICAgPGlucHV0IFtjaGVja2VkXT1cIihkZWZhdWx0VGFiID09IGkpID8gdHJ1ZSA6IGZhbHNlXCIgW3ZhbHVlXT1cImlcIiAoY2hhbmdlKT1cInRhYkNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgaWQ9XCJ0YWItY2hlY2ste3tpfX0te3t1dWlkfX1cIiBjbGFzcz1cInRhYi1jaGVja3NcIiB0eXBlPVwicmFkaW9cIiBuYW1lPVwidGFiLWNoZWNrYm94LXt7dXVpZH19XCI+XG4gICAgICA8bGFiZWwgZm9yPVwidGFiLWNoZWNrLXt7aX19LXt7dXVpZH19XCIgY2xhc3M9XCJ0YWItbGFiZWxcIj5cbiAgICAgICAgPGRpdiAqbmdJZj1cIml0ZW0uaWNvblBvc2l0aW9uID09ICdsZWZ0JyB8fCBpdGVtLmljb25Qb3NpdGlvbiA9PSAnYm90aCdcIiBjbGFzcz1cInN2Zy1pY29uXCIgW3N0eWxlXT1cInN2Z1N0eWxlW2ldXCI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB7e2l0ZW0udGFiTmFtZX19XG4gICAgICAgIDxkaXYgKm5nSWY9XCJpdGVtLmljb25Qb3NpdGlvbiA9PSAncmlnaHQnIHx8IGl0ZW0uaWNvblBvc2l0aW9uID09ICdib3RoJ1wiIGNsYXNzPVwic3ZnLWljb25cIiBbc3R5bGVdPVwic3ZnU3R5bGVbaV1cIj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJiYWRnZVwiICpuZ0lmPVwiaXRlbS5iYWRnZUNvbnRlbnRcIj57e2l0ZW0uYmFkZ2VDb250ZW50fX08L2Rpdj5cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/lib/toast/toast.component.mjs

@@ -0,0 +1,54 @@
+import { Component, EventEmitter } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+import { Input } from '@angular/core';
+import { Output } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
+import * as i0 from "@angular/core";
+export class ToastComponent {
+    constructor() {
+        this.finishPercentage = -1;
+        this.firstButton = new EventEmitter();
+        this.secondButton = new EventEmitter();
+        this.closed = new EventEmitter();
+    }
+    ngOnChanges() {
+        if (this.finishPercentage > 100)
+            this.finishPercentage = 100;
+    }
+    clicked(num) {
+        if (num == 0)
+            this.firstButton.emit();
+        else if (num == 1)
+            this.secondButton.emit();
+        else if (num == 2)
+            this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName" }, outputs: { firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <img [src]=\"statusIcon\" alt=\"\">\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    <!-- <img class=\"cross\" (click)=\"clicked(2)\" [src]=\"crossmark\" alt=\"\"> -->\n    <mat-icon class=\"cross\" (click)=\"clicked(2)\">close</mat-icon>\n  </div>\n  <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div>\n  <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div>\n</div>\n", styles: [".toast{display:flex;width:max-content;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-16px, 16px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font)}.cross{cursor:pointer}.heading{width:359px;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px;color:var(--text-highemphasis, #1B1D20)}.toast-icon{display:flex;justify-content:center;border-radius:50%}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;color:var(--text-mediumemphasis, #697079)}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:flex-start;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-toast', standalone: true, imports: [ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <img [src]=\"statusIcon\" alt=\"\">\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    <!-- <img class=\"cross\" (click)=\"clicked(2)\" [src]=\"crossmark\" alt=\"\"> -->\n    <mat-icon class=\"cross\" (click)=\"clicked(2)\">close</mat-icon>\n  </div>\n  <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div>\n  <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div>\n</div>\n", styles: [".toast{display:flex;width:max-content;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-16px, 16px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font)}.cross{cursor:pointer}.heading{width:359px;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px;color:var(--text-highemphasis, #1B1D20)}.toast-icon{display:flex;justify-content:center;border-radius:50%}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;color:var(--text-mediumemphasis, #697079)}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:flex-start;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}\n"] }]
+        }], propDecorators: { finishPercentage: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], subHeading: [{
+                type: Input
+            }], statusIcon: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], firstButtonName: [{
+                type: Input
+            }], secondButtonName: [{
+                type: Input
+            }], firstButton: [{
+                type: Output
+            }], secondButton: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi90b2FzdC90b2FzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3RvYXN0L3RvYXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ25FLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2pELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFTdkMsTUFBTSxPQUFPLGNBQWM7SUFQM0I7UUFRVyxxQkFBZ0IsR0FBVyxDQUFDLENBQUMsQ0FBQztRQVE3QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDakMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2xDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBV3ZDO0lBVEMsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLGdCQUFnQixHQUFHLEdBQUc7WUFBRSxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsR0FBRyxDQUFDO0lBQy9ELENBQUM7SUFFRCxPQUFPLENBQUMsR0FBVztRQUNqQixJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQzthQUNqQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsQ0FBQzthQUN2QyxJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN4QyxDQUFDOzhHQXJCVSxjQUFjO2tHQUFkLGNBQWMsd1lDZDNCLDZrQ0F5QkEsaXNERGZZLGVBQWUsc09BQUUsT0FBTywySUFBRSxJQUFJOzsyRkFJN0IsY0FBYztrQkFQMUIsU0FBUzsrQkFDRSxVQUFVLGNBQ1IsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLE9BQU8sRUFBRSxJQUFJLENBQUM7OEJBS2hDLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0SWNvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLXRvYXN0JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0J1dHRvbkNvbXBvbmVudCwgTWF0SWNvbiwgTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi90b2FzdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90b2FzdC5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBUb2FzdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGZpbmlzaFBlcmNlbnRhZ2U6IG51bWJlciA9IC0xO1xuICBASW5wdXQoKSBoZWFkaW5nOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN1YkhlYWRpbmc6IHN0cmluZztcbiAgQElucHV0KCkgc3RhdHVzSWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBzdGF0dXM6IHN0cmluZztcbiAgQElucHV0KCkgZmlyc3RCdXR0b25OYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNlY29uZEJ1dHRvbk5hbWU6IHN0cmluZztcblxuICBAT3V0cHV0KCkgZmlyc3RCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBzZWNvbmRCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgaWYgKHRoaXMuZmluaXNoUGVyY2VudGFnZSA+IDEwMCkgdGhpcy5maW5pc2hQZXJjZW50YWdlID0gMTAwO1xuICB9XG5cbiAgY2xpY2tlZChudW06IG51bWJlcikge1xuICAgIGlmIChudW0gPT0gMCkgdGhpcy5maXJzdEJ1dHRvbi5lbWl0KCk7XG4gICAgZWxzZSBpZiAobnVtID09IDEpIHRoaXMuc2Vjb25kQnV0dG9uLmVtaXQoKTtcbiAgICBlbHNlIGlmIChudW0gPT0gMikgdGhpcy5jbG9zZWQuZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidG9hc3RcIj5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwidG9hc3QtaWNvbiB7e3N0YXR1c319XCI+XG4gICAgICA8aW1nIFtzcmNdPVwic3RhdHVzSWNvblwiIGFsdD1cIlwiPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkLXN1YmhlYWRcIj5cbiAgICAgIDxwIGNsYXNzPVwiaGVhZGluZ1wiPnt7aGVhZGluZ319PC9wPlxuICAgICAgPHAgY2xhc3M9XCJzdWJoZWFkaW5nXCI+e3tzdWJIZWFkaW5nfX08L3A+XG4gICAgPC9kaXY+XG4gICAgPCEtLSA8aW1nIGNsYXNzPVwiY3Jvc3NcIiAoY2xpY2spPVwiY2xpY2tlZCgyKVwiIFtzcmNdPVwiY3Jvc3NtYXJrXCIgYWx0PVwiXCI+IC0tPlxuICAgIDxtYXQtaWNvbiBjbGFzcz1cImNyb3NzXCIgKGNsaWNrKT1cImNsaWNrZWQoMilcIj5jbG9zZTwvbWF0LWljb24+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY29udHJvbHNcIj5cbiAgICA8c2EtYnV0dG9uICpuZ0lmPVwiZmlyc3RCdXR0b25OYW1lXCIgKG9uQ2xpY2tFdmVudCk9XCJjbGlja2VkKDApXCIgW3RleHRdPVwiZmlyc3RCdXR0b25OYW1lXCIgdHlwZT1cInRyYW5zcGFyZW50XCJcbiAgICAgIHNpemU9XCJtZWRpdW1cIiBzdGF0ZT1cImRlZmF1bHRcIj5cbiAgICA8L3NhLWJ1dHRvbj5cbiAgICA8c2EtYnV0dG9uICpuZ0lmPVwic2Vjb25kQnV0dG9uTmFtZVwiIChvbkNsaWNrRXZlbnQpPVwiY2xpY2tlZCgxKVwiIFt0ZXh0XT1cInNlY29uZEJ1dHRvbk5hbWVcIiB0eXBlPVwib3V0bGluZVwiXG4gICAgICBzaXplPVwibWVkaXVtXCIgc3RhdGU9XCJkZWZhdWx0XCI+XG4gICAgPC9zYS1idXR0b24+XG4gIDwvZGl2PlxuICA8ZGl2ICpuZ0lmPVwiZmluaXNoUGVyY2VudGFnZSA+PSAwXCIgY2xhc3M9XCJwcm9ncmVzcy1iYXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtZG9uZVwiIFtzdHlsZS53aWR0aF09XCJmaW5pc2hQZXJjZW50YWdlKyclJ1wiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1sZWZ0XCIgW3N0eWxlLndpZHRoXT1cIjEwMC1maW5pc2hQZXJjZW50YWdlKyclJ1wiPjwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19