@pepperi-addons/ngx-lib 0.2.61 → 0.3.0-beta.1

package/date/date.component.theme.scss

@@ -1,169 +1,163 @@
-@import '../src/core/style/abstracts/mixins';
-
-@mixin pep-date-component-theme($pepperi-theme) {
-
-    // -----------------------------------------------------
-    //  Override material style
-    // -----------------------------------------------------
-    .mat-datetimepicker-dialog{
-        max-width: 90vw !important;
-    }
-
-    .mat-datetimepicker-content {
-        border-radius: inherit;
-
-        .mat-datetimepicker-calendar-header {
-            @include state-strong-default($pepperi-theme);
-        }
-
-        .mat-datetimepicker-calendar-content {
-            // background-color: ivory;
-            // color: black;
-
-            .mat-month-content {
-                .mat-datetimepicker-calendar-controls {
-                    color: get-pep-color($pepperi-theme, color-text, color-main);
-
-                    .mat-datetimepicker-calendar-previous-button {
-                        @include select-arrow();
-                        // @include rotate(90deg);
-                        transform: rotate(90deg);
-
-                        svg {
-                            @include state-icon($pepperi-theme);
-                        }
-                    }
-
-                    .mat-datetimepicker-calendar-period-button {
-
-                    }
-
-                    .mat-datetimepicker-calendar-next-button {
-                        @include select-arrow();
-                        // @include rotate(-90deg);
-                        transform: rotate(-90deg);
-
-                        svg {
-                            @include state-icon($pepperi-theme);
-                        }
-                    }
-                }
-            }
-
-            mat-datetimepicker-year-view,
-            mat-datetimepicker-month-view {
-                .mat-datetimepicker-calendar-table {
-                    // Days string (sun, mon...)
-                    .mat-datetimepicker-calendar-table-header {
-                        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
-
-                    // Days numbers
-                    .mat-datetimepicker-calendar-body {
-                        color: get-pep-color($pepperi-theme, color-text, color-main);
-
-                        .mat-datetimepicker-calendar-body-label {
-                            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                        }
-
-                        .mat-datetimepicker-calendar-body-cell {
-                            // @include state-weak-default($pepperi-theme);
-
-                            &:hover {
-                                .mat-datetimepicker-calendar-body-cell-content {
-                                    @include state-weak-hover($pepperi-theme);
-                                }
-                            }
-
-                            &:active {
-                                .mat-datetimepicker-calendar-body-cell-content {
-                                    @include state-weak-active($pepperi-theme, color-weak, true, true);
-                                }
-                            }
-
-                            // Regular cell
-                            .mat-datetimepicker-calendar-body-cell-content {
-                                // color:burlywood ;
-                                // border-radius: 0;
-
-                                // Today cell
-                                &.mat-datetimepicker-calendar-body-today {
-                                    @include state-regular-default($pepperi-theme, true);
-
-                                    &:hover {
-                                        @include state-regular-hover($pepperi-theme, true);
-                                    }
-
-                                    &:active {
-                                        @include state-regular-focus($pepperi-theme, true);
-                                    }
-                                }
-
-                                // Active cell
-                                &.mat-datetimepicker-calendar-body-selected {
-                                    // color:white ;
-                                    @include state-strong-default($pepperi-theme);
-
-                                    &:hover {
-                                        @include state-strong-hover($pepperi-theme);
-                                    }
-
-                                    &:active {
-                                        @include state-strong-focus($pepperi-theme);
-                                    }
-                                }
-                            }
-
-                        }
-                    }
-                }
-            }
-
-            mat-datetimepicker-clock {
-                .mat-datetimepicker-clock {
-                    // background-color: yellowgreen;
-                    @include state-weak-default($pepperi-theme);
-
-                    .mat-datetimepicker-clock-center {
-                        // background-color: yellow;
-                        @include state-strong-default($pepperi-theme);
-                    }
-
-                    .mat-datetimepicker-clock-hand {
-                        // color: blue;
-                        // background-color: yellow;
-                        @include state-strong-default($pepperi-theme);
-
-                        &::before {
-                            // background-color: yellow;
-                            @include state-strong-default($pepperi-theme);
-                        }
-                    }
-
-                    .mat-datetimepicker-clock-hours,
-                    .mat-datetimepicker-clock-minutes {
-                        .mat-datetimepicker-clock-cell {
-                            color: get-pep-color($pepperi-theme, color-text, color-main);
-
-                            &:hover {
-                                @include state-weak-hover($pepperi-theme);
-                            }
-
-                            &.mat-datetimepicker-clock-cell-selected {
-                                @include state-strong-default($pepperi-theme);
-
-                                &:hover {
-                                    @include state-strong-hover($pepperi-theme);
-                                }
-
-                                &:active {
-                                    @include state-strong-focus($pepperi-theme);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+@use '../src/core/style/abstracts/variables';
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+
+::ng-deep {
+    .mat-datetimepicker-dialog {
+        max-width: 90vw !important;
+    }
+
+    .mat-datetimepicker-content {
+        border-radius: inherit;
+
+        .mat-datetimepicker-calendar-header {
+            @include mixins.state-strong-default();
+        }
+
+        .mat-datetimepicker-calendar-content {
+            .mat-month-content {
+                .mat-datetimepicker-calendar-controls {
+                    color: functions.get-pep-color(color-text, color-main);
+
+                    .mat-datetimepicker-calendar-previous-button {
+                        @include mixins.select-arrow();
+                        transform: rotate(90deg);
+
+                        svg {
+                            @include mixins.state-icon();
+                        }
+                    }
+
+                    // .mat-datetimepicker-calendar-period-button {
+                    // }
+
+                    .mat-datetimepicker-calendar-next-button {
+                        @include mixins.select-arrow();
+                        transform: rotate(-90deg);
+
+                        svg {
+                            @include mixins.state-icon();
+                        }
+                    }
+                }
+            }
+
+            mat-datetimepicker-year-view,
+            mat-datetimepicker-month-view {
+                .mat-datetimepicker-calendar-table {
+                    // Days string (sun, mon...)
+                    .mat-datetimepicker-calendar-table-header {
+                        color: functions.get-pep-color(color-text, color-dimmed);
+                    }
+
+                    // Days numbers
+                    .mat-datetimepicker-calendar-body {
+                        color: functions.get-pep-color(color-text, color-main);
+
+                        .mat-datetimepicker-calendar-body-label {
+                            color: functions.get-pep-color(color-text, color-dimmed);
+                        }
+
+                        .mat-datetimepicker-calendar-body-cell {
+                            // @include mixins.state-weak-default();
+
+                            &:hover {
+                                .mat-datetimepicker-calendar-body-cell-content {
+                                    @include mixins.state-weak-hover();
+                                }
+                            }
+
+                            &:active {
+                                .mat-datetimepicker-calendar-body-cell-content {
+                                    @include mixins.state-weak-active(color-weak, true, true);
+                                }
+                            }
+
+                            // Regular cell
+                            .mat-datetimepicker-calendar-body-cell-content {
+                                
+                                // Today cell
+                                &.mat-datetimepicker-calendar-body-today {
+                                    @include mixins.state-regular-default(true);
+
+                                    &:hover {
+                                        @include mixins.state-regular-hover(true);
+                                    }
+
+                                    &:active {
+                                        @include mixins.state-regular-focus(true);
+                                    }
+                                }
+
+                                // Active cell
+                                &.mat-datetimepicker-calendar-body-selected {
+                                    // color:white ;
+                                    @include mixins.state-strong-default();
+
+                                    &:hover {
+                                        @include mixins.state-strong-hover();
+                                    }
+
+                                    &:active {
+                                        @include mixins.state-strong-focus();
+                                    }
+                                }
+                            }
+
+                        }
+                    }
+                }
+            }
+
+            mat-datetimepicker-clock {
+                .mat-datetimepicker-clock {
+                    // background-color: yellowgreen;
+                    @include mixins.state-weak-default();
+
+                    .mat-datetimepicker-clock-center {
+                        // background-color: yellow;
+                        @include mixins.state-strong-default();
+                    }
+
+                    .mat-datetimepicker-clock-hand {
+                        // color: blue;
+                        // background-color: yellow;
+                        @include mixins.state-strong-default();
+
+                        &::before {
+                            // background-color: yellow;
+                            @include mixins.state-strong-default();
+                        }
+                    }
+
+                    .mat-datetimepicker-clock-hours,
+                    .mat-datetimepicker-clock-minutes {
+                        .mat-datetimepicker-clock-cell {
+                            color: functions.get-pep-color(color-text, color-main);
+
+                            &:hover {
+                                @include mixins.state-weak-hover();
+                            }
+
+                            &.mat-datetimepicker-clock-cell-selected {
+                                @include mixins.state-strong-default();
+
+                                &:hover {
+                                    @include mixins.state-strong-hover();
+                                }
+
+                                &:active {
+                                    @include mixins.state-strong-focus();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/date/pepperi-addons-ngx-lib-date.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepDateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":36,"character":8},{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"MatDatetimepickerModule","line":37,"character":8},{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"MatNativeDatetimeModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":39,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":40,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":45,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":46,"character":8}],"exports":[{"__symbolic":"reference","name":"PepDateComponent"}],"declarations":[{"__symbolic":"reference","name":"PepDateComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":52,"character":41}]}]}},"PepDateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"pep-date","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":21},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"DateAdapter","line":52,"character":19},"useClass":{"__symbolic":"reference","name":"ɵa"}},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":53,"character":19},"useValue":{"__symbolic":"reference","name":"ɵc"}},{"provide":{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"DatetimeAdapter","line":54,"character":19},"useClass":{"__symbolic":"reference","name":"ɵb"}},{"provide":{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"MAT_DATETIME_FORMATS","line":56,"character":19},"useValue":{"__symbolic":"reference","name":"ɵc"}}],"template":"<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-showIcon=\"showIcon\">\n        <mat-form-field appearance=\"outline\">\n            <input #input [id]=\"key\" title=\"{{ formattedValue }}\" matInput class=\"body-sm\" autocomplete=\"false\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left'}\"\n                [(ngModel)]=\"dateModel\" [ngModelOptions]=\"{standalone: true}\" [matDatetimepicker]=\"datetimePicker\"\n                [min]=\"minDate\" [max]=\"maxDate\" [required]=\"mandatory\" [disabled]=\"disabled\"\n                (dateChange)=\"onDateChange($event)\" (click)=\"openDatetimePicker(datetimePicker)\"\n                (blur)=\"onBlur($event)\" />\n            <mat-error *ngIf=\"renderError\"><span class=\"body-xs\"\n                    [title]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"\n                    [innerText]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"></span>\n            </mat-error>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'left'\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <mat-datetimepicker #datetimePicker [type]=\"showTime ? 'datetime' : 'date'\" [openOnFocus]=\"false\"\n                [touchUi]=\"true\" [timeInterval]=\"1\"></mat-datetimepicker>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: true}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: false}\"></ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled }\"\n                [ngStyle]=\"{ color: textColor }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\">{{ formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: true}\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngStyle]=\"{ color: textColor }\"\n                            [ngClass]=\"{readonly: disabled}\" title=\"{{ formattedValue }}\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"minDateValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"maxDateValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"renderError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"renderSymbol":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":150,"character":5}}]}],"datetimePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":152,"character":5},"arguments":["datetimePicker"]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":154,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":166,"character":25},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":167,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":168,"character":34},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":169,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":170,"character":26}]}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setFormattedValueFromModel":[{"__symbolic":"method"}],"setDateModel":[{"__symbolic":"method"}],"openDatetimePicker":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onDateChange":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MomentDateAdapter","line":6,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":7,"character":17}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":7,"character":29},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":7,"character":36}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}]}},"ɵb":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@mat-datetimepicker/moment","name":"MomentDatetimeAdapter","line":13,"character":46},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":17}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":14,"character":29},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":14,"character":36}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}]}},"ɵc":{"parse":{"dateInput":"L","monthInput":"MMMM","timeInput":"LT","datetimeInput":"L LT"},"display":{"dateInput":"L","monthInput":"MMMM","timeInput":"LT","datetimeInput":"L LT","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY","popupHeaderDateLabel":"ddd, DD MMM"}}},"origins":{"PepDateModule":"./date.module","PepDateComponent":"./date.component","ɵa":"./date.model","ɵb":"./date.model","ɵc":"./date.model"},"importAs":"@pepperi-addons/ngx-lib/date"}
+{"__symbolic":"module","version":4,"metadata":{"PepDateModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":36,"character":8},{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"MatDatetimepickerModule","line":37,"character":8},{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"MatNativeDatetimeModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":39,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":40,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":45,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":46,"character":8}],"exports":[{"__symbolic":"reference","name":"PepDateComponent"}],"declarations":[{"__symbolic":"reference","name":"PepDateComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":52,"character":41}]}]}},"PepDateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"pep-date","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":21},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"DateAdapter","line":52,"character":19},"useClass":{"__symbolic":"reference","name":"ɵa"}},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":53,"character":19},"useValue":{"__symbolic":"reference","name":"ɵc"}},{"provide":{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"DatetimeAdapter","line":54,"character":19},"useClass":{"__symbolic":"reference","name":"ɵb"}},{"provide":{"__symbolic":"reference","module":"@mat-datetimepicker/core","name":"MAT_DATETIME_FORMATS","line":56,"character":19},"useValue":{"__symbolic":"reference","name":"ɵc"}}],"template":"<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-showIcon=\"showIcon\">\n        <mat-form-field appearance=\"outline\">\n            <input #input [id]=\"key\" title=\"{{ formattedValue }}\" matInput class=\"body-sm\" autocomplete=\"false\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left'}\"\n                [(ngModel)]=\"dateModel\" [ngModelOptions]=\"{standalone: true}\" [matDatetimepicker]=\"datetimePicker\"\n                [min]=\"minDate\" [max]=\"maxDate\" [required]=\"mandatory\" [disabled]=\"disabled\"\n                (dateChange)=\"onDateChange($event)\" (click)=\"openDatetimePicker(datetimePicker)\"\n                (blur)=\"onBlur($event)\" />\n            <mat-error *ngIf=\"renderError\"><span class=\"body-xs\"\n                    [title]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"\n                    [innerText]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"></span>\n            </mat-error>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'left'\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <mat-datetimepicker #datetimePicker [type]=\"showTime ? 'datetime' : 'date'\" [openOnFocus]=\"false\"\n                [touchUi]=\"true\" [timeInterval]=\"1\"></mat-datetimepicker>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: true}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: false}\"></ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled }\"\n                [ngStyle]=\"{ color: textColor }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\">{{ formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: true}\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngStyle]=\"{ color: textColor }\"\n                            [ngClass]=\"{readonly: disabled}\" title=\"{{ formattedValue }}\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .mat-datetimepicker-toggle.mat-button,::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .mat-datetimepicker-toggle.mat-button{padding:0}","::ng-deep .mat-datetimepicker-dialog{max-width:90vw!important}::ng-deep .mat-datetimepicker-content{border-radius:inherit}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header{font-weight:600;font-weight:var(--pep-font-weight-bold,600);background:#5d8109;background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),var(--pep-color-strong-l,27%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);color:#fff;color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header .svg-icon.stroke{fill:unset;stroke:#fff;stroke:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");transform:rotate(90deg)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg.stroke{fill:unset;stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:hover{fill:rgba(26,26,26,.97);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:hover.stroke{fill:unset;stroke:rgba(26,26,26,.97);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:active{fill:#1a1a1a;fill:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:active.stroke{fill:unset;stroke:#1a1a1a;stroke:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:disabled{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:disabled.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");transform:rotate(-90deg)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg.stroke{fill:unset;stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:hover{fill:rgba(26,26,26,.97);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:hover.stroke{fill:unset;stroke:rgba(26,26,26,.97);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:active{fill:#1a1a1a;fill:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:active.stroke{fill:unset;stroke:#1a1a1a;stroke:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:disabled{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:disabled.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-table-header,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-table-header{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-label,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-label{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:hover .mat-datetimepicker-calendar-body-cell-content,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:hover .mat-datetimepicker-calendar-body-cell-content{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content:not(.keep-background-on-focus),::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:hover{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16);border:1px solid hsl(0,0%,calc(10% + 20%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 20%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:active{background:#e0e0e0;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%));box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected{font-weight:600;font-weight:var(--pep-font-weight-bold,600);background:#5d8109;background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),var(--pep-color-strong-l,27%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);color:#fff;color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon.stroke,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon.stroke{fill:unset;stroke:#fff;stroke:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:hover{background:hsl(78,87%,calc(27% - 8%));background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:active{background:hsl(78,87%,calc(27% - 15%));background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center{font-weight:600;font-weight:var(--pep-font-weight-bold,600);background:#5d8109;background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),var(--pep-color-strong-l,27%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);color:#fff;color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center .svg-icon.stroke{fill:unset;stroke:#fff;stroke:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand{font-weight:600;font-weight:var(--pep-font-weight-bold,600);background:#5d8109;background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),var(--pep-color-strong-l,27%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);color:#fff;color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand .svg-icon.stroke{fill:unset;stroke:#fff;stroke:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before{font-weight:600;font-weight:var(--pep-font-weight-bold,600);background:#5d8109;background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),var(--pep-color-strong-l,27%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);color:#fff;color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before .svg-icon.stroke{fill:unset;stroke:#fff;stroke:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected{font-weight:600;font-weight:var(--pep-font-weight-bold,600);background:#5d8109;background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),var(--pep-color-strong-l,27%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);color:#fff;color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon.stroke,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon.stroke{fill:unset;stroke:#fff;stroke:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:hover{background:hsl(78,87%,calc(27% - 8%));background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:active{background:hsl(78,87%,calc(27% - 15%));background:hsl(var(--pep-color-strong-h,78),var(--pep-color-strong-s,87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"minDateValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"maxDateValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":5}}]}],"renderError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"renderSymbol":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":150,"character":5}}]}],"datetimePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":152,"character":5},"arguments":["datetimePicker"]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":154,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":166,"character":25},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":167,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":168,"character":34},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":169,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":170,"character":26}]}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setFormattedValueFromModel":[{"__symbolic":"method"}],"setDateModel":[{"__symbolic":"method"}],"openDatetimePicker":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onDateChange":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MomentDateAdapter","line":6,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":7,"character":17}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":7,"character":29},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":7,"character":36}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}]}},"ɵb":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@mat-datetimepicker/moment","name":"MomentDatetimeAdapter","line":13,"character":46},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":17}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":14,"character":29},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":14,"character":36}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}]}},"ɵc":{"parse":{"dateInput":"L","monthInput":"MMMM","timeInput":"LT","datetimeInput":"L LT"},"display":{"dateInput":"L","monthInput":"MMMM","timeInput":"LT","datetimeInput":"L LT","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY","popupHeaderDateLabel":"ddd, DD MMM"}}},"origins":{"PepDateModule":"./date.module","PepDateComponent":"./date.component","ɵa":"./date.model","ɵb":"./date.model","ɵc":"./date.model"},"importAs":"@pepperi-addons/ngx-lib/date"}

package/dialog/dialog.component.theme.scss

@@ -1,5 +1,5 @@
-@mixin pep-dialog-component-theme($pepperi-theme) {
-    .pepperi-dialog, .pep-dialog {
-        box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard) !important;
-    }
+@use '../src/core/style/abstracts/functions';
+
+.pepperi-dialog, .pep-dialog {
+    box-shadow: functions.get-pep-shadow(shadow-sm, hard) !important;
 }

package/dialog/pepperi-addons-ngx-lib-dialog.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":26,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8}],"exports":[{"__symbolic":"reference","name":"PepDialogComponent"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"PepDialogComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}],"providers":[{"__symbolic":"reference","name":"PepDialogService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":37,"character":41}]}]}},"PepDialogSizeType":{"__symbolic":"interface"},"PepDialogActionsType":{"__symbolic":"interface"},"PepDialogActionButton":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null,{"__symbolic":"error","message":"Expression form not supported","line":19,"character":54,"module":"./dialog.model"}]}]}},"PepDialogData":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":35,"character":25,"module":"./dialog.model"}]}]}},"PepDialogComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"pep-dialog","template":"<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>","styles":[""]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"showClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}]}},"PepDialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":17,"character":24},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":18,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":19,"character":25}]}],"fixConfigIfNeeded":[{"__symbolic":"method"}],"getDialogConfig":[{"__symbolic":"method"}],"openDefaultDialog":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":7,"character":19},"member":"None"},"template":"<pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\"\n    [title]=\"data?.title\">\n    <div pep-dialog-content [innerHtml]=\"data?.content | pepSafeHtml\"></div>\n    <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n        <ng-container [ngSwitch]=\"data?.actionsType\">\n            <ng-container *ngSwitchCase=\"'close'\">\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-continue'\">\n                <button mat-button [mat-dialog-close]=\"false\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.CONTINUE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-ok'\">\n                <button mat-button [mat-dialog-close]=\"false\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.OK' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-delete'\">\n                <button mat-button [mat-dialog-close]=\"false\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md strong caution\">\n                    {{ 'ACTIONS.DELETE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'custom'\">\n                <ng-container *ngFor=\"let btn of data?.actionButtons\">\n                    <!-- [mat-dialog-close]=\"btn?.callback ? btn.callback : null\" -->\n                    <button mat-button (click)=\"onActionButtonClicked(btn)\" class=\"pep-spacing-element pep-button md\"\n                        [ngClass]=\"btn?.className != '' ? btn?.className : 'weak'\">\n                        {{ btn?.title }}\n                    </button>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</pep-dialog>","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":11,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":11,"character":16}]}],null],"parameters":[{"__symbolic":"reference","name":"PepDialogData"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"onActionButtonClicked":[{"__symbolic":"method"}]}}},"origins":{"PepDialogModule":"./dialog.module","PepDialogSizeType":"./dialog.model","PepDialogActionsType":"./dialog.model","PepDialogActionButton":"./dialog.model","PepDialogData":"./dialog.model","PepDialogComponent":"./dialog.component","PepDialogService":"./dialog.service","ɵa":"./default-dialog.component"},"importAs":"@pepperi-addons/ngx-lib/dialog"}
+{"__symbolic":"module","version":4,"metadata":{"PepDialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":26,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8}],"exports":[{"__symbolic":"reference","name":"PepDialogComponent"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"PepDialogComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}],"providers":[{"__symbolic":"reference","name":"PepDialogService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":37,"character":41}]}]}},"PepDialogSizeType":{"__symbolic":"interface"},"PepDialogActionsType":{"__symbolic":"interface"},"PepDialogActionButton":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null,{"__symbolic":"error","message":"Expression form not supported","line":19,"character":54,"module":"./dialog.model"}]}]}},"PepDialogData":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":35,"character":25,"module":"./dialog.model"}]}]}},"PepDialogComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"pep-dialog","template":"<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>","styles":["",".pep-dialog,.pepperi-dialog{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32)!important;box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)!important}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"showClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}]}},"PepDialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":17,"character":24},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":18,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":19,"character":25}]}],"fixConfigIfNeeded":[{"__symbolic":"method"}],"getDialogConfig":[{"__symbolic":"method"}],"openDefaultDialog":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":7,"character":19},"member":"None"},"template":"<pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\"\n    [title]=\"data?.title\">\n    <div pep-dialog-content [innerHtml]=\"data?.content | pepSafeHtml\"></div>\n    <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n        <ng-container [ngSwitch]=\"data?.actionsType\">\n            <ng-container *ngSwitchCase=\"'close'\">\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-continue'\">\n                <button mat-button [mat-dialog-close]=\"false\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.CONTINUE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-ok'\">\n                <button mat-button [mat-dialog-close]=\"false\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.OK' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-delete'\">\n                <button mat-button [mat-dialog-close]=\"false\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button [mat-dialog-close]=\"true\" class=\"pep-spacing-element pep-button md strong caution\">\n                    {{ 'ACTIONS.DELETE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'custom'\">\n                <ng-container *ngFor=\"let btn of data?.actionButtons\">\n                    <!-- [mat-dialog-close]=\"btn?.callback ? btn.callback : null\" -->\n                    <button mat-button (click)=\"onActionButtonClicked(btn)\" class=\"pep-spacing-element pep-button md\"\n                        [ngClass]=\"btn?.className != '' ? btn?.className : 'weak'\">\n                        {{ btn?.title }}\n                    </button>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</pep-dialog>","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":11,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":11,"character":16}]}],null],"parameters":[{"__symbolic":"reference","name":"PepDialogData"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"onActionButtonClicked":[{"__symbolic":"method"}]}}},"origins":{"PepDialogModule":"./dialog.module","PepDialogSizeType":"./dialog.model","PepDialogActionsType":"./dialog.model","PepDialogActionButton":"./dialog.model","PepDialogData":"./dialog.model","PepDialogComponent":"./dialog.component","PepDialogService":"./dialog.service","ɵa":"./default-dialog.component"},"importAs":"@pepperi-addons/ngx-lib/dialog"}