mapa-library-ui 2.0.2 → 2.0.4
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/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +5 -3
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +5 -3
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs +9 -3
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +14 -6
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +2 -0
- package/mapa-library-ui-2.0.4.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/table/index.d.ts +2 -0
- package/mapa-library-ui-2.0.2.tgz +0 -0
|
@@ -6787,11 +6787,13 @@ class MapaDatepicker {
|
|
|
6787
6787
|
this.openedChange.emit(isOpen);
|
|
6788
6788
|
}
|
|
6789
6789
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker, mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true }, { propertyName: "picker", first: true, predicate: NgxsmkDatepickerComponent, descendants: true }], ngImport: i0, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 280px),100%);max-width:var(--mapa-datepicker-max-width, 280px)!important;min-width:0;box-sizing:border-box}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 8px 0 16px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:72px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 8px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: NgxsmkDatepickerComponent, selector: "ngxsmk-datepicker", inputs: ["mode", "calendarViewMode", "isInvalidDate", "asyncDateFilter", "showRanges", "showTime", "timeOnly", "timeRangeMode", "showCalendarButton", "minuteInterval", "use24Hour", "secondInterval", "showSeconds", "holidayProvider", "disableHolidays", "disabledDates", "disabledRanges", "recurringPattern", "dateTemplate", "placeholder", "inline", "responsive", "inputId", "name", "autocomplete", "translations", "translationService", "clearLabel", "closeLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "clearAriaLabel", "closeAriaLabel", "weekStart", "yearRange", "timezone", "showOtherMonths", "hooks", "enableKeyboardShortcuts", "customShortcuts", "autoApplyClose", "allowSameDay", "displayFormat", "allowTyping", "inputMask", "enableNaturalLanguage", "naturalLanguagePreviewTemplate", "calendars", "rangePresetFactory", "showTimezoneSelector", "defaultTimezone", "calendarCount", "calendarLayout", "changeActiveMonthOnSelection", "showWeekNumbers", "weekNumberLabel", "secondaryCalendar", "dayMetadata", "calendarHeaderTemplate", "calendarFooterTemplate", "defaultMonthOffset", "syncScroll", "align", "useNativePicker", "enableHapticFeedback", "mobileModalStyle", "mobileTimePickerStyle", "enablePullToRefresh", "mobileTheme", "enableVoiceInput", "autoDetectMobile", "disableFocusTrap", "appendToBody", "value", "field", "startAt", "locale", "theme", "dateFormatPattern", "animationConfig", "rtl", "classes", "disabledState", "required", "errorState", "userAriaDescribedBy", "minDate", "maxDate", "ranges", "comparisonRange"], outputs: ["asyncDateFilterLoading", "asyncDateFilterError", "naturalLanguageResolved", "invalidRange", "timezoneChange", "valueChange", "action", "validationError"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6790
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker, mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" }, properties: { "class.mapa-datepicker--range": "mode() === \"range\"" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true }, { propertyName: "picker", first: true, predicate: NgxsmkDatepickerComponent, descendants: true }], ngImport: i0, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 310px),100%);max-width:var(--mapa-datepicker-max-width, 310px)!important;min-width:0;box-sizing:border-box}:host(.mapa-datepicker--range){width:min(var(--mapa-datepicker-width, 272px),100%);max-width:var(--mapa-datepicker-max-width, 272px)!important}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__field .mapa-datepicker__toggle{margin-right:14px}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 14px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:48px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;margin:0!important;padding:0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__range-end{padding-left:4px}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 4px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: NgxsmkDatepickerComponent, selector: "ngxsmk-datepicker", inputs: ["mode", "calendarViewMode", "isInvalidDate", "asyncDateFilter", "showRanges", "showTime", "timeOnly", "timeRangeMode", "showCalendarButton", "minuteInterval", "use24Hour", "secondInterval", "showSeconds", "holidayProvider", "disableHolidays", "disabledDates", "disabledRanges", "recurringPattern", "dateTemplate", "placeholder", "inline", "responsive", "inputId", "name", "autocomplete", "translations", "translationService", "clearLabel", "closeLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "clearAriaLabel", "closeAriaLabel", "weekStart", "yearRange", "timezone", "showOtherMonths", "hooks", "enableKeyboardShortcuts", "customShortcuts", "autoApplyClose", "allowSameDay", "displayFormat", "allowTyping", "inputMask", "enableNaturalLanguage", "naturalLanguagePreviewTemplate", "calendars", "rangePresetFactory", "showTimezoneSelector", "defaultTimezone", "calendarCount", "calendarLayout", "changeActiveMonthOnSelection", "showWeekNumbers", "weekNumberLabel", "secondaryCalendar", "dayMetadata", "calendarHeaderTemplate", "calendarFooterTemplate", "defaultMonthOffset", "syncScroll", "align", "useNativePicker", "enableHapticFeedback", "mobileModalStyle", "mobileTimePickerStyle", "enablePullToRefresh", "mobileTheme", "enableVoiceInput", "autoDetectMobile", "disableFocusTrap", "appendToBody", "value", "field", "startAt", "locale", "theme", "dateFormatPattern", "animationConfig", "rtl", "classes", "disabledState", "required", "errorState", "userAriaDescribedBy", "minDate", "maxDate", "ranges", "comparisonRange"], outputs: ["asyncDateFilterLoading", "asyncDateFilterError", "naturalLanguageResolved", "invalidRange", "timezoneChange", "valueChange", "action", "validationError"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6791
6791
|
}
|
|
6792
6792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, decorators: [{
|
|
6793
6793
|
type: Component,
|
|
6794
|
-
args: [{ selector: 'mapa-datepicker, mapa-datepicker-range',
|
|
6794
|
+
args: [{ selector: 'mapa-datepicker, mapa-datepicker-range', host: {
|
|
6795
|
+
'[class.mapa-datepicker--range]': 'mode() === "range"',
|
|
6796
|
+
}, standalone: true, imports: [
|
|
6795
6797
|
NgTemplateOutlet,
|
|
6796
6798
|
ReactiveFormsModule,
|
|
6797
6799
|
NgxMaskDirective,
|
|
@@ -6802,7 +6804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
6802
6804
|
CdkOverlayOrigin,
|
|
6803
6805
|
NgxsmkDatepickerComponent,
|
|
6804
6806
|
MapaFormErrorsComponent,
|
|
6805
|
-
], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 280px),100%);max-width:var(--mapa-datepicker-max-width, 280px)!important;min-width:0;box-sizing:border-box}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 8px 0 16px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:72px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 8px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"] }]
|
|
6807
|
+
], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 310px),100%);max-width:var(--mapa-datepicker-max-width, 310px)!important;min-width:0;box-sizing:border-box}:host(.mapa-datepicker--range){width:min(var(--mapa-datepicker-width, 272px),100%);max-width:var(--mapa-datepicker-max-width, 272px)!important}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__field .mapa-datepicker__toggle{margin-right:14px}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 14px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:48px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;margin:0!important;padding:0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__range-end{padding-left:4px}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 4px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"] }]
|
|
6806
6808
|
}], propDecorators: { formGroup: [{
|
|
6807
6809
|
type: Input,
|
|
6808
6810
|
args: [{ required: true }]
|
|
@@ -7889,9 +7891,12 @@ class MapaTableComponent {
|
|
|
7889
7891
|
return Array.from({ length: Math.max(this.pageSize, 0) }, (_, index) => index);
|
|
7890
7892
|
}
|
|
7891
7893
|
skeletonColumnWidth(column) {
|
|
7892
|
-
return (column
|
|
7894
|
+
return (this.columnWidth(column) ||
|
|
7893
7895
|
(this.columns.length ? `${100 / this.columns.length}%` : '100%'));
|
|
7894
7896
|
}
|
|
7897
|
+
columnWidth(column) {
|
|
7898
|
+
return column.width || (this.isCompactColumn(column) ? '1%' : null);
|
|
7899
|
+
}
|
|
7895
7900
|
rowIdentity(row, index) {
|
|
7896
7901
|
return this.getRowKey(row) || row || index;
|
|
7897
7902
|
}
|
|
@@ -8130,6 +8135,9 @@ class MapaTableComponent {
|
|
|
8130
8135
|
normalizeCollapse(collapse) {
|
|
8131
8136
|
return collapse === 'nowrap' ? 'no-wrap' : collapse;
|
|
8132
8137
|
}
|
|
8138
|
+
isCompactColumn(column) {
|
|
8139
|
+
return ['actions', 'menu'].includes(column.key);
|
|
8140
|
+
}
|
|
8133
8141
|
getFilterValue(value) {
|
|
8134
8142
|
if (value == null)
|
|
8135
8143
|
return '';
|
|
@@ -8166,7 +8174,7 @@ class MapaTableComponent {
|
|
|
8166
8174
|
useFactory: customPaginatorFactory,
|
|
8167
8175
|
deps: [MapaI18nService, Injector],
|
|
8168
8176
|
},
|
|
8169
|
-
], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], ngImport: i0, template: "<section\n class=\"mapa-data-table\"\n [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n <div class=\"mapa-data-table__frame\">\n @if (isLoading) {\n <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\"></th>\n }\n @for (column of columns; track column.key) {\n <th [style.width]=\"skeletonColumnWidth(column)\">\n {{ column.label }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of skeletonRows; track row) {\n <tr>\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <span\n class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n ></span>\n </td>\n }\n @for (column of columns; track column.key) {\n <td [style.width]=\"skeletonColumnWidth(column)\">\n <span class=\"mapa-data-table__skeleton\"></span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n <span class=\"mapa-data-table__sr-only\" role=\"status\">\n {{ texts.table.loading }}\n </span>\n } @else if (error) {\n <div class=\"mapa-data-table__state\" role=\"alert\">\n <strong>{{ resolvedErrorTitle }}</strong>\n @if (resolvedErrorSubtitle) {\n <span>{{ resolvedErrorSubtitle }}</span>\n }\n @if (retry.observed) {\n <button type=\"button\" (click)=\"retry.emit()\">\n {{ resolvedRetryLabel }}\n </button>\n }\n </div>\n } @else if (visibleData.length > 0) {\n <table class=\"mapa-data-table__table\">\n @if (caption) {\n <caption class=\"mapa-data-table__sr-only\">\n {{\n caption\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\">\n @if (showSelectAll) {\n <mat-checkbox\n color=\"primary\"\n [checked]=\"allVisibleSelected()\"\n [indeterminate]=\"someVisibleSelected()\"\n [aria-label]=\"texts.table.selectAllVisible\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleVisibleRows($event.checked)\"\n />\n } @else {\n <span class=\"mapa-data-table__sr-only\">\n {{ texts.table.selectionColumn }}\n </span>\n }\n </th>\n }\n @for (column of columns; track column.key) {\n <th\n [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"column.width ?? null\"\n [attr.aria-sort]=\"ariaSort(column)\"\n >\n @if (isSortable(column)) {\n <button\n type=\"button\"\n class=\"mapa-data-table__sort\"\n (click)=\"changeSort(column)\"\n >\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n <mat-icon aria-hidden=\"true\">{{\n sortIcon(column)\n }}</mat-icon>\n </button>\n } @else {\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleData; track rowIdentity(row, $index)) {\n <tr\n [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n (click)=\"emitRowInteraction($event, row)\"\n (keydown)=\"emitRowKeyboard($event, row)\"\n >\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <mat-checkbox\n color=\"primary\"\n [checked]=\"isSelected(row)\"\n [aria-label]=\"selectionLabel(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleRow(row, $event.checked)\"\n />\n </td>\n }\n @for (column of columns; track column.key) {\n <td\n [attr.data-label]=\"column.label\"\n [class.mapa-data-table__cell--center]=\"\n isCenterAligned(column)\n \"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"column.width ?? null\"\n >\n <div\n class=\"mapa-data-table__cell-content\"\n [ngClass]=\"cellClasses(column, row)\"\n >\n @if (cellTemplate(column.key); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n row,\n column,\n }\"\n ></ng-container>\n } @else if (column.key === \"actions\") {\n <div class=\"mapa-data-table__actions\">\n @for (item of getActionItems(row); track item) {\n @if (route(item); as actionRoute) {\n <a\n class=\"mapa-data-table__action\"\n [class.mapa-data-table__action--disabled]=\"\n item.disabled\n \"\n [attr.aria-disabled]=\"\n item.disabled ? 'true' : null\n \"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [title]=\"item.text\"\n [routerLink]=\"item.disabled ? null : actionRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"mapa-data-table__action\"\n [disabled]=\"item.disabled\"\n [title]=\"item.text\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </button>\n }\n }\n </div>\n } @else if (column.key === \"menu\") {\n @if (getMenuItems(row).length > 0) {\n <button\n type=\"button\"\n class=\"mapa-data-table__menu-trigger\"\n [matMenuTriggerFor]=\"rowMenu\"\n [attr.aria-label]=\"column.label\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n </button>\n <mat-menu #rowMenu=\"matMenu\">\n @for (item of getMenuItems(row); track item) {\n @if (route(item); as menuRoute) {\n <a\n mat-menu-item\n [disabled]=\"item.disabled\"\n [routerLink]=\"item.disabled ? null : menuRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </a>\n } @else {\n <button\n mat-menu-item\n [disabled]=\"item.disabled\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </mat-menu>\n }\n } @else if (dateFormat(column); as format) {\n @if (dateValue(row, column); as value) {\n {{ value | date: format }}\n } @else {\n {{ column.fallback ?? \"-\" }}\n }\n } @else if (column.status) {\n <span\n class=\"mapa-data-table__status\"\n [class.mapa-data-table__status--round]=\"\n column.status.style === 'round'\n \"\n [style.background-color]=\"statusBackground(column, row)\"\n [style.color]=\"statusTextColor(column, row)\"\n [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n ></span>\n } @else {\n <span\n [innerHTML]=\"cellValue(row, column) | safeHtml\"\n ></span>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @else if (isFinished) {\n <div class=\"mapa-data-table__state\">\n <strong>{{ resolvedEmptyTitle }}</strong>\n @if (resolvedEmptySubtitle) {\n <span>{{ resolvedEmptySubtitle }}</span>\n }\n </div>\n }\n </div>\n\n @if (shouldShowPaginator) {\n <mat-paginator\n class=\"mapa-data-table__paginator\"\n appBubblePagination\n [appCustomLength]=\"totalCount\"\n [bubblePageIndex]=\"zeroBasedPageIndex\"\n [pageIndex]=\"zeroBasedPageIndex\"\n [showFirstButton]=\"paginatorShowFirstButton\"\n [showLastButton]=\"paginatorShowLastButton\"\n [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n [bubblePageSize]=\"pageSize\"\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"handlePage($event)\"\n />\n }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #cf482b);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8177
|
+
], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], ngImport: i0, template: "<section\n class=\"mapa-data-table\"\n [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n <div class=\"mapa-data-table__frame\">\n @if (isLoading) {\n <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\"></th>\n }\n @for (column of columns; track column.key) {\n <th [style.width]=\"skeletonColumnWidth(column)\">\n {{ column.label }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of skeletonRows; track row) {\n <tr>\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <span\n class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n ></span>\n </td>\n }\n @for (column of columns; track column.key) {\n <td [style.width]=\"skeletonColumnWidth(column)\">\n <span class=\"mapa-data-table__skeleton\"></span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n <span class=\"mapa-data-table__sr-only\" role=\"status\">\n {{ texts.table.loading }}\n </span>\n } @else if (error) {\n <div class=\"mapa-data-table__state\" role=\"alert\">\n <strong>{{ resolvedErrorTitle }}</strong>\n @if (resolvedErrorSubtitle) {\n <span>{{ resolvedErrorSubtitle }}</span>\n }\n @if (retry.observed) {\n <button type=\"button\" (click)=\"retry.emit()\">\n {{ resolvedRetryLabel }}\n </button>\n }\n </div>\n } @else if (visibleData.length > 0) {\n <table class=\"mapa-data-table__table\">\n @if (caption) {\n <caption class=\"mapa-data-table__sr-only\">\n {{\n caption\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\">\n @if (showSelectAll) {\n <mat-checkbox\n color=\"primary\"\n [checked]=\"allVisibleSelected()\"\n [indeterminate]=\"someVisibleSelected()\"\n [aria-label]=\"texts.table.selectAllVisible\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleVisibleRows($event.checked)\"\n />\n } @else {\n <span class=\"mapa-data-table__sr-only\">\n {{ texts.table.selectionColumn }}\n </span>\n }\n </th>\n }\n @for (column of columns; track column.key) {\n <th\n [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"columnWidth(column)\"\n [attr.aria-sort]=\"ariaSort(column)\"\n >\n @if (isSortable(column)) {\n <button\n type=\"button\"\n class=\"mapa-data-table__sort\"\n (click)=\"changeSort(column)\"\n >\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n <mat-icon aria-hidden=\"true\">{{\n sortIcon(column)\n }}</mat-icon>\n </button>\n } @else {\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleData; track rowIdentity(row, $index)) {\n <tr\n [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n (click)=\"emitRowInteraction($event, row)\"\n (keydown)=\"emitRowKeyboard($event, row)\"\n >\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <mat-checkbox\n color=\"primary\"\n [checked]=\"isSelected(row)\"\n [aria-label]=\"selectionLabel(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleRow(row, $event.checked)\"\n />\n </td>\n }\n @for (column of columns; track column.key) {\n <td\n [attr.data-label]=\"column.label\"\n [class.mapa-data-table__cell--center]=\"\n isCenterAligned(column)\n \"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"columnWidth(column)\"\n >\n <div\n class=\"mapa-data-table__cell-content\"\n [ngClass]=\"cellClasses(column, row)\"\n >\n @if (cellTemplate(column.key); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n row,\n column,\n }\"\n ></ng-container>\n } @else if (column.key === \"actions\") {\n <div class=\"mapa-data-table__actions\">\n @for (item of getActionItems(row); track item) {\n @if (route(item); as actionRoute) {\n <a\n class=\"mapa-data-table__action\"\n [class.mapa-data-table__action--disabled]=\"\n item.disabled\n \"\n [attr.aria-disabled]=\"\n item.disabled ? 'true' : null\n \"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [title]=\"item.text\"\n [routerLink]=\"item.disabled ? null : actionRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"mapa-data-table__action\"\n [disabled]=\"item.disabled\"\n [title]=\"item.text\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </button>\n }\n }\n </div>\n } @else if (column.key === \"menu\") {\n @if (getMenuItems(row).length > 0) {\n <button\n type=\"button\"\n class=\"mapa-data-table__menu-trigger\"\n [matMenuTriggerFor]=\"rowMenu\"\n [attr.aria-label]=\"column.label\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n </button>\n <mat-menu #rowMenu=\"matMenu\">\n @for (item of getMenuItems(row); track item) {\n @if (route(item); as menuRoute) {\n <a\n mat-menu-item\n [disabled]=\"item.disabled\"\n [routerLink]=\"item.disabled ? null : menuRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </a>\n } @else {\n <button\n mat-menu-item\n [disabled]=\"item.disabled\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </mat-menu>\n }\n } @else if (dateFormat(column); as format) {\n @if (dateValue(row, column); as value) {\n {{ value | date: format }}\n } @else {\n {{ column.fallback ?? \"-\" }}\n }\n } @else if (column.status) {\n <span\n class=\"mapa-data-table__status\"\n [class.mapa-data-table__status--round]=\"\n column.status.style === 'round'\n \"\n [style.background-color]=\"statusBackground(column, row)\"\n [style.color]=\"statusTextColor(column, row)\"\n [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n ></span>\n } @else {\n <span\n [innerHTML]=\"cellValue(row, column) | safeHtml\"\n ></span>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @else if (isFinished) {\n <div class=\"mapa-data-table__state\">\n <strong>{{ resolvedEmptyTitle }}</strong>\n @if (resolvedEmptySubtitle) {\n <span>{{ resolvedEmptySubtitle }}</span>\n }\n </div>\n }\n </div>\n\n @if (shouldShowPaginator) {\n <mat-paginator\n class=\"mapa-data-table__paginator\"\n appBubblePagination\n [appCustomLength]=\"totalCount\"\n [bubblePageIndex]=\"zeroBasedPageIndex\"\n [pageIndex]=\"zeroBasedPageIndex\"\n [showFirstButton]=\"paginatorShowFirstButton\"\n [showLastButton]=\"paginatorShowLastButton\"\n [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n [bubblePageSize]=\"pageSize\"\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"handlePage($event)\"\n />\n }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #cf482b);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8170
8178
|
}
|
|
8171
8179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableComponent, decorators: [{
|
|
8172
8180
|
type: Component,
|
|
@@ -8188,7 +8196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
8188
8196
|
useFactory: customPaginatorFactory,
|
|
8189
8197
|
deps: [MapaI18nService, Injector],
|
|
8190
8198
|
},
|
|
8191
|
-
], standalone: true, template: "<section\n class=\"mapa-data-table\"\n [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n <div class=\"mapa-data-table__frame\">\n @if (isLoading) {\n <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\"></th>\n }\n @for (column of columns; track column.key) {\n <th [style.width]=\"skeletonColumnWidth(column)\">\n {{ column.label }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of skeletonRows; track row) {\n <tr>\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <span\n class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n ></span>\n </td>\n }\n @for (column of columns; track column.key) {\n <td [style.width]=\"skeletonColumnWidth(column)\">\n <span class=\"mapa-data-table__skeleton\"></span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n <span class=\"mapa-data-table__sr-only\" role=\"status\">\n {{ texts.table.loading }}\n </span>\n } @else if (error) {\n <div class=\"mapa-data-table__state\" role=\"alert\">\n <strong>{{ resolvedErrorTitle }}</strong>\n @if (resolvedErrorSubtitle) {\n <span>{{ resolvedErrorSubtitle }}</span>\n }\n @if (retry.observed) {\n <button type=\"button\" (click)=\"retry.emit()\">\n {{ resolvedRetryLabel }}\n </button>\n }\n </div>\n } @else if (visibleData.length > 0) {\n <table class=\"mapa-data-table__table\">\n @if (caption) {\n <caption class=\"mapa-data-table__sr-only\">\n {{\n caption\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\">\n @if (showSelectAll) {\n <mat-checkbox\n color=\"primary\"\n [checked]=\"allVisibleSelected()\"\n [indeterminate]=\"someVisibleSelected()\"\n [aria-label]=\"texts.table.selectAllVisible\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleVisibleRows($event.checked)\"\n />\n } @else {\n <span class=\"mapa-data-table__sr-only\">\n {{ texts.table.selectionColumn }}\n </span>\n }\n </th>\n }\n @for (column of columns; track column.key) {\n <th\n [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"column.width ?? null\"\n [attr.aria-sort]=\"ariaSort(column)\"\n >\n @if (isSortable(column)) {\n <button\n type=\"button\"\n class=\"mapa-data-table__sort\"\n (click)=\"changeSort(column)\"\n >\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n <mat-icon aria-hidden=\"true\">{{\n sortIcon(column)\n }}</mat-icon>\n </button>\n } @else {\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleData; track rowIdentity(row, $index)) {\n <tr\n [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n (click)=\"emitRowInteraction($event, row)\"\n (keydown)=\"emitRowKeyboard($event, row)\"\n >\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <mat-checkbox\n color=\"primary\"\n [checked]=\"isSelected(row)\"\n [aria-label]=\"selectionLabel(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleRow(row, $event.checked)\"\n />\n </td>\n }\n @for (column of columns; track column.key) {\n <td\n [attr.data-label]=\"column.label\"\n [class.mapa-data-table__cell--center]=\"\n isCenterAligned(column)\n \"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"column.width ?? null\"\n >\n <div\n class=\"mapa-data-table__cell-content\"\n [ngClass]=\"cellClasses(column, row)\"\n >\n @if (cellTemplate(column.key); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n row,\n column,\n }\"\n ></ng-container>\n } @else if (column.key === \"actions\") {\n <div class=\"mapa-data-table__actions\">\n @for (item of getActionItems(row); track item) {\n @if (route(item); as actionRoute) {\n <a\n class=\"mapa-data-table__action\"\n [class.mapa-data-table__action--disabled]=\"\n item.disabled\n \"\n [attr.aria-disabled]=\"\n item.disabled ? 'true' : null\n \"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [title]=\"item.text\"\n [routerLink]=\"item.disabled ? null : actionRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"mapa-data-table__action\"\n [disabled]=\"item.disabled\"\n [title]=\"item.text\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </button>\n }\n }\n </div>\n } @else if (column.key === \"menu\") {\n @if (getMenuItems(row).length > 0) {\n <button\n type=\"button\"\n class=\"mapa-data-table__menu-trigger\"\n [matMenuTriggerFor]=\"rowMenu\"\n [attr.aria-label]=\"column.label\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n </button>\n <mat-menu #rowMenu=\"matMenu\">\n @for (item of getMenuItems(row); track item) {\n @if (route(item); as menuRoute) {\n <a\n mat-menu-item\n [disabled]=\"item.disabled\"\n [routerLink]=\"item.disabled ? null : menuRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </a>\n } @else {\n <button\n mat-menu-item\n [disabled]=\"item.disabled\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </mat-menu>\n }\n } @else if (dateFormat(column); as format) {\n @if (dateValue(row, column); as value) {\n {{ value | date: format }}\n } @else {\n {{ column.fallback ?? \"-\" }}\n }\n } @else if (column.status) {\n <span\n class=\"mapa-data-table__status\"\n [class.mapa-data-table__status--round]=\"\n column.status.style === 'round'\n \"\n [style.background-color]=\"statusBackground(column, row)\"\n [style.color]=\"statusTextColor(column, row)\"\n [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n ></span>\n } @else {\n <span\n [innerHTML]=\"cellValue(row, column) | safeHtml\"\n ></span>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @else if (isFinished) {\n <div class=\"mapa-data-table__state\">\n <strong>{{ resolvedEmptyTitle }}</strong>\n @if (resolvedEmptySubtitle) {\n <span>{{ resolvedEmptySubtitle }}</span>\n }\n </div>\n }\n </div>\n\n @if (shouldShowPaginator) {\n <mat-paginator\n class=\"mapa-data-table__paginator\"\n appBubblePagination\n [appCustomLength]=\"totalCount\"\n [bubblePageIndex]=\"zeroBasedPageIndex\"\n [pageIndex]=\"zeroBasedPageIndex\"\n [showFirstButton]=\"paginatorShowFirstButton\"\n [showLastButton]=\"paginatorShowLastButton\"\n [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n [bubblePageSize]=\"pageSize\"\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"handlePage($event)\"\n />\n }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #cf482b);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
8199
|
+
], standalone: true, template: "<section\n class=\"mapa-data-table\"\n [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n <div class=\"mapa-data-table__frame\">\n @if (isLoading) {\n <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\"></th>\n }\n @for (column of columns; track column.key) {\n <th [style.width]=\"skeletonColumnWidth(column)\">\n {{ column.label }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of skeletonRows; track row) {\n <tr>\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <span\n class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n ></span>\n </td>\n }\n @for (column of columns; track column.key) {\n <td [style.width]=\"skeletonColumnWidth(column)\">\n <span class=\"mapa-data-table__skeleton\"></span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n <span class=\"mapa-data-table__sr-only\" role=\"status\">\n {{ texts.table.loading }}\n </span>\n } @else if (error) {\n <div class=\"mapa-data-table__state\" role=\"alert\">\n <strong>{{ resolvedErrorTitle }}</strong>\n @if (resolvedErrorSubtitle) {\n <span>{{ resolvedErrorSubtitle }}</span>\n }\n @if (retry.observed) {\n <button type=\"button\" (click)=\"retry.emit()\">\n {{ resolvedRetryLabel }}\n </button>\n }\n </div>\n } @else if (visibleData.length > 0) {\n <table class=\"mapa-data-table__table\">\n @if (caption) {\n <caption class=\"mapa-data-table__sr-only\">\n {{\n caption\n }}\n </caption>\n }\n <thead>\n <tr>\n @if (isSelectable) {\n <th class=\"mapa-data-table__selection-cell\">\n @if (showSelectAll) {\n <mat-checkbox\n color=\"primary\"\n [checked]=\"allVisibleSelected()\"\n [indeterminate]=\"someVisibleSelected()\"\n [aria-label]=\"texts.table.selectAllVisible\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleVisibleRows($event.checked)\"\n />\n } @else {\n <span class=\"mapa-data-table__sr-only\">\n {{ texts.table.selectionColumn }}\n </span>\n }\n </th>\n }\n @for (column of columns; track column.key) {\n <th\n [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"columnWidth(column)\"\n [attr.aria-sort]=\"ariaSort(column)\"\n >\n @if (isSortable(column)) {\n <button\n type=\"button\"\n class=\"mapa-data-table__sort\"\n (click)=\"changeSort(column)\"\n >\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n <mat-icon aria-hidden=\"true\">{{\n sortIcon(column)\n }}</mat-icon>\n </button>\n } @else {\n <span [innerHTML]=\"column.label | safeHtml\"></span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of visibleData; track rowIdentity(row, $index)) {\n <tr\n [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n (click)=\"emitRowInteraction($event, row)\"\n (keydown)=\"emitRowKeyboard($event, row)\"\n >\n @if (isSelectable) {\n <td class=\"mapa-data-table__selection-cell\">\n <mat-checkbox\n color=\"primary\"\n [checked]=\"isSelected(row)\"\n [aria-label]=\"selectionLabel(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleRow(row, $event.checked)\"\n />\n </td>\n }\n @for (column of columns; track column.key) {\n <td\n [attr.data-label]=\"column.label\"\n [class.mapa-data-table__cell--center]=\"\n isCenterAligned(column)\n \"\n [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n [style.width]=\"columnWidth(column)\"\n >\n <div\n class=\"mapa-data-table__cell-content\"\n [ngClass]=\"cellClasses(column, row)\"\n >\n @if (cellTemplate(column.key); as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n row,\n column,\n }\"\n ></ng-container>\n } @else if (column.key === \"actions\") {\n <div class=\"mapa-data-table__actions\">\n @for (item of getActionItems(row); track item) {\n @if (route(item); as actionRoute) {\n <a\n class=\"mapa-data-table__action\"\n [class.mapa-data-table__action--disabled]=\"\n item.disabled\n \"\n [attr.aria-disabled]=\"\n item.disabled ? 'true' : null\n \"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [title]=\"item.text\"\n [routerLink]=\"item.disabled ? null : actionRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"mapa-data-table__action\"\n [disabled]=\"item.disabled\"\n [title]=\"item.text\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n @if (item.svg) {\n <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n }\n @if (item.showText) {\n <span>{{ item.text }}</span>\n } @else {\n <span class=\"mapa-data-table__sr-only\">{{\n item.text\n }}</span>\n }\n </button>\n }\n }\n </div>\n } @else if (column.key === \"menu\") {\n @if (getMenuItems(row).length > 0) {\n <button\n type=\"button\"\n class=\"mapa-data-table__menu-trigger\"\n [matMenuTriggerFor]=\"rowMenu\"\n [attr.aria-label]=\"column.label\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n </button>\n <mat-menu #rowMenu=\"matMenu\">\n @for (item of getMenuItems(row); track item) {\n @if (route(item); as menuRoute) {\n <a\n mat-menu-item\n [disabled]=\"item.disabled\"\n [routerLink]=\"item.disabled ? null : menuRoute\"\n [queryParams]=\"queryParams(item)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </a>\n } @else {\n <button\n mat-menu-item\n [disabled]=\"item.disabled\"\n (click)=\"emitAction(row, item, $event)\"\n >\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{\n item.icon\n }}</mat-icon>\n }\n @if (item.image) {\n <img [src]=\"item.image\" alt=\"\" />\n }\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </mat-menu>\n }\n } @else if (dateFormat(column); as format) {\n @if (dateValue(row, column); as value) {\n {{ value | date: format }}\n } @else {\n {{ column.fallback ?? \"-\" }}\n }\n } @else if (column.status) {\n <span\n class=\"mapa-data-table__status\"\n [class.mapa-data-table__status--round]=\"\n column.status.style === 'round'\n \"\n [style.background-color]=\"statusBackground(column, row)\"\n [style.color]=\"statusTextColor(column, row)\"\n [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n ></span>\n } @else {\n <span\n [innerHTML]=\"cellValue(row, column) | safeHtml\"\n ></span>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n } @else if (isFinished) {\n <div class=\"mapa-data-table__state\">\n <strong>{{ resolvedEmptyTitle }}</strong>\n @if (resolvedEmptySubtitle) {\n <span>{{ resolvedEmptySubtitle }}</span>\n }\n </div>\n }\n </div>\n\n @if (shouldShowPaginator) {\n <mat-paginator\n class=\"mapa-data-table__paginator\"\n appBubblePagination\n [appCustomLength]=\"totalCount\"\n [bubblePageIndex]=\"zeroBasedPageIndex\"\n [pageIndex]=\"zeroBasedPageIndex\"\n [showFirstButton]=\"paginatorShowFirstButton\"\n [showLastButton]=\"paginatorShowLastButton\"\n [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n [bubblePageSize]=\"pageSize\"\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"handlePage($event)\"\n />\n }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #cf482b);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #fffaf6)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
8192
8200
|
}], propDecorators: { columns: [{
|
|
8193
8201
|
type: Input
|
|
8194
8202
|
}], data: [{
|