@dropi/ui-components 1.0.12 → 1.0.13

package/dist/esm2022/components-source/date-picker-range/date-picker-range.component.mjs

@@ -0,0 +1,67 @@
+import { Component, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA, } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@ngx-translate/core";
+export class DatePickerRangeComponent {
+    setRight = false;
+    loading = false;
+    showLabel = true;
+    placeholder = "";
+    appendTo = "body";
+    maxDate;
+    minDate;
+    dateRange = [];
+    CalendarTypeView = null;
+    ranges = [
+        { label: "today", value: [new Date(), new Date()] },
+        { label: "last 7 days", value: [new Date(), new Date()] },
+    ];
+    activeRangeIndex = null;
+    viewRangeWarning = false;
+    calendar; // Para el template variable
+    startDateChange = new EventEmitter();
+    endDateChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    onSelect(event) {
+        if (this.dateRange && this.dateRange.length === 2) {
+            this.startDateChange.emit(this.dateRange[0]);
+            this.endDateChange.emit(this.dateRange[1]);
+        }
+    }
+    checkCalendarView(calendar) { }
+    selectRange(range, index) {
+        this.dateRange = range.value;
+        this.activeRangeIndex = index;
+        this.onSelect(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerRangeComponent, isStandalone: true, selector: "app-date-picker-range", inputs: { setRight: "setRight", loading: "loading", showLabel: "showLabel", placeholder: "placeholder", appendTo: "appendTo", maxDate: "maxDate", minDate: "minDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"setRight ? '' : 'calendar-left'\"\n  class=\"date-picker-range\"\n  *ngIf=\"!loading\"\n>\n  <div *ngIf=\"showLabel\" class=\"label\">{{ \"date range\" | translate }}</div>\n  <p-calendar\n    #calendarInputRef\n    class=\"date-picker-input\"\n    [panelStyleClass]=\"\n      setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'\n    \"\n    [ngClass]=\"{ 'date-picker-input--open': loading }\"\n    [(ngModel)]=\"dateRange\"\n    selectionMode=\"range\"\n    [readonlyInput]=\"true\"\n    dateFormat=\"dd/mm/yy\"\n    [style]=\"{ width: '100%' }\"\n    inputId=\"date-range\"\n    (onSelect)=\"onSelect($event)\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [placeholder]=\"placeholder\"\n    ([CalendarTypeView])=\"(CalendarTypeView)\"\n    showOtherMonths=\"false\"\n    responsiveOptions=\"true\"\n    [disabled]=\"loading\"\n    (onClick)=\"checkCalendarView(calendar)\"\n    [appendTo]=\"appendTo\"\n  >\n    <ng-template *ngIf=\"CalendarTypeView === null\" pTemplate=\"header\">\n      <div class=\"custom-header\">\n        <button\n          *ngFor=\"let range of ranges; let i = index\"\n          (click)=\"selectRange(range, i)\"\n          class=\"p-button-text\"\n          [ngClass]=\"{ active: i === activeRangeIndex }\"\n        >\n          {{ range.label | translate }}\n        </button>\n        <div *ngIf=\"viewRangeWarning\" class=\"warning-box\">\n          <span class=\"warning-message\"\n            >Solo puedes filtrar en un rango m\u00E1ximo de 90 d\u00EDas.</span\n          >\n        </div>\n      </div>\n    </ng-template>\n  </p-calendar>\n</div>\n\n<div class=\"loading\" *ngIf=\"loading\">\n  <div class=\"skeleton dp\"></div>\n</div>\n", styles: [":host ::ng-deep .calendar-left ::ng-deep .p-datepicker{right:0!important}:host ::ng-deep .date-picker-range{width:100%;max-width:300px}:host ::ng-deep h3{margin-bottom:.5rem;font-size:1rem;font-weight:500}:host ::ng-deep .label{font-family:Inter;font-size:11px;font-weight:500;line-height:16px;text-align:left;color:#7b8190;margin-bottom:8px}:host ::ng-deep .p-calendar{width:100%}:host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-datepicker table td>span.p-highlight{color:#f49a3d;background:#fef5ec}:host ::ng-deep .p-datepicker table td.p-datepicker-today>span{background:#fff;font-weight:600;color:#f49a3d;border:1px solid rgba(244,154,61,.2705882353)}:host ::ng-deep .custom-header{display:flex;flex-direction:column;border-left:1px solid #dde5eb;padding:10px}@media screen and (max-width: 480px){:host ::ng-deep .custom-header{flex-direction:row;gap:0 10px;border-left:none;flex-wrap:wrap;padding:10px 0 0;margin-bottom:-14px}}:host ::ng-deep .custom-header .p-button{margin-bottom:.5rem;justify-content:flex-start;color:#1f2937;padding:4px 6px}:host ::ng-deep .custom-header .p-button span.p-button-label{font-family:Inter;font-size:13px;font-weight:400;line-height:14px;text-align:left;min-width:max-content}:host ::ng-deep .custom-header .active{background:#f5f6f8;border-radius:5px}:host ::ng-deep .custom-header .active span{font-weight:600!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)){display:flex!important;flex-direction:column!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)) .custom-header{display:none}:host ::ng-deep .p-datepicker{min-width:320px;display:flex;flex-direction:row-reverse;left:unset!important;padding:8px 16px!important;gap:10px}@media screen and (max-width: 480px){:host ::ng-deep .p-datepicker{width:100%;flex-direction:column;padding:0;left:0!important;right:unset!important}}:host ::ng-deep .p-datepicker-header{padding:.5rem}:host ::ng-deep .p-datepicker-calendar th{font-weight:600}:host ::ng-deep .date-picker-input--open .p-datepicker{display:none!important}:host ::ng-deep input#date-range{width:100%;border-radius:8px!important;border:1px solid var(--Light-Light-3, #d3d7da);background:var(--Light-Light-2, #ffffff);height:40px;color:var(--Dark-Dark-2, #74788d);text-overflow:ellipsis;font-size:13px;display:flex;align-items:center}:host ::ng-deep .p-datepicker table td{padding:2px!important;font-size:14px!important}:host ::ng-deep .p-datepicker table td>span{width:34px;height:34px}:host ::ng-deep .p-datepicker-calendar th{font-size:13px!important}:host ::ng-deep .p-datepicker-header{padding:0!important}:host ::ng-deep .p-icon-wrapper{width:12px!important;color:#a0a8b8}:host ::ng-deep span.p-disabled{color:#9fb4c3;font-weight:200}:host ::ng-deep .p-datepicker-title{font-size:14px!important}:host ::ng-deep .p-datepicker-title button{font-weight:400!important}:host ::ng-deep .dp{height:40px;width:100%;min-width:180px;margin-top:18px}:host ::ng-deep .warning-box{width:100%;margin:0;padding:4px 8px;gap:4px;border-radius:4px;border:1px 0px 0px 0px;border:1px solid #f4c370;background:#fef8ed;display:flex;flex-direction:row;align-items:center}:host ::ng-deep .warning-box .warning-message{color:#495057;font-family:Inter;font-size:10px;font-weight:400;line-height:16px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@keyframes placeHolderShimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#f5f6f8 8%,#e3e7efbf 28%,#f5f6f8 77%);background-size:800px 104px;position:relative;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-date-picker-range", standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div\n  [ngClass]=\"setRight ? '' : 'calendar-left'\"\n  class=\"date-picker-range\"\n  *ngIf=\"!loading\"\n>\n  <div *ngIf=\"showLabel\" class=\"label\">{{ \"date range\" | translate }}</div>\n  <p-calendar\n    #calendarInputRef\n    class=\"date-picker-input\"\n    [panelStyleClass]=\"\n      setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'\n    \"\n    [ngClass]=\"{ 'date-picker-input--open': loading }\"\n    [(ngModel)]=\"dateRange\"\n    selectionMode=\"range\"\n    [readonlyInput]=\"true\"\n    dateFormat=\"dd/mm/yy\"\n    [style]=\"{ width: '100%' }\"\n    inputId=\"date-range\"\n    (onSelect)=\"onSelect($event)\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [placeholder]=\"placeholder\"\n    ([CalendarTypeView])=\"(CalendarTypeView)\"\n    showOtherMonths=\"false\"\n    responsiveOptions=\"true\"\n    [disabled]=\"loading\"\n    (onClick)=\"checkCalendarView(calendar)\"\n    [appendTo]=\"appendTo\"\n  >\n    <ng-template *ngIf=\"CalendarTypeView === null\" pTemplate=\"header\">\n      <div class=\"custom-header\">\n        <button\n          *ngFor=\"let range of ranges; let i = index\"\n          (click)=\"selectRange(range, i)\"\n          class=\"p-button-text\"\n          [ngClass]=\"{ active: i === activeRangeIndex }\"\n        >\n          {{ range.label | translate }}\n        </button>\n        <div *ngIf=\"viewRangeWarning\" class=\"warning-box\">\n          <span class=\"warning-message\"\n            >Solo puedes filtrar en un rango m\u00E1ximo de 90 d\u00EDas.</span\n          >\n        </div>\n      </div>\n    </ng-template>\n  </p-calendar>\n</div>\n\n<div class=\"loading\" *ngIf=\"loading\">\n  <div class=\"skeleton dp\"></div>\n</div>\n", styles: [":host ::ng-deep .calendar-left ::ng-deep .p-datepicker{right:0!important}:host ::ng-deep .date-picker-range{width:100%;max-width:300px}:host ::ng-deep h3{margin-bottom:.5rem;font-size:1rem;font-weight:500}:host ::ng-deep .label{font-family:Inter;font-size:11px;font-weight:500;line-height:16px;text-align:left;color:#7b8190;margin-bottom:8px}:host ::ng-deep .p-calendar{width:100%}:host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-datepicker table td>span.p-highlight{color:#f49a3d;background:#fef5ec}:host ::ng-deep .p-datepicker table td.p-datepicker-today>span{background:#fff;font-weight:600;color:#f49a3d;border:1px solid rgba(244,154,61,.2705882353)}:host ::ng-deep .custom-header{display:flex;flex-direction:column;border-left:1px solid #dde5eb;padding:10px}@media screen and (max-width: 480px){:host ::ng-deep .custom-header{flex-direction:row;gap:0 10px;border-left:none;flex-wrap:wrap;padding:10px 0 0;margin-bottom:-14px}}:host ::ng-deep .custom-header .p-button{margin-bottom:.5rem;justify-content:flex-start;color:#1f2937;padding:4px 6px}:host ::ng-deep .custom-header .p-button span.p-button-label{font-family:Inter;font-size:13px;font-weight:400;line-height:14px;text-align:left;min-width:max-content}:host ::ng-deep .custom-header .active{background:#f5f6f8;border-radius:5px}:host ::ng-deep .custom-header .active span{font-weight:600!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)){display:flex!important;flex-direction:column!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)) .custom-header{display:none}:host ::ng-deep .p-datepicker{min-width:320px;display:flex;flex-direction:row-reverse;left:unset!important;padding:8px 16px!important;gap:10px}@media screen and (max-width: 480px){:host ::ng-deep .p-datepicker{width:100%;flex-direction:column;padding:0;left:0!important;right:unset!important}}:host ::ng-deep .p-datepicker-header{padding:.5rem}:host ::ng-deep .p-datepicker-calendar th{font-weight:600}:host ::ng-deep .date-picker-input--open .p-datepicker{display:none!important}:host ::ng-deep input#date-range{width:100%;border-radius:8px!important;border:1px solid var(--Light-Light-3, #d3d7da);background:var(--Light-Light-2, #ffffff);height:40px;color:var(--Dark-Dark-2, #74788d);text-overflow:ellipsis;font-size:13px;display:flex;align-items:center}:host ::ng-deep .p-datepicker table td{padding:2px!important;font-size:14px!important}:host ::ng-deep .p-datepicker table td>span{width:34px;height:34px}:host ::ng-deep .p-datepicker-calendar th{font-size:13px!important}:host ::ng-deep .p-datepicker-header{padding:0!important}:host ::ng-deep .p-icon-wrapper{width:12px!important;color:#a0a8b8}:host ::ng-deep span.p-disabled{color:#9fb4c3;font-weight:200}:host ::ng-deep .p-datepicker-title{font-size:14px!important}:host ::ng-deep .p-datepicker-title button{font-weight:400!important}:host ::ng-deep .dp{height:40px;width:100%;min-width:180px;margin-top:18px}:host ::ng-deep .warning-box{width:100%;margin:0;padding:4px 8px;gap:4px;border-radius:4px;border:1px 0px 0px 0px;border:1px solid #f4c370;background:#fef8ed;display:flex;flex-direction:row;align-items:center}:host ::ng-deep .warning-box .warning-message{color:#495057;font-family:Inter;font-size:10px;font-weight:400;line-height:16px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@keyframes placeHolderShimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#f5f6f8 8%,#e3e7efbf 28%,#f5f6f8 77%);background-size:800px 104px;position:relative;border-radius:6px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { setRight: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], startDateChange: [{
+                type: Output
+            }], endDateChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXItcmFuZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMtc291cmNlL2RhdGUtcGlja2VyLXJhbmdlL2RhdGUtcGlja2VyLXJhbmdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kYXRlLXBpY2tlci1yYW5nZS9kYXRlLXBpY2tlci1yYW5nZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUVaLHNCQUFzQixHQUN2QixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7Ozs7QUFVdEQsTUFBTSxPQUFPLHdCQUF3QjtJQUNuQixRQUFRLEdBQVksS0FBSyxDQUFDO0lBQzFCLE9BQU8sR0FBWSxLQUFLLENBQUM7SUFDekIsU0FBUyxHQUFZLElBQUksQ0FBQztJQUMxQixXQUFXLEdBQVcsRUFBRSxDQUFDO0lBQ3pCLFFBQVEsR0FBVyxNQUFNLENBQUM7SUFDMUIsT0FBTyxDQUFNO0lBQ2IsT0FBTyxDQUFNO0lBRXRCLFNBQVMsR0FBVSxFQUFFLENBQUM7SUFDdEIsZ0JBQWdCLEdBQWtCLElBQUksQ0FBQztJQUN2QyxNQUFNLEdBQVU7UUFDckIsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxDQUFDLElBQUksSUFBSSxFQUFFLEVBQUUsSUFBSSxJQUFJLEVBQUUsQ0FBQyxFQUFFO1FBQ25ELEVBQUUsS0FBSyxFQUFFLGFBQWEsRUFBRSxLQUFLLEVBQUUsQ0FBQyxJQUFJLElBQUksRUFBRSxFQUFFLElBQUksSUFBSSxFQUFFLENBQUMsRUFBRTtLQUMxRCxDQUFDO0lBQ0ssZ0JBQWdCLEdBQWtCLElBQUksQ0FBQztJQUN2QyxnQkFBZ0IsR0FBWSxLQUFLLENBQUM7SUFDbEMsUUFBUSxDQUFNLENBQUMsNEJBQTRCO0lBRWpDLGVBQWUsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQzFDLGFBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBRXpELGdCQUFlLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixRQUFRLENBQUMsS0FBVTtRQUN4QixJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDbEQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzdDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM3QyxDQUFDO0lBQ0gsQ0FBQztJQUVNLGlCQUFpQixDQUFDLFFBQWEsSUFBUyxDQUFDO0lBRXpDLFdBQVcsQ0FBQyxLQUFVLEVBQUUsS0FBYTtRQUMxQyxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUM7UUFDN0IsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEtBQUssQ0FBQztRQUM5QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3RCLENBQUM7d0dBdkNVLHdCQUF3Qjs0RkFBeEIsd0JBQXdCLDBVQ3BCckMsc3NEQXFEQSwrdUhEdENZLFlBQVksNlZBQUUsV0FBVyw4VkFBRSxtQkFBbUIsOEJBQUUsZUFBZTs7NEZBSzlELHdCQUF3QjtrQkFScEMsU0FBUzsrQkFDRSx1QkFBdUIsY0FDckIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxlQUFlLENBQUMsV0FDakUsQ0FBQyxzQkFBc0IsQ0FBQzt3REFLakIsUUFBUTtzQkFBdkIsS0FBSztnQkFDVSxPQUFPO3NCQUF0QixLQUFLO2dCQUNVLFNBQVM7c0JBQXhCLEtBQUs7Z0JBQ1UsV0FBVztzQkFBMUIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLO2dCQUNVLE9BQU87c0JBQXRCLEtBQUs7Z0JBQ1UsT0FBTztzQkFBdEIsS0FBSztnQkFZVyxlQUFlO3NCQUEvQixNQUFNO2dCQUNVLGFBQWE7c0JBQTdCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgT25Jbml0LFxuICBDVVNUT01fRUxFTUVOVFNfU0NIRU1BLFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gXCJAbmd4LXRyYW5zbGF0ZS9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhcHAtZGF0ZS1waWNrZXItcmFuZ2VcIixcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUsIFRyYW5zbGF0ZU1vZHVsZV0sXG4gIHNjaGVtYXM6IFtDVVNUT01fRUxFTUVOVFNfU0NIRU1BXSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9kYXRlLXBpY2tlci1yYW5nZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vZGF0ZS1waWNrZXItcmFuZ2UuY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIERhdGVQaWNrZXJSYW5nZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHB1YmxpYyBzZXRSaWdodDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBwdWJsaWMgbG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBwdWJsaWMgc2hvd0xhYmVsOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgcHVibGljIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSBcIlwiO1xuICBASW5wdXQoKSBwdWJsaWMgYXBwZW5kVG86IHN0cmluZyA9IFwiYm9keVwiO1xuICBASW5wdXQoKSBwdWJsaWMgbWF4RGF0ZTogYW55O1xuICBASW5wdXQoKSBwdWJsaWMgbWluRGF0ZTogYW55O1xuXG4gIHB1YmxpYyBkYXRlUmFuZ2U6IGFueVtdID0gW107XG4gIHB1YmxpYyBDYWxlbmRhclR5cGVWaWV3OiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgcHVibGljIHJhbmdlczogYW55W10gPSBbXG4gICAgeyBsYWJlbDogXCJ0b2RheVwiLCB2YWx1ZTogW25ldyBEYXRlKCksIG5ldyBEYXRlKCldIH0sXG4gICAgeyBsYWJlbDogXCJsYXN0IDcgZGF5c1wiLCB2YWx1ZTogW25ldyBEYXRlKCksIG5ldyBEYXRlKCldIH0sXG4gIF07XG4gIHB1YmxpYyBhY3RpdmVSYW5nZUluZGV4OiBudW1iZXIgfCBudWxsID0gbnVsbDtcbiAgcHVibGljIHZpZXdSYW5nZVdhcm5pbmc6IGJvb2xlYW4gPSBmYWxzZTtcbiAgcHVibGljIGNhbGVuZGFyOiBhbnk7IC8vIFBhcmEgZWwgdGVtcGxhdGUgdmFyaWFibGVcblxuICBAT3V0cHV0KCkgcHVibGljIHN0YXJ0RGF0ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgcHVibGljIGVuZERhdGVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gIHB1YmxpYyBvblNlbGVjdChldmVudDogYW55KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGF0ZVJhbmdlICYmIHRoaXMuZGF0ZVJhbmdlLmxlbmd0aCA9PT0gMikge1xuICAgICAgdGhpcy5zdGFydERhdGVDaGFuZ2UuZW1pdCh0aGlzLmRhdGVSYW5nZVswXSk7XG4gICAgICB0aGlzLmVuZERhdGVDaGFuZ2UuZW1pdCh0aGlzLmRhdGVSYW5nZVsxXSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIGNoZWNrQ2FsZW5kYXJWaWV3KGNhbGVuZGFyOiBhbnkpOiB2b2lkIHt9XG5cbiAgcHVibGljIHNlbGVjdFJhbmdlKHJhbmdlOiBhbnksIGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLmRhdGVSYW5nZSA9IHJhbmdlLnZhbHVlO1xuICAgIHRoaXMuYWN0aXZlUmFuZ2VJbmRleCA9IGluZGV4O1xuICAgIHRoaXMub25TZWxlY3QobnVsbCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgW25nQ2xhc3NdPVwic2V0UmlnaHQgPyAnJyA6ICdjYWxlbmRhci1sZWZ0J1wiXG4gIGNsYXNzPVwiZGF0ZS1waWNrZXItcmFuZ2VcIlxuICAqbmdJZj1cIiFsb2FkaW5nXCJcbj5cbiAgPGRpdiAqbmdJZj1cInNob3dMYWJlbFwiIGNsYXNzPVwibGFiZWxcIj57eyBcImRhdGUgcmFuZ2VcIiB8IHRyYW5zbGF0ZSB9fTwvZGl2PlxuICA8cC1jYWxlbmRhclxuICAgICNjYWxlbmRhcklucHV0UmVmXG4gICAgY2xhc3M9XCJkYXRlLXBpY2tlci1pbnB1dFwiXG4gICAgW3BhbmVsU3R5bGVDbGFzc109XCJcbiAgICAgIHNldFJpZ2h0ID8gJ2Ryb3BpLWN1c3RvbS1jYWxlbmRhcicgOiAnZHJvcGktY3VzdG9tLWNhbGVuZGFyIGNhbGVuZGFyLWxlZnQnXG4gICAgXCJcbiAgICBbbmdDbGFzc109XCJ7ICdkYXRlLXBpY2tlci1pbnB1dC0tb3Blbic6IGxvYWRpbmcgfVwiXG4gICAgWyhuZ01vZGVsKV09XCJkYXRlUmFuZ2VcIlxuICAgIHNlbGVjdGlvbk1vZGU9XCJyYW5nZVwiXG4gICAgW3JlYWRvbmx5SW5wdXRdPVwidHJ1ZVwiXG4gICAgZGF0ZUZvcm1hdD1cImRkL21tL3l5XCJcbiAgICBbc3R5bGVdPVwieyB3aWR0aDogJzEwMCUnIH1cIlxuICAgIGlucHV0SWQ9XCJkYXRlLXJhbmdlXCJcbiAgICAob25TZWxlY3QpPVwib25TZWxlY3QoJGV2ZW50KVwiXG4gICAgW21heERhdGVdPVwibWF4RGF0ZVwiXG4gICAgW21pbkRhdGVdPVwibWluRGF0ZVwiXG4gICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcbiAgICAoW0NhbGVuZGFyVHlwZVZpZXddKT1cIihDYWxlbmRhclR5cGVWaWV3KVwiXG4gICAgc2hvd090aGVyTW9udGhzPVwiZmFsc2VcIlxuICAgIHJlc3BvbnNpdmVPcHRpb25zPVwidHJ1ZVwiXG4gICAgW2Rpc2FibGVkXT1cImxvYWRpbmdcIlxuICAgIChvbkNsaWNrKT1cImNoZWNrQ2FsZW5kYXJWaWV3KGNhbGVuZGFyKVwiXG4gICAgW2FwcGVuZFRvXT1cImFwcGVuZFRvXCJcbiAgPlxuICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cIkNhbGVuZGFyVHlwZVZpZXcgPT09IG51bGxcIiBwVGVtcGxhdGU9XCJoZWFkZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjdXN0b20taGVhZGVyXCI+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAqbmdGb3I9XCJsZXQgcmFuZ2Ugb2YgcmFuZ2VzOyBsZXQgaSA9IGluZGV4XCJcbiAgICAgICAgICAoY2xpY2spPVwic2VsZWN0UmFuZ2UocmFuZ2UsIGkpXCJcbiAgICAgICAgICBjbGFzcz1cInAtYnV0dG9uLXRleHRcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cInsgYWN0aXZlOiBpID09PSBhY3RpdmVSYW5nZUluZGV4IH1cIlxuICAgICAgICA+XG4gICAgICAgICAge3sgcmFuZ2UubGFiZWwgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJ2aWV3UmFuZ2VXYXJuaW5nXCIgY2xhc3M9XCJ3YXJuaW5nLWJveFwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwid2FybmluZy1tZXNzYWdlXCJcbiAgICAgICAgICAgID5Tb2xvIHB1ZWRlcyBmaWx0cmFyIGVuIHVuIHJhbmdvIG3DoXhpbW8gZGUgOTAgZMOtYXMuPC9zcGFuXG4gICAgICAgICAgPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIDwvcC1jYWxlbmRhcj5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwibG9hZGluZ1wiICpuZ0lmPVwibG9hZGluZ1wiPlxuICA8ZGl2IGNsYXNzPVwic2tlbGV0b24gZHBcIj48L2Rpdj5cbjwvZGl2PlxuIl19

package/dist/esm2022/components-source/dropi-avatars/dropi-avatars.component.mjs

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class DropiAvatarsComponent {
+    _initials = '?';
+    image;
+    alt = 'Avatar';
+    type = 'users';
+    set initials(value) {
+        this._initials = (value || '?').substring(0, 2).toUpperCase();
+    }
+    get initials() {
+        return this._initials;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiAvatarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiAvatarsComponent, isStandalone: true, selector: "dropi-avatars", inputs: { image: "image", alt: "alt", type: "type", initials: "initials" }, ngImport: i0, template: "<figure class=\"dropi-avatars\">\n  <ng-container *ngIf=\"image; else onlyInitials\">\n    <img\n      [src]=\"image\"\n      [alt]=\"alt\"\n      [ngClass]=\"[type]\"\n      class=\"dropi-avatar\"\n      (error)=\"image = 'assets/images/delivery/default.svg'\"\n    />\n  </ng-container>\n\n  <ng-template #onlyInitials>\n    <div class=\"dropi-avatar__initials fallback\" [ngClass]=\"[type]\">\n      <span>{{ initials }}</span>\n    </div>\n  </ng-template>\n</figure>\n", styles: [".dropi-avatars{display:flex;flex-wrap:wrap;margin:0}.dropi-avatar{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:sans-serif;object-fit:cover;background-color:#e0e0e0;color:#333;border-radius:50%}.dropi-avatar.users{width:35px;height:35px}.dropi-avatar.transport{width:33px;height:33px}.dropi-avatar.supplier{width:70px;height:70px}.dropi-avatar.payment{width:33px;height:33px}.dropi-avatar__initials{display:flex;width:35px;height:35px;justify-content:center;align-items:center;border-radius:50%;background-color:var(--Primary-Primary-500)}.dropi-avatar__initials span{color:var(--Neutral-White);font-family:Montserrat,sans-serif;font-size:var(--font-size-m);font-style:normal;font-weight:var(--font-weight-bold);line-height:var(--lineheight-large)}.dropi-avatar__initials.counter{background:var(--Gray-Gray-50, #f7f8fa)}.dropi-avatar__initials.counter span{color:var(--Gray-Gray-400);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiAvatarsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dropi-avatars', standalone: true, imports: [CommonModule], template: "<figure class=\"dropi-avatars\">\n  <ng-container *ngIf=\"image; else onlyInitials\">\n    <img\n      [src]=\"image\"\n      [alt]=\"alt\"\n      [ngClass]=\"[type]\"\n      class=\"dropi-avatar\"\n      (error)=\"image = 'assets/images/delivery/default.svg'\"\n    />\n  </ng-container>\n\n  <ng-template #onlyInitials>\n    <div class=\"dropi-avatar__initials fallback\" [ngClass]=\"[type]\">\n      <span>{{ initials }}</span>\n    </div>\n  </ng-template>\n</figure>\n", styles: [".dropi-avatars{display:flex;flex-wrap:wrap;margin:0}.dropi-avatar{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:sans-serif;object-fit:cover;background-color:#e0e0e0;color:#333;border-radius:50%}.dropi-avatar.users{width:35px;height:35px}.dropi-avatar.transport{width:33px;height:33px}.dropi-avatar.supplier{width:70px;height:70px}.dropi-avatar.payment{width:33px;height:33px}.dropi-avatar__initials{display:flex;width:35px;height:35px;justify-content:center;align-items:center;border-radius:50%;background-color:var(--Primary-Primary-500)}.dropi-avatar__initials span{color:var(--Neutral-White);font-family:Montserrat,sans-serif;font-size:var(--font-size-m);font-style:normal;font-weight:var(--font-weight-bold);line-height:var(--lineheight-large)}.dropi-avatar__initials.counter{background:var(--Gray-Gray-50, #f7f8fa)}.dropi-avatar__initials.counter span{color:var(--Gray-Gray-400);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}\n"] }]
+        }], propDecorators: { image: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], initials: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktYXZhdGFycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvZHJvcGktYXZhdGFycy9kcm9waS1hdmF0YXJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1hdmF0YXJzL2Ryb3BpLWF2YXRhcnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFTL0MsTUFBTSxPQUFPLHFCQUFxQjtJQUN4QixTQUFTLEdBQVcsR0FBRyxDQUFDO0lBRXZCLEtBQUssQ0FBVTtJQUNmLEdBQUcsR0FBVyxRQUFRLENBQUM7SUFDdkIsSUFBSSxHQUErRCxPQUFPLENBQUM7SUFFcEYsSUFBYSxRQUFRLENBQUMsS0FBeUI7UUFDN0MsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLEtBQUssSUFBSSxHQUFHLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ2hFLENBQUM7SUFDRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDeEIsQ0FBQzt3R0FaVSxxQkFBcUI7NEZBQXJCLHFCQUFxQixxSkNWbEMsMmRBaUJBLGlrQ0RYWSxZQUFZOzs0RkFJWCxxQkFBcUI7a0JBUGpDLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFPZCxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFFTyxRQUFRO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZHJvcGktYXZhdGFycycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJvcGktYXZhdGFycy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Ryb3BpLWF2YXRhcnMuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGlBdmF0YXJzQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBfaW5pdGlhbHM6IHN0cmluZyA9ICc/JztcblxuICBASW5wdXQoKSBpbWFnZT86IHN0cmluZztcbiAgQElucHV0KCkgYWx0OiBzdHJpbmcgPSAnQXZhdGFyJztcbiAgQElucHV0KCkgdHlwZTogJ3VzZXJzJyB8ICd0cmFuc3BvcnQnIHwgJ3N1cHBsaWVyJyB8ICdwYXltZW50JyB8ICdjb3VudGVyJyA9ICd1c2Vycyc7XG5cbiAgQElucHV0KCkgc2V0IGluaXRpYWxzKHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLl9pbml0aWFscyA9ICh2YWx1ZSB8fCAnPycpLnN1YnN0cmluZygwLCAyKS50b1VwcGVyQ2FzZSgpO1xuICB9XG4gIGdldCBpbml0aWFscygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9pbml0aWFscztcbiAgfVxufVxuIiwiPGZpZ3VyZSBjbGFzcz1cImRyb3BpLWF2YXRhcnNcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImltYWdlOyBlbHNlIG9ubHlJbml0aWFsc1wiPlxuICAgIDxpbWdcbiAgICAgIFtzcmNdPVwiaW1hZ2VcIlxuICAgICAgW2FsdF09XCJhbHRcIlxuICAgICAgW25nQ2xhc3NdPVwiW3R5cGVdXCJcbiAgICAgIGNsYXNzPVwiZHJvcGktYXZhdGFyXCJcbiAgICAgIChlcnJvcik9XCJpbWFnZSA9ICdhc3NldHMvaW1hZ2VzL2RlbGl2ZXJ5L2RlZmF1bHQuc3ZnJ1wiXG4gICAgLz5cbiAgPC9uZy1jb250YWluZXI+XG5cbiAgPG5nLXRlbXBsYXRlICNvbmx5SW5pdGlhbHM+XG4gICAgPGRpdiBjbGFzcz1cImRyb3BpLWF2YXRhcl9faW5pdGlhbHMgZmFsbGJhY2tcIiBbbmdDbGFzc109XCJbdHlwZV1cIj5cbiAgICAgIDxzcGFuPnt7IGluaXRpYWxzIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L25nLXRlbXBsYXRlPlxuPC9maWd1cmU+XG4iXX0=

package/dist/esm2022/components-source/dropi-badge/dropi-badge.component.mjs

@@ -0,0 +1,45 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class DropiBadgeComponent {
+    /**
+     * Tipo de badge que se mostrará, puede ser "state" o "counter".
+     * @example "state"
+     * @default "state"
+     */
+    type = 'state';
+    /**
+     * Estado en el que se encuentra el badge de tipo "state", puede ser "check" o "pending".
+     * @example "check"
+     * @default "check"
+     */
+    state = 'check';
+    /**
+     * Variante del badge, determina los colores del mismo, puede ser "primary", "secondary" o "tertiary".
+     * @example "primary"
+     * @default "primary"
+     */
+    variant = 'primary';
+    /**
+     * Contador a mostrar en el badge de tipo "counter".
+     * @example 10
+     * @default 0
+     */
+    count = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiBadgeComponent, isStandalone: true, selector: "dropi-badge", inputs: { type: "type", state: "state", variant: "variant", count: "count" }, ngImport: i0, template: "<div class=\"counter-badge\" *ngIf=\"type === 'counter'\" [ngClass]=\"variant\">\n  <span class=\"Caption-S\">\n    {{ count }}\n  </span>\n</div>\n\n<div class=\"state-badge\" *ngIf=\"type === 'state'\">\n  <div class=\"check-state\" *ngIf=\"state === 'check'\">\n    <img src=\"assets/img/icons/custom/badge-check.svg\" alt=\"Check\" />\n  </div>\n  <div class=\"pending-state\" *ngIf=\"state === 'pending'\"></div>\n</div>", styles: [".counter-badge{display:inline-flex;height:20px;min-width:20px;padding:0 var(--Size-1);justify-content:center;align-items:center;flex-shrink:0;border-radius:14px}.counter-badge.primary{background-color:var(--Primary-Primary-500, #F49A3D)}.counter-badge.primary span{color:var(--White, #FFFFFF)}.counter-badge.secondary{background-color:var(--White, #FFF)}.counter-badge.secondary span{color:var(--Primary-Primary-600, #F49A3D)}.counter-badge.tertiary{background-color:var(--Gray-100, #E6EAF2)}.counter-badge.tertiary span{color:var(--Gray-500, #69738C)}.state-badge{display:flex;justify-content:center;align-items:center;width:12px;height:12px;flex-shrink:0}.state-badge .pending-state{width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #F49A3D)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dropi-badge', standalone: true, imports: [CommonModule], template: "<div class=\"counter-badge\" *ngIf=\"type === 'counter'\" [ngClass]=\"variant\">\n  <span class=\"Caption-S\">\n    {{ count }}\n  </span>\n</div>\n\n<div class=\"state-badge\" *ngIf=\"type === 'state'\">\n  <div class=\"check-state\" *ngIf=\"state === 'check'\">\n    <img src=\"assets/img/icons/custom/badge-check.svg\" alt=\"Check\" />\n  </div>\n  <div class=\"pending-state\" *ngIf=\"state === 'pending'\"></div>\n</div>", styles: [".counter-badge{display:inline-flex;height:20px;min-width:20px;padding:0 var(--Size-1);justify-content:center;align-items:center;flex-shrink:0;border-radius:14px}.counter-badge.primary{background-color:var(--Primary-Primary-500, #F49A3D)}.counter-badge.primary span{color:var(--White, #FFFFFF)}.counter-badge.secondary{background-color:var(--White, #FFF)}.counter-badge.secondary span{color:var(--Primary-Primary-600, #F49A3D)}.counter-badge.tertiary{background-color:var(--Gray-100, #E6EAF2)}.counter-badge.tertiary span{color:var(--Gray-500, #69738C)}.state-badge{display:flex;justify-content:center;align-items:center;width:12px;height:12px;flex-shrink:0}.state-badge .pending-state{width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #F49A3D)}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMtc291cmNlL2Ryb3BpLWJhZGdlL2Ryb3BpLWJhZGdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1iYWRnZS9kcm9waS1iYWRnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQVMvQyxNQUFNLE9BQU8sbUJBQW1CO0lBQzlCOzs7O09BSUc7SUFDTSxJQUFJLEdBQXdCLE9BQU8sQ0FBQztJQUU3Qzs7OztPQUlHO0lBQ00sS0FBSyxHQUF3QixPQUFPLENBQUM7SUFFOUM7Ozs7T0FJRztJQUNNLE9BQU8sR0FBeUMsU0FBUyxDQUFDO0lBRW5FOzs7O09BSUc7SUFDTSxLQUFLLEdBQVcsQ0FBQyxDQUFDO3dHQTNCaEIsbUJBQW1COzRGQUFuQixtQkFBbUIscUpDVmhDLDJhQVdNLG8wQkRMTSxZQUFZOzs0RkFJWCxtQkFBbUI7a0JBUC9CLFNBQVM7K0JBQ0UsYUFBYSxjQUNYLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFVZCxJQUFJO3NCQUFaLEtBQUs7Z0JBT0csS0FBSztzQkFBYixLQUFLO2dCQU9HLE9BQU87c0JBQWYsS0FBSztnQkFPRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkcm9waS1iYWRnZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJvcGktYmFkZ2UuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9waS1iYWRnZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpQmFkZ2VDb21wb25lbnQge1xuICAvKipcbiAgICogVGlwbyBkZSBiYWRnZSBxdWUgc2UgbW9zdHJhcsOhLCBwdWVkZSBzZXIgXCJzdGF0ZVwiIG8gXCJjb3VudGVyXCIuXG4gICAqIEBleGFtcGxlIFwic3RhdGVcIlxuICAgKiBAZGVmYXVsdCBcInN0YXRlXCJcbiAgICovXG4gIEBJbnB1dCgpIHR5cGU6ICdzdGF0ZScgfCAnY291bnRlcicgPSAnc3RhdGUnO1xuXG4gIC8qKlxuICAgKiBFc3RhZG8gZW4gZWwgcXVlIHNlIGVuY3VlbnRyYSBlbCBiYWRnZSBkZSB0aXBvIFwic3RhdGVcIiwgcHVlZGUgc2VyIFwiY2hlY2tcIiBvIFwicGVuZGluZ1wiLlxuICAgKiBAZXhhbXBsZSBcImNoZWNrXCJcbiAgICogQGRlZmF1bHQgXCJjaGVja1wiXG4gICAqL1xuICBASW5wdXQoKSBzdGF0ZTogJ2NoZWNrJyB8ICdwZW5kaW5nJyA9ICdjaGVjayc7XG5cbiAgLyoqXG4gICAqIFZhcmlhbnRlIGRlbCBiYWRnZSwgZGV0ZXJtaW5hIGxvcyBjb2xvcmVzIGRlbCBtaXNtbywgcHVlZGUgc2VyIFwicHJpbWFyeVwiLCBcInNlY29uZGFyeVwiIG8gXCJ0ZXJ0aWFyeVwiLlxuICAgKiBAZXhhbXBsZSBcInByaW1hcnlcIlxuICAgKiBAZGVmYXVsdCBcInByaW1hcnlcIlxuICAgKi9cbiAgQElucHV0KCkgdmFyaWFudDogJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAndGVydGlhcnknID0gJ3ByaW1hcnknO1xuXG4gIC8qKlxuICAgKiBDb250YWRvciBhIG1vc3RyYXIgZW4gZWwgYmFkZ2UgZGUgdGlwbyBcImNvdW50ZXJcIi5cbiAgICogQGV4YW1wbGUgMTBcbiAgICogQGRlZmF1bHQgMFxuICAgKi9cbiAgQElucHV0KCkgY291bnQ6IG51bWJlciA9IDA7XG59XG4iLCI8ZGl2IGNsYXNzPVwiY291bnRlci1iYWRnZVwiICpuZ0lmPVwidHlwZSA9PT0gJ2NvdW50ZXInXCIgW25nQ2xhc3NdPVwidmFyaWFudFwiPlxuICA8c3BhbiBjbGFzcz1cIkNhcHRpb24tU1wiPlxuICAgIHt7IGNvdW50IH19XG4gIDwvc3Bhbj5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwic3RhdGUtYmFkZ2VcIiAqbmdJZj1cInR5cGUgPT09ICdzdGF0ZSdcIj5cbiAgPGRpdiBjbGFzcz1cImNoZWNrLXN0YXRlXCIgKm5nSWY9XCJzdGF0ZSA9PT0gJ2NoZWNrJ1wiPlxuICAgIDxpbWcgc3JjPVwiYXNzZXRzL2ltZy9pY29ucy9jdXN0b20vYmFkZ2UtY2hlY2suc3ZnXCIgYWx0PVwiQ2hlY2tcIiAvPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInBlbmRpbmctc3RhdGVcIiAqbmdJZj1cInN0YXRlID09PSAncGVuZGluZydcIj48L2Rpdj5cbjwvZGl2PiJdfQ==

package/dist/esm2022/components-source/dropi-banner-external/dropi-banner-external.component.mjs

@@ -0,0 +1,39 @@
+import { Component, Inject, CUSTOM_ELEMENTS_SCHEMA, } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class DropiBannerExternalComponent {
+    wordpressService;
+    bettaTesterService;
+    imageUrls = { large: "", medium: "", tablet: "", mobile: "" };
+    banner = { title: { rendered: "" }, acf: { slug: "" } };
+    loading = false;
+    backgroundColor = "transparent";
+    hasLink = false;
+    constructor(wordpressService, bettaTesterService) {
+        this.wordpressService = wordpressService;
+        this.bettaTesterService = bettaTesterService;
+    }
+    ngOnInit() { }
+    getImageFallback() {
+        return "";
+    }
+    getActionLink() {
+        return "#";
+    }
+    onClickBanner(event) { }
+    closeBanner() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBannerExternalComponent, deps: [{ token: "WordpressService" }, { token: "BettaTesterService" }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiBannerExternalComponent, isStandalone: true, selector: "app-dropi-banner-external", ngImport: i0, template: "<div\n  *ngIf=\"banner; else notVisible\"\n  class=\"dropi-banner-external\"\n  [class.loading]=\"loading\"\n  [ngStyle]=\"{ background: backgroundColor }\"\n>\n  <ng-container *ngIf=\"!loading; else loadingTpl\">\n    <a\n      *ngIf=\"hasLink\"\n      [href]=\"getActionLink()\"\n      target=\"_blank\"\n      rel=\"noopener\"\n      (click)=\"onClickBanner($event)\"\n    >\n      <picture>\n        <source *ngIf=\"imageUrls.large\" media=\"(min-width: 1280px)\" [srcset]=\"imageUrls.large\" />\n        <source *ngIf=\"imageUrls.medium\" media=\"(min-width: 992px)\" [srcset]=\"imageUrls.medium\" />\n        <source *ngIf=\"imageUrls.tablet\" media=\"(min-width: 768px)\" [srcset]=\"imageUrls.tablet\" />\n        <source *ngIf=\"imageUrls.mobile\" media=\"(max-width: 767px)\" [srcset]=\"imageUrls.mobile\" />\n        <img\n          [src]=\"getImageFallback()\"\n          [alt]=\"banner.title?.rendered || banner.acf.slug\"\n          loading=\"lazy\"\n        />\n        <div class=\"close-search\">\n          <app-icon\n            name=\"Close-small\"\n            [width]=\"20\"\n            [height]=\"20\"\n            [color]=\"'#475066'\"\n            (click)=\"closeBanner()\"\n          ></app-icon>\n        </div>\n      </picture>\n    </a>\n    <div *ngIf=\"!hasLink\" class=\"click-wrapper\" (click)=\"onClickBanner($event)\">\n      <picture>\n        <source *ngIf=\"imageUrls.large\" media=\"(min-width: 1280px)\" [srcset]=\"imageUrls.large\" />\n        <source *ngIf=\"imageUrls.medium\" media=\"(min-width: 992px)\" [srcset]=\"imageUrls.medium\" />\n        <source *ngIf=\"imageUrls.tablet\" media=\"(min-width: 768px)\" [srcset]=\"imageUrls.tablet\" />\n        <source *ngIf=\"imageUrls.mobile\" media=\"(max-width: 767px)\" [srcset]=\"imageUrls.mobile\" />\n        <img\n          [src]=\"getImageFallback()\"\n          [alt]=\"banner.title?.rendered || banner.acf.slug\"\n          loading=\"lazy\"\n        />\n        <div class=\"close-search\">\n          <app-icon\n            name=\"Close-small\"\n            [width]=\"20\"\n            [height]=\"20\"\n            [color]=\"'#475066'\"\n            (click)=\"closeBanner()\"\n          ></app-icon>\n        </div>\n      </picture>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #loadingTpl>\n  <div class=\"banner-loading\"></div>\n</ng-template>\n\n<ng-template #notVisible>\n  <div class=\"banner-hidden\" *ngIf=\"!loading\"></div>\n</ng-template>\n", styles: [".drobi-banner-external,.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external picture,.dropi-banner-external img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto;position:relative}.click-wrapper{cursor:pointer}.banner-loading{width:100%;text-align:center;padding:16px;font-size:14px;color:#555}.banner-hidden{display:none}.dropi-banner-external.loading{opacity:.5}.close-search{position:absolute;top:4px;right:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBannerExternalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-dropi-banner-external", standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div\n  *ngIf=\"banner; else notVisible\"\n  class=\"dropi-banner-external\"\n  [class.loading]=\"loading\"\n  [ngStyle]=\"{ background: backgroundColor }\"\n>\n  <ng-container *ngIf=\"!loading; else loadingTpl\">\n    <a\n      *ngIf=\"hasLink\"\n      [href]=\"getActionLink()\"\n      target=\"_blank\"\n      rel=\"noopener\"\n      (click)=\"onClickBanner($event)\"\n    >\n      <picture>\n        <source *ngIf=\"imageUrls.large\" media=\"(min-width: 1280px)\" [srcset]=\"imageUrls.large\" />\n        <source *ngIf=\"imageUrls.medium\" media=\"(min-width: 992px)\" [srcset]=\"imageUrls.medium\" />\n        <source *ngIf=\"imageUrls.tablet\" media=\"(min-width: 768px)\" [srcset]=\"imageUrls.tablet\" />\n        <source *ngIf=\"imageUrls.mobile\" media=\"(max-width: 767px)\" [srcset]=\"imageUrls.mobile\" />\n        <img\n          [src]=\"getImageFallback()\"\n          [alt]=\"banner.title?.rendered || banner.acf.slug\"\n          loading=\"lazy\"\n        />\n        <div class=\"close-search\">\n          <app-icon\n            name=\"Close-small\"\n            [width]=\"20\"\n            [height]=\"20\"\n            [color]=\"'#475066'\"\n            (click)=\"closeBanner()\"\n          ></app-icon>\n        </div>\n      </picture>\n    </a>\n    <div *ngIf=\"!hasLink\" class=\"click-wrapper\" (click)=\"onClickBanner($event)\">\n      <picture>\n        <source *ngIf=\"imageUrls.large\" media=\"(min-width: 1280px)\" [srcset]=\"imageUrls.large\" />\n        <source *ngIf=\"imageUrls.medium\" media=\"(min-width: 992px)\" [srcset]=\"imageUrls.medium\" />\n        <source *ngIf=\"imageUrls.tablet\" media=\"(min-width: 768px)\" [srcset]=\"imageUrls.tablet\" />\n        <source *ngIf=\"imageUrls.mobile\" media=\"(max-width: 767px)\" [srcset]=\"imageUrls.mobile\" />\n        <img\n          [src]=\"getImageFallback()\"\n          [alt]=\"banner.title?.rendered || banner.acf.slug\"\n          loading=\"lazy\"\n        />\n        <div class=\"close-search\">\n          <app-icon\n            name=\"Close-small\"\n            [width]=\"20\"\n            [height]=\"20\"\n            [color]=\"'#475066'\"\n            (click)=\"closeBanner()\"\n          ></app-icon>\n        </div>\n      </picture>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #loadingTpl>\n  <div class=\"banner-loading\"></div>\n</ng-template>\n\n<ng-template #notVisible>\n  <div class=\"banner-hidden\" *ngIf=\"!loading\"></div>\n</ng-template>\n", styles: [".drobi-banner-external,.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external picture,.dropi-banner-external img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto;position:relative}.click-wrapper{cursor:pointer}.banner-loading{width:100%;text-align:center;padding:16px;font-size:14px;color:#555}.banner-hidden{display:none}.dropi-banner-external.loading{opacity:.5}.close-search{position:absolute;top:4px;right:4px;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ["WordpressService"]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ["BettaTesterService"]
+                }] }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktYmFubmVyLWV4dGVybmFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1iYW5uZXItZXh0ZXJuYWwvZHJvcGktYmFubmVyLWV4dGVybmFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1iYW5uZXItZXh0ZXJuYWwvZHJvcGktYmFubmVyLWV4dGVybmFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBR1QsTUFBTSxFQUNOLHNCQUFzQixHQUN2QixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQVUvQyxNQUFNLE9BQU8sNEJBQTRCO0lBUUQ7SUFDRTtJQVJqQyxTQUFTLEdBQVEsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFLENBQUM7SUFDbkUsTUFBTSxHQUFRLEVBQUUsS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRSxFQUFFLEdBQUcsRUFBRSxFQUFFLElBQUksRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDO0lBQzdELE9BQU8sR0FBWSxLQUFLLENBQUM7SUFDekIsZUFBZSxHQUFXLGFBQWEsQ0FBQztJQUN4QyxPQUFPLEdBQVksS0FBSyxDQUFDO0lBRWhDLFlBQ3NDLGdCQUFxQixFQUNuQixrQkFBdUI7UUFEekIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFLO1FBQ25CLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBSztJQUM1RCxDQUFDO0lBRUosUUFBUSxLQUFVLENBQUM7SUFFWixnQkFBZ0I7UUFDckIsT0FBTyxFQUFFLENBQUM7SUFDWixDQUFDO0lBRU0sYUFBYTtRQUNsQixPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7SUFFTSxhQUFhLENBQUMsS0FBVSxJQUFTLENBQUM7SUFFbEMsV0FBVyxLQUFVLENBQUM7d0dBeEJsQiw0QkFBNEIsa0JBUTdCLGtCQUFrQixhQUNsQixvQkFBb0I7NEZBVG5CLDRCQUE0QixxRkNqQnpDLGc2RUFtRUEsb25CRHZEWSxZQUFZOzs0RkFLWCw0QkFBNEI7a0JBUnhDLFNBQVM7K0JBQ0UsMkJBQTJCLGNBQ3pCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxXQUNkLENBQUMsc0JBQXNCLENBQUM7OzBCQVk5QixNQUFNOzJCQUFDLGtCQUFrQjs7MEJBQ3pCLE1BQU07MkJBQUMsb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBJbmplY3QsXG4gIENVU1RPTV9FTEVNRU5UU19TQ0hFTUEsXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhcHAtZHJvcGktYmFubmVyLWV4dGVybmFsXCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBzY2hlbWFzOiBbQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQV0sXG4gIHRlbXBsYXRlVXJsOiBcIi4vZHJvcGktYmFubmVyLWV4dGVybmFsLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsczogW1wiLi9kcm9waS1iYW5uZXItZXh0ZXJuYWwuY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpQmFubmVyRXh0ZXJuYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwdWJsaWMgaW1hZ2VVcmxzOiBhbnkgPSB7IGxhcmdlOiBcIlwiLCBtZWRpdW06IFwiXCIsIHRhYmxldDogXCJcIiwgbW9iaWxlOiBcIlwiIH07XG4gIHB1YmxpYyBiYW5uZXI6IGFueSA9IHsgdGl0bGU6IHsgcmVuZGVyZWQ6IFwiXCIgfSwgYWNmOiB7IHNsdWc6IFwiXCIgfSB9O1xuICBwdWJsaWMgbG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xuICBwdWJsaWMgYmFja2dyb3VuZENvbG9yOiBzdHJpbmcgPSBcInRyYW5zcGFyZW50XCI7XG4gIHB1YmxpYyBoYXNMaW5rOiBib29sZWFuID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgQEluamVjdChcIldvcmRwcmVzc1NlcnZpY2VcIikgcHJpdmF0ZSB3b3JkcHJlc3NTZXJ2aWNlOiBhbnksXG4gICAgQEluamVjdChcIkJldHRhVGVzdGVyU2VydmljZVwiKSBwcml2YXRlIGJldHRhVGVzdGVyU2VydmljZTogYW55LFxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gIHB1YmxpYyBnZXRJbWFnZUZhbGxiYWNrKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIFwiXCI7XG4gIH1cblxuICBwdWJsaWMgZ2V0QWN0aW9uTGluaygpOiBzdHJpbmcge1xuICAgIHJldHVybiBcIiNcIjtcbiAgfVxuXG4gIHB1YmxpYyBvbkNsaWNrQmFubmVyKGV2ZW50OiBhbnkpOiB2b2lkIHt9XG5cbiAgcHVibGljIGNsb3NlQmFubmVyKCk6IHZvaWQge31cbn1cbiIsIjxkaXZcbiAgKm5nSWY9XCJiYW5uZXI7IGVsc2Ugbm90VmlzaWJsZVwiXG4gIGNsYXNzPVwiZHJvcGktYmFubmVyLWV4dGVybmFsXCJcbiAgW2NsYXNzLmxvYWRpbmddPVwibG9hZGluZ1wiXG4gIFtuZ1N0eWxlXT1cInsgYmFja2dyb3VuZDogYmFja2dyb3VuZENvbG9yIH1cIlxuPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWxvYWRpbmc7IGVsc2UgbG9hZGluZ1RwbFwiPlxuICAgIDxhXG4gICAgICAqbmdJZj1cImhhc0xpbmtcIlxuICAgICAgW2hyZWZdPVwiZ2V0QWN0aW9uTGluaygpXCJcbiAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgICByZWw9XCJub29wZW5lclwiXG4gICAgICAoY2xpY2spPVwib25DbGlja0Jhbm5lcigkZXZlbnQpXCJcbiAgICA+XG4gICAgICA8cGljdHVyZT5cbiAgICAgICAgPHNvdXJjZSAqbmdJZj1cImltYWdlVXJscy5sYXJnZVwiIG1lZGlhPVwiKG1pbi13aWR0aDogMTI4MHB4KVwiIFtzcmNzZXRdPVwiaW1hZ2VVcmxzLmxhcmdlXCIgLz5cbiAgICAgICAgPHNvdXJjZSAqbmdJZj1cImltYWdlVXJscy5tZWRpdW1cIiBtZWRpYT1cIihtaW4td2lkdGg6IDk5MnB4KVwiIFtzcmNzZXRdPVwiaW1hZ2VVcmxzLm1lZGl1bVwiIC8+XG4gICAgICAgIDxzb3VyY2UgKm5nSWY9XCJpbWFnZVVybHMudGFibGV0XCIgbWVkaWE9XCIobWluLXdpZHRoOiA3NjhweClcIiBbc3Jjc2V0XT1cImltYWdlVXJscy50YWJsZXRcIiAvPlxuICAgICAgICA8c291cmNlICpuZ0lmPVwiaW1hZ2VVcmxzLm1vYmlsZVwiIG1lZGlhPVwiKG1heC13aWR0aDogNzY3cHgpXCIgW3NyY3NldF09XCJpbWFnZVVybHMubW9iaWxlXCIgLz5cbiAgICAgICAgPGltZ1xuICAgICAgICAgIFtzcmNdPVwiZ2V0SW1hZ2VGYWxsYmFjaygpXCJcbiAgICAgICAgICBbYWx0XT1cImJhbm5lci50aXRsZT8ucmVuZGVyZWQgfHwgYmFubmVyLmFjZi5zbHVnXCJcbiAgICAgICAgICBsb2FkaW5nPVwibGF6eVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjbG9zZS1zZWFyY2hcIj5cbiAgICAgICAgICA8YXBwLWljb25cbiAgICAgICAgICAgIG5hbWU9XCJDbG9zZS1zbWFsbFwiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMjBcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIyMFwiXG4gICAgICAgICAgICBbY29sb3JdPVwiJyM0NzUwNjYnXCJcbiAgICAgICAgICAgIChjbGljayk9XCJjbG9zZUJhbm5lcigpXCJcbiAgICAgICAgICA+PC9hcHAtaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L3BpY3R1cmU+XG4gICAgPC9hPlxuICAgIDxkaXYgKm5nSWY9XCIhaGFzTGlua1wiIGNsYXNzPVwiY2xpY2std3JhcHBlclwiIChjbGljayk9XCJvbkNsaWNrQmFubmVyKCRldmVudClcIj5cbiAgICAgIDxwaWN0dXJlPlxuICAgICAgICA8c291cmNlICpuZ0lmPVwiaW1hZ2VVcmxzLmxhcmdlXCIgbWVkaWE9XCIobWluLXdpZHRoOiAxMjgwcHgpXCIgW3NyY3NldF09XCJpbWFnZVVybHMubGFyZ2VcIiAvPlxuICAgICAgICA8c291cmNlICpuZ0lmPVwiaW1hZ2VVcmxzLm1lZGl1bVwiIG1lZGlhPVwiKG1pbi13aWR0aDogOTkycHgpXCIgW3NyY3NldF09XCJpbWFnZVVybHMubWVkaXVtXCIgLz5cbiAgICAgICAgPHNvdXJjZSAqbmdJZj1cImltYWdlVXJscy50YWJsZXRcIiBtZWRpYT1cIihtaW4td2lkdGg6IDc2OHB4KVwiIFtzcmNzZXRdPVwiaW1hZ2VVcmxzLnRhYmxldFwiIC8+XG4gICAgICAgIDxzb3VyY2UgKm5nSWY9XCJpbWFnZVVybHMubW9iaWxlXCIgbWVkaWE9XCIobWF4LXdpZHRoOiA3NjdweClcIiBbc3Jjc2V0XT1cImltYWdlVXJscy5tb2JpbGVcIiAvPlxuICAgICAgICA8aW1nXG4gICAgICAgICAgW3NyY109XCJnZXRJbWFnZUZhbGxiYWNrKClcIlxuICAgICAgICAgIFthbHRdPVwiYmFubmVyLnRpdGxlPy5yZW5kZXJlZCB8fCBiYW5uZXIuYWNmLnNsdWdcIlxuICAgICAgICAgIGxvYWRpbmc9XCJsYXp5XCJcbiAgICAgICAgLz5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNsb3NlLXNlYXJjaFwiPlxuICAgICAgICAgIDxhcHAtaWNvblxuICAgICAgICAgICAgbmFtZT1cIkNsb3NlLXNtYWxsXCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIyMFwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjIwXCJcbiAgICAgICAgICAgIFtjb2xvcl09XCInIzQ3NTA2NidcIlxuICAgICAgICAgICAgKGNsaWNrKT1cImNsb3NlQmFubmVyKClcIlxuICAgICAgICAgID48L2FwcC1pY29uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvcGljdHVyZT5cbiAgICA8L2Rpdj5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNsb2FkaW5nVHBsPlxuICA8ZGl2IGNsYXNzPVwiYmFubmVyLWxvYWRpbmdcIj48L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjbm90VmlzaWJsZT5cbiAgPGRpdiBjbGFzcz1cImJhbm5lci1oaWRkZW5cIiAqbmdJZj1cIiFsb2FkaW5nXCI+PC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19

package/dist/esm2022/components-source/dropi-breadcrumb/dropi-breadcrumb.component.mjs

@@ -0,0 +1,45 @@
+import { Component, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA, } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { IconComponent } from "../icon/icon.component";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@ngx-translate/core";
+export class DropiBreadcrumbComponent {
+    items = [];
+    ariaLabel = "Breadcrumb";
+    homeIconName = "Home";
+    lastItemClickable = false;
+    onNavigate = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    navigate(item, isHome = false) {
+        if (isHome) {
+            this.onNavigate.emit({ label: "Home", url: "/" });
+            return;
+        }
+        if (item && !item.disabled) {
+            if (item.command) {
+                item.command(item);
+            }
+            this.onNavigate.emit(item);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiBreadcrumbComponent, isStandalone: true, selector: "app-dropi-breadcrumb", inputs: { items: "items", ariaLabel: "ariaLabel", homeIconName: "homeIconName", lastItemClickable: "lastItemClickable" }, outputs: { onNavigate: "onNavigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"crumb-list\">\n    <!-- HOME: solo \u00EDcono -->\n    <div class=\"crumb-home\">\n      <a\n        (click)=\"navigate(null, true)\"\n        class=\"home-link\"\n        aria-label=\"Inicio\"\n        style=\"cursor: pointer\"\n      >\n        <app-icon\n          [name]=\"homeIconName\"\n          width=\"16px\"\n          color=\"Gray-Gray-500\"\n        ></app-icon>\n      </a>\n\n      <app-icon\n        *ngIf=\"items?.length\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <!-- ITEMS en l\u00EDnea, sin colapsar -->\n    <div *ngFor=\"let it of items; let last = last\" class=\"crumb\">\n      <!-- Si NO es el \u00FAltimo (o s\u00ED, pero queremos que sea clicable) -->\n      <ng-container *ngIf=\"!last || lastItemClickable; else current\">\n        <!-- Interno con Navegaci\u00F3n -->\n        <a\n          *ngIf=\"it.command || it.url; else plain\"\n          (click)=\"navigate(it)\"\n          [class.disabled]=\"it.disabled\"\n          class=\"crumb-link Body-S-Regular\"\n          style=\"cursor: pointer\"\n        >\n          {{ it.label | translate }}\n        </a>\n\n        <!-- Sin destino / deshabilitado -->\n        <ng-template #plain>\n          <span class=\"disabled Body-S-Regular\">{{\n            it.label | translate\n          }}</span>\n        </ng-template>\n      </ng-container>\n\n      <!-- \u00DAltimo como \u201Cactual\u201D por defecto -->\n      <ng-template #current>\n        <span class=\"current Body-S-Regular\" aria-current=\"page\">{{\n          it.label | translate\n        }}</span>\n      </ng-template>\n\n      <app-icon\n        *ngIf=\"!last\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        height=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n  </div>\n</nav>\n", styles: [".crumb-list{display:flex;align-items:center;gap:4px}.crumb-list .crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.crumb-list.disabled{pointer-events:none;opacity:.6}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb.disabled{pointer-events:none}.crumb.disabled .crumb-link{color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;transition:color .2s ease}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8)!important;cursor:not-allowed!important;text-decoration:none!important}.current{color:var(--Gray-Gray-700, #32394d);cursor:default}.current:hover{text-decoration:none}.breadcrumb{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-dropi-breadcrumb", standalone: true, imports: [CommonModule, TranslateModule, IconComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nav class=\"breadcrumb\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"crumb-list\">\n    <!-- HOME: solo \u00EDcono -->\n    <div class=\"crumb-home\">\n      <a\n        (click)=\"navigate(null, true)\"\n        class=\"home-link\"\n        aria-label=\"Inicio\"\n        style=\"cursor: pointer\"\n      >\n        <app-icon\n          [name]=\"homeIconName\"\n          width=\"16px\"\n          color=\"Gray-Gray-500\"\n        ></app-icon>\n      </a>\n\n      <app-icon\n        *ngIf=\"items?.length\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <!-- ITEMS en l\u00EDnea, sin colapsar -->\n    <div *ngFor=\"let it of items; let last = last\" class=\"crumb\">\n      <!-- Si NO es el \u00FAltimo (o s\u00ED, pero queremos que sea clicable) -->\n      <ng-container *ngIf=\"!last || lastItemClickable; else current\">\n        <!-- Interno con Navegaci\u00F3n -->\n        <a\n          *ngIf=\"it.command || it.url; else plain\"\n          (click)=\"navigate(it)\"\n          [class.disabled]=\"it.disabled\"\n          class=\"crumb-link Body-S-Regular\"\n          style=\"cursor: pointer\"\n        >\n          {{ it.label | translate }}\n        </a>\n\n        <!-- Sin destino / deshabilitado -->\n        <ng-template #plain>\n          <span class=\"disabled Body-S-Regular\">{{\n            it.label | translate\n          }}</span>\n        </ng-template>\n      </ng-container>\n\n      <!-- \u00DAltimo como \u201Cactual\u201D por defecto -->\n      <ng-template #current>\n        <span class=\"current Body-S-Regular\" aria-current=\"page\">{{\n          it.label | translate\n        }}</span>\n      </ng-template>\n\n      <app-icon\n        *ngIf=\"!last\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        height=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n  </div>\n</nav>\n", styles: [".crumb-list{display:flex;align-items:center;gap:4px}.crumb-list .crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.crumb-list.disabled{pointer-events:none;opacity:.6}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb.disabled{pointer-events:none}.crumb.disabled .crumb-link{color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;transition:color .2s ease}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8)!important;cursor:not-allowed!important;text-decoration:none!important}.current{color:var(--Gray-Gray-700, #32394d);cursor:default}.current:hover{text-decoration:none}.breadcrumb{margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], homeIconName: [{
+                type: Input
+            }], lastItemClickable: [{
+                type: Input
+            }], onNavigate: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvZHJvcGktYnJlYWRjcnVtYi9kcm9waS1icmVhZGNydW1iLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1icmVhZGNydW1iL2Ryb3BpLWJyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFHWixzQkFBc0IsR0FDdkIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7Ozs7QUFtQnZELE1BQU0sT0FBTyx3QkFBd0I7SUFDbkIsS0FBSyxHQUFxQixFQUFFLENBQUM7SUFDN0IsU0FBUyxHQUFXLFlBQVksQ0FBQztJQUNqQyxZQUFZLEdBQVcsTUFBTSxDQUFDO0lBQzlCLGlCQUFpQixHQUFZLEtBQUssQ0FBQztJQUVsQyxVQUFVLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7SUFFakUsZ0JBQWUsQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVaLFFBQVEsQ0FBQyxJQUEyQixFQUFFLFNBQWtCLEtBQUs7UUFDbEUsSUFBSSxNQUFNLEVBQUUsQ0FBQztZQUNYLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQztZQUNsRCxPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQzNCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO2dCQUNqQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3JCLENBQUM7WUFDRCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUM3QixDQUFDO0lBQ0gsQ0FBQzt3R0F4QlUsd0JBQXdCOzRGQUF4Qix3QkFBd0IsaVBDOUJyQyxxNURBaUVBLDQyQkR4Q1ksWUFBWSwrUEFBRSxlQUFlLDRGQUFFLGFBQWE7OzRGQUszQyx3QkFBd0I7a0JBUnBDLFNBQVM7K0JBQ0Usc0JBQXNCLGNBQ3BCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxlQUFlLEVBQUUsYUFBYSxDQUFDLFdBQzlDLENBQUMsc0JBQXNCLENBQUM7d0RBS2pCLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxZQUFZO3NCQUEzQixLQUFLO2dCQUNVLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFFVyxVQUFVO3NCQUExQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIE9uSW5pdCxcbiAgSW5qZWN0LFxuICBDVVNUT01fRUxFTUVOVFNfU0NIRU1BLFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSBcIkBuZ3gtdHJhbnNsYXRlL2NvcmVcIjtcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tIFwiLi4vaWNvbi9pY29uLmNvbXBvbmVudFwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJyZWFkY3J1bWJJdGVtIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdXJsPzogc3RyaW5nO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIHF1ZXJ5UGFyYW1zPzogUmVjb3JkPHN0cmluZywgYW55PjtcbiAgZnJhZ21lbnQ/OiBzdHJpbmc7XG4gIGNvbW1hbmQ/OiAoZXZlbnQ/OiBhbnkpID0+IHZvaWQ7IC8vIENhbWJpYWRvIGRlICdjbGljaycgcGFyYSBldml0YXIgY29uZmxpY3RvcyBkZSBzaW50YXhpc1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXBwLWRyb3BpLWJyZWFkY3J1bWJcIixcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgVHJhbnNsYXRlTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgc2NoZW1hczogW0NVU1RPTV9FTEVNRU5UU19TQ0hFTUFdLFxuICB0ZW1wbGF0ZVVybDogXCIuL2Ryb3BpLWJyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2Ryb3BpLWJyZWFkY3J1bWIuY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpQnJlYWRjcnVtYkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHB1YmxpYyBpdGVtczogQnJlYWRjcnVtYkl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBwdWJsaWMgYXJpYUxhYmVsOiBzdHJpbmcgPSBcIkJyZWFkY3J1bWJcIjtcbiAgQElucHV0KCkgcHVibGljIGhvbWVJY29uTmFtZTogc3RyaW5nID0gXCJIb21lXCI7XG4gIEBJbnB1dCgpIHB1YmxpYyBsYXN0SXRlbUNsaWNrYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBwdWJsaWMgb25OYXZpZ2F0ZSA9IG5ldyBFdmVudEVtaXR0ZXI8QnJlYWRjcnVtYkl0ZW0+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICBwdWJsaWMgbmF2aWdhdGUoaXRlbTogQnJlYWRjcnVtYkl0ZW0gfCBudWxsLCBpc0hvbWU6IGJvb2xlYW4gPSBmYWxzZSk6IHZvaWQge1xuICAgIGlmIChpc0hvbWUpIHtcbiAgICAgIHRoaXMub25OYXZpZ2F0ZS5lbWl0KHsgbGFiZWw6IFwiSG9tZVwiLCB1cmw6IFwiL1wiIH0pO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGlmIChpdGVtICYmICFpdGVtLmRpc2FibGVkKSB7XG4gICAgICBpZiAoaXRlbS5jb21tYW5kKSB7XG4gICAgICAgIGl0ZW0uY29tbWFuZChpdGVtKTtcbiAgICAgIH1cbiAgICAgIHRoaXMub25OYXZpZ2F0ZS5lbWl0KGl0ZW0pO1xuICAgIH1cbiAgfVxufVxuIiwiPG5hdiBjbGFzcz1cImJyZWFkY3J1bWJcIiBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiPlxuICA8ZGl2IGNsYXNzPVwiY3J1bWItbGlzdFwiPlxuICAgIDwhLS0gSE9NRTogc29sbyDDrWNvbm8gLS0+XG4gICAgPGRpdiBjbGFzcz1cImNydW1iLWhvbWVcIj5cbiAgICAgIDxhXG4gICAgICAgIChjbGljayk9XCJuYXZpZ2F0ZShudWxsLCB0cnVlKVwiXG4gICAgICAgIGNsYXNzPVwiaG9tZS1saW5rXCJcbiAgICAgICAgYXJpYS1sYWJlbD1cIkluaWNpb1wiXG4gICAgICAgIHN0eWxlPVwiY3Vyc29yOiBwb2ludGVyXCJcbiAgICAgID5cbiAgICAgICAgPGFwcC1pY29uXG4gICAgICAgICAgW25hbWVdPVwiaG9tZUljb25OYW1lXCJcbiAgICAgICAgICB3aWR0aD1cIjE2cHhcIlxuICAgICAgICAgIGNvbG9yPVwiR3JheS1HcmF5LTUwMFwiXG4gICAgICAgID48L2FwcC1pY29uPlxuICAgICAgPC9hPlxuXG4gICAgICA8YXBwLWljb25cbiAgICAgICAgKm5nSWY9XCJpdGVtcz8ubGVuZ3RoXCJcbiAgICAgICAgbmFtZT1cIkRyb3Bkb3duLVJpZ2h0XCJcbiAgICAgICAgd2lkdGg9XCIxNnB4XCJcbiAgICAgICAgY29sb3I9XCJHcmF5LUdyYXktNTAwXCJcbiAgICAgID48L2FwcC1pY29uPlxuICAgIDwvZGl2PlxuXG4gICAgPCEtLSBJVEVNUyBlbiBsw61uZWEsIHNpbiBjb2xhcHNhciAtLT5cbiAgICA8ZGl2ICpuZ0Zvcj1cImxldCBpdCBvZiBpdGVtczsgbGV0IGxhc3QgPSBsYXN0XCIgY2xhc3M9XCJjcnVtYlwiPlxuICAgICAgPCEtLSBTaSBOTyBlcyBlbCDDumx0aW1vIChvIHPDrSwgcGVybyBxdWVyZW1vcyBxdWUgc2VhIGNsaWNhYmxlKSAtLT5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbGFzdCB8fCBsYXN0SXRlbUNsaWNrYWJsZTsgZWxzZSBjdXJyZW50XCI+XG4gICAgICAgIDwhLS0gSW50ZXJubyBjb24gTmF2ZWdhY2nDs24gLS0+XG4gICAgICAgIDxhXG4gICAgICAgICAgKm5nSWY9XCJpdC5jb21tYW5kIHx8IGl0LnVybDsgZWxzZSBwbGFpblwiXG4gICAgICAgICAgKGNsaWNrKT1cIm5hdmlnYXRlKGl0KVwiXG4gICAgICAgICAgW2NsYXNzLmRpc2FibGVkXT1cIml0LmRpc2FibGVkXCJcbiAgICAgICAgICBjbGFzcz1cImNydW1iLWxpbmsgQm9keS1TLVJlZ3VsYXJcIlxuICAgICAgICAgIHN0eWxlPVwiY3Vyc29yOiBwb2ludGVyXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IGl0LmxhYmVsIHwgdHJhbnNsYXRlIH19XG4gICAgICAgIDwvYT5cblxuICAgICAgICA8IS0tIFNpbiBkZXN0aW5vIC8gZGVzaGFiaWxpdGFkbyAtLT5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNwbGFpbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImRpc2FibGVkIEJvZHktUy1SZWd1bGFyXCI+e3tcbiAgICAgICAgICAgIGl0LmxhYmVsIHwgdHJhbnNsYXRlXG4gICAgICAgICAgfX08L3NwYW4+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgPCEtLSDDmmx0aW1vIGNvbW8g4oCcYWN0dWFs4oCdIHBvciBkZWZlY3RvIC0tPlxuICAgICAgPG5nLXRlbXBsYXRlICNjdXJyZW50PlxuICAgICAgICA8c3BhbiBjbGFzcz1cImN1cnJlbnQgQm9keS1TLVJlZ3VsYXJcIiBhcmlhLWN1cnJlbnQ9XCJwYWdlXCI+e3tcbiAgICAgICAgICBpdC5sYWJlbCB8IHRyYW5zbGF0ZVxuICAgICAgICB9fTwvc3Bhbj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICAgIDxhcHAtaWNvblxuICAgICAgICAqbmdJZj1cIiFsYXN0XCJcbiAgICAgICAgbmFtZT1cIkRyb3Bkb3duLVJpZ2h0XCJcbiAgICAgICAgd2lkdGg9XCIxNnB4XCJcbiAgICAgICAgaGVpZ2h0PVwiMTZweFwiXG4gICAgICAgIGNvbG9yPVwiR3JheS1HcmF5LTUwMFwiXG4gICAgICA+PC9hcHAtaWNvbj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25hdj5cbiJdfQ==

package/dist/esm2022/components-source/dropi-card-checkbox/dropi-card-checkbox.component.mjs

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class DropiCardCheckboxComponent {
+    type = 'default';
+    title = 'Tittle';
+    description = '';
+    extraInfo = '';
+    extraInfoDescription = '';
+    state = 'checked';
+    disabled = false;
+    onChange = new EventEmitter();
+    styleLine = '';
+    styleChecked = '';
+    constructor() { }
+    ngOnInit() {
+        this.styleLine = this.type == 'default' ? 'default-card' : '';
+    }
+    changeCheck(e) {
+        this.state = e ? 'checked' : 'default';
+        this.onChange.emit(e);
+    }
+    clickFullWidth(e) {
+        if (this.disabled)
+            return;
+        this.changeCheck(!e);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiCardCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiCardCheckboxComponent, isStandalone: true, selector: "app-dropi-card-checkbox", inputs: { type: "type", title: "title", description: "description", extraInfo: "extraInfo", extraInfoDescription: "extraInfoDescription", state: "state", disabled: "disabled" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<ng-container>\n  <div (click)=\"clickFullWidth(state === 'checked')\" \n    class=\"container-card-check\"\n    [ngClass]=\"[\n      styleLine,\n      (state === 'checked' && type === 'with card') ? 'is-checked' : '',\n      disabled ? 'disabled' : ''\n    ]\"\n  >\n    <app-dropi-checkbox [checked]=\"state == 'checked' ? true : false\" [disabled]=\"disabled\" />\n    <div class=\"Body-M-Regular container-text\">\n      <div class=\"title-check\">{{ title }}</div>\n      <div *ngIf=\"description\" class=\"Body-S-Regular description-text\">\n        {{ description }}\n      </div>\n    </div>\n    <div class=\"extra-info\">\n      <div *ngIf=\"extraInfo\" class=\"Body-S-Regular\">{{ extraInfo }}</div>\n      <div *ngIf=\"extraInfo && extraInfoDescription\">\n        <h4>{{ extraInfoDescription }}</h4>\n      </div>\n    </div>\n  </div>\n</ng-container>", styles: [".container-card-check{padding:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-2);width:100%;display:flex;align-items:center;gap:var(--Size-3);cursor:pointer;height:66px;overflow:hidden}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #E6EAF2);background-color:var(--Gray-Gray-50, #F7F8FA);cursor:default}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.container-card-check.disabled .container-text,.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .Body-S-Regular,.container-card-check.disabled h4{color:var(--Gray-Gray-400, #858EA6)}.container-text>div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{margin-top:var(--Size-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text.disabled{color:var(--Gray-Gray-400, #858EA6)}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px}.extra-info>div>h4{margin:0}.default-card{border:none;display:flex}.is-checked{background:var(--Primary-Primary-50);border:1px solid var(--Primary-Primary-500)}.title-check{color:var(--Gray-Gray-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropiCheckboxComponent, selector: "app-dropi-checkbox", inputs: ["checked", "disabled"], outputs: ["onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiCardCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dropi-card-checkbox', standalone: true, imports: [CommonModule, DropiCheckboxComponent], template: "<ng-container>\n  <div (click)=\"clickFullWidth(state === 'checked')\" \n    class=\"container-card-check\"\n    [ngClass]=\"[\n      styleLine,\n      (state === 'checked' && type === 'with card') ? 'is-checked' : '',\n      disabled ? 'disabled' : ''\n    ]\"\n  >\n    <app-dropi-checkbox [checked]=\"state == 'checked' ? true : false\" [disabled]=\"disabled\" />\n    <div class=\"Body-M-Regular container-text\">\n      <div class=\"title-check\">{{ title }}</div>\n      <div *ngIf=\"description\" class=\"Body-S-Regular description-text\">\n        {{ description }}\n      </div>\n    </div>\n    <div class=\"extra-info\">\n      <div *ngIf=\"extraInfo\" class=\"Body-S-Regular\">{{ extraInfo }}</div>\n      <div *ngIf=\"extraInfo && extraInfoDescription\">\n        <h4>{{ extraInfoDescription }}</h4>\n      </div>\n    </div>\n  </div>\n</ng-container>", styles: [".container-card-check{padding:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-2);width:100%;display:flex;align-items:center;gap:var(--Size-3);cursor:pointer;height:66px;overflow:hidden}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #E6EAF2);background-color:var(--Gray-Gray-50, #F7F8FA);cursor:default}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.container-card-check.disabled .container-text,.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .Body-S-Regular,.container-card-check.disabled h4{color:var(--Gray-Gray-400, #858EA6)}.container-text>div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{margin-top:var(--Size-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text.disabled{color:var(--Gray-Gray-400, #858EA6)}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px}.extra-info>div>h4{margin:0}.default-card{border:none;display:flex}.is-checked{background:var(--Primary-Primary-50);border:1px solid var(--Primary-Primary-500)}.title-check{color:var(--Gray-Gray-700)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], extraInfo: [{
+                type: Input
+            }], extraInfoDescription: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktY2FyZC1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvZHJvcGktY2FyZC1jaGVja2JveC9kcm9waS1jYXJkLWNoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1jYXJkLWNoZWNrYm94L2Ryb3BpLWNhcmQtY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0UsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNENBQTRDLENBQUM7OztBQVNwRixNQUFNLE9BQU8sMEJBQTBCO0lBQzVCLElBQUksR0FBNEIsU0FBUyxDQUFDO0lBQzFDLEtBQUssR0FBRyxRQUFRLENBQUM7SUFDakIsV0FBVyxHQUFHLEVBQUUsQ0FBQztJQUNqQixTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ2Ysb0JBQW9CLEdBQUcsRUFBRSxDQUFDO0lBQzFCLEtBQUssR0FBMEIsU0FBUyxDQUFDO0lBQ3pDLFFBQVEsR0FBWSxLQUFLLENBQUM7SUFDekIsUUFBUSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFFakQsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUNmLFlBQVksR0FBRyxFQUFFLENBQUM7SUFFbEIsZ0JBQWUsQ0FBQztJQUVoQixRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxJQUFJLFNBQVMsQ0FBQyxDQUFDLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDaEUsQ0FBQztJQUVELFdBQVcsQ0FBQyxDQUFDO1FBQ1gsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxjQUFjLENBQUMsQ0FBQztRQUNkLElBQUksSUFBSSxDQUFDLFFBQVE7WUFBRSxPQUFPO1FBQzFCLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN2QixDQUFDO3dHQTNCVSwwQkFBMEI7NEZBQTFCLDBCQUEwQix3U0NadkMsbTJCQXVCZSxtOUNEYkgsWUFBWSxpT0FBRSxzQkFBc0I7OzRGQUVuQywwQkFBMEI7a0JBUHRDLFNBQVM7K0JBQ0UseUJBQXlCLGNBR3ZCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxzQkFBc0IsQ0FBQzt3REFHdEMsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBEcm9waUNoZWNrYm94Q29tcG9uZW50IH0gZnJvbSAnLi4vZHJvcGktY2hlY2tib3gvZHJvcGktY2hlY2tib3guY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWRyb3BpLWNhcmQtY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJvcGktY2FyZC1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Ryb3BpLWNhcmQtY2hlY2tib3guY29tcG9uZW50LnNjc3MnXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRHJvcGlDaGVja2JveENvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpQ2FyZENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgdHlwZTogJ2RlZmF1bHQnIHwgJ3dpdGggY2FyZCcgPSAnZGVmYXVsdCc7XG4gIEBJbnB1dCgpIHRpdGxlID0gJ1RpdHRsZSc7XG4gIEBJbnB1dCgpIGRlc2NyaXB0aW9uID0gJyc7XG4gIEBJbnB1dCgpIGV4dHJhSW5mbyA9ICcnO1xuICBASW5wdXQoKSBleHRyYUluZm9EZXNjcmlwdGlvbiA9ICcnO1xuICBASW5wdXQoKSBzdGF0ZTogJ2NoZWNrZWQnIHwgJ2RlZmF1bHQnID0gJ2NoZWNrZWQnO1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBAT3V0cHV0KCkgb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgc3R5bGVMaW5lID0gJyc7XG4gIHN0eWxlQ2hlY2tlZCA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnN0eWxlTGluZSA9IHRoaXMudHlwZSA9PSAnZGVmYXVsdCcgPyAnZGVmYXVsdC1jYXJkJyA6ICcnO1xuICB9XG5cbiAgY2hhbmdlQ2hlY2soZSkge1xuICAgIHRoaXMuc3RhdGUgPSBlID8gJ2NoZWNrZWQnIDogJ2RlZmF1bHQnO1xuICAgIHRoaXMub25DaGFuZ2UuZW1pdChlKTtcbiAgfVxuXG4gIGNsaWNrRnVsbFdpZHRoKGUpIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkgcmV0dXJuO1xuICAgIHRoaXMuY2hhbmdlQ2hlY2soIWUpO1xuICB9XG59XG4iLCI8bmctY29udGFpbmVyPlxuICA8ZGl2IChjbGljayk9XCJjbGlja0Z1bGxXaWR0aChzdGF0ZSA9PT0gJ2NoZWNrZWQnKVwiIFxuICAgIGNsYXNzPVwiY29udGFpbmVyLWNhcmQtY2hlY2tcIlxuICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgIHN0eWxlTGluZSxcbiAgICAgIChzdGF0ZSA9PT0gJ2NoZWNrZWQnICYmIHR5cGUgPT09ICd3aXRoIGNhcmQnKSA/ICdpcy1jaGVja2VkJyA6ICcnLFxuICAgICAgZGlzYWJsZWQgPyAnZGlzYWJsZWQnIDogJydcbiAgICBdXCJcbiAgPlxuICAgIDxhcHAtZHJvcGktY2hlY2tib3ggW2NoZWNrZWRdPVwic3RhdGUgPT0gJ2NoZWNrZWQnID8gdHJ1ZSA6IGZhbHNlXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgLz5cbiAgICA8ZGl2IGNsYXNzPVwiQm9keS1NLVJlZ3VsYXIgY29udGFpbmVyLXRleHRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0aXRsZS1jaGVja1wiPnt7IHRpdGxlIH19PC9kaXY+XG4gICAgICA8ZGl2ICpuZ0lmPVwiZGVzY3JpcHRpb25cIiBjbGFzcz1cIkJvZHktUy1SZWd1bGFyIGRlc2NyaXB0aW9uLXRleHRcIj5cbiAgICAgICAge3sgZGVzY3JpcHRpb24gfX1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJleHRyYS1pbmZvXCI+XG4gICAgICA8ZGl2ICpuZ0lmPVwiZXh0cmFJbmZvXCIgY2xhc3M9XCJCb2R5LVMtUmVndWxhclwiPnt7IGV4dHJhSW5mbyB9fTwvZGl2PlxuICAgICAgPGRpdiAqbmdJZj1cImV4dHJhSW5mbyAmJiBleHRyYUluZm9EZXNjcmlwdGlvblwiPlxuICAgICAgICA8aDQ+e3sgZXh0cmFJbmZvRGVzY3JpcHRpb24gfX08L2g0PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy1jb250YWluZXI+Il19