@ecodev/natural 58.0.0 → 58.0.2
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.
- package/esm2022/lib/modules/avatar/component/avatar.component.mjs +3 -3
- package/esm2022/lib/modules/avatar/service/avatar.service.mjs +8 -10
- package/esm2022/lib/modules/file/component/file.component.mjs +4 -4
- package/esm2022/lib/modules/fixed-button/fixed-button.component.mjs +2 -2
- package/esm2022/lib/modules/search/dropdown-container/dropdown-container.component.mjs +2 -2
- package/esm2022/lib/modules/search/facet-selector/facet-selector.component.mjs +2 -2
- package/esm2022/lib/modules/search/group/group.component.mjs +2 -2
- package/esm2022/lib/modules/search/input/input.component.mjs +2 -2
- package/esm2022/lib/modules/search/search/search.component.mjs +2 -2
- package/esm2022/lib/modules/sidenav/sidenav-container/sidenav-container.component.mjs +2 -2
- package/esm2022/lib/modules/sidenav/sidenav-content/sidenav-content.component.mjs +2 -2
- package/esm2022/lib/modules/table-button/table-button.component.mjs +2 -2
- package/esm2022/lib/services/abstract-model.service.mjs +8 -8
- package/fesm2022/ecodev-natural.mjs +37 -39
- package/fesm2022/ecodev-natural.mjs.map +1 -1
- package/lib/modules/file/component/file.component.d.ts +2 -2
- package/lib/services/abstract-model.service.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/modules/panels/_panels.external.scss +10 -10
- package/src/lib/modules/search/input/_input.theme.scss +3 -3
- package/src/lib/modules/sidenav/_sidenav.theme.scss +1 -1
- package/src/lib/styles/_table.scss +1 -1
|
@@ -2938,11 +2938,11 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
|
|
|
2938
2938
|
}
|
|
2939
2939
|
}
|
|
2940
2940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: NATURAL_DROPDOWN_CONTAINER_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n </div>\n }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;
|
|
2941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n </div>\n }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2942
2942
|
}
|
|
2943
2943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
|
|
2944
2944
|
type: Component,
|
|
2945
|
-
args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], standalone: true, imports: [PortalModule, MatButtonModule], template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n </div>\n }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;
|
|
2945
|
+
args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], standalone: true, imports: [PortalModule, MatButtonModule], template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n </div>\n }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
|
|
2946
2946
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: undefined, decorators: [{
|
|
2947
2947
|
type: Inject,
|
|
2948
2948
|
args: [NATURAL_DROPDOWN_CONTAINER_DATA]
|
|
@@ -4538,7 +4538,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
4538
4538
|
}] });
|
|
4539
4539
|
|
|
4540
4540
|
class NaturalAbstractModelService {
|
|
4541
|
-
|
|
4541
|
+
#plural;
|
|
4542
|
+
constructor(name, oneQuery, allQuery, createMutation, updateMutation, deleteMutation, plural = null) {
|
|
4542
4543
|
this.name = name;
|
|
4543
4544
|
this.oneQuery = oneQuery;
|
|
4544
4545
|
this.allQuery = allQuery;
|
|
@@ -4551,6 +4552,7 @@ class NaturalAbstractModelService {
|
|
|
4551
4552
|
this.creatingCache = new Map();
|
|
4552
4553
|
this.apollo = inject(Apollo);
|
|
4553
4554
|
this.naturalDebounceService = inject(NaturalDebounceService);
|
|
4555
|
+
this.#plural = plural ?? makePlural(this.name);
|
|
4554
4556
|
}
|
|
4555
4557
|
/**
|
|
4556
4558
|
* List of individual fields validators
|
|
@@ -4888,12 +4890,11 @@ class NaturalAbstractModelService {
|
|
|
4888
4890
|
* This is used for the unique validator
|
|
4889
4891
|
*/
|
|
4890
4892
|
count(queryVariablesManager) {
|
|
4891
|
-
const
|
|
4892
|
-
const queryName = 'Count' + upperCaseFirstLetter(plural);
|
|
4893
|
+
const queryName = 'Count' + upperCaseFirstLetter(this.#plural);
|
|
4893
4894
|
const filterType = upperCaseFirstLetter(this.name) + 'Filter';
|
|
4894
4895
|
const query = gql `
|
|
4895
4896
|
query ${queryName} ($filter: ${filterType}) {
|
|
4896
|
-
count: ${plural} (filter: $filter, pagination: {pageSize: 0, pageIndex: 0}) {
|
|
4897
|
+
count: ${this.#plural} (filter: $filter, pagination: {pageSize: 0, pageIndex: 0}) {
|
|
4897
4898
|
length
|
|
4898
4899
|
}
|
|
4899
4900
|
}`;
|
|
@@ -4936,8 +4937,7 @@ class NaturalAbstractModelService {
|
|
|
4936
4937
|
* This is used to extract only the array of fetched objects out of the entire fetched data
|
|
4937
4938
|
*/
|
|
4938
4939
|
mapAll() {
|
|
4939
|
-
|
|
4940
|
-
return map(result => result.data[plural]); // See https://github.com/apollographql/apollo-client/issues/5662
|
|
4940
|
+
return map(result => result.data[this.#plural]); // See https://github.com/apollographql/apollo-client/issues/5662
|
|
4941
4941
|
}
|
|
4942
4942
|
/**
|
|
4943
4943
|
* This is used to extract only the created object out of the entire fetched data
|
|
@@ -4957,7 +4957,7 @@ class NaturalAbstractModelService {
|
|
|
4957
4957
|
* This is used to extract only flag when deleting an object
|
|
4958
4958
|
*/
|
|
4959
4959
|
mapDelete(result) {
|
|
4960
|
-
const name = 'delete' +
|
|
4960
|
+
const name = 'delete' + upperCaseFirstLetter(this.#plural);
|
|
4961
4961
|
return result.data[name]; // See https://github.com/apollographql/apollo-client/issues/5662
|
|
4962
4962
|
}
|
|
4963
4963
|
/**
|
|
@@ -7485,11 +7485,11 @@ class FacetSelectorComponent {
|
|
|
7485
7485
|
return true;
|
|
7486
7486
|
}
|
|
7487
7487
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FacetSelectorComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n @for (facet of facets; track facet) {\n <mat-list-item (click)=\"selection = facet; close()\">\n <a>{{ facet.display }}</a>\n </mat-list-item>\n }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{padding:5px;font-variant:all-small-caps;font-size:18px
|
|
7488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n @for (facet of facets; track facet) {\n <mat-list-item (click)=\"selection = facet; close()\">\n <a>{{ facet.display }}</a>\n </mat-list-item>\n }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
|
|
7489
7489
|
}
|
|
7490
7490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FacetSelectorComponent, decorators: [{
|
|
7491
7491
|
type: Component,
|
|
7492
|
-
args: [{ standalone: true, imports: [MatListModule], template: "@if (data.title) {\n <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n @for (facet of facets; track facet) {\n <mat-list-item (click)=\"selection = facet; close()\">\n <a>{{ facet.display }}</a>\n </mat-list-item>\n }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{padding:5px;font-variant:all-small-caps;font-size:18px
|
|
7492
|
+
args: [{ standalone: true, imports: [MatListModule], template: "@if (data.title) {\n <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n @for (facet of facets; track facet) {\n <mat-list-item (click)=\"selection = facet; close()\">\n <a>{{ facet.display }}</a>\n </mat-list-item>\n }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
|
|
7493
7493
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7494
7494
|
type: Inject,
|
|
7495
7495
|
args: [NATURAL_DROPDOWN_DATA]
|
|
@@ -7784,7 +7784,7 @@ class NaturalInputComponent {
|
|
|
7784
7784
|
return selection;
|
|
7785
7785
|
}
|
|
7786
7786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalInputComponent, deps: [{ token: i0.ElementRef }, { token: NaturalDropdownService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7787
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets", dropdownTitle: "dropdownTitle" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n @if (facet) {\n <mat-label>{{ facet.display }}</mat-label>\n }\n @if (!facet) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n @if (!facet && !selection) {\n <mat-icon naturalIcon=\"search\" matIconPrefix />\n }\n\n @if (selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n\n @if (facet && !selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;
|
|
7787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets", dropdownTitle: "dropdownTitle" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n @if (facet) {\n <mat-label>{{ facet.display }}</mat-label>\n }\n @if (!facet) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n @if (!facet && !selection) {\n <mat-icon naturalIcon=\"search\" matIconPrefix />\n }\n\n @if (selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n\n @if (facet && !selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
|
|
7788
7788
|
}
|
|
7789
7789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalInputComponent, decorators: [{
|
|
7790
7790
|
type: Component,
|
|
@@ -7797,7 +7797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
7797
7797
|
MatIconModule,
|
|
7798
7798
|
NaturalIconDirective,
|
|
7799
7799
|
MatButtonModule,
|
|
7800
|
-
], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n @if (facet) {\n <mat-label>{{ facet.display }}</mat-label>\n }\n @if (!facet) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n @if (!facet && !selection) {\n <mat-icon naturalIcon=\"search\" matIconPrefix />\n }\n\n @if (selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n\n @if (facet && !selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;
|
|
7800
|
+
], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n @if (facet) {\n <mat-label>{{ facet.display }}</mat-label>\n }\n @if (!facet) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n @if (!facet && !selection) {\n <mat-icon naturalIcon=\"search\" matIconPrefix />\n }\n\n @if (selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n\n @if (facet && !selection) {\n <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"] }]
|
|
7801
7801
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NaturalDropdownService }, { type: i0.EnvironmentInjector }], propDecorators: { ripple: [{
|
|
7802
7802
|
type: ViewChild,
|
|
7803
7803
|
args: [MatRipple, { static: true }]
|
|
@@ -7850,11 +7850,11 @@ class NaturalGroupComponent {
|
|
|
7850
7850
|
this.selectionChange.emit(this.innerSelections);
|
|
7851
7851
|
}
|
|
7852
7852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: "dropdownTitle", placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "@for (selection of innerSelections; track selection) {\n <natural-input\n (cleared)=\"removeInput($index)\"\n (selectionChange)=\"updateInput($event, $index)\"\n [facets]=\"facets\"\n [selection]=\"selection\"\n />\n}\n\n<natural-input\n #newValueInput\n (selectionChange)=\"addInput($event)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n tabIndex=\"10\"\n cdkFocusInitial\n [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{
|
|
7853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: "dropdownTitle", placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "@for (selection of innerSelections; track selection) {\n <natural-input\n (cleared)=\"removeInput($index)\"\n (selectionChange)=\"updateInput($event, $index)\"\n [facets]=\"facets\"\n [selection]=\"selection\"\n />\n}\n\n<natural-input\n #newValueInput\n (selectionChange)=\"addInput($event)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n tabIndex=\"10\"\n cdkFocusInitial\n [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] }); }
|
|
7854
7854
|
}
|
|
7855
7855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalGroupComponent, decorators: [{
|
|
7856
7856
|
type: Component,
|
|
7857
|
-
args: [{ selector: 'natural-group', standalone: true, imports: [NaturalInputComponent], template: "@for (selection of innerSelections; track selection) {\n <natural-input\n (cleared)=\"removeInput($index)\"\n (selectionChange)=\"updateInput($event, $index)\"\n [facets]=\"facets\"\n [selection]=\"selection\"\n />\n}\n\n<natural-input\n #newValueInput\n (selectionChange)=\"addInput($event)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n tabIndex=\"10\"\n cdkFocusInitial\n [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{
|
|
7857
|
+
args: [{ selector: 'natural-group', standalone: true, imports: [NaturalInputComponent], template: "@for (selection of innerSelections; track selection) {\n <natural-input\n (cleared)=\"removeInput($index)\"\n (selectionChange)=\"updateInput($event, $index)\"\n [facets]=\"facets\"\n [selection]=\"selection\"\n />\n}\n\n<natural-input\n #newValueInput\n (selectionChange)=\"addInput($event)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n tabIndex=\"10\"\n cdkFocusInitial\n [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
|
|
7858
7858
|
}], propDecorators: { newValueInput: [{
|
|
7859
7859
|
type: ViewChild,
|
|
7860
7860
|
args: ['newValueInput']
|
|
@@ -7932,7 +7932,7 @@ class NaturalSearchComponent {
|
|
|
7932
7932
|
this.selectionChange.emit([[]]);
|
|
7933
7933
|
}
|
|
7934
7934
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalSearchComponent, deps: [{ token: i1$6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7935
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n <div class=\"groupsWrapper\">\n @for (groupSelections of innerSelections; track groupSelections) {\n <div class=\"groupWrapper\">\n <natural-group\n (selectionChange)=\"updateGroup($event, $index)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n [selections]=\"groupSelections\"\n [dropdownTitle]=\"dropdownTitle\"\n />\n <div class=\"endOfRowButton\">\n @if (innerSelections.length > 1) {\n <button\n (click)=\"removeGroup($index)\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Supprimer ce groupe\"\n >\n <mat-icon naturalIcon=\"remove\" />\n </button>\n }\n </div>\n </div>\n @if (!$last) {\n <mat-divider />\n }\n }\n </div>\n\n <div class=\"endOfRowButton\">\n @if (multipleGroups) {\n <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe\">\n <mat-icon naturalIcon=\"add\" />\n </button>\n }\n\n <button\n (click)=\"clear()\"\n mat-icon-button\n class=\"clear-button\"\n i18n-matTooltip\n matTooltip=\"Annuler la recherche\"\n >\n <mat-icon naturalIcon=\"close\" />\n </button>\n </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex-direction:column;
|
|
7935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n <div class=\"groupsWrapper\">\n @for (groupSelections of innerSelections; track groupSelections) {\n <div class=\"groupWrapper\">\n <natural-group\n (selectionChange)=\"updateGroup($event, $index)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n [selections]=\"groupSelections\"\n [dropdownTitle]=\"dropdownTitle\"\n />\n <div class=\"endOfRowButton\">\n @if (innerSelections.length > 1) {\n <button\n (click)=\"removeGroup($index)\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Supprimer ce groupe\"\n >\n <mat-icon naturalIcon=\"remove\" />\n </button>\n }\n </div>\n </div>\n @if (!$last) {\n <mat-divider />\n }\n }\n </div>\n\n <div class=\"endOfRowButton\">\n @if (multipleGroups) {\n <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe\">\n <mat-icon naturalIcon=\"add\" />\n </button>\n }\n\n <button\n (click)=\"clear()\"\n mat-icon-button\n class=\"clear-button\"\n i18n-matTooltip\n matTooltip=\"Annuler la recherche\"\n >\n <mat-icon naturalIcon=\"close\" />\n </button>\n </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$5.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
7936
7936
|
}
|
|
7937
7937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalSearchComponent, decorators: [{
|
|
7938
7938
|
type: Component,
|
|
@@ -7944,7 +7944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
7944
7944
|
MatIconModule,
|
|
7945
7945
|
NaturalIconDirective,
|
|
7946
7946
|
MatDividerModule,
|
|
7947
|
-
], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n <div class=\"groupsWrapper\">\n @for (groupSelections of innerSelections; track groupSelections) {\n <div class=\"groupWrapper\">\n <natural-group\n (selectionChange)=\"updateGroup($event, $index)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n [selections]=\"groupSelections\"\n [dropdownTitle]=\"dropdownTitle\"\n />\n <div class=\"endOfRowButton\">\n @if (innerSelections.length > 1) {\n <button\n (click)=\"removeGroup($index)\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Supprimer ce groupe\"\n >\n <mat-icon naturalIcon=\"remove\" />\n </button>\n }\n </div>\n </div>\n @if (!$last) {\n <mat-divider />\n }\n }\n </div>\n\n <div class=\"endOfRowButton\">\n @if (multipleGroups) {\n <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe\">\n <mat-icon naturalIcon=\"add\" />\n </button>\n }\n\n <button\n (click)=\"clear()\"\n mat-icon-button\n class=\"clear-button\"\n i18n-matTooltip\n matTooltip=\"Annuler la recherche\"\n >\n <mat-icon naturalIcon=\"close\" />\n </button>\n </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex-direction:column;
|
|
7947
|
+
], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n <div class=\"groupsWrapper\">\n @for (groupSelections of innerSelections; track groupSelections) {\n <div class=\"groupWrapper\">\n <natural-group\n (selectionChange)=\"updateGroup($event, $index)\"\n [facets]=\"facets\"\n [placeholder]=\"placeholder\"\n [selections]=\"groupSelections\"\n [dropdownTitle]=\"dropdownTitle\"\n />\n <div class=\"endOfRowButton\">\n @if (innerSelections.length > 1) {\n <button\n (click)=\"removeGroup($index)\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Supprimer ce groupe\"\n >\n <mat-icon naturalIcon=\"remove\" />\n </button>\n }\n </div>\n </div>\n @if (!$last) {\n <mat-divider />\n }\n }\n </div>\n\n <div class=\"endOfRowButton\">\n @if (multipleGroups) {\n <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe\">\n <mat-icon naturalIcon=\"add\" />\n </button>\n }\n\n <button\n (click)=\"clear()\"\n mat-icon-button\n class=\"clear-button\"\n i18n-matTooltip\n matTooltip=\"Annuler la recherche\"\n >\n <mat-icon naturalIcon=\"close\" />\n </button>\n </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
|
|
7948
7948
|
}], ctorParameters: () => [{ type: i1$6.BreakpointObserver }], propDecorators: { placeholder: [{
|
|
7949
7949
|
type: Input
|
|
7950
7950
|
}], facets: [{
|
|
@@ -9128,7 +9128,7 @@ class NaturalFileComponent {
|
|
|
9128
9128
|
this.action = null;
|
|
9129
9129
|
this.backgroundSize = 'contain';
|
|
9130
9130
|
/**
|
|
9131
|
-
* Comma-separated list of unique file type specifiers. Like the native element
|
|
9131
|
+
* Comma-separated list of unique file type specifiers. Like the native element,
|
|
9132
9132
|
* it can be a mix of mime-type and file extensions.
|
|
9133
9133
|
*
|
|
9134
9134
|
* See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
|
|
@@ -9227,7 +9227,7 @@ class NaturalFileComponent {
|
|
|
9227
9227
|
return subject.asObservable();
|
|
9228
9228
|
}
|
|
9229
9229
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalFileComponent, deps: [{ token: NaturalFileService }, { token: NaturalAlertService }, { token: i2$4.DomSanitizer }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: "height", action: "action", backgroundSize: "backgroundSize", accept: "accept", uploader: "uploader", model: "model", formCtrl: "formCtrl" }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "this.height" } }, usesOnChanges: true, ngImport: i0, template: "<a\n (fileChange)=\"upload($event)\"\n naturalFileDrop\n [selectable]=\"true\"\n [accept]=\"accept\"\n [attr.href]=\"getDownloadLink()\"\n [class.has-action]=\"!!action\"\n [class.suggest-upload]=\"!model && action === 'upload'\"\n [fileSelectionDisabled]=\"action !== 'upload'\"\n [matRippleDisabled]=\"!action\"\n [style.backgroundImage]=\"imagePreview\"\n [style.backgroundSize]=\"backgroundSize\"\n matRipple\n target=\"_blank\"\n>\n @if (filePreview) {\n <div class=\"file-preview\">\n <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\" />\n {{ filePreview | uppercase }}\n </div>\n }\n\n <div class=\"action-overlay\">\n @if (action === 'upload') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\" />\n }\n @if (action === 'download') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"get_app\" />\n }\n {{ action | capitalize }}\n </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden
|
|
9230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: "height", action: "action", backgroundSize: "backgroundSize", accept: "accept", uploader: "uploader", model: "model", formCtrl: "formCtrl" }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "this.height" } }, usesOnChanges: true, ngImport: i0, template: "<a\n (fileChange)=\"upload($event)\"\n naturalFileDrop\n [selectable]=\"true\"\n [accept]=\"accept\"\n [attr.href]=\"getDownloadLink()\"\n [class.has-action]=\"!!action\"\n [class.suggest-upload]=\"!model && action === 'upload'\"\n [fileSelectionDisabled]=\"action !== 'upload'\"\n [matRippleDisabled]=\"!action\"\n [style.backgroundImage]=\"imagePreview\"\n [style.backgroundSize]=\"backgroundSize\"\n matRipple\n target=\"_blank\"\n>\n @if (filePreview) {\n <div class=\"file-preview\">\n <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\" />\n {{ filePreview | uppercase }}\n </div>\n }\n\n <div class=\"action-overlay\">\n @if (action === 'upload') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\" />\n }\n @if (action === 'download') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"get_app\" />\n }\n {{ action | capitalize }}\n </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$5.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] }); }
|
|
9231
9231
|
}
|
|
9232
9232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalFileComponent, decorators: [{
|
|
9233
9233
|
type: Component,
|
|
@@ -9238,7 +9238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
9238
9238
|
MatIconModule,
|
|
9239
9239
|
NaturalIconDirective,
|
|
9240
9240
|
NaturalCapitalizePipe,
|
|
9241
|
-
], template: "<a\n (fileChange)=\"upload($event)\"\n naturalFileDrop\n [selectable]=\"true\"\n [accept]=\"accept\"\n [attr.href]=\"getDownloadLink()\"\n [class.has-action]=\"!!action\"\n [class.suggest-upload]=\"!model && action === 'upload'\"\n [fileSelectionDisabled]=\"action !== 'upload'\"\n [matRippleDisabled]=\"!action\"\n [style.backgroundImage]=\"imagePreview\"\n [style.backgroundSize]=\"backgroundSize\"\n matRipple\n target=\"_blank\"\n>\n @if (filePreview) {\n <div class=\"file-preview\">\n <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\" />\n {{ filePreview | uppercase }}\n </div>\n }\n\n <div class=\"action-overlay\">\n @if (action === 'upload') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\" />\n }\n @if (action === 'download') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"get_app\" />\n }\n {{ action | capitalize }}\n </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden
|
|
9241
|
+
], template: "<a\n (fileChange)=\"upload($event)\"\n naturalFileDrop\n [selectable]=\"true\"\n [accept]=\"accept\"\n [attr.href]=\"getDownloadLink()\"\n [class.has-action]=\"!!action\"\n [class.suggest-upload]=\"!model && action === 'upload'\"\n [fileSelectionDisabled]=\"action !== 'upload'\"\n [matRippleDisabled]=\"!action\"\n [style.backgroundImage]=\"imagePreview\"\n [style.backgroundSize]=\"backgroundSize\"\n matRipple\n target=\"_blank\"\n>\n @if (filePreview) {\n <div class=\"file-preview\">\n <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\" />\n {{ filePreview | uppercase }}\n </div>\n }\n\n <div class=\"action-overlay\">\n @if (action === 'upload') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\" />\n }\n @if (action === 'download') {\n <mat-icon [size]=\"height * 0.66\" naturalIcon=\"get_app\" />\n }\n {{ action | capitalize }}\n </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"] }]
|
|
9242
9242
|
}], ctorParameters: () => [{ type: NaturalFileService }, { type: NaturalAlertService }, { type: i2$4.DomSanitizer }, { type: Document, decorators: [{
|
|
9243
9243
|
type: Inject,
|
|
9244
9244
|
args: [DOCUMENT]
|
|
@@ -9274,11 +9274,11 @@ class NaturalFixedButtonComponent {
|
|
|
9274
9274
|
this.disabled = false;
|
|
9275
9275
|
}
|
|
9276
9276
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: "icon", link: "link", color: "color", disabled: "disabled" }, ngImport: i0, template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;
|
|
9277
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: "icon", link: "link", color: "color", disabled: "disabled" }, ngImport: i0, template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] }); }
|
|
9278
9278
|
}
|
|
9279
9279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
|
|
9280
9280
|
type: Component,
|
|
9281
|
-
args: [{ selector: 'natural-fixed-button', standalone: true, imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;
|
|
9281
|
+
args: [{ selector: 'natural-fixed-button', standalone: true, imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"] }]
|
|
9282
9282
|
}], propDecorators: { icon: [{
|
|
9283
9283
|
type: Input,
|
|
9284
9284
|
args: [{ required: true }]
|
|
@@ -10548,11 +10548,11 @@ class NaturalSidenavContainerComponent {
|
|
|
10548
10548
|
this.sidenavService.toggleMinimized();
|
|
10549
10549
|
}
|
|
10550
10550
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n <mat-sidenav\n [mode]=\"sidenavService.activeMode\"\n [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n [opened]=\"sidenavService.isOpened\"\n [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [position]=\"position\"\n >\n <ng-content select=\"natural-sidenav\" />\n </mat-sidenav>\n\n <mat-sidenav-content>\n <div>\n <ng-content select=\"natural-sidenav-content\" />\n </div>\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column
|
|
10551
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n <mat-sidenav\n [mode]=\"sidenavService.activeMode\"\n [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n [opened]=\"sidenavService.isOpened\"\n [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [position]=\"position\"\n >\n <ng-content select=\"natural-sidenav\" />\n </mat-sidenav>\n\n <mat-sidenav-content>\n <div>\n <ng-content select=\"natural-sidenav-content\" />\n </div>\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
10552
10552
|
}
|
|
10553
10553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
|
|
10554
10554
|
type: Component,
|
|
10555
|
-
args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], standalone: true, imports: [MatSidenavModule, CommonModule], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n <mat-sidenav\n [mode]=\"sidenavService.activeMode\"\n [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n [opened]=\"sidenavService.isOpened\"\n [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [position]=\"position\"\n >\n <ng-content select=\"natural-sidenav\" />\n </mat-sidenav>\n\n <mat-sidenav-content>\n <div>\n <ng-content select=\"natural-sidenav-content\" />\n </div>\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column
|
|
10555
|
+
args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], standalone: true, imports: [MatSidenavModule, CommonModule], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n <mat-sidenav\n [mode]=\"sidenavService.activeMode\"\n [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n [opened]=\"sidenavService.isOpened\"\n [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [position]=\"position\"\n >\n <ng-content select=\"natural-sidenav\" />\n </mat-sidenav>\n\n <mat-sidenav-content>\n <div>\n <ng-content select=\"natural-sidenav-content\" />\n </div>\n </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
10556
10556
|
}], ctorParameters: () => [{ type: NaturalSidenavService }], propDecorators: { name: [{
|
|
10557
10557
|
type: Input,
|
|
10558
10558
|
args: [{ required: true }]
|
|
@@ -10574,11 +10574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
10574
10574
|
|
|
10575
10575
|
class NaturalSidenavContentComponent {
|
|
10576
10576
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{flex:1;
|
|
10577
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }); }
|
|
10578
10578
|
}
|
|
10579
10579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
|
|
10580
10580
|
type: Component,
|
|
10581
|
-
args: [{ selector: 'natural-sidenav-content', template: '<ng-content />', standalone: true, styles: [":host{flex:1;
|
|
10581
|
+
args: [{ selector: 'natural-sidenav-content', template: '<ng-content />', standalone: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }]
|
|
10582
10582
|
}] });
|
|
10583
10583
|
|
|
10584
10584
|
/*
|
|
@@ -10643,11 +10643,11 @@ class NaturalTableButtonComponent {
|
|
|
10643
10643
|
}
|
|
10644
10644
|
}
|
|
10645
10645
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", disabled: "disabled", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n <span>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n @if (label) {\n <span>{{ label }}</span>\n }\n </span>\n}\n\n@if (!raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n\n@if (raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-raised-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a\n [color]=\"color\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick.emit($event)\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a\n [attr.href]=\"href\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n target=\"_blank\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n", styles: ["natural-table-button{flex:1;
|
|
10646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", disabled: "disabled", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n <span>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n @if (label) {\n <span>{{ label }}</span>\n }\n </span>\n}\n\n@if (!raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n\n@if (raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-raised-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a\n [color]=\"color\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick.emit($event)\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a\n [attr.href]=\"href\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n target=\"_blank\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10647
10647
|
}
|
|
10648
10648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
|
|
10649
10649
|
type: Component,
|
|
10650
|
-
args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, standalone: true, imports: [MatIconModule, NaturalIconDirective, MatButtonModule, RouterLink], template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n <span>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n @if (label) {\n <span>{{ label }}</span>\n }\n </span>\n}\n\n@if (!raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n\n@if (raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-raised-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a\n [color]=\"color\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick.emit($event)\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a\n [attr.href]=\"href\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n target=\"_blank\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n", styles: ["natural-table-button{flex:1;
|
|
10650
|
+
args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, standalone: true, imports: [MatIconModule, NaturalIconDirective, MatButtonModule, RouterLink], template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n <span>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n @if (label) {\n <span>{{ label }}</span>\n }\n </span>\n}\n\n@if (!raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n\n@if (raised) {\n <!-- App routed link with label... -->\n @if (type === 'routerLink' && label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-raised-button\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'routerLink' && !label) {\n <a\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- Click with label... -->\n @if (type === 'click' && label) {\n <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'click' && !label) {\n <a\n [color]=\"color\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick.emit($event)\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n <!-- External link with label... -->\n @if (type === 'href' && label) {\n <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n <span>{{ label }}</span>\n </a>\n }\n <!-- ... and without label -->\n @if (type === 'href' && !label) {\n <a\n [attr.href]=\"href\"\n [color]=\"color\"\n [disabled]=\"disabled\"\n mat-icon-button\n class=\"mat-elevation-z4\"\n target=\"_blank\"\n >\n @if (icon) {\n <mat-icon [naturalIcon]=\"icon\" />\n }\n </a>\n }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
|
|
10651
10651
|
}], propDecorators: { queryParams: [{
|
|
10652
10652
|
type: Input
|
|
10653
10653
|
}], queryParamsHandling: [{
|
|
@@ -10996,15 +10996,13 @@ class AvatarService {
|
|
|
10996
10996
|
['initials', Initials],
|
|
10997
10997
|
]);
|
|
10998
10998
|
this.avatarColors = [
|
|
10999
|
-
'#
|
|
11000
|
-
'#
|
|
11001
|
-
'#
|
|
11002
|
-
'#
|
|
11003
|
-
'#
|
|
11004
|
-
'#
|
|
11005
|
-
'#
|
|
11006
|
-
'#c800ff',
|
|
11007
|
-
'#3b3b3b',
|
|
10999
|
+
'#e37900', // 2.99 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=e37900
|
|
11000
|
+
'#e6b102', // 2.26 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=c7ab00
|
|
11001
|
+
'#00bbbb', // 2.37 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=00bbbb
|
|
11002
|
+
'#008cff', // 3.38 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=008cff
|
|
11003
|
+
'#d9138c', // 4.51 pass https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=d901b8
|
|
11004
|
+
'#7321d1', // 4.28 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=c800ff
|
|
11005
|
+
'#3b3b3b', // 11.2 pass https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=3b3b3b
|
|
11008
11006
|
];
|
|
11009
11007
|
this.failedSources = new Map();
|
|
11010
11008
|
}
|
|
@@ -11184,7 +11182,7 @@ class NaturalAvatarComponent {
|
|
|
11184
11182
|
</div>
|
|
11185
11183
|
}
|
|
11186
11184
|
</div>
|
|
11187
|
-
`, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{
|
|
11185
|
+
`, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
11188
11186
|
}
|
|
11189
11187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
|
|
11190
11188
|
type: Component,
|
|
@@ -11207,7 +11205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
11207
11205
|
</div>
|
|
11208
11206
|
}
|
|
11209
11207
|
</div>
|
|
11210
|
-
`, standalone: true, imports: [CommonModule], styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{
|
|
11208
|
+
`, standalone: true, imports: [CommonModule], styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
|
|
11211
11209
|
}], ctorParameters: () => [{ type: AvatarService }], propDecorators: { image: [{
|
|
11212
11210
|
type: Input
|
|
11213
11211
|
}], initials: [{
|