@zambon-dev/library 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -1
- package/fesm2022/zambon-dev-library.mjs +20 -20
- package/fesm2022/zambon-dev-library.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/variables.scss +29 -0
package/CHANGELOG.md
CHANGED
|
@@ -23,6 +23,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
23
23
|
|
|
24
24
|
### ⚠ Breaking Changes / Migration
|
|
25
25
|
|
|
26
|
+
## [3.1.0] - 2026-09-21
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
|
|
30
|
+
- Added the --tabs-* design tokens to the published stylesheet. They style @zambon-dev/framework's
|
|
31
|
+
tab strip; they live here because this package owns the shared token layer, alongside --sidebar-*.
|
|
32
|
+
|
|
33
|
+
## [3.0.1] - 2026-09-21
|
|
34
|
+
|
|
35
|
+
- Maintenance release (no consumer-facing changes were documented).
|
|
36
|
+
|
|
26
37
|
## [3.0.0] - 2026-09-21
|
|
27
38
|
|
|
28
39
|
- Maintenance release (no consumer-facing changes were documented).
|
|
@@ -52,6 +63,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
52
63
|
|
|
53
64
|
### Fixed
|
|
54
65
|
|
|
66
|
+
- **Host styles now apply.** Ten components declared their host block as `:host-context {` with no
|
|
67
|
+
argument. That is not a valid host selector, so every rule inside was silently dropped -- the
|
|
68
|
+
ribbon never became a flex row (its buttons stacked vertically), `lib-group-container` never got
|
|
69
|
+
its card background or border, and `lib-data-grid`, `lib-form-group`, `lib-group-accordion`,
|
|
70
|
+
`lib-group-scroll-spy`, `lib-catalog-select`, `lib-ribbon-group`, `lib-ribbon-button` and the
|
|
71
|
+
multi-select result grid all rendered unstyled at the host level. They are `:host {` now.
|
|
72
|
+
|
|
55
73
|
- `CatalogSelectComponent` subscribed to its `forkJoin` with an empty handler; it now subscribes
|
|
56
74
|
without one. No behavioural change.
|
|
57
75
|
|
|
@@ -386,7 +404,9 @@ config options and the `getUserProfile()` method still exist but are no longer c
|
|
|
386
404
|
available via [GitHub Releases](https://github.com/RicardoZambon/ZLibraries/releases) and the
|
|
387
405
|
`library-v*` tags.
|
|
388
406
|
|
|
389
|
-
[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v3.
|
|
407
|
+
[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v3.1.0...HEAD
|
|
408
|
+
[3.1.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v3.1.0
|
|
409
|
+
[3.0.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v3.0.1
|
|
390
410
|
[3.0.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v3.0.0
|
|
391
411
|
[2.0.1]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v2.0.1
|
|
392
412
|
[2.0.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v2.0.0
|
|
@@ -2090,11 +2090,11 @@ class CatalogSelectComponent extends BaseComponent {
|
|
|
2090
2090
|
}
|
|
2091
2091
|
}
|
|
2092
2092
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CatalogSelectComponent, isStandalone: true, selector: "lib-catalog-select", inputs: { autofocus: "autofocus", controlName: "controlName", displayControlName: "displayControlName", displayProperty: "displayProperty", entriesList: "entriesList", filters: "filters", label: "label", maxEntries: "maxEntries", minimumLengthSearch: "minimumLengthSearch", notes: "notes", readOnly: "readOnly", searchEndpoint: "searchEndpoint", validations: "validations", valueProperty: "valueProperty" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<lib-form-input-group\n [controlName]=\"controlName\"\n [label]=\"label\"\n [notes]=\"notes\"\n [template]=\"template\"\n [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n <lib-form-input\n #input\n [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n [autofocus]=\"autofocus\"\n [controlName]=\"displayControlName\"\n [invalid]=\"isInvalid && isTouched\"\n [readOnly]=\"readOnly\"\n (blurred)=\"onContainerBlur()\"\n (click)=\"onContainerClick()\"\n (focused)=\"onContainerFocus()\"\n (keydown)=\"onKeyDown($event)\"\n >\n </lib-form-input>\n @if (showClearButton) {\n <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <div class=\"dropdown-container\">\n <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n listbox's option set, and they carry no click handler. The dropdown already\n closes on Escape, on blur and on an outside click. -->\n @if (isLoading) {\n <li role=\"presentation\" aria-live=\"polite\">\n {{ 'CatalogSelect-Loading' | translate }}\n </li>\n }\n @if (shouldUseCriteria && showMinimumCharactersMessage) {\n <li\n role=\"presentation\"\n aria-live=\"polite\"\n title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n >\n {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n </li>\n }\n @if (showNoResultsMessage) {\n <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n {{ 'CatalogSelect-NoResultsFound' | translate }}\n </li>\n }\n\n <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n @if (showFailureMessage) {\n <li class=\"error\" role=\"presentation\">\n <button\n class=\"retry\"\n type=\"button\"\n title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n (click)=\"onDropDownErrorClick()\"\n >\n {{ 'CatalogSelect-FailureMessage' | translate }}\n </button>\n </li>\n }\n\n <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n Options in a combobox listbox are deliberately not focusable. Keyboard\n interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n points at the active option through aria-activedescendant. Giving each option\n its own tabindex and key handlers would break that pattern. -->\n @for (entry of displayedEntries; track entry; let i = $index) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [attr.id]=\"getOptionId(i)\"\n [attr.aria-selected]=\"selectedValue === entry.value\"\n [class.focused]=\"focusedIndex === i\"\n [class.selected]=\"selectedValue === entry.value\"\n (click)=\"onDropDownItemClick(entry)\"\n >\n {{ entry.display }}\n </li>\n }\n <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n </ul>\n </div>\n</ng-template>\n", styles: [":host
|
|
2093
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CatalogSelectComponent, isStandalone: true, selector: "lib-catalog-select", inputs: { autofocus: "autofocus", controlName: "controlName", displayControlName: "displayControlName", displayProperty: "displayProperty", entriesList: "entriesList", filters: "filters", label: "label", maxEntries: "maxEntries", minimumLengthSearch: "minimumLengthSearch", notes: "notes", readOnly: "readOnly", searchEndpoint: "searchEndpoint", validations: "validations", valueProperty: "valueProperty" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<lib-form-input-group\n [controlName]=\"controlName\"\n [label]=\"label\"\n [notes]=\"notes\"\n [template]=\"template\"\n [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n <lib-form-input\n #input\n [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n [autofocus]=\"autofocus\"\n [controlName]=\"displayControlName\"\n [invalid]=\"isInvalid && isTouched\"\n [readOnly]=\"readOnly\"\n (blurred)=\"onContainerBlur()\"\n (click)=\"onContainerClick()\"\n (focused)=\"onContainerFocus()\"\n (keydown)=\"onKeyDown($event)\"\n >\n </lib-form-input>\n @if (showClearButton) {\n <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <div class=\"dropdown-container\">\n <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n listbox's option set, and they carry no click handler. The dropdown already\n closes on Escape, on blur and on an outside click. -->\n @if (isLoading) {\n <li role=\"presentation\" aria-live=\"polite\">\n {{ 'CatalogSelect-Loading' | translate }}\n </li>\n }\n @if (shouldUseCriteria && showMinimumCharactersMessage) {\n <li\n role=\"presentation\"\n aria-live=\"polite\"\n title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n >\n {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n </li>\n }\n @if (showNoResultsMessage) {\n <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n {{ 'CatalogSelect-NoResultsFound' | translate }}\n </li>\n }\n\n <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n @if (showFailureMessage) {\n <li class=\"error\" role=\"presentation\">\n <button\n class=\"retry\"\n type=\"button\"\n title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n (click)=\"onDropDownErrorClick()\"\n >\n {{ 'CatalogSelect-FailureMessage' | translate }}\n </button>\n </li>\n }\n\n <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n Options in a combobox listbox are deliberately not focusable. Keyboard\n interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n points at the active option through aria-activedescendant. Giving each option\n its own tabindex and key handlers would break that pattern. -->\n @for (entry of displayedEntries; track entry; let i = $index) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [attr.id]=\"getOptionId(i)\"\n [attr.aria-selected]=\"selectedValue === entry.value\"\n [class.focused]=\"focusedIndex === i\"\n [class.selected]=\"selectedValue === entry.value\"\n (click)=\"onDropDownItemClick(entry)\"\n >\n {{ entry.display }}\n </li>\n }\n <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n </ul>\n </div>\n</ng-template>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "component", type: FormInputGroupComponent, selector: "lib-form-input-group", inputs: ["autofocus", "alignContent", "controlName", "fixedValue", "format", "label", "isDisabled", "isFullHeight", "maxLength", "min", "notes", "readOnly", "rows", "showLabel", "step", "template", "type", "validations"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2094
2094
|
}
|
|
2095
2095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogSelectComponent, decorators: [{
|
|
2096
2096
|
type: Component,
|
|
2097
|
-
args: [{ selector: 'lib-catalog-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormInputComponent, FormInputGroupComponent, TranslatePipe], template: "<lib-form-input-group\n [controlName]=\"controlName\"\n [label]=\"label\"\n [notes]=\"notes\"\n [template]=\"template\"\n [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n <lib-form-input\n #input\n [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n [autofocus]=\"autofocus\"\n [controlName]=\"displayControlName\"\n [invalid]=\"isInvalid && isTouched\"\n [readOnly]=\"readOnly\"\n (blurred)=\"onContainerBlur()\"\n (click)=\"onContainerClick()\"\n (focused)=\"onContainerFocus()\"\n (keydown)=\"onKeyDown($event)\"\n >\n </lib-form-input>\n @if (showClearButton) {\n <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <div class=\"dropdown-container\">\n <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n listbox's option set, and they carry no click handler. The dropdown already\n closes on Escape, on blur and on an outside click. -->\n @if (isLoading) {\n <li role=\"presentation\" aria-live=\"polite\">\n {{ 'CatalogSelect-Loading' | translate }}\n </li>\n }\n @if (shouldUseCriteria && showMinimumCharactersMessage) {\n <li\n role=\"presentation\"\n aria-live=\"polite\"\n title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n >\n {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n </li>\n }\n @if (showNoResultsMessage) {\n <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n {{ 'CatalogSelect-NoResultsFound' | translate }}\n </li>\n }\n\n <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n @if (showFailureMessage) {\n <li class=\"error\" role=\"presentation\">\n <button\n class=\"retry\"\n type=\"button\"\n title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n (click)=\"onDropDownErrorClick()\"\n >\n {{ 'CatalogSelect-FailureMessage' | translate }}\n </button>\n </li>\n }\n\n <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n Options in a combobox listbox are deliberately not focusable. Keyboard\n interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n points at the active option through aria-activedescendant. Giving each option\n its own tabindex and key handlers would break that pattern. -->\n @for (entry of displayedEntries; track entry; let i = $index) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [attr.id]=\"getOptionId(i)\"\n [attr.aria-selected]=\"selectedValue === entry.value\"\n [class.focused]=\"focusedIndex === i\"\n [class.selected]=\"selectedValue === entry.value\"\n (click)=\"onDropDownItemClick(entry)\"\n >\n {{ entry.display }}\n </li>\n }\n <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n </ul>\n </div>\n</ng-template>\n", styles: [":host
|
|
2097
|
+
args: [{ selector: 'lib-catalog-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormInputComponent, FormInputGroupComponent, TranslatePipe], template: "<lib-form-input-group\n [controlName]=\"controlName\"\n [label]=\"label\"\n [notes]=\"notes\"\n [template]=\"template\"\n [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n <lib-form-input\n #input\n [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n [autofocus]=\"autofocus\"\n [controlName]=\"displayControlName\"\n [invalid]=\"isInvalid && isTouched\"\n [readOnly]=\"readOnly\"\n (blurred)=\"onContainerBlur()\"\n (click)=\"onContainerClick()\"\n (focused)=\"onContainerFocus()\"\n (keydown)=\"onKeyDown($event)\"\n >\n </lib-form-input>\n @if (showClearButton) {\n <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <div class=\"dropdown-container\">\n <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n listbox's option set, and they carry no click handler. The dropdown already\n closes on Escape, on blur and on an outside click. -->\n @if (isLoading) {\n <li role=\"presentation\" aria-live=\"polite\">\n {{ 'CatalogSelect-Loading' | translate }}\n </li>\n }\n @if (shouldUseCriteria && showMinimumCharactersMessage) {\n <li\n role=\"presentation\"\n aria-live=\"polite\"\n title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n >\n {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n </li>\n }\n @if (showNoResultsMessage) {\n <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n {{ 'CatalogSelect-NoResultsFound' | translate }}\n </li>\n }\n\n <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n @if (showFailureMessage) {\n <li class=\"error\" role=\"presentation\">\n <button\n class=\"retry\"\n type=\"button\"\n title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n (click)=\"onDropDownErrorClick()\"\n >\n {{ 'CatalogSelect-FailureMessage' | translate }}\n </button>\n </li>\n }\n\n <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n Options in a combobox listbox are deliberately not focusable. Keyboard\n interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n points at the active option through aria-activedescendant. Giving each option\n its own tabindex and key handlers would break that pattern. -->\n @for (entry of displayedEntries; track entry; let i = $index) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [attr.id]=\"getOptionId(i)\"\n [attr.aria-selected]=\"selectedValue === entry.value\"\n [class.focused]=\"focusedIndex === i\"\n [class.selected]=\"selectedValue === entry.value\"\n (click)=\"onDropDownItemClick(entry)\"\n >\n {{ entry.display }}\n </li>\n }\n <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n </ul>\n </div>\n</ng-template>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"] }]
|
|
2098
2098
|
}], ctorParameters: () => [], propDecorators: { bodyMouseDown: [{
|
|
2099
2099
|
type: HostListener,
|
|
2100
2100
|
args: ['body:mousedown', ['$event']]
|
|
@@ -2472,13 +2472,13 @@ class DataGridComponent extends BaseComponent {
|
|
|
2472
2472
|
return item.key;
|
|
2473
2473
|
}
|
|
2474
2474
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2475
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DataGridComponent, isStandalone: true, selector: "lib-data-grid", inputs: { disabled: "disabled", lazyLoadRows: "lazyLoadRows", showButtons: "showButtons" }, host: { properties: { "class.no-borders": "showButtons" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showButtons) {\n <div class=\"buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n viewport and the header sits outside it, so without this the headings simply stay put\n while the cells move away from them. -->\n <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n @if (isShowMultiSelect) {\n <div\n class=\"header-cell selection\"\n [ngStyle]=\"{\n width: selectionColWidth ? selectionColWidth : null,\n }\"\n >\n \n </div>\n }\n\n <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n and its heading has to collapse too.\n\n Such a heading is removed rather than merely made zero wide, because a flex item still\n takes a gap on each side while the body grid allows the collapsed track only one, and\n that spare gap pushed every heading to its right out by 16px. -->\n @for (column of columns; track column) {\n <div\n class=\"header-cell\"\n [ngStyle]=\"{\n display: column.realSize === 0 ? 'none' : null,\n 'width.px': column.realSize ?? null,\n }\"\n >\n <span>{{ column.headerName | translate }}</span>\n </div>\n }\n </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n <lib-data-grid-row\n #row\n *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n [disabled]=\"disabled\"\n [isFirstRow]=\"isFirstVisibleRow(i)\"\n [rowData]=\"row\"\n [style.height.px]=\"configs.rowHeight\"\n (selectionResized)=\"onSelectionResized($event)\"\n >\n </lib-data-grid-row>\n\n @if (loading) {\n <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenLazyLoad | translate }}\n </span>\n </div>\n }\n @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenEmpty | translate }}\n </span>\n </div>\n }\n @if (hasFailed) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n </span>\n </div>\n }\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host
|
|
2475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DataGridComponent, isStandalone: true, selector: "lib-data-grid", inputs: { disabled: "disabled", lazyLoadRows: "lazyLoadRows", showButtons: "showButtons" }, host: { properties: { "class.no-borders": "showButtons" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showButtons) {\n <div class=\"buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n viewport and the header sits outside it, so without this the headings simply stay put\n while the cells move away from them. -->\n <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n @if (isShowMultiSelect) {\n <div\n class=\"header-cell selection\"\n [ngStyle]=\"{\n width: selectionColWidth ? selectionColWidth : null,\n }\"\n >\n \n </div>\n }\n\n <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n and its heading has to collapse too.\n\n Such a heading is removed rather than merely made zero wide, because a flex item still\n takes a gap on each side while the body grid allows the collapsed track only one, and\n that spare gap pushed every heading to its right out by 16px. -->\n @for (column of columns; track column) {\n <div\n class=\"header-cell\"\n [ngStyle]=\"{\n display: column.realSize === 0 ? 'none' : null,\n 'width.px': column.realSize ?? null,\n }\"\n >\n <span>{{ column.headerName | translate }}</span>\n </div>\n }\n </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n <lib-data-grid-row\n #row\n *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n [disabled]=\"disabled\"\n [isFirstRow]=\"isFirstVisibleRow(i)\"\n [rowData]=\"row\"\n [style.height.px]=\"configs.rowHeight\"\n (selectionResized)=\"onSelectionResized($event)\"\n >\n </lib-data-grid-row>\n\n @if (loading) {\n <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenLazyLoad | translate }}\n </span>\n </div>\n }\n @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenEmpty | translate }}\n </span>\n </div>\n }\n @if (hasFailed) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n </span>\n </div>\n }\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"], dependencies: [{ kind: "component", type: DataGridRowComponent, selector: "lib-data-grid-row", inputs: ["disabled", "isFirstRow", "rowData"], outputs: ["selectionResized"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2476
2476
|
}
|
|
2477
2477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
2478
2478
|
type: Component,
|
|
2479
2479
|
args: [{ selector: 'lib-data-grid', host: {
|
|
2480
2480
|
'[class.no-borders]': 'showButtons',
|
|
2481
|
-
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridRowComponent, NgStyle, ScrollingModule, TranslatePipe], template: "@if (showButtons) {\n <div class=\"buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n viewport and the header sits outside it, so without this the headings simply stay put\n while the cells move away from them. -->\n <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n @if (isShowMultiSelect) {\n <div\n class=\"header-cell selection\"\n [ngStyle]=\"{\n width: selectionColWidth ? selectionColWidth : null,\n }\"\n >\n \n </div>\n }\n\n <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n and its heading has to collapse too.\n\n Such a heading is removed rather than merely made zero wide, because a flex item still\n takes a gap on each side while the body grid allows the collapsed track only one, and\n that spare gap pushed every heading to its right out by 16px. -->\n @for (column of columns; track column) {\n <div\n class=\"header-cell\"\n [ngStyle]=\"{\n display: column.realSize === 0 ? 'none' : null,\n 'width.px': column.realSize ?? null,\n }\"\n >\n <span>{{ column.headerName | translate }}</span>\n </div>\n }\n </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n <lib-data-grid-row\n #row\n *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n [disabled]=\"disabled\"\n [isFirstRow]=\"isFirstVisibleRow(i)\"\n [rowData]=\"row\"\n [style.height.px]=\"configs.rowHeight\"\n (selectionResized)=\"onSelectionResized($event)\"\n >\n </lib-data-grid-row>\n\n @if (loading) {\n <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenLazyLoad | translate }}\n </span>\n </div>\n }\n @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenEmpty | translate }}\n </span>\n </div>\n }\n @if (hasFailed) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n </span>\n </div>\n }\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host
|
|
2481
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridRowComponent, NgStyle, ScrollingModule, TranslatePipe], template: "@if (showButtons) {\n <div class=\"buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n viewport and the header sits outside it, so without this the headings simply stay put\n while the cells move away from them. -->\n <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n @if (isShowMultiSelect) {\n <div\n class=\"header-cell selection\"\n [ngStyle]=\"{\n width: selectionColWidth ? selectionColWidth : null,\n }\"\n >\n \n </div>\n }\n\n <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n and its heading has to collapse too.\n\n Such a heading is removed rather than merely made zero wide, because a flex item still\n takes a gap on each side while the body grid allows the collapsed track only one, and\n that spare gap pushed every heading to its right out by 16px. -->\n @for (column of columns; track column) {\n <div\n class=\"header-cell\"\n [ngStyle]=\"{\n display: column.realSize === 0 ? 'none' : null,\n 'width.px': column.realSize ?? null,\n }\"\n >\n <span>{{ column.headerName | translate }}</span>\n </div>\n }\n </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n <lib-data-grid-row\n #row\n *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n [disabled]=\"disabled\"\n [isFirstRow]=\"isFirstVisibleRow(i)\"\n [rowData]=\"row\"\n [style.height.px]=\"configs.rowHeight\"\n (selectionResized)=\"onSelectionResized($event)\"\n >\n </lib-data-grid-row>\n\n @if (loading) {\n <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenLazyLoad | translate }}\n </span>\n </div>\n }\n @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenEmpty | translate }}\n </span>\n </div>\n }\n @if (hasFailed) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n </span>\n </div>\n }\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"] }]
|
|
2482
2482
|
}], ctorParameters: () => [], propDecorators: { bodyElement: [{
|
|
2483
2483
|
type: ViewChild,
|
|
2484
2484
|
args: ['body']
|
|
@@ -2505,13 +2505,13 @@ class FormGroupComponent {
|
|
|
2505
2505
|
return !!this.label;
|
|
2506
2506
|
}
|
|
2507
2507
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2508
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormGroupComponent, isStandalone: true, selector: "lib-form-group", inputs: { shouldExpand: "shouldExpand", label: "label" }, host: { properties: { "class.expand": "shouldExpand" } }, ngImport: i0, template: "@if (hasTitle) {\n <h3 class=\"title\">\n {{ label | translate }}\n </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n <ng-content></ng-content>\n</div>\n", styles: [":host
|
|
2508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormGroupComponent, isStandalone: true, selector: "lib-form-group", inputs: { shouldExpand: "shouldExpand", label: "label" }, host: { properties: { "class.expand": "shouldExpand" } }, ngImport: i0, template: "@if (hasTitle) {\n <h3 class=\"title\">\n {{ label | translate }}\n </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2509
2509
|
}
|
|
2510
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
2511
2511
|
type: Component,
|
|
2512
2512
|
args: [{ selector: 'lib-form-group', imports: [TranslatePipe], host: {
|
|
2513
2513
|
'[class.expand]': 'shouldExpand',
|
|
2514
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitle) {\n <h3 class=\"title\">\n {{ label | translate }}\n </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n <ng-content></ng-content>\n</div>\n", styles: [":host
|
|
2514
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitle) {\n <h3 class=\"title\">\n {{ label | translate }}\n </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"] }]
|
|
2515
2515
|
}], propDecorators: { shouldExpand: [{
|
|
2516
2516
|
type: Input
|
|
2517
2517
|
}], label: [{
|
|
@@ -2561,11 +2561,11 @@ class GroupAccordionComponent {
|
|
|
2561
2561
|
this._maxHeight = this.containerElementRef?.nativeElement?.offsetHeight ?? 0;
|
|
2562
2562
|
}
|
|
2563
2563
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2564
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: GroupAccordionComponent, isStandalone: true, selector: "lib-group-accordion", inputs: { label: "label" }, host: { properties: { "class.collapsed": "collapsed" } }, viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight,\n }) ||\n null\n \"\n>\n <div #maxHeighContainer>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host
|
|
2564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: GroupAccordionComponent, isStandalone: true, selector: "lib-group-accordion", inputs: { label: "label" }, host: { properties: { "class.collapsed": "collapsed" } }, viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight,\n }) ||\n null\n \"\n>\n <div #maxHeighContainer>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{margin-bottom:1rem;display:flex;flex-direction:column}:host.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.collapsed .content{max-height:0px!important;overflow:hidden!important}:host:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media(min-width:1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media(min-width:1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2565
2565
|
}
|
|
2566
2566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupAccordionComponent, decorators: [{
|
|
2567
2567
|
type: Component,
|
|
2568
|
-
args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgStyle], template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight,\n }) ||\n null\n \"\n>\n <div #maxHeighContainer>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host
|
|
2568
|
+
args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgStyle], template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight,\n }) ||\n null\n \"\n>\n <div #maxHeighContainer>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{margin-bottom:1rem;display:flex;flex-direction:column}:host.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.collapsed .content{max-height:0px!important;overflow:hidden!important}:host:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media(min-width:1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media(min-width:1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"] }]
|
|
2569
2569
|
}], propDecorators: { containerElementRef: [{
|
|
2570
2570
|
type: ViewChild,
|
|
2571
2571
|
args: ['container']
|
|
@@ -2660,11 +2660,11 @@ class GroupContainerComponent {
|
|
|
2660
2660
|
this.scrollSpy.scrollTo(section);
|
|
2661
2661
|
}
|
|
2662
2662
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2663
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupContainerComponent, isStandalone: true, selector: "lib-group-container", inputs: { title: "title", icon: "icon" }, queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"title\">\n @if (!!title && !!icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n }\n @if (!!title) {\n <h4>{{ title | translate }}</h4>\n }\n @if (!title) {\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n }\n</div>\n\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host
|
|
2663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupContainerComponent, isStandalone: true, selector: "lib-group-container", inputs: { title: "title", icon: "icon" }, queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"title\">\n @if (!!title && !!icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n }\n @if (!!title) {\n <h4>{{ title | translate }}</h4>\n }\n @if (!title) {\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n }\n</div>\n\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2664
2664
|
}
|
|
2665
2665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupContainerComponent, decorators: [{
|
|
2666
2666
|
type: Component,
|
|
2667
|
-
args: [{ selector: 'lib-group-container', imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">\n @if (!!title && !!icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n }\n @if (!!title) {\n <h4>{{ title | translate }}</h4>\n }\n @if (!title) {\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n }\n</div>\n\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host
|
|
2667
|
+
args: [{ selector: 'lib-group-container', imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">\n @if (!!title && !!icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n }\n @if (!!title) {\n <h4>{{ title | translate }}</h4>\n }\n @if (!title) {\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n }\n</div>\n\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"] }]
|
|
2668
2668
|
}], propDecorators: { scrollSpy: [{
|
|
2669
2669
|
type: ViewChild,
|
|
2670
2670
|
args: [ScrollSpyDirective]
|
|
@@ -2691,11 +2691,11 @@ class GroupScrollSpyComponent {
|
|
|
2691
2691
|
this.scrollSpy.scrollTo(section);
|
|
2692
2692
|
}
|
|
2693
2693
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupScrollSpyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupScrollSpyComponent, isStandalone: true, selector: "lib-group-scroll-spy", queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"scroll-spy\">\n @for (title of titles; track title; let i = $index) {\n <a\n class=\"item\"\n [class.active]=\"i === activeSection\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"i === activeSection\"\n (click)=\"scrollTo(i)\"\n (keydown.enter)=\"scrollTo(i)\"\n (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n >{{ title }}</a\n >\n }\n</div>\n\n<div\n class=\"content\"\n libScrollSpy\n [class.no-scroll-spy]=\"titles.length === 0\"\n [spiedTags]=\"['lib-group-accordion']\"\n (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host
|
|
2694
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupScrollSpyComponent, isStandalone: true, selector: "lib-group-scroll-spy", queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"scroll-spy\">\n @for (title of titles; track title; let i = $index) {\n <a\n class=\"item\"\n [class.active]=\"i === activeSection\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"i === activeSection\"\n (click)=\"scrollTo(i)\"\n (keydown.enter)=\"scrollTo(i)\"\n (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n >{{ title }}</a\n >\n }\n</div>\n\n<div\n class=\"content\"\n libScrollSpy\n [class.no-scroll-spy]=\"titles.length === 0\"\n [spiedTags]=\"['lib-group-accordion']\"\n (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media(min-width:768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media(min-width:768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"], dependencies: [{ kind: "directive", type: ScrollSpyDirective, selector: "[libScrollSpy]", inputs: ["spiedTags"], outputs: ["activeSectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2695
2695
|
}
|
|
2696
2696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupScrollSpyComponent, decorators: [{
|
|
2697
2697
|
type: Component,
|
|
2698
|
-
args: [{ selector: 'lib-group-scroll-spy', changeDetection: ChangeDetectionStrategy.Eager, imports: [ScrollSpyDirective], template: "<div class=\"scroll-spy\">\n @for (title of titles; track title; let i = $index) {\n <a\n class=\"item\"\n [class.active]=\"i === activeSection\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"i === activeSection\"\n (click)=\"scrollTo(i)\"\n (keydown.enter)=\"scrollTo(i)\"\n (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n >{{ title }}</a\n >\n }\n</div>\n\n<div\n class=\"content\"\n libScrollSpy\n [class.no-scroll-spy]=\"titles.length === 0\"\n [spiedTags]=\"['lib-group-accordion']\"\n (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host
|
|
2698
|
+
args: [{ selector: 'lib-group-scroll-spy', changeDetection: ChangeDetectionStrategy.Eager, imports: [ScrollSpyDirective], template: "<div class=\"scroll-spy\">\n @for (title of titles; track title; let i = $index) {\n <a\n class=\"item\"\n [class.active]=\"i === activeSection\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"i === activeSection\"\n (click)=\"scrollTo(i)\"\n (keydown.enter)=\"scrollTo(i)\"\n (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n >{{ title }}</a\n >\n }\n</div>\n\n<div\n class=\"content\"\n libScrollSpy\n [class.no-scroll-spy]=\"titles.length === 0\"\n [spiedTags]=\"['lib-group-accordion']\"\n (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media(min-width:768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media(min-width:768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"] }]
|
|
2699
2699
|
}], propDecorators: { scrollSpy: [{
|
|
2700
2700
|
type: ViewChild,
|
|
2701
2701
|
args: [ScrollSpyDirective]
|
|
@@ -3043,13 +3043,13 @@ class MultiSelectResultGridComponent extends BaseComponent {
|
|
|
3043
3043
|
}
|
|
3044
3044
|
}
|
|
3045
3045
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MultiSelectResultGridComponent, isStandalone: true, selector: "lib-multi-select-result-grid", inputs: { isDisabled: "isDisabled", template: "template" }, host: { classAttribute: "flex-grow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n @for (row of resultDataset.displayedRows; track row; let i = $index) {\n <div class=\"row\">\n <div class=\"cell\">\n <button\n class=\"remove\"\n type=\"button\"\n [class.disabled]=\"isDisabled\"\n [disabled]=\"isDisabled\"\n (click)=\"onItemRemoved(i)\"\n >\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"cell\">\n <div>\n <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n </div>\n </div>\n </div>\n }\n @if (isLoading) {\n <div class=\"loading\">\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n</div>\n", styles: [":host
|
|
3046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MultiSelectResultGridComponent, isStandalone: true, selector: "lib-multi-select-result-grid", inputs: { isDisabled: "isDisabled", template: "template" }, host: { classAttribute: "flex-grow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n @for (row of resultDataset.displayedRows; track row; let i = $index) {\n <div class=\"row\">\n <div class=\"cell\">\n <button\n class=\"remove\"\n type=\"button\"\n [class.disabled]=\"isDisabled\"\n [disabled]=\"isDisabled\"\n (click)=\"onItemRemoved(i)\"\n >\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"cell\">\n <div>\n <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n </div>\n </div>\n </div>\n }\n @if (isLoading) {\n <div class=\"loading\">\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n</div>\n", styles: [":host{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3047
3047
|
}
|
|
3048
3048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultGridComponent, decorators: [{
|
|
3049
3049
|
type: Component,
|
|
3050
3050
|
args: [{ selector: 'lib-multi-select-result-grid', host: {
|
|
3051
3051
|
class: 'flex-grow',
|
|
3052
|
-
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, TranslatePipe], template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n @for (row of resultDataset.displayedRows; track row; let i = $index) {\n <div class=\"row\">\n <div class=\"cell\">\n <button\n class=\"remove\"\n type=\"button\"\n [class.disabled]=\"isDisabled\"\n [disabled]=\"isDisabled\"\n (click)=\"onItemRemoved(i)\"\n >\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"cell\">\n <div>\n <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n </div>\n </div>\n </div>\n }\n @if (isLoading) {\n <div class=\"loading\">\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n</div>\n", styles: [":host
|
|
3052
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, TranslatePipe], template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n @for (row of resultDataset.displayedRows; track row; let i = $index) {\n <div class=\"row\">\n <div class=\"cell\">\n <button\n class=\"remove\"\n type=\"button\"\n [class.disabled]=\"isDisabled\"\n [disabled]=\"isDisabled\"\n (click)=\"onItemRemoved(i)\"\n >\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"cell\">\n <div>\n <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n </div>\n </div>\n </div>\n }\n @if (isLoading) {\n <div class=\"loading\">\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n</div>\n", styles: [":host{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"] }]
|
|
3053
3053
|
}], ctorParameters: () => [], propDecorators: { isDisabled: [{
|
|
3054
3054
|
type: Input
|
|
3055
3055
|
}], template: [{
|
|
@@ -3616,14 +3616,14 @@ class RibbonButtonComponent {
|
|
|
3616
3616
|
(option.isAccessAllowed == undefined && option.allowedActions?.length > 0)));
|
|
3617
3617
|
}
|
|
3618
3618
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n <a\n class=\"button\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onButtonClicked()\"\n (keydown.enter)=\"onButtonClicked()\"\n (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n >\n <span class=\"icon\" [class.loading]=\"loading\">\n <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </span>\n\n <span class=\"label\" [class.text-white]=\"status !== null\">\n {{ label | translate }}\n </span>\n </a>\n\n @if (options.length > 0) {\n <a\n class=\"button-dropdown\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"showDropdown\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onShowHideDropdown()\"\n (keydown.enter)=\"onShowHideDropdown()\"\n (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n </a>\n }\n</div>\n\n@if (options.length > 0) {\n <ul class=\"options-dropdown\" role=\"menu\">\n @for (option of options; track option; let i = $index) {\n <li\n role=\"menuitem\"\n [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.default-option]=\"i === defaultOption\"\n [class.disabled]=\"isOptionDisabled(option)\"\n [class.hidden]=\"!isOptionVisible(option)\"\n (click)=\"onOptionClicked(option)\"\n (keydown.enter)=\"onOptionClicked(option)\"\n (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n >\n @if (!!option.icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n }\n {{ option.label | translate }}\n </li>\n }\n </ul>\n}\n", styles: [":host
|
|
3619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n <a\n class=\"button\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onButtonClicked()\"\n (keydown.enter)=\"onButtonClicked()\"\n (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n >\n <span class=\"icon\" [class.loading]=\"loading\">\n <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </span>\n\n <span class=\"label\" [class.text-white]=\"status !== null\">\n {{ label | translate }}\n </span>\n </a>\n\n @if (options.length > 0) {\n <a\n class=\"button-dropdown\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"showDropdown\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onShowHideDropdown()\"\n (keydown.enter)=\"onShowHideDropdown()\"\n (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n </a>\n }\n</div>\n\n@if (options.length > 0) {\n <ul class=\"options-dropdown\" role=\"menu\">\n @for (option of options; track option; let i = $index) {\n <li\n role=\"menuitem\"\n [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.default-option]=\"i === defaultOption\"\n [class.disabled]=\"isOptionDisabled(option)\"\n [class.hidden]=\"!isOptionVisible(option)\"\n (click)=\"onOptionClicked(option)\"\n (keydown.enter)=\"onOptionClicked(option)\"\n (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n >\n @if (!!option.icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n }\n {{ option.label | translate }}\n </li>\n }\n </ul>\n}\n", styles: [":host.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media(min-width:768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media(min-width:768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media(min-width:768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3620
3620
|
}
|
|
3621
3621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonButtonComponent, decorators: [{
|
|
3622
3622
|
type: Component,
|
|
3623
3623
|
args: [{ selector: 'lib-ribbon-button', host: {
|
|
3624
3624
|
'[class.dropdown]': 'options.length > 0',
|
|
3625
3625
|
'[class.show]': 'showDropdown',
|
|
3626
|
-
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, TranslatePipe], template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n <a\n class=\"button\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onButtonClicked()\"\n (keydown.enter)=\"onButtonClicked()\"\n (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n >\n <span class=\"icon\" [class.loading]=\"loading\">\n <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </span>\n\n <span class=\"label\" [class.text-white]=\"status !== null\">\n {{ label | translate }}\n </span>\n </a>\n\n @if (options.length > 0) {\n <a\n class=\"button-dropdown\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"showDropdown\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onShowHideDropdown()\"\n (keydown.enter)=\"onShowHideDropdown()\"\n (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n </a>\n }\n</div>\n\n@if (options.length > 0) {\n <ul class=\"options-dropdown\" role=\"menu\">\n @for (option of options; track option; let i = $index) {\n <li\n role=\"menuitem\"\n [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.default-option]=\"i === defaultOption\"\n [class.disabled]=\"isOptionDisabled(option)\"\n [class.hidden]=\"!isOptionVisible(option)\"\n (click)=\"onOptionClicked(option)\"\n (keydown.enter)=\"onOptionClicked(option)\"\n (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n >\n @if (!!option.icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n }\n {{ option.label | translate }}\n </li>\n }\n </ul>\n}\n", styles: [":host
|
|
3626
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, TranslatePipe], template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n <a\n class=\"button\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onButtonClicked()\"\n (keydown.enter)=\"onButtonClicked()\"\n (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n >\n <span class=\"icon\" [class.loading]=\"loading\">\n <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </span>\n\n <span class=\"label\" [class.text-white]=\"status !== null\">\n {{ label | translate }}\n </span>\n </a>\n\n @if (options.length > 0) {\n <a\n class=\"button-dropdown\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"showDropdown\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onShowHideDropdown()\"\n (keydown.enter)=\"onShowHideDropdown()\"\n (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n </a>\n }\n</div>\n\n@if (options.length > 0) {\n <ul class=\"options-dropdown\" role=\"menu\">\n @for (option of options; track option; let i = $index) {\n <li\n role=\"menuitem\"\n [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.default-option]=\"i === defaultOption\"\n [class.disabled]=\"isOptionDisabled(option)\"\n [class.hidden]=\"!isOptionVisible(option)\"\n (click)=\"onOptionClicked(option)\"\n (keydown.enter)=\"onOptionClicked(option)\"\n (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n >\n @if (!!option.icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n }\n {{ option.label | translate }}\n </li>\n }\n </ul>\n}\n", styles: [":host.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media(min-width:768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media(min-width:768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media(min-width:768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
|
|
3627
3627
|
}], propDecorators: { color: [{
|
|
3628
3628
|
type: Input
|
|
3629
3629
|
}], defaultOption: [{
|
|
@@ -3657,11 +3657,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
|
|
|
3657
3657
|
|
|
3658
3658
|
class RibbonComponent {
|
|
3659
3659
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3660
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host
|
|
3660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host div{display:inline-flex;gap:.5rem}:host ::ng-deep *[right]{display:flex}:host ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3661
3661
|
}
|
|
3662
3662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonComponent, decorators: [{
|
|
3663
3663
|
type: Component,
|
|
3664
|
-
args: [{ selector: 'lib-ribbon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host
|
|
3664
|
+
args: [{ selector: 'lib-ribbon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host div{display:inline-flex;gap:.5rem}:host ::ng-deep *[right]{display:flex}:host ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
|
|
3665
3665
|
}] });
|
|
3666
3666
|
|
|
3667
3667
|
class RibbonGroupComponent {
|
|
@@ -3678,11 +3678,11 @@ class RibbonGroupComponent {
|
|
|
3678
3678
|
return this.children?.some((x) => x.visible) ?? false;
|
|
3679
3679
|
}
|
|
3680
3680
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3681
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonGroupComponent, isStandalone: true, selector: "lib-ribbon-group", inputs: { label: "label" }, host: { properties: { "class.hidden": "!hasChildren" } }, queries: [{ propertyName: "children", predicate: RibbonGroupChild, descendants: true }], ngImport: i0, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host
|
|
3681
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonGroupComponent, isStandalone: true, selector: "lib-ribbon-group", inputs: { label: "label" }, host: { properties: { "class.hidden": "!hasChildren" } }, queries: [{ propertyName: "children", predicate: RibbonGroupChild, descendants: true }], ngImport: i0, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host{position:relative;padding-right:.5rem}:host:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3682
3682
|
}
|
|
3683
3683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonGroupComponent, decorators: [{
|
|
3684
3684
|
type: Component,
|
|
3685
|
-
args: [{ selector: 'lib-ribbon-group', changeDetection: ChangeDetectionStrategy.Eager, host: { '[class.hidden]': '!hasChildren' }, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host
|
|
3685
|
+
args: [{ selector: 'lib-ribbon-group', changeDetection: ChangeDetectionStrategy.Eager, host: { '[class.hidden]': '!hasChildren' }, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host{position:relative;padding-right:.5rem}:host:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
|
|
3686
3686
|
}], propDecorators: { children: [{
|
|
3687
3687
|
type: ContentChildren,
|
|
3688
3688
|
args: [RibbonGroupChild, { descendants: true }]
|