structra-ui 0.2.92 → 0.2.94
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/structra-ui.mjs
CHANGED
|
@@ -2292,11 +2292,11 @@ class SkeletonTableComponent {
|
|
|
2292
2292
|
return index === 0 && this.showActionsColumn();
|
|
2293
2293
|
}
|
|
2294
2294
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SkeletonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2295
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SkeletonTableComponent, isStandalone: true, selector: "app-skeleton-table", inputs: { columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pagerChromeOnly: { classPropertyName: "pagerChromeOnly", publicName: "pagerChromeOnly", isSignal: true, isRequired: false, transformFunction: null }, bodyOnly: { classPropertyName: "bodyOnly", publicName: "bodyOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, headerLabels: { classPropertyName: "headerLabels", publicName: "headerLabels", isSignal: true, isRequired: false, transformFunction: null }, chrome: { classPropertyName: "chrome", publicName: "chrome", isSignal: true, isRequired: false, transformFunction: null }, showActionsColumn: { classPropertyName: "showActionsColumn", publicName: "showActionsColumn", isSignal: true, isRequired: false, transformFunction: null }, pagerRangeLabel: { classPropertyName: "pagerRangeLabel", publicName: "pagerRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, pagerPageLabel: { classPropertyName: "pagerPageLabel", publicName: "pagerPageLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"skeleton-table\"\n [class.skeleton-table--body-only]=\"bodyOnly\"\n [class.skeleton-table--pager-chrome-only]=\"pagerChromeOnly()\"\n [class.skeleton-table--chrome-financeiro]=\"chrome() === 'financeiro'\"\n aria-hidden=\"true\">\n @if (!bodyOnly) {\n <div class=\"skeleton-table__header\">\n @for (label of resolvedHeaderLabels(); track $index; let i = $index) {\n <div\n class=\"skeleton-table__header-cell\"\n [class.skeleton-table__header-cell--actions]=\"isActionsHeaderCell(label, i)\"\n [class.skeleton-table__header-cell--skeleton]=\"!label?.trim()\">\n @if (label?.trim()) {\n <span class=\"skeleton-table__header-label\">{{ label }}</span>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.65rem\" radius=\"6px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n <div class=\"skeleton-table__body\">\n @for (r of rowIndexes(); track r) {\n <div class=\"skeleton-table__row\">\n @for (c of colIndexesList(); track c; let i = $index) {\n <div class=\"skeleton-table__body-cell\" [class.skeleton-table__body-cell--actions]=\"isActionsBodyCell(i)\">\n @if (isActionsBodyCell(i)) {\n <div class=\"skeleton-table__actions-chips\">\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n </div>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.55rem\" radius=\"5px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n </div>\n @if (showPager && !bodyOnly) {\n <div class=\"skeleton-table__pager\" [class.skeleton-table__pager--chrome-only]=\"pagerChromeOnly()\">\n @if (!pagerChromeOnly()) {\n <span class=\"skeleton-table__pager-range\">{{ pagerRangeLabel() }}</span>\n <span class=\"skeleton-table__pager-nav\" aria-hidden=\"true\">\n <span class=\"skeleton-table__pager-btn\">«</span>\n <span class=\"skeleton-table__pager-btn\">‹</span>\n <span class=\"skeleton-table__pager-page\">{{ pagerPageLabel() }}</span>\n <span class=\"skeleton-table__pager-btn\">›</span>\n <span class=\"skeleton-table__pager-btn\">»</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes ui-skeleton-shimmer{to{transform:translate(100%)}}:host{display:block;width:100%;min-width:0;height:100%;min-height:0;box-sizing:border-box}.skeleton-table{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box;border-radius:10px;overflow:hidden;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));background:var(--app-color-elevated-surface, var(--app-color-surface));--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-primary) 10%, var(--app-color-background, #ffffff)) )}.skeleton-table--chrome-financeiro{--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-success, #15803d) 12%, var(--app-color-background, #ffffff)) )}.skeleton-table--body-only{border:none;border-radius:0;background:transparent}.skeleton-table__header{display:flex;align-items:stretch;flex-shrink:0;min-height:calc(var(--ag-grid-size, 7px) * 8);background:var(--skeleton-table-header-bg);border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1))}.skeleton-table__header-cell{display:flex;flex:1 1 0%;align-items:center;justify-content:flex-start;min-width:0;padding:.65rem .75rem;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 10%,transparent)}.skeleton-table__header-cell:last-child{border-right:none}.skeleton-table__header-cell--actions{flex:0 0 6.5rem;max-width:6.5rem;justify-content:center;border-right:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12))}.skeleton-table__header-cell--skeleton{justify-content:center;align-items:
|
|
2295
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SkeletonTableComponent, isStandalone: true, selector: "app-skeleton-table", inputs: { columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pagerChromeOnly: { classPropertyName: "pagerChromeOnly", publicName: "pagerChromeOnly", isSignal: true, isRequired: false, transformFunction: null }, bodyOnly: { classPropertyName: "bodyOnly", publicName: "bodyOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, headerLabels: { classPropertyName: "headerLabels", publicName: "headerLabels", isSignal: true, isRequired: false, transformFunction: null }, chrome: { classPropertyName: "chrome", publicName: "chrome", isSignal: true, isRequired: false, transformFunction: null }, showActionsColumn: { classPropertyName: "showActionsColumn", publicName: "showActionsColumn", isSignal: true, isRequired: false, transformFunction: null }, pagerRangeLabel: { classPropertyName: "pagerRangeLabel", publicName: "pagerRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, pagerPageLabel: { classPropertyName: "pagerPageLabel", publicName: "pagerPageLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"skeleton-table\"\n [class.skeleton-table--body-only]=\"bodyOnly\"\n [class.skeleton-table--pager-chrome-only]=\"pagerChromeOnly()\"\n [class.skeleton-table--chrome-financeiro]=\"chrome() === 'financeiro'\"\n aria-hidden=\"true\">\n @if (!bodyOnly) {\n <div class=\"skeleton-table__header\">\n @for (label of resolvedHeaderLabels(); track $index; let i = $index) {\n <div\n class=\"skeleton-table__header-cell\"\n [class.skeleton-table__header-cell--actions]=\"isActionsHeaderCell(label, i)\"\n [class.skeleton-table__header-cell--skeleton]=\"!label?.trim()\">\n @if (label?.trim()) {\n <span class=\"skeleton-table__header-label\">{{ label }}</span>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.65rem\" radius=\"6px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n <div class=\"skeleton-table__body\">\n @for (r of rowIndexes(); track r) {\n <div class=\"skeleton-table__row\">\n @for (c of colIndexesList(); track c; let i = $index) {\n <div class=\"skeleton-table__body-cell\" [class.skeleton-table__body-cell--actions]=\"isActionsBodyCell(i)\">\n @if (isActionsBodyCell(i)) {\n <div class=\"skeleton-table__actions-chips\">\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n </div>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.55rem\" radius=\"5px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n </div>\n @if (showPager && !bodyOnly) {\n <div class=\"skeleton-table__pager\" [class.skeleton-table__pager--chrome-only]=\"pagerChromeOnly()\">\n @if (!pagerChromeOnly()) {\n <span class=\"skeleton-table__pager-range\">{{ pagerRangeLabel() }}</span>\n <span class=\"skeleton-table__pager-nav\" aria-hidden=\"true\">\n <span class=\"skeleton-table__pager-btn\">«</span>\n <span class=\"skeleton-table__pager-btn\">‹</span>\n <span class=\"skeleton-table__pager-page\">{{ pagerPageLabel() }}</span>\n <span class=\"skeleton-table__pager-btn\">›</span>\n <span class=\"skeleton-table__pager-btn\">»</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes ui-skeleton-shimmer{to{transform:translate(100%)}}:host{display:block;width:100%;min-width:0;height:100%;min-height:0;box-sizing:border-box}.skeleton-table{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box;border-radius:10px;overflow:hidden;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));background:var(--app-color-elevated-surface, var(--app-color-surface));--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-primary) 10%, var(--app-color-background, #ffffff)) )}.skeleton-table--chrome-financeiro{--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-success, #15803d) 12%, var(--app-color-background, #ffffff)) )}.skeleton-table--body-only{border:none;border-radius:0;background:transparent}.skeleton-table__header{display:flex;align-items:stretch;flex-shrink:0;min-height:calc(var(--ag-grid-size, 7px) * 8);background:var(--skeleton-table-header-bg);border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1))}.skeleton-table__header-cell{display:flex;flex:1 1 0%;align-items:center;justify-content:flex-start;min-width:0;padding:.65rem .75rem;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 10%,transparent)}.skeleton-table__header-cell:last-child{border-right:none}.skeleton-table__header-cell--actions{flex:0 0 6.5rem;max-width:6.5rem;justify-content:center;border-right:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12))}.skeleton-table__header-cell--skeleton{justify-content:center;align-items:center;padding-top:.55rem;padding-bottom:.55rem}.skeleton-table__header-label{font-size:.85rem;font-weight:600;line-height:1.2;color:var(--app-color-text-primary, #1a2f45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skeleton-table__body{flex:1 1 0%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.skeleton-table__row{display:flex;align-items:stretch;flex:0 0 auto;min-height:2.35rem;border-bottom:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 7%,transparent);background:var(--app-color-surface, #ffffff)}.skeleton-table__row:nth-child(2n){background:var(--app-color-surface-alt, var(--app-color-background, #f8fafc))}.skeleton-table__body-cell{display:flex;flex:1 1 0%;align-items:center;justify-content:center;min-width:0;padding:.55rem .75rem;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 6%,transparent)}.skeleton-table__body-cell:last-child{border-right:none}.skeleton-table__body-cell--actions{flex:0 0 6.5rem;max-width:6.5rem;justify-content:center;border-right:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12))}.skeleton-table__actions-chips{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;flex-shrink:0}.skeleton-table__cell{flex:1 1 0;min-width:0}:host ::ng-deep .skeleton-table__header-cell--skeleton>app-skeleton-block.skeleton-table__cell{flex:1 1 0%;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center}:host ::ng-deep .skeleton-table__body-cell:not(.skeleton-table__body-cell--actions)>app-skeleton-block.skeleton-table__cell{flex:1 1 0%;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center}:host ::ng-deep .skeleton-table__header-cell--skeleton>app-skeleton-block.skeleton-table__cell>.skeleton-block__inner,:host ::ng-deep .skeleton-table__body-cell:not(.skeleton-table__body-cell--actions)>app-skeleton-block.skeleton-table__cell>.skeleton-block__inner{margin-inline:auto;flex-shrink:0}:host ::ng-deep .skeleton-table__header,:host ::ng-deep .skeleton-table__row{width:100%;box-sizing:border-box}:host ::ng-deep .skeleton-table__body{width:100%;box-sizing:border-box}.skeleton-table__pager{display:flex;flex-shrink:0;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.5rem;min-height:calc(var(--ag-grid-size, 7px) * 8);padding:.5rem .75rem;box-sizing:border-box;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));background:var(--skeleton-table-header-bg);font-size:.85rem;color:var(--app-color-tab-inactive-text, #51667a);-webkit-user-select:none;user-select:none}.skeleton-table--pager-chrome-only .skeleton-table__pager{position:relative;z-index:2}.skeleton-table__pager--chrome-only{padding-block:0;gap:0;font-size:0;line-height:0;color:transparent}.skeleton-table__pager-range{flex:0 0 auto}.skeleton-table__pager-nav{display:inline-flex;align-items:center;gap:.35rem}.skeleton-table__pager-page{min-width:5.5rem;text-align:center}.skeleton-table__pager-btn{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 18%,transparent);border-radius:4px;background:transparent;color:color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 70%,transparent);font-size:.72rem;line-height:1;opacity:.45;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2296
2296
|
}
|
|
2297
2297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SkeletonTableComponent, decorators: [{
|
|
2298
2298
|
type: Component,
|
|
2299
|
-
args: [{ selector: 'app-skeleton-table', imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"skeleton-table\"\n [class.skeleton-table--body-only]=\"bodyOnly\"\n [class.skeleton-table--pager-chrome-only]=\"pagerChromeOnly()\"\n [class.skeleton-table--chrome-financeiro]=\"chrome() === 'financeiro'\"\n aria-hidden=\"true\">\n @if (!bodyOnly) {\n <div class=\"skeleton-table__header\">\n @for (label of resolvedHeaderLabels(); track $index; let i = $index) {\n <div\n class=\"skeleton-table__header-cell\"\n [class.skeleton-table__header-cell--actions]=\"isActionsHeaderCell(label, i)\"\n [class.skeleton-table__header-cell--skeleton]=\"!label?.trim()\">\n @if (label?.trim()) {\n <span class=\"skeleton-table__header-label\">{{ label }}</span>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.65rem\" radius=\"6px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n <div class=\"skeleton-table__body\">\n @for (r of rowIndexes(); track r) {\n <div class=\"skeleton-table__row\">\n @for (c of colIndexesList(); track c; let i = $index) {\n <div class=\"skeleton-table__body-cell\" [class.skeleton-table__body-cell--actions]=\"isActionsBodyCell(i)\">\n @if (isActionsBodyCell(i)) {\n <div class=\"skeleton-table__actions-chips\">\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n </div>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.55rem\" radius=\"5px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n </div>\n @if (showPager && !bodyOnly) {\n <div class=\"skeleton-table__pager\" [class.skeleton-table__pager--chrome-only]=\"pagerChromeOnly()\">\n @if (!pagerChromeOnly()) {\n <span class=\"skeleton-table__pager-range\">{{ pagerRangeLabel() }}</span>\n <span class=\"skeleton-table__pager-nav\" aria-hidden=\"true\">\n <span class=\"skeleton-table__pager-btn\">«</span>\n <span class=\"skeleton-table__pager-btn\">‹</span>\n <span class=\"skeleton-table__pager-page\">{{ pagerPageLabel() }}</span>\n <span class=\"skeleton-table__pager-btn\">›</span>\n <span class=\"skeleton-table__pager-btn\">»</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes ui-skeleton-shimmer{to{transform:translate(100%)}}:host{display:block;width:100%;min-width:0;height:100%;min-height:0;box-sizing:border-box}.skeleton-table{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box;border-radius:10px;overflow:hidden;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));background:var(--app-color-elevated-surface, var(--app-color-surface));--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-primary) 10%, var(--app-color-background, #ffffff)) )}.skeleton-table--chrome-financeiro{--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-success, #15803d) 12%, var(--app-color-background, #ffffff)) )}.skeleton-table--body-only{border:none;border-radius:0;background:transparent}.skeleton-table__header{display:flex;align-items:stretch;flex-shrink:0;min-height:calc(var(--ag-grid-size, 7px) * 8);background:var(--skeleton-table-header-bg);border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1))}.skeleton-table__header-cell{display:flex;flex:1 1 0%;align-items:center;justify-content:flex-start;min-width:0;padding:.65rem .75rem;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 10%,transparent)}.skeleton-table__header-cell:last-child{border-right:none}.skeleton-table__header-cell--actions{flex:0 0 6.5rem;max-width:6.5rem;justify-content:center;border-right:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12))}.skeleton-table__header-cell--skeleton{justify-content:center;align-items:
|
|
2299
|
+
args: [{ selector: 'app-skeleton-table', imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"skeleton-table\"\n [class.skeleton-table--body-only]=\"bodyOnly\"\n [class.skeleton-table--pager-chrome-only]=\"pagerChromeOnly()\"\n [class.skeleton-table--chrome-financeiro]=\"chrome() === 'financeiro'\"\n aria-hidden=\"true\">\n @if (!bodyOnly) {\n <div class=\"skeleton-table__header\">\n @for (label of resolvedHeaderLabels(); track $index; let i = $index) {\n <div\n class=\"skeleton-table__header-cell\"\n [class.skeleton-table__header-cell--actions]=\"isActionsHeaderCell(label, i)\"\n [class.skeleton-table__header-cell--skeleton]=\"!label?.trim()\">\n @if (label?.trim()) {\n <span class=\"skeleton-table__header-label\">{{ label }}</span>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.65rem\" radius=\"6px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n <div class=\"skeleton-table__body\">\n @for (r of rowIndexes(); track r) {\n <div class=\"skeleton-table__row\">\n @for (c of colIndexesList(); track c; let i = $index) {\n <div class=\"skeleton-table__body-cell\" [class.skeleton-table__body-cell--actions]=\"isActionsBodyCell(i)\">\n @if (isActionsBodyCell(i)) {\n <div class=\"skeleton-table__actions-chips\">\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n <app-skeleton-block width=\"1.15rem\" height=\"1.15rem\" radius=\"4px\" [animate]=\"animate\" />\n </div>\n } @else {\n <app-skeleton-block class=\"skeleton-table__cell\" width=\"72%\" height=\"0.55rem\" radius=\"5px\" [animate]=\"animate\" />\n }\n </div>\n }\n </div>\n }\n </div>\n @if (showPager && !bodyOnly) {\n <div class=\"skeleton-table__pager\" [class.skeleton-table__pager--chrome-only]=\"pagerChromeOnly()\">\n @if (!pagerChromeOnly()) {\n <span class=\"skeleton-table__pager-range\">{{ pagerRangeLabel() }}</span>\n <span class=\"skeleton-table__pager-nav\" aria-hidden=\"true\">\n <span class=\"skeleton-table__pager-btn\">«</span>\n <span class=\"skeleton-table__pager-btn\">‹</span>\n <span class=\"skeleton-table__pager-page\">{{ pagerPageLabel() }}</span>\n <span class=\"skeleton-table__pager-btn\">›</span>\n <span class=\"skeleton-table__pager-btn\">»</span>\n </span>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes ui-skeleton-shimmer{to{transform:translate(100%)}}:host{display:block;width:100%;min-width:0;height:100%;min-height:0;box-sizing:border-box}.skeleton-table{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box;border-radius:10px;overflow:hidden;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));background:var(--app-color-elevated-surface, var(--app-color-surface));--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-primary) 10%, var(--app-color-background, #ffffff)) )}.skeleton-table--chrome-financeiro{--skeleton-table-header-bg: var( --data-grid-header-background, color-mix(in srgb, var(--app-color-success, #15803d) 12%, var(--app-color-background, #ffffff)) )}.skeleton-table--body-only{border:none;border-radius:0;background:transparent}.skeleton-table__header{display:flex;align-items:stretch;flex-shrink:0;min-height:calc(var(--ag-grid-size, 7px) * 8);background:var(--skeleton-table-header-bg);border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1))}.skeleton-table__header-cell{display:flex;flex:1 1 0%;align-items:center;justify-content:flex-start;min-width:0;padding:.65rem .75rem;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 10%,transparent)}.skeleton-table__header-cell:last-child{border-right:none}.skeleton-table__header-cell--actions{flex:0 0 6.5rem;max-width:6.5rem;justify-content:center;border-right:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12))}.skeleton-table__header-cell--skeleton{justify-content:center;align-items:center;padding-top:.55rem;padding-bottom:.55rem}.skeleton-table__header-label{font-size:.85rem;font-weight:600;line-height:1.2;color:var(--app-color-text-primary, #1a2f45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skeleton-table__body{flex:1 1 0%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.skeleton-table__row{display:flex;align-items:stretch;flex:0 0 auto;min-height:2.35rem;border-bottom:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 7%,transparent);background:var(--app-color-surface, #ffffff)}.skeleton-table__row:nth-child(2n){background:var(--app-color-surface-alt, var(--app-color-background, #f8fafc))}.skeleton-table__body-cell{display:flex;flex:1 1 0%;align-items:center;justify-content:center;min-width:0;padding:.55rem .75rem;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 6%,transparent)}.skeleton-table__body-cell:last-child{border-right:none}.skeleton-table__body-cell--actions{flex:0 0 6.5rem;max-width:6.5rem;justify-content:center;border-right:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12))}.skeleton-table__actions-chips{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;flex-shrink:0}.skeleton-table__cell{flex:1 1 0;min-width:0}:host ::ng-deep .skeleton-table__header-cell--skeleton>app-skeleton-block.skeleton-table__cell{flex:1 1 0%;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center}:host ::ng-deep .skeleton-table__body-cell:not(.skeleton-table__body-cell--actions)>app-skeleton-block.skeleton-table__cell{flex:1 1 0%;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center}:host ::ng-deep .skeleton-table__header-cell--skeleton>app-skeleton-block.skeleton-table__cell>.skeleton-block__inner,:host ::ng-deep .skeleton-table__body-cell:not(.skeleton-table__body-cell--actions)>app-skeleton-block.skeleton-table__cell>.skeleton-block__inner{margin-inline:auto;flex-shrink:0}:host ::ng-deep .skeleton-table__header,:host ::ng-deep .skeleton-table__row{width:100%;box-sizing:border-box}:host ::ng-deep .skeleton-table__body{width:100%;box-sizing:border-box}.skeleton-table__pager{display:flex;flex-shrink:0;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.5rem;min-height:calc(var(--ag-grid-size, 7px) * 8);padding:.5rem .75rem;box-sizing:border-box;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));background:var(--skeleton-table-header-bg);font-size:.85rem;color:var(--app-color-tab-inactive-text, #51667a);-webkit-user-select:none;user-select:none}.skeleton-table--pager-chrome-only .skeleton-table__pager{position:relative;z-index:2}.skeleton-table__pager--chrome-only{padding-block:0;gap:0;font-size:0;line-height:0;color:transparent}.skeleton-table__pager-range{flex:0 0 auto}.skeleton-table__pager-nav{display:inline-flex;align-items:center;gap:.35rem}.skeleton-table__pager-page{min-width:5.5rem;text-align:center}.skeleton-table__pager-btn{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border:1px solid color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 18%,transparent);border-radius:4px;background:transparent;color:color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 70%,transparent);font-size:.72rem;line-height:1;opacity:.45;pointer-events:none}\n"] }]
|
|
2300
2300
|
}], propDecorators: { columnCount: [{
|
|
2301
2301
|
type: Input,
|
|
2302
2302
|
args: [{ transform: numberAttribute }]
|