@indice/ng-components 0.5.0-beta.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1267,13 +1267,13 @@ class DatepickerComponent {
|
|
|
1267
1267
|
return outOfRange;
|
|
1268
1268
|
}
|
|
1269
1269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DatepickerComponent, isStandalone: false, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
1271
1271
|
{
|
|
1272
1272
|
provide: NG_VALUE_ACCESSOR,
|
|
1273
1273
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1274
1274
|
multi: true
|
|
1275
1275
|
}
|
|
1276
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\"
|
|
1276
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\" (clickOutside)=\"closeCalendar()\">\n <div class=\"datepicker-container\">\n @if(!inline) {\n <input #dateInput [readonly]=\"readonly\" name=\"dateInput\" (blur)=\"onBlur($event)\" id=\"dateInput\" title=\"dateInput\" (focus)=\"showCalendar = false\" [value]=\"value | date: displayFormat\"\n class=\"datepicker-input\" [class.cursor-not-allowed]=\"disabled\" [placeholder]=\"placeholder\">\n <button type=\"button\" class=\"datepicker-button\" [disabled]=\"disabled\" (click)=\"openCalendar()\" [class.cursor-not-allowed]=\"disabled\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n }\n </div>\n @if(showCalendar || inline) {\n <div [class.absolute]=\"!inline\" class=\"datepicker-background\" style=\"height:18rem;min-width:16rem;\" name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\" (click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">{{monthNames[month]}}</span><span class=\"datepicker-selected-year\">{{year}}</span>\n </button>\n </div>\n @if(!showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousMonth();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\"stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextMonth()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n @if(showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousYear();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextYear()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n </div>\n @if(!showYears) {\n <div class=\"datepicker-wrapper\">\n @for(day of dayNames; track day) {\n <div class=\"datepicker-day-name\" style=\"width: 14.28%\">{{day}}</div>\n }\n </div>\n }\n @if(showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(year of showCalendarYears; track year) {\n <div style=\"width: 18.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\" class=\"datepicker-year\" [class.selected]=\"year.selected\" [class.not-selected]=\"!year.selected\">{{year.year}}</div>\n </div>\n }\n </div>\n }\n @if(!showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(blankday of blankDays; track blankday) {\n <div style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\n }\n @for(date of calendarDates; track date) {\n <div style=\"width: 14.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [class.out-of-range]=\"outOfRangeDate(date)\" [class.selected]=\"date.selected\" [class.not-selected]=\"!date.selected\">{{date.day}}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>", dependencies: [{ kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
1277
1277
|
}
|
|
1278
1278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1279
1279
|
type: Component,
|
|
@@ -1283,7 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1283
1283
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1284
1284
|
multi: true
|
|
1285
1285
|
}
|
|
1286
|
-
], standalone: false, template: "<div [class.relative]=\"!inline\"
|
|
1286
|
+
], standalone: false, template: "<div [class.relative]=\"!inline\" (clickOutside)=\"closeCalendar()\">\n <div class=\"datepicker-container\">\n @if(!inline) {\n <input #dateInput [readonly]=\"readonly\" name=\"dateInput\" (blur)=\"onBlur($event)\" id=\"dateInput\" title=\"dateInput\" (focus)=\"showCalendar = false\" [value]=\"value | date: displayFormat\"\n class=\"datepicker-input\" [class.cursor-not-allowed]=\"disabled\" [placeholder]=\"placeholder\">\n <button type=\"button\" class=\"datepicker-button\" [disabled]=\"disabled\" (click)=\"openCalendar()\" [class.cursor-not-allowed]=\"disabled\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n }\n </div>\n @if(showCalendar || inline) {\n <div [class.absolute]=\"!inline\" class=\"datepicker-background\" style=\"height:18rem;min-width:16rem;\" name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\" (click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">{{monthNames[month]}}</span><span class=\"datepicker-selected-year\">{{year}}</span>\n </button>\n </div>\n @if(!showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousMonth();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\"stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextMonth()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n @if(showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousYear();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextYear()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n </div>\n @if(!showYears) {\n <div class=\"datepicker-wrapper\">\n @for(day of dayNames; track day) {\n <div class=\"datepicker-day-name\" style=\"width: 14.28%\">{{day}}</div>\n }\n </div>\n }\n @if(showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(year of showCalendarYears; track year) {\n <div style=\"width: 18.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\" class=\"datepicker-year\" [class.selected]=\"year.selected\" [class.not-selected]=\"!year.selected\">{{year.year}}</div>\n </div>\n }\n </div>\n }\n @if(!showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(blankday of blankDays; track blankday) {\n <div style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\n }\n @for(date of calendarDates; track date) {\n <div style=\"width: 14.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [class.out-of-range]=\"outOfRangeDate(date)\" [class.selected]=\"date.selected\" [class.not-selected]=\"!date.selected\">{{date.day}}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>" }]
|
|
1287
1287
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1288
1288
|
type: Inject,
|
|
1289
1289
|
args: [LOCALE_ID]
|
|
@@ -1963,7 +1963,6 @@ class SidePaneComponent {
|
|
|
1963
1963
|
constructor(router, document) {
|
|
1964
1964
|
this.router = router;
|
|
1965
1965
|
this.document = document;
|
|
1966
|
-
// tslint:disable-next-line:no-input-rename
|
|
1967
1966
|
this.showPane = false;
|
|
1968
1967
|
this.sizeContainerStyle = 'side-pane-box-size';
|
|
1969
1968
|
this.overlayStyle = 'side-pane-overlay';
|
|
@@ -1972,10 +1971,8 @@ class SidePaneComponent {
|
|
|
1972
1971
|
this.onClose = new EventEmitter();
|
|
1973
1972
|
}
|
|
1974
1973
|
ngOnChanges(changes) {
|
|
1975
|
-
if (changes && changes
|
|
1976
|
-
console.log('ngOnChanges ', changes);
|
|
1974
|
+
if (changes && changes['size'])
|
|
1977
1975
|
this.initPane();
|
|
1978
|
-
}
|
|
1979
1976
|
}
|
|
1980
1977
|
ngOnDestroy() {
|
|
1981
1978
|
}
|
|
@@ -1987,9 +1984,7 @@ class SidePaneComponent {
|
|
|
1987
1984
|
}
|
|
1988
1985
|
initPane(state) {
|
|
1989
1986
|
//priority to property for size
|
|
1990
|
-
console.log('initPane', 'size:', this.size, 'state size', state?.paneSize);
|
|
1991
1987
|
this.sizeContainerStyle = this.sizeToClass(this.size ?? state?.paneSize);
|
|
1992
|
-
console.log('calculated sizeContainerStyle', this.sizeContainerStyle);
|
|
1993
1988
|
this.overlayStyle = this.overlayToClass(state?.paneOverlay);
|
|
1994
1989
|
}
|
|
1995
1990
|
overlayToClass(overlay) {
|
|
@@ -2037,11 +2032,11 @@ class SidePaneComponent {
|
|
|
2037
2032
|
this.onComplete.emit(true);
|
|
2038
2033
|
}
|
|
2039
2034
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2035
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SidePaneComponent, isStandalone: false, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], size: ["pane-size", "size"], params: "params", template: "template" }, outputs: { onComplete: "onComplete", onOpen: "onOpen", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "@if(showPane) {\n<div class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\n <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\n <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\n <div [class]=\"sizeContainerStyle\">\n <div class=\"side-pane\">\n @if(template) { <ng-container *ngTemplateOutlet=\"template; context: {params: params}\"></ng-container> }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
2041
2036
|
}
|
|
2042
2037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, decorators: [{
|
|
2043
2038
|
type: Component,
|
|
2044
|
-
args: [{ selector: 'lib-side-pane', standalone: false, template: "<div
|
|
2039
|
+
args: [{ selector: 'lib-side-pane', standalone: false, template: "@if(showPane) {\n<div class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\n <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\n <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\n <div [class]=\"sizeContainerStyle\">\n <div class=\"side-pane\">\n @if(template) { <ng-container *ngTemplateOutlet=\"template; context: {params: params}\"></ng-container> }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n}\n" }]
|
|
2045
2040
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
2046
2041
|
type: Inject,
|
|
2047
2042
|
args: [DOCUMENT]
|
|
@@ -2057,6 +2052,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
2057
2052
|
type: Output
|
|
2058
2053
|
}], onClose: [{
|
|
2059
2054
|
type: Output
|
|
2055
|
+
}], params: [{
|
|
2056
|
+
type: Input,
|
|
2057
|
+
args: ['params']
|
|
2058
|
+
}], template: [{
|
|
2059
|
+
type: Input
|
|
2060
2060
|
}] } });
|
|
2061
2061
|
|
|
2062
2062
|
class NavLinksListComponent {
|
|
@@ -3753,18 +3753,27 @@ class ShellLayoutComponent {
|
|
|
3753
3753
|
}
|
|
3754
3754
|
}
|
|
3755
3755
|
}
|
|
3756
|
+
onSidePaneActivated($event) {
|
|
3757
|
+
this.rightPane?.onSidePaneActivated($event);
|
|
3758
|
+
}
|
|
3759
|
+
onSidePaneDeactivated($event) {
|
|
3760
|
+
this.rightPane?.onSidePaneDeactivated($event);
|
|
3761
|
+
}
|
|
3756
3762
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: ComponentLoaderFactory }, { token: SHELL_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellLayoutComponent, isStandalone: false, selector: "lib-shell-layout", inputs: { busy: "busy", sidebarFooterTemplate: "sidebarFooterTemplate" }, viewQueries: [{ propertyName: "_dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\n </div>\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\" [busy]=\"busy\"\n [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\n </lib-shell-sidebar-layout>\n </div>\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\"\n (activate)=\"
|
|
3763
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellLayoutComponent, isStandalone: false, selector: "lib-shell-layout", inputs: { busy: "busy", sidebarFooterTemplate: "sidebarFooterTemplate" }, viewQueries: [{ propertyName: "rightPane", first: true, predicate: ["rightPane"], descendants: true }, { propertyName: "_dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\n </div>\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\" [busy]=\"busy\"\n [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\n </lib-shell-sidebar-layout>\n </div>\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\">\n </router-outlet>\n </lib-side-pane>\n <lib-toaster-container></lib-toaster-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config", "sidebarFooterTemplate", "busy"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config", "busy"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size", "params", "template"], outputs: ["onComplete", "onOpen", "onClose"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] }); }
|
|
3758
3764
|
}
|
|
3759
3765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
3760
3766
|
type: Component,
|
|
3761
|
-
args: [{ selector: 'lib-shell-layout', standalone: false, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\n </div>\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\" [busy]=\"busy\"\n [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\n </lib-shell-sidebar-layout>\n </div>\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\"\n (activate)=\"
|
|
3767
|
+
args: [{ selector: 'lib-shell-layout', standalone: false, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\n </div>\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\" [busy]=\"busy\"\n [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\n </lib-shell-sidebar-layout>\n </div>\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\">\n </router-outlet>\n </lib-side-pane>\n <lib-toaster-container></lib-toaster-container>\n</div>" }]
|
|
3762
3768
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: ComponentLoaderFactory }, { type: undefined, decorators: [{
|
|
3763
3769
|
type: Inject,
|
|
3764
3770
|
args: [SHELL_CONFIG]
|
|
3765
3771
|
}] }], propDecorators: { _dynamicComponentHosts: [{
|
|
3766
3772
|
type: ViewChildren,
|
|
3767
3773
|
args: [DynamicComponentHostDirective]
|
|
3774
|
+
}], rightPane: [{
|
|
3775
|
+
type: ViewChild,
|
|
3776
|
+
args: ['rightPane']
|
|
3768
3777
|
}], busy: [{
|
|
3769
3778
|
type: Input
|
|
3770
3779
|
}], sidebarFooterTemplate: [{
|
|
@@ -3906,6 +3915,7 @@ class ModelViewLayoutComponent {
|
|
|
3906
3915
|
this.icon = null;
|
|
3907
3916
|
this.busy = false;
|
|
3908
3917
|
this.actions = null;
|
|
3918
|
+
this.onAction = new EventEmitter();
|
|
3909
3919
|
this.optionsLoaded = false;
|
|
3910
3920
|
this._options = [];
|
|
3911
3921
|
}
|
|
@@ -3939,12 +3949,15 @@ class ModelViewLayoutComponent {
|
|
|
3939
3949
|
navigateLink(link) {
|
|
3940
3950
|
this.router.navigate([link], { relativeTo: this.route });
|
|
3941
3951
|
}
|
|
3952
|
+
emitActionClick(action) {
|
|
3953
|
+
this.onAction.emit(action);
|
|
3954
|
+
}
|
|
3942
3955
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3943
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModelViewLayoutComponent, isStandalone: false, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\n <main class=\"model-view-container\">\n <div class=\"model-view-container-inner\">\n <aside class=\"model-view-aside\">\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n <div class=\"model-view-aside-header-container\">\n <div class=\"model-view-aside-header-container-inner\">\n <ng-content *ngIf=\"!busy\"></ng-content>\n\n <ng-container *ngIf=\"busy\">\n <div class=\"flex items-center p-5\">\n <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\n <div>\n <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\n <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <!-- menu items -->\n <div class=\"model-view-menu-container-mobile\">\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\n </div>\n <div class=\"model-view-menu-container\">\n <nav class=\"model-view-menu-nav\">\n <div class=\"model-view-menu-item\">\n <ng-container *ngFor=\"let section of primary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\n \n </div>\n <a *ngIf=\"section.type !== 'separator'\"\n href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n <div class=\"model-view-menu-item-far\">\n <ng-container *ngFor=\"let section of secondary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\n <a *ngIf=\"section.type !== 'separator'\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n </nav>\n </div>\n </div>\n </section>\n </aside>\n <div class=\"model-view-details-container\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
|
|
3956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModelViewLayoutComponent, isStandalone: false, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" (onAction)=\"emitActionClick($event)\" [icon]=\"icon\" [busy]=\"busy\">\n <main class=\"model-view-container\">\n <div class=\"model-view-container-inner\">\n <aside class=\"model-view-aside\">\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n <div class=\"model-view-aside-header-container\">\n <div class=\"model-view-aside-header-container-inner\">\n <ng-content *ngIf=\"!busy\"></ng-content>\n\n <ng-container *ngIf=\"busy\">\n <div class=\"flex items-center p-5\">\n <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\n <div>\n <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\n <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <!-- menu items -->\n <div class=\"model-view-menu-container-mobile\">\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\n </div>\n <div class=\"model-view-menu-container\">\n <nav class=\"model-view-menu-nav\">\n <div class=\"model-view-menu-item\">\n <ng-container *ngFor=\"let section of primary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\n \n </div>\n <a *ngIf=\"section.type !== 'separator'\"\n href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n <div class=\"model-view-menu-item-far\">\n <ng-container *ngFor=\"let section of secondary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\n <a *ngIf=\"section.type !== 'separator'\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n </nav>\n </div>\n </div>\n </section>\n </aside>\n <div class=\"model-view-details-container\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
|
|
3944
3957
|
}
|
|
3945
3958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
|
|
3946
3959
|
type: Component,
|
|
3947
|
-
args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\n <main class=\"model-view-container\">\n <div class=\"model-view-container-inner\">\n <aside class=\"model-view-aside\">\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n <div class=\"model-view-aside-header-container\">\n <div class=\"model-view-aside-header-container-inner\">\n <ng-content *ngIf=\"!busy\"></ng-content>\n\n <ng-container *ngIf=\"busy\">\n <div class=\"flex items-center p-5\">\n <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\n <div>\n <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\n <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <!-- menu items -->\n <div class=\"model-view-menu-container-mobile\">\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\n </div>\n <div class=\"model-view-menu-container\">\n <nav class=\"model-view-menu-nav\">\n <div class=\"model-view-menu-item\">\n <ng-container *ngFor=\"let section of primary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\n \n </div>\n <a *ngIf=\"section.type !== 'separator'\"\n href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n <div class=\"model-view-menu-item-far\">\n <ng-container *ngFor=\"let section of secondary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\n <a *ngIf=\"section.type !== 'separator'\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n </nav>\n </div>\n </div>\n </section>\n </aside>\n <div class=\"model-view-details-container\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n" }]
|
|
3960
|
+
args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" (onAction)=\"emitActionClick($event)\" [icon]=\"icon\" [busy]=\"busy\">\n <main class=\"model-view-container\">\n <div class=\"model-view-container-inner\">\n <aside class=\"model-view-aside\">\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n <div class=\"model-view-aside-header-container\">\n <div class=\"model-view-aside-header-container-inner\">\n <ng-content *ngIf=\"!busy\"></ng-content>\n\n <ng-container *ngIf=\"busy\">\n <div class=\"flex items-center p-5\">\n <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\n <div>\n <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\n <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <!-- menu items -->\n <div class=\"model-view-menu-container-mobile\">\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\n </div>\n <div class=\"model-view-menu-container\">\n <nav class=\"model-view-menu-nav\">\n <div class=\"model-view-menu-item\">\n <ng-container *ngFor=\"let section of primary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\n \n </div>\n <a *ngIf=\"section.type !== 'separator'\"\n href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n <div class=\"model-view-menu-item-far\">\n <ng-container *ngFor=\"let section of secondary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\n <a *ngIf=\"section.type !== 'separator'\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n </nav>\n </div>\n </div>\n </section>\n </aside>\n <div class=\"model-view-details-container\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n" }]
|
|
3948
3961
|
}], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { title: [{
|
|
3949
3962
|
type: Input
|
|
3950
3963
|
}], primary: [{
|
|
@@ -3962,6 +3975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
3962
3975
|
type: Input
|
|
3963
3976
|
}], actions: [{
|
|
3964
3977
|
type: Input
|
|
3978
|
+
}], onAction: [{
|
|
3979
|
+
type: Output
|
|
3965
3980
|
}] } });
|
|
3966
3981
|
|
|
3967
3982
|
class SideViewLayoutComponent {
|
|
@@ -4094,9 +4109,6 @@ class FormLayoutComponent {
|
|
|
4094
4109
|
).subscribe();
|
|
4095
4110
|
}
|
|
4096
4111
|
}
|
|
4097
|
-
onSidePaneDeactivated($event) {
|
|
4098
|
-
this.onComplete.emit(true);
|
|
4099
|
-
}
|
|
4100
4112
|
emitActionClick(action) {
|
|
4101
4113
|
this.onAction.emit(action);
|
|
4102
4114
|
}
|
|
@@ -4114,15 +4126,25 @@ class FormLayoutComponent {
|
|
|
4114
4126
|
this.router$.navigate([action.link]);
|
|
4115
4127
|
}
|
|
4116
4128
|
}
|
|
4129
|
+
onSidePaneDeactivated($event) {
|
|
4130
|
+
this.formPane?.onSidePaneDeactivated($event);
|
|
4131
|
+
this.onComplete.emit(true);
|
|
4132
|
+
}
|
|
4133
|
+
onSidePaneActivated($event) {
|
|
4134
|
+
this.formPane?.onSidePaneActivated($event);
|
|
4135
|
+
}
|
|
4117
4136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FormLayoutComponent, isStandalone: false, selector: "lib-form-layout", inputs: { title: "title", image: "image", icon: "icon", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"flex\">\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\n <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\n </div>\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\n <i [class]=\"icon\" class=\"form-header-icon\"></i>\n </div>\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">{{ title }}</h3>\n <p class=\"form-subtitle\">{{ subTitle }}</p>\n </div>\n </div>\n \n <div class=\"form-header-actions\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\n </svg>-->\n </div>\n <input id=\"search\"\n #search\n class=\"form-search-input\"\n [placeholder]=\"searchPlaceholder\"\n type=\"search\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\">\n </div>\n <button type=\"button\"\n href=\"#\"\n class=\"btn-form-view-header-search\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\"\n href=\"#\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button type=\"button\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"form-content-container\">\n <div [ngClass]=\"{'form-content-container-inner': actions}\">\n <ng-content></ng-content>\n </div>\n </div>\n <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n <router-outlet name=\"formRightPane\"\n (activate)=\"
|
|
4137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FormLayoutComponent, isStandalone: false, selector: "lib-form-layout", inputs: { title: "title", image: "image", icon: "icon", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }, { propertyName: "formPane", first: true, predicate: ["formPane"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"flex\">\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\n <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\n </div>\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\n <i [class]=\"icon\" class=\"form-header-icon\"></i>\n </div>\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">{{ title }}</h3>\n <p class=\"form-subtitle\">{{ subTitle }}</p>\n </div>\n </div>\n \n <div class=\"form-header-actions\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\n </svg>-->\n </div>\n <input id=\"search\"\n #search\n class=\"form-search-input\"\n [placeholder]=\"searchPlaceholder\"\n type=\"search\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\">\n </div>\n <button type=\"button\"\n href=\"#\"\n class=\"btn-form-view-header-search\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\"\n href=\"#\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button type=\"button\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"form-content-container\">\n <div [ngClass]=\"{'form-content-container-inner': actions}\">\n <ng-content></ng-content>\n </div>\n </div>\n <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n <router-outlet name=\"formRightPane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size", "params", "template"], outputs: ["onComplete", "onOpen", "onClose"] }] }); }
|
|
4119
4138
|
}
|
|
4120
4139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, decorators: [{
|
|
4121
4140
|
type: Component,
|
|
4122
|
-
args: [{ selector: 'lib-form-layout', standalone: false, template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"flex\">\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\n <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\n </div>\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\n <i [class]=\"icon\" class=\"form-header-icon\"></i>\n </div>\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">{{ title }}</h3>\n <p class=\"form-subtitle\">{{ subTitle }}</p>\n </div>\n </div>\n \n <div class=\"form-header-actions\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\n </svg>-->\n </div>\n <input id=\"search\"\n #search\n class=\"form-search-input\"\n [placeholder]=\"searchPlaceholder\"\n type=\"search\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\">\n </div>\n <button type=\"button\"\n href=\"#\"\n class=\"btn-form-view-header-search\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\"\n href=\"#\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button type=\"button\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"form-content-container\">\n <div [ngClass]=\"{'form-content-container-inner': actions}\">\n <ng-content></ng-content>\n </div>\n </div>\n <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n <router-outlet name=\"formRightPane\"\n (activate)=\"
|
|
4141
|
+
args: [{ selector: 'lib-form-layout', standalone: false, template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"flex\">\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\n <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\n </div>\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\n <i [class]=\"icon\" class=\"form-header-icon\"></i>\n </div>\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">{{ title }}</h3>\n <p class=\"form-subtitle\">{{ subTitle }}</p>\n </div>\n </div>\n \n <div class=\"form-header-actions\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\n </svg>-->\n </div>\n <input id=\"search\"\n #search\n class=\"form-search-input\"\n [placeholder]=\"searchPlaceholder\"\n type=\"search\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\">\n </div>\n <button type=\"button\"\n href=\"#\"\n class=\"btn-form-view-header-search\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\"\n href=\"#\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button type=\"button\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"form-content-container\">\n <div [ngClass]=\"{'form-content-container-inner': actions}\">\n <ng-content></ng-content>\n </div>\n </div>\n <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n <router-outlet name=\"formRightPane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n</div>\n" }]
|
|
4123
4142
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { searchInput$: [{
|
|
4124
4143
|
type: ViewChild,
|
|
4125
4144
|
args: ['search']
|
|
4145
|
+
}], formPane: [{
|
|
4146
|
+
type: ViewChild,
|
|
4147
|
+
args: ['formPane']
|
|
4126
4148
|
}], title: [{
|
|
4127
4149
|
type: Input
|
|
4128
4150
|
}], image: [{
|