chrv-components 1.11.80 → 1.11.81
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.
|
Binary file
|
|
@@ -4736,11 +4736,11 @@ class EditableCell {
|
|
|
4736
4736
|
this.valueSubjet.next(value);
|
|
4737
4737
|
}
|
|
4738
4738
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4739
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: EditableCell, isStandalone: true, selector: "chr-editable-cell", inputs: { allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "spanRef", first: true, predicate: ["spanElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n @if(!isEditing()){\r\n <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n @let val = formattedValue();\r\n @if(val === null || val === undefined){\r\n <span class=\"empty-value\">(null)</span>\r\n }@else if (val === '') {\r\n <span class=\"empty-value\">(vide)</span>\r\n }@else if (val?.trim() === '') {\r\n <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n }\r\n @else {\r\n {{val}}\r\n }\r\n </span>\r\n }\r\n @else {\r\n <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n }\r\n @if(isTouched() || hasChanged()){\r\n <div class=\"error-message\" [title]=\"error()\">\r\n {{ error() }}\r\n </div>\r\n }\r\n</div>", styles: ["
|
|
4739
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: EditableCell, isStandalone: true, selector: "chr-editable-cell", inputs: { allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "spanRef", first: true, predicate: ["spanElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n @if(!isEditing()){\r\n <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n @let val = formattedValue();\r\n @if(val === null || val === undefined){\r\n <span class=\"empty-value\">(null)</span>\r\n }@else if (val === '') {\r\n <span class=\"empty-value\">(vide)</span>\r\n }@else if (val?.trim() === '') {\r\n <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n }\r\n @else {\r\n {{val}}\r\n }\r\n </span>\r\n }\r\n @else {\r\n <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n }\r\n @if(isTouched() || hasChanged()){\r\n <div class=\"error-message\" [title]=\"error()\">\r\n {{ error() }}\r\n </div>\r\n }\r\n</div>", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.cell-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-items:center;cursor:help}.cell-wrapper[data-has-changed=true]{color:var(--warn-color)}.cell-value{width:100%;height:100%;min-width:100%;min-height:1rem;display:inline-block;overflow:hidden;text-overflow:ellipsis}.cell-value .empty-value{font-style:italic;color:color-mix(in srgb,var(--text-color) 60%,var(--background-color) 50%);text-decoration:underline dashed}.cell-value:focus{position:relative;outline:none;border-bottom:1px solid var(--neutral-color)}.cell-value:focus:after{position:absolute;content:\"lock\";font-family:Material Icons;font-size:.75rem;right:.25rem;top:50%;transform:translateY(-50%);color:var(--warn-color)}.edit-input{width:100%;box-sizing:border-box;font-size:inherit;font-family:inherit;padding:.25rem;outline:none;border:0;background-color:inherit;border-bottom:1px solid var(--primary-color);color:var(--text-color)}.edit-input[type=number]{appearance:textfield;-moz-appearance:textfield}.edit-input[type=number]::-webkit-outer-spin-button,.edit-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CrossCellNavigationDirective, selector: "[CrossCellNavigation]", inputs: ["allowNavigation"], outputs: ["navigateNext", "navigatePrevious", "navigateAway"] }] }); }
|
|
4740
4740
|
}
|
|
4741
4741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: EditableCell, decorators: [{
|
|
4742
4742
|
type: Component,
|
|
4743
|
-
args: [{ selector: 'chr-editable-cell', imports: [CrossCellNavigationDirective], template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n @if(!isEditing()){\r\n <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n @let val = formattedValue();\r\n @if(val === null || val === undefined){\r\n <span class=\"empty-value\">(null)</span>\r\n }@else if (val === '') {\r\n <span class=\"empty-value\">(vide)</span>\r\n }@else if (val?.trim() === '') {\r\n <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n }\r\n @else {\r\n {{val}}\r\n }\r\n </span>\r\n }\r\n @else {\r\n <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n }\r\n @if(isTouched() || hasChanged()){\r\n <div class=\"error-message\" [title]=\"error()\">\r\n {{ error() }}\r\n </div>\r\n }\r\n</div>", styles: ["
|
|
4743
|
+
args: [{ selector: 'chr-editable-cell', imports: [CrossCellNavigationDirective], template: "<div CrossCellNavigation [allowNavigation]=\"!error()\" class=\"cell-wrapper\" [title]=\"value()\"\r\n (dblclick)=\"enableEditing()\" (navigateAway)=\"validate()\">\r\n <!-- [attr.data-has-changed]=\"hasChanged()\" -->\r\n @if(!isEditing()){\r\n <span class=\"cell-value\" #spanElement tabindex=\"0\">\r\n @let val = formattedValue();\r\n @if(val === null || val === undefined){\r\n <span class=\"empty-value\">(null)</span>\r\n }@else if (val === '') {\r\n <span class=\"empty-value\">(vide)</span>\r\n }@else if (val?.trim() === '') {\r\n <span class=\"empty-value\">({{val.length}} blancs)</span>\r\n }\r\n @else {\r\n {{val}}\r\n }\r\n </span>\r\n }\r\n @else {\r\n <input class=\"edit-input\" [type]=\"formatter()?.getEditInputType(columnMetadata())\" [value]=\"value() || null\"\r\n #inputElement (focus)=\"isTouched.set(true)\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"cancel()\"\r\n (keydown.enter)=\"validate()\" (keydown.escape)=\"cancel()\" autofocus />\r\n }\r\n @if(isTouched() || hasChanged()){\r\n <div class=\"error-message\" [title]=\"error()\">\r\n {{ error() }}\r\n </div>\r\n }\r\n</div>", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.cell-wrapper{display:flex;flex-direction:column;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-items:center;cursor:help}.cell-wrapper[data-has-changed=true]{color:var(--warn-color)}.cell-value{width:100%;height:100%;min-width:100%;min-height:1rem;display:inline-block;overflow:hidden;text-overflow:ellipsis}.cell-value .empty-value{font-style:italic;color:color-mix(in srgb,var(--text-color) 60%,var(--background-color) 50%);text-decoration:underline dashed}.cell-value:focus{position:relative;outline:none;border-bottom:1px solid var(--neutral-color)}.cell-value:focus:after{position:absolute;content:\"lock\";font-family:Material Icons;font-size:.75rem;right:.25rem;top:50%;transform:translateY(-50%);color:var(--warn-color)}.edit-input{width:100%;box-sizing:border-box;font-size:inherit;font-family:inherit;padding:.25rem;outline:none;border:0;background-color:inherit;border-bottom:1px solid var(--primary-color);color:var(--text-color)}.edit-input[type=number]{appearance:textfield;-moz-appearance:textfield}.edit-input[type=number]::-webkit-outer-spin-button,.edit-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.error-message{color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
4744
4744
|
}], ctorParameters: () => [] });
|
|
4745
4745
|
|
|
4746
4746
|
class ScrollIntoViewDirective {
|
|
@@ -4903,11 +4903,11 @@ class ColumnFilter {
|
|
|
4903
4903
|
});
|
|
4904
4904
|
}
|
|
4905
4905
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4906
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ColumnFilter, isStandalone: true, selector: "chr-column-filter", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", mode: "modeChange", value: "valueChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-wrapper\">\r\n <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n (dblclick)=\"toggle()\">filter_list</span>\r\n @if(isOpen()){\r\n <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n ou \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n </select>\r\n <div class=\"input-wrapper\">\r\n <div class=\"input-and-error\">\r\n <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n (input)=\"onInputChange($any($event).target.value)\" />\r\n <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n {{ error() }}\r\n </div>\r\n </div>\r\n <span class=\"mat-icon material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n (click)=\"apply()\">check</span>\r\n </div>\r\n </div>\r\n } @else {\r\n @let val = value();\r\n @if(val){\r\n <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode())}} {{ val ? `\"${val}\"` : '' }}</span>\r\n }\r\n @else {\r\n <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n }\r\n }\r\n</div>", styles: ["
|
|
4906
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ColumnFilter, isStandalone: true, selector: "chr-column-filter", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, columnMetadata: { classPropertyName: "columnMetadata", publicName: "columnMetadata", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", mode: "modeChange", value: "valueChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-wrapper\">\r\n <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n (dblclick)=\"toggle()\">filter_list</span>\r\n @if(isOpen()){\r\n <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n ou \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n </select>\r\n <div class=\"input-wrapper\">\r\n <div class=\"input-and-error\">\r\n <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n (input)=\"onInputChange($any($event).target.value)\" />\r\n <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n {{ error() }}\r\n </div>\r\n </div>\r\n <span class=\"mat-icon material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n (click)=\"apply()\">check</span>\r\n </div>\r\n </div>\r\n } @else {\r\n @let val = value();\r\n @if(val){\r\n <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode())}} {{ val ? `\"${val}\"` : '' }}</span>\r\n }\r\n @else {\r\n <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n }\r\n }\r\n</div>", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer}.filter-wrapper .mode-selector{border:0;outline:none;width:min-content}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{height:0px;color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.5rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}\n"] }); }
|
|
4907
4907
|
}
|
|
4908
4908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColumnFilter, decorators: [{
|
|
4909
4909
|
type: Component,
|
|
4910
|
-
args: [{ selector: 'chr-column-filter', imports: [], template: "<div class=\"filter-wrapper\">\r\n <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n (dblclick)=\"toggle()\">filter_list</span>\r\n @if(isOpen()){\r\n <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n ou \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n </select>\r\n <div class=\"input-wrapper\">\r\n <div class=\"input-and-error\">\r\n <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n (input)=\"onInputChange($any($event).target.value)\" />\r\n <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n {{ error() }}\r\n </div>\r\n </div>\r\n <span class=\"mat-icon material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n (click)=\"apply()\">check</span>\r\n </div>\r\n </div>\r\n } @else {\r\n @let val = value();\r\n @if(val){\r\n <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode())}} {{ val ? `\"${val}\"` : '' }}</span>\r\n }\r\n @else {\r\n <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n }\r\n }\r\n</div>", styles: ["
|
|
4910
|
+
args: [{ selector: 'chr-column-filter', imports: [], template: "<div class=\"filter-wrapper\">\r\n <span class=\"mat-icon material-symbols filter-icon toggle\" [class.faded]=\"!value() && !isOpen()\"\r\n (dblclick)=\"toggle()\">filter_list</span>\r\n @if(isOpen()){\r\n <div class=\"input-wrapper\" (keyup.enter)=\"apply()\" title=\"Appuyer sur enter pour appliquer le filtre\">\r\n <select (change)=\"mode.set($any($event).target.value)\" class=\"mode-selector\">\r\n <option [selected]=\"mode() == FilterMode.EQUALS\" [value]=\"FilterMode.EQUALS\">\u00C9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.CONTAINS\" [value]=\"FilterMode.CONTAINS\">Contient</option>\r\n <option [selected]=\"mode() == FilterMode.LOWER_OR_EQUAL\" [value]=\"FilterMode.LOWER_OR_EQUAL\">Plus petit ou\r\n \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.GREATER_OR_EQUAL\" [value]=\"FilterMode.GREATER_OR_EQUAL\">Plus grand\r\n ou \u00E9gal \u00E0</option>\r\n <option [selected]=\"mode() == FilterMode.STARTS_WITH\" [value]=\"FilterMode.STARTS_WITH\">Commence par</option>\r\n <option [selected]=\"mode() == FilterMode.ENDS_WITH\" [value]=\"FilterMode.ENDS_WITH\">Se termine par</option>\r\n </select>\r\n <div class=\"input-wrapper\">\r\n <div class=\"input-and-error\">\r\n <input #inputElement [type]=\"formatter()?.getEditInputType(columnMetadata())\"\r\n placeholder=\"Valeur du filtre\" class=\"filter-input no-input-buttons\" [value]=\"value()\"\r\n (input)=\"onInputChange($any($event).target.value)\" />\r\n <div class=\"error-message\" [title]=\"error()\" [class.hidden]=\"!error()\">\r\n {{ error() }}\r\n </div>\r\n </div>\r\n <span class=\"mat-icon material-symbols apply-button\" title=\"Cliquez pour appliquer le filtre\"\r\n (click)=\"apply()\">check</span>\r\n </div>\r\n </div>\r\n } @else {\r\n @let val = value();\r\n @if(val){\r\n <span class=\"toggle\" (dblclick)=\"toggle()\">{{getModeLabel(mode())}} {{ val ? `\"${val}\"` : '' }}</span>\r\n }\r\n @else {\r\n <span class=\"toggle faded\" (dblclick)=\"toggle()\">Appliquer un filtre</span>\r\n }\r\n }\r\n</div>", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}:host{position:relative;display:flex;width:100%;height:1.5rem}.filter-wrapper{display:flex;align-items:center}.filter-wrapper .toggle{cursor:pointer}.filter-wrapper .mat-icon{font-size:1rem;justify-content:start}.filter-wrapper .input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center}.filter-wrapper .input-wrapper .apply-button{position:absolute;right:0;top:50%;width:min-content;transform:translateY(-50%);cursor:pointer}.filter-wrapper .mode-selector{border:0;outline:none;width:min-content}.filter-wrapper .mode-selector option{border:none;outline:none}.filter-wrapper .error-message{height:0px;color:var(--error-color);font-size:.75rem;margin-top:.25rem;overflow:visible;text-overflow:ellipsis}.filter-wrapper .filter-input{outline:none;border:0;border-bottom:1px solid var(--neutral-color)}.filter-wrapper .filter-input:focus{border-bottom:1px solid var(--primary-color)}.filter-wrapper .filter-input,.filter-wrapper .mode-selector{background-color:inherit;color:var(--text-color)}.filter-wrapper .input-and-error{display:flex;flex-direction:column;margin-left:.5rem}.filter-wrapper .hidden{display:none}.filter-wrapper .no-input-buttons{appearance:textfield;-moz-appearance:textfield}.filter-wrapper .no-input-buttons::-webkit-calendar-picker-indicator,.filter-wrapper .no-input-buttons::-webkit-outer-spin-button,.filter-wrapper .no-input-buttons::-webkit-inner-spin-button{display:none;-webkit-appearance:none;margin:0}.filter-wrapper .faded{color:var(--faded-text-color)}\n"] }]
|
|
4911
4911
|
}], ctorParameters: () => [] });
|
|
4912
4912
|
|
|
4913
4913
|
class DataGrid {
|
|
@@ -5198,7 +5198,7 @@ class DataGrid {
|
|
|
5198
5198
|
};
|
|
5199
5199
|
}
|
|
5200
5200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sort: "sortChange", filter: "filterChange", cellChange: "cellChange", rowClick: "rowClick", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onDB2Navigate: "onDB2Navigate", onNavigate: "onNavigate", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange" }, providers: [PaginationService], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: ["@use \"material-symbols\";.material-symbols,.mat-symbol .mat-icon{font-family:Material Symbols Outlined;display:flex;align-items:center;justify-content:center;font-variation-settings:\"FILL\" 1,\"wght\" 1200,\"GRAD\" 256,\"opsz\" 48}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info .mat-icon{font-size:1.25rem!important;width:2rem;height:2rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }] }); }
|
|
5201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sort: "sortChange", filter: "filterChange", cellChange: "cellChange", rowClick: "rowClick", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onDB2Navigate: "onDB2Navigate", onNavigate: "onNavigate", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange" }, providers: [PaginationService], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info .mat-icon{font-size:1.25rem!important;width:2rem;height:2rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "value", "columnMetadata"], outputs: ["valueChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }] }); }
|
|
5202
5202
|
}
|
|
5203
5203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataGrid, decorators: [{
|
|
5204
5204
|
type: Component,
|
|
@@ -5211,7 +5211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
5211
5211
|
ScrollIntoViewDirective,
|
|
5212
5212
|
ControlClickDirective,
|
|
5213
5213
|
ColumnFilter,
|
|
5214
|
-
], providers: [PaginationService], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: ["@use \"material-symbols\";.material-symbols,.mat-symbol .mat-icon{font-family:Material Symbols Outlined;display:flex;align-items:center;justify-content:center;font-variation-settings:\"FILL\" 1,\"wght\" 1200,\"GRAD\" 256,\"opsz\" 48}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info .mat-icon{font-size:1.25rem!important;width:2rem;height:2rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"] }]
|
|
5214
|
+
], providers: [PaginationService], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n <div class=\"data-grid-header\">\r\n <h3>{{ title() ? title() : `${table()?.schema}.${table()?.name}` }}</h3>\r\n <div class=\"data-grid-info\">\r\n <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n <span class=\"mat-icon material-symbols icon-button sync-button\" (click)=\"onSync.emit()\"\r\n title=\"Synchroniser les changements\">file_upload</span>\r\n }\r\n @if(allowRefresh()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"refresh()\"\r\n title=\"Recharger les donn\u00E9es\">refresh</span>\r\n }\r\n @if(allowInsert()){\r\n <span class=\"mat-icon material-symbols icon-button\" (click)=\"onAddRow.emit()\"\r\n title=\"Ajouter une ligne\">add</span>\r\n }\r\n <span>Total: {{ totalItems() }} enregistrements</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-responsive\" [style]=\"{ 'max-height': maxHeight() }\">\r\n <table class=\"data-grid-table\">\r\n <thead>\r\n <tr>\r\n @for (column of columns(); track column.columnName) {\r\n <th [title]=\"getColumnTooltip(column)\">\r\n @if(allowNavigation() && isForeignKeyColumn(column)){\r\n <span ControlClick (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.columnName }}</span>\r\n } @else {\r\n <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.columnName\r\n }}</span>\r\n }\r\n <small class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\r\n column.dataType }}\r\n {{column.length ?\r\n `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n @if(!canEdit(column)){\r\n <span class=\"lock-icon mat-icon material-symbols\">lock</span>\r\n }\r\n @if (sort()?.column === column.columnName) {\r\n @if (sort()?.isAsc) {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_upward</span>\r\n } @else {\r\n <span class=\"sort-icon mat-icon material-symbols\">arrow_downward</span>\r\n }\r\n }\r\n <chr-column-filter [by]=\"column.columnName\" [mode]=\"filter()[column.columnName]?.mode ?? 0\"\r\n [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n (filterChange)=\"onFilterBy(column.columnName, $event)\" class=\"filter\"></chr-column-filter>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id: this.id(),\r\n totalItems: currentItems()};\r\n track getRowTrackBy(row, $index)) {\r\n <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index}\">\r\n </ng-container>\r\n }\r\n @for (row of _addedRows(); track getRowTrackBy(row, $index)) { <ng-container\r\n [ngTemplateOutlet]=\"rowTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: row, index: $index + rows().length}\">\r\n </ng-container>\r\n }\r\n @if(rows().length === 0 && addedRows().length === 0){\r\n <tr>\r\n <td class=\"no-data\">Aucune donn\u00E9e disponible</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <ng-template #rowTemplate let-row let-index=\"index\">\r\n @let isRowValid = validateRow(row);\r\n <tr #rowElement [attr.data-is-added]=\"isRowAdded(row, index)\" [scrollIntoView]=\"!isRowValid\"\r\n [attr.data-is-valid]=\"isRowValid\" (click)=\"rowClick.emit({ rowIndex: index, row: row, event: $event })\"\r\n [contextMenu]=\"getContextMenuItems(row, index)\" [attr.data-has-changed]=\"isRowChanged(row, index)\"\r\n [attr.data-is-deleted]=\"isRowDeleted(row, index)\">\r\n @for (column of columns(); track column.columnName) {\r\n <td>\r\n <chr-editable-cell class=\"cell\" [value]=\"row[column.columnName]\"\r\n (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n [allowUpdate]=\"allowUpdate() && isRowDeleted(row, index) === false\"\r\n [columnMetadata]=\"column\"></chr-editable-cell>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;justify-items:space-between;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info .mat-icon{font-size:1.25rem!important;width:2rem;height:2rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--seconday-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .table-responsive{overflow-x:auto;overflow-y:auto;scrollbar-width:thin}.data-grid-container .data-grid-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-grid-container .data-grid-table thead{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem)}.data-grid-container .data-grid-table thead th{padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);white-space:nowrap;min-width:120px;-webkit-user-select:none;user-select:none;position:relative}.data-grid-container .data-grid-table thead th .sort-receiver,.data-grid-container .data-grid-table thead th small{display:flex;width:100%;cursor:pointer}.data-grid-container .data-grid-table thead th .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;vertical-align:middle;color:var(--tertiary-color)}.data-grid-container .data-grid-table thead th .lock-icon{position:absolute;right:.75rem;top:.5rem;font-size:1rem;vertical-align:middle;color:var(--warn-color)}.data-grid-container .data-grid-table thead th .column-type{display:block;font-weight:400;color:var(--faded-text-color);font-size:.75rem;margin-top:.25rem;text-transform:uppercase}.data-grid-container .data-grid-table tbody tr{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .data-grid-table tbody tr:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .data-grid-table tbody tr[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .data-grid-table tbody tr[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .data-grid-table tbody tr:hover{background-color:var(--neutral-color)}.data-grid-container .data-grid-table tbody tr td{padding:.75rem 1rem;vertical-align:top;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .data-grid-table tbody tr td .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .data-grid-table tbody tr td .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .data-grid-table tbody tr td:last-child{border-right:none}\n"] }]
|
|
5215
5215
|
}], ctorParameters: () => [] });
|
|
5216
5216
|
|
|
5217
5217
|
class MessageBanner {
|
|
@@ -5227,11 +5227,11 @@ class MessageBanner {
|
|
|
5227
5227
|
};
|
|
5228
5228
|
}
|
|
5229
5229
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MessageBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n <div class=\"banner-header\">\r\n <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n <strong class=\"banner-title\">{{title()}}</strong>\r\n </div>\r\n <div class=\"message-content\">\r\n {{message()}}\r\n <ng-content></ng-content>\r\n </div>\r\n @if(closable()){\r\n <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n }\r\n</div>\r\n}", styles: ["
|
|
5230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n <div class=\"banner-header\">\r\n <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n <strong class=\"banner-title\">{{title()}}</strong>\r\n </div>\r\n <div class=\"message-content\">\r\n {{message()}}\r\n <ng-content></ng-content>\r\n </div>\r\n @if(closable()){\r\n <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n }\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }); }
|
|
5231
5231
|
}
|
|
5232
5232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MessageBanner, decorators: [{
|
|
5233
5233
|
type: Component,
|
|
5234
|
-
args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n <div class=\"banner-header\">\r\n <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n <strong class=\"banner-title\">{{title()}}</strong>\r\n </div>\r\n <div class=\"message-content\">\r\n {{message()}}\r\n <ng-content></ng-content>\r\n </div>\r\n @if(closable()){\r\n <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n }\r\n</div>\r\n}", styles: ["
|
|
5234
|
+
args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n <div class=\"banner-header\">\r\n <span class=\"mat-icon material-symbols\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n <strong class=\"banner-title\">{{title()}}</strong>\r\n </div>\r\n <div class=\"message-content\">\r\n {{message()}}\r\n <ng-content></ng-content>\r\n </div>\r\n @if(closable()){\r\n <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n }\r\n</div>\r\n}", styles: [".mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}:is(.mat-icon:not(mat-icon),.material-symbols).small{font-size:1rem}:is(.mat-icon:not(mat-icon),.material-symbols).large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }]
|
|
5235
5235
|
}] });
|
|
5236
5236
|
|
|
5237
5237
|
class TabToEnterHandlerDirective {
|