@caribeng/ui 22.4.0 → 22.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +311 -313
- package/fesm2022/caribeng-ui-account-picker.mjs +533 -0
- package/fesm2022/caribeng-ui-aging.mjs +488 -0
- package/fesm2022/{caribeng-ui-caribe-alert.mjs → caribeng-ui-alert.mjs} +45 -45
- package/fesm2022/caribeng-ui-amount.mjs +249 -0
- package/fesm2022/caribeng-ui-anchor.mjs +2 -2
- package/fesm2022/{caribeng-ui-caribe-animation-lottie.mjs → caribeng-ui-animation-lottie.mjs} +41 -41
- package/fesm2022/caribeng-ui-audit-log.mjs +323 -0
- package/fesm2022/caribeng-ui-avatar.mjs +2 -2
- package/fesm2022/caribeng-ui-breadcrumb.mjs +13 -3
- package/fesm2022/{caribeng-ui-caribe-button-group.mjs → caribeng-ui-button-group.mjs} +15 -15
- package/fesm2022/caribeng-ui-button.mjs +2 -2
- package/fesm2022/{caribeng-ui-caribe-card-content.mjs → caribeng-ui-card-content.mjs} +39 -39
- package/fesm2022/{caribeng-ui-caribe-card-move.mjs → caribeng-ui-card-move.mjs} +65 -65
- package/fesm2022/{caribeng-ui-caribe-card-primary.mjs → caribeng-ui-card-primary.mjs} +31 -31
- package/fesm2022/{caribeng-ui-caribe-card-select.mjs → caribeng-ui-card-select.mjs} +67 -67
- package/fesm2022/caribeng-ui-carousel.mjs +2 -2
- package/fesm2022/caribeng-ui-cascadeselect.mjs +45 -9
- package/fesm2022/caribeng-ui-chat.mjs +2 -2
- package/fesm2022/{caribeng-ui-caribe-coachmark.mjs → caribeng-ui-coachmark.mjs} +85 -85
- package/fesm2022/caribeng-ui-command-palette.mjs +2 -2
- package/fesm2022/caribeng-ui-comments.mjs +864 -0
- package/fesm2022/caribeng-ui-datagrid.mjs +1635 -0
- package/fesm2022/caribeng-ui-dataview.mjs +2 -2
- package/fesm2022/caribeng-ui-datepicker.mjs +2 -2
- package/fesm2022/caribeng-ui-document.mjs +495 -0
- package/fesm2022/{caribeng-ui-caribe-dots-indicator.mjs → caribeng-ui-dots-indicator.mjs} +41 -41
- package/fesm2022/caribeng-ui-dynamic-form.mjs +1581 -0
- package/fesm2022/caribeng-ui-editor.mjs +2303 -1311
- package/fesm2022/{caribeng-ui-caribe-expansion-panel.mjs → caribeng-ui-expansion-panel.mjs} +39 -39
- package/fesm2022/{caribeng-ui-caribe-fab-menu.mjs → caribeng-ui-fab-menu.mjs} +75 -75
- package/fesm2022/caribeng-ui-file-card.mjs +2 -2
- package/fesm2022/{caribeng-ui-caribe-file-download.mjs → caribeng-ui-file-download.mjs} +63 -63
- package/fesm2022/caribeng-ui-financial-report.mjs +380 -0
- package/fesm2022/{caribeng-ui-caribe-float-menu.mjs → caribeng-ui-float-menu.mjs} +31 -31
- package/fesm2022/caribeng-ui-floatlabel.mjs +2 -2
- package/fesm2022/caribeng-ui-flow.mjs +1508 -0
- package/fesm2022/{caribeng-ui-caribe-footer.mjs → caribeng-ui-footer.mjs} +19 -19
- package/fesm2022/caribeng-ui-gantt.mjs +1094 -0
- package/fesm2022/{caribeng-ui-caribe-header.mjs → caribeng-ui-header.mjs} +49 -49
- package/fesm2022/{caribeng-ui-caribe-icon-button.mjs → caribeng-ui-icon-button.mjs} +23 -23
- package/fesm2022/caribeng-ui-image-cropper.mjs +671 -0
- package/fesm2022/caribeng-ui-import-wizard.mjs +746 -0
- package/fesm2022/caribeng-ui-infinite-scroll.mjs +226 -0
- package/fesm2022/caribeng-ui-input-number.mjs +22 -6
- package/fesm2022/{caribeng-ui-caribe-input-search.mjs → caribeng-ui-input-search.mjs} +65 -65
- package/fesm2022/{caribeng-ui-caribe-input-token.mjs → caribeng-ui-input-token.mjs} +59 -59
- package/fesm2022/caribeng-ui-inputotp.mjs +2 -2
- package/fesm2022/caribeng-ui-journal-entry.mjs +340 -0
- package/fesm2022/caribeng-ui-kanban.mjs +6 -6
- package/fesm2022/caribeng-ui-kpi.mjs +189 -0
- package/fesm2022/{caribeng-ui-caribe-link.mjs → caribeng-ui-link.mjs} +37 -37
- package/fesm2022/caribeng-ui-masonry.mjs +93 -0
- package/fesm2022/caribeng-ui-media-player.mjs +821 -0
- package/fesm2022/caribeng-ui-mentions.mjs +2 -2
- package/fesm2022/caribeng-ui-notification-center.mjs +636 -0
- package/fesm2022/{caribeng-ui-caribe-off-canvas.mjs → caribeng-ui-off-canvas.mjs} +55 -55
- package/fesm2022/{caribeng-ui-caribe-onboarding.mjs → caribeng-ui-onboarding.mjs} +105 -105
- package/fesm2022/caribeng-ui-orderlist.mjs +2 -2
- package/fesm2022/caribeng-ui-pdfviewer.mjs +1755 -25
- package/fesm2022/caribeng-ui-period-picker.mjs +637 -0
- package/fesm2022/caribeng-ui-phone-input.mjs +2 -2
- package/fesm2022/caribeng-ui-picklist.mjs +2 -2
- package/fesm2022/caribeng-ui-pivot.mjs +419 -0
- package/fesm2022/caribeng-ui-pricing.mjs +2 -2
- package/fesm2022/caribeng-ui-rating.mjs +14 -17
- package/fesm2022/caribeng-ui-reconciliation.mjs +386 -0
- package/fesm2022/caribeng-ui-scheduler.mjs +1027 -0
- package/fesm2022/caribeng-ui-select.mjs +2 -2
- package/fesm2022/{caribeng-ui-caribe-shortcut.mjs → caribeng-ui-shortcut.mjs} +29 -29
- package/fesm2022/caribeng-ui-sidebar.mjs +2 -2
- package/fesm2022/caribeng-ui-signature-pad.mjs +654 -0
- package/fesm2022/{caribeng-ui-caribe-status.mjs → caribeng-ui-status.mjs} +11 -11
- package/fesm2022/{caribeng-ui-caribe-step-indicator.mjs → caribeng-ui-step-indicator.mjs} +53 -53
- package/fesm2022/caribeng-ui-stepper.mjs +2 -2
- package/fesm2022/caribeng-ui-steps.mjs +2 -2
- package/fesm2022/caribeng-ui-table.mjs +323 -15
- package/fesm2022/caribeng-ui-tabmenu.mjs +2 -2
- package/fesm2022/caribeng-ui-tabs.mjs +2 -2
- package/fesm2022/{caribeng-ui-caribe-tag-button.mjs → caribeng-ui-tag-button.mjs} +25 -25
- package/fesm2022/caribeng-ui-tag.mjs +2 -2
- package/fesm2022/caribeng-ui-tieredmenu.mjs +6 -6
- package/fesm2022/{caribeng-ui-caribe-tracker.mjs → caribeng-ui-tracker.mjs} +29 -29
- package/fesm2022/{caribeng-ui-caribe-transaction-status.mjs → caribeng-ui-transaction-status.mjs} +11 -11
- package/fesm2022/caribeng-ui-treeselect.mjs +44 -9
- package/fesm2022/caribeng-ui-treetable.mjs +236 -17
- package/fesm2022/{caribeng-ui-caribe-voucher.mjs → caribeng-ui-voucher.mjs} +45 -45
- package/fesm2022/caribeng-ui-xlsx.mjs +486 -0
- package/fesm2022/caribeng-ui.mjs +1181 -1
- package/package.json +217 -177
- package/types/caribeng-ui-account-picker.d.ts +142 -0
- package/types/caribeng-ui-aging.d.ts +123 -0
- package/types/{caribeng-ui-caribe-alert.d.ts → caribeng-ui-alert.d.ts} +2 -2
- package/types/caribeng-ui-amount.d.ts +82 -0
- package/types/{caribeng-ui-caribe-animation-lottie.d.ts → caribeng-ui-animation-lottie.d.ts} +2 -2
- package/types/caribeng-ui-audit-log.d.ts +86 -0
- package/types/caribeng-ui-breadcrumb.d.ts +2 -2
- package/types/{caribeng-ui-caribe-button-group.d.ts → caribeng-ui-button-group.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-card-content.d.ts → caribeng-ui-card-content.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-card-move.d.ts → caribeng-ui-card-move.d.ts} +1 -1
- package/types/{caribeng-ui-caribe-card-primary.d.ts → caribeng-ui-card-primary.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-card-select.d.ts → caribeng-ui-card-select.d.ts} +2 -2
- package/types/caribeng-ui-cascadeselect.d.ts +6 -0
- package/types/{caribeng-ui-caribe-coachmark.d.ts → caribeng-ui-coachmark.d.ts} +2 -2
- package/types/caribeng-ui-comments.d.ts +214 -0
- package/types/caribeng-ui-datagrid.d.ts +269 -0
- package/types/caribeng-ui-document.d.ts +138 -0
- package/types/{caribeng-ui-caribe-dots-indicator.d.ts → caribeng-ui-dots-indicator.d.ts} +2 -2
- package/types/caribeng-ui-dynamic-form.d.ts +409 -0
- package/types/caribeng-ui-editor.d.ts +110 -12
- package/types/{caribeng-ui-caribe-expansion-panel.d.ts → caribeng-ui-expansion-panel.d.ts} +1 -1
- package/types/{caribeng-ui-caribe-fab-menu.d.ts → caribeng-ui-fab-menu.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-file-download.d.ts → caribeng-ui-file-download.d.ts} +1 -1
- package/types/caribeng-ui-financial-report.d.ts +102 -0
- package/types/{caribeng-ui-caribe-float-menu.d.ts → caribeng-ui-float-menu.d.ts} +2 -2
- package/types/caribeng-ui-flow.d.ts +228 -0
- package/types/{caribeng-ui-caribe-footer.d.ts → caribeng-ui-footer.d.ts} +2 -2
- package/types/caribeng-ui-gantt.d.ts +244 -0
- package/types/{caribeng-ui-caribe-header.d.ts → caribeng-ui-header.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-icon-button.d.ts → caribeng-ui-icon-button.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-illustration.d.ts → caribeng-ui-illustration.d.ts} +1 -1
- package/types/caribeng-ui-image-cropper.d.ts +169 -0
- package/types/caribeng-ui-import-wizard.d.ts +149 -0
- package/types/caribeng-ui-infinite-scroll.d.ts +75 -0
- package/types/caribeng-ui-input-number.d.ts +1 -1
- package/types/{caribeng-ui-caribe-input-search.d.ts → caribeng-ui-input-search.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-input-token.d.ts → caribeng-ui-input-token.d.ts} +2 -2
- package/types/caribeng-ui-journal-entry.d.ts +110 -0
- package/types/caribeng-ui-kpi.d.ts +64 -0
- package/types/{caribeng-ui-caribe-link.d.ts → caribeng-ui-link.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-logo.d.ts → caribeng-ui-logo.d.ts} +1 -1
- package/types/caribeng-ui-masonry.d.ts +32 -0
- package/types/caribeng-ui-media-player.d.ts +140 -0
- package/types/caribeng-ui-notification-center.d.ts +153 -0
- package/types/{caribeng-ui-caribe-off-canvas.d.ts → caribeng-ui-off-canvas.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-onboarding.d.ts → caribeng-ui-onboarding.d.ts} +2 -2
- package/types/caribeng-ui-pdfviewer.d.ts +245 -5
- package/types/caribeng-ui-period-picker.d.ts +148 -0
- package/types/caribeng-ui-pivot.d.ts +116 -0
- package/types/caribeng-ui-reconciliation.d.ts +109 -0
- package/types/caribeng-ui-scheduler.d.ts +188 -0
- package/types/{caribeng-ui-caribe-shortcut.d.ts → caribeng-ui-shortcut.d.ts} +2 -2
- package/types/caribeng-ui-signature-pad.d.ts +151 -0
- package/types/{caribeng-ui-caribe-status.d.ts → caribeng-ui-status.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-step-indicator.d.ts → caribeng-ui-step-indicator.d.ts} +2 -2
- package/types/caribeng-ui-table.d.ts +66 -2
- package/types/{caribeng-ui-caribe-tag-button.d.ts → caribeng-ui-tag-button.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-tracker.d.ts → caribeng-ui-tracker.d.ts} +2 -2
- package/types/{caribeng-ui-caribe-transaction-status.d.ts → caribeng-ui-transaction-status.d.ts} +2 -2
- package/types/caribeng-ui-treeselect.d.ts +6 -0
- package/types/caribeng-ui-treetable.d.ts +67 -2
- package/types/{caribeng-ui-caribe-voucher.d.ts → caribeng-ui-voucher.d.ts} +2 -2
- package/types/caribeng-ui-xlsx.d.ts +79 -0
- package/types/caribeng-ui.d.ts +711 -2
- package/fesm2022/caribeng-ui-caribe-calendar.mjs +0 -92
- package/fesm2022/caribeng-ui-caribe-circle-loading.mjs +0 -130
- package/fesm2022/caribeng-ui-caribe-data-table.mjs +0 -94
- package/fesm2022/caribeng-ui-caribe-file-select.mjs +0 -88
- package/fesm2022/caribeng-ui-caribe-inline-alert.mjs +0 -100
- package/fesm2022/caribeng-ui-caribe-input-date.mjs +0 -138
- package/fesm2022/caribeng-ui-caribe-input-select.mjs +0 -154
- package/fesm2022/caribeng-ui-caribe-loader.mjs +0 -48
- package/fesm2022/caribeng-ui-caribe-modal.mjs +0 -119
- package/fesm2022/caribeng-ui-caribe-pictogram.mjs +0 -52
- package/fesm2022/caribeng-ui-caribe-pop-over.mjs +0 -104
- package/fesm2022/caribeng-ui-caribe-preloader.mjs +0 -57
- package/fesm2022/caribeng-ui-caribe-progress-bar.mjs +0 -84
- package/fesm2022/caribeng-ui-caribe-stroke.mjs +0 -69
- package/fesm2022/caribeng-ui-caribe-switch.mjs +0 -182
- package/types/caribeng-ui-caribe-calendar.d.ts +0 -27
- package/types/caribeng-ui-caribe-circle-loading.d.ts +0 -28
- package/types/caribeng-ui-caribe-data-table.d.ts +0 -26
- package/types/caribeng-ui-caribe-file-select.d.ts +0 -31
- package/types/caribeng-ui-caribe-inline-alert.d.ts +0 -28
- package/types/caribeng-ui-caribe-input-date.d.ts +0 -40
- package/types/caribeng-ui-caribe-input-select.d.ts +0 -47
- package/types/caribeng-ui-caribe-loader.d.ts +0 -22
- package/types/caribeng-ui-caribe-modal.d.ts +0 -21
- package/types/caribeng-ui-caribe-pictogram.d.ts +0 -15
- package/types/caribeng-ui-caribe-pop-over.d.ts +0 -17
- package/types/caribeng-ui-caribe-preloader.d.ts +0 -24
- package/types/caribeng-ui-caribe-progress-bar.d.ts +0 -28
- package/types/caribeng-ui-caribe-stroke.d.ts +0 -17
- package/types/caribeng-ui-caribe-switch.d.ts +0 -55
- /package/fesm2022/{caribeng-ui-caribe-illustration.mjs → caribeng-ui-illustration.mjs} +0 -0
- /package/fesm2022/{caribeng-ui-caribe-logo.mjs → caribeng-ui-logo.mjs} +0 -0
|
@@ -565,7 +565,7 @@ class CbPhoneInput {
|
|
|
565
565
|
</ul>
|
|
566
566
|
</div>
|
|
567
567
|
</ng-template>
|
|
568
|
-
`, isInline: true, styles: [":host{display:block;font-family:var(--cb-font-sans)}.cb-phone-input__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-phone-input__required{margin-left:2px;color:var(--cb-color-danger)}.cb-phone-input__required--required,.cb-phone-input__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-phone-input__control{display:flex;align-items:stretch;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-phone-input__control:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-phone-input__control:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-phone-input__control.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-phone-input__control.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-phone-input__control.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-phone-input__country{display:inline-flex;flex:none;align-items:center;gap:.375rem;padding:0 .625rem 0 .75rem;border:0;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-phone-input__country:disabled{cursor:default}.cb-phone-input__country:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-phone-input__flag{font-size:1.15em;line-height:1}.cb-phone-input__dial{font-variant-numeric:tabular-nums}.cb-phone-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-variant-numeric:tabular-nums}.cb-phone-input__field::placeholder{color:var(--cb-color-text-muted)}.cb-phone-input__field:disabled{cursor:not-allowed;color:var(--cb-color-text-muted)}.cb-phone-input__control--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-phone-input__control--sm .cb-phone-input__field{padding:var(--cb-space-1) var(--cb-space-2)}.cb-phone-input__control--md{min-height:2.5rem;font-size:var(--cb-text-base)}.cb-phone-input__control--md .cb-phone-input__field{padding:var(--cb-space-2) var(--cb-space-3)}.cb-phone-input__control--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-phone-input__control--lg .cb-phone-input__field{padding:var(--cb-space-3) var(--cb-space-4)}.cb-phone-input__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-phone-input__message--error{color:var(--cb-color-danger)}.cb-phone-input__panel{display:flex;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);max-height:20rem;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-phone-input__search{margin:.5rem;padding:.5rem .625rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:inherit;font:inherit;font-size:var(--cb-text-sm)}.cb-phone-input__search:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-phone-input__list{flex:1;margin:0;padding:0 .375rem .375rem;overflow-y:auto;list-style:none}.cb-phone-input__option{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-phone-input__option--active{background:var(--cb-color-surface-hover)}.cb-phone-input__option[aria-selected=true]{font-weight:var(--cb-font-weight-semibold, 600)}.cb-phone-input__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-phone-input__option-dial{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-phone-input__empty{padding:1rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
568
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans)}.cb-phone-input__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-phone-input__required{margin-left:2px;color:var(--cb-color-danger)}.cb-phone-input__required--required,.cb-phone-input__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-phone-input__control{display:flex;align-items:stretch;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-phone-input__control:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-phone-input__control:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-phone-input__control.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-phone-input__control.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-phone-input__control.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-phone-input__country{display:inline-flex;flex:none;align-items:center;gap:.375rem;padding:0 .625rem 0 .75rem;border:0;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-phone-input__country:disabled{cursor:default}.cb-phone-input__country:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-phone-input__flag{font-size:1.15em;line-height:1}.cb-phone-input__dial{font-variant-numeric:tabular-nums}.cb-phone-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-variant-numeric:tabular-nums}.cb-phone-input__field::placeholder{color:var(--cb-color-text-muted)}.cb-phone-input__field:disabled{cursor:not-allowed;color:var(--cb-color-text-muted)}.cb-phone-input__control--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-phone-input__control--sm .cb-phone-input__field{padding:var(--cb-space-1) var(--cb-space-2)}.cb-phone-input__control--md{min-height:2.5rem;font-size:var(--cb-text-base)}.cb-phone-input__control--md .cb-phone-input__field{padding:var(--cb-space-2) var(--cb-space-3)}.cb-phone-input__control--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-phone-input__control--lg .cb-phone-input__field{padding:var(--cb-space-3) var(--cb-space-4)}.cb-phone-input__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-phone-input__message--error{color:var(--cb-color-danger)}.cb-phone-input__panel{display:flex;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);max-height:20rem;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-phone-input__search{margin:.5rem;padding:.5rem .625rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:inherit;font:inherit;font-size:var(--cb-text-sm)}.cb-phone-input__search:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-phone-input__list{flex:1;margin:0;padding:0 .375rem .375rem;overflow-y:auto;list-style:none}.cb-phone-input__option{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-phone-input__option--active{background:var(--cb-color-surface-hover)}.cb-phone-input__option[aria-selected=true]{font-weight:var(--cb-font-weight-semibold, 600)}.cb-phone-input__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-phone-input__option-dial{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-phone-input__empty{padding:1rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
569
569
|
}
|
|
570
570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPhoneInput, decorators: [{
|
|
571
571
|
type: Component,
|
|
@@ -674,7 +674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
674
674
|
</ul>
|
|
675
675
|
</div>
|
|
676
676
|
</ng-template>
|
|
677
|
-
`, styles: [":host{display:block;font-family:var(--cb-font-sans)}.cb-phone-input__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-phone-input__required{margin-left:2px;color:var(--cb-color-danger)}.cb-phone-input__required--required,.cb-phone-input__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-phone-input__control{display:flex;align-items:stretch;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-phone-input__control:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-phone-input__control:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-phone-input__control.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-phone-input__control.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-phone-input__control.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-phone-input__country{display:inline-flex;flex:none;align-items:center;gap:.375rem;padding:0 .625rem 0 .75rem;border:0;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-phone-input__country:disabled{cursor:default}.cb-phone-input__country:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-phone-input__flag{font-size:1.15em;line-height:1}.cb-phone-input__dial{font-variant-numeric:tabular-nums}.cb-phone-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-variant-numeric:tabular-nums}.cb-phone-input__field::placeholder{color:var(--cb-color-text-muted)}.cb-phone-input__field:disabled{cursor:not-allowed;color:var(--cb-color-text-muted)}.cb-phone-input__control--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-phone-input__control--sm .cb-phone-input__field{padding:var(--cb-space-1) var(--cb-space-2)}.cb-phone-input__control--md{min-height:2.5rem;font-size:var(--cb-text-base)}.cb-phone-input__control--md .cb-phone-input__field{padding:var(--cb-space-2) var(--cb-space-3)}.cb-phone-input__control--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-phone-input__control--lg .cb-phone-input__field{padding:var(--cb-space-3) var(--cb-space-4)}.cb-phone-input__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-phone-input__message--error{color:var(--cb-color-danger)}.cb-phone-input__panel{display:flex;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);max-height:20rem;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-phone-input__search{margin:.5rem;padding:.5rem .625rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:inherit;font:inherit;font-size:var(--cb-text-sm)}.cb-phone-input__search:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-phone-input__list{flex:1;margin:0;padding:0 .375rem .375rem;overflow-y:auto;list-style:none}.cb-phone-input__option{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-phone-input__option--active{background:var(--cb-color-surface-hover)}.cb-phone-input__option[aria-selected=true]{font-weight:var(--cb-font-weight-semibold, 600)}.cb-phone-input__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-phone-input__option-dial{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-phone-input__empty{padding:1rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"] }]
|
|
677
|
+
`, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans)}.cb-phone-input__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-phone-input__required{margin-left:2px;color:var(--cb-color-danger)}.cb-phone-input__required--required,.cb-phone-input__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-phone-input__control{display:flex;align-items:stretch;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-phone-input__control:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-phone-input__control:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-phone-input__control.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-phone-input__control.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-phone-input__control.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-phone-input__country{display:inline-flex;flex:none;align-items:center;gap:.375rem;padding:0 .625rem 0 .75rem;border:0;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-phone-input__country:disabled{cursor:default}.cb-phone-input__country:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-phone-input__flag{font-size:1.15em;line-height:1}.cb-phone-input__dial{font-variant-numeric:tabular-nums}.cb-phone-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-variant-numeric:tabular-nums}.cb-phone-input__field::placeholder{color:var(--cb-color-text-muted)}.cb-phone-input__field:disabled{cursor:not-allowed;color:var(--cb-color-text-muted)}.cb-phone-input__control--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-phone-input__control--sm .cb-phone-input__field{padding:var(--cb-space-1) var(--cb-space-2)}.cb-phone-input__control--md{min-height:2.5rem;font-size:var(--cb-text-base)}.cb-phone-input__control--md .cb-phone-input__field{padding:var(--cb-space-2) var(--cb-space-3)}.cb-phone-input__control--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-phone-input__control--lg .cb-phone-input__field{padding:var(--cb-space-3) var(--cb-space-4)}.cb-phone-input__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-phone-input__message--error{color:var(--cb-color-danger)}.cb-phone-input__panel{display:flex;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);max-height:20rem;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-phone-input__search{margin:.5rem;padding:.5rem .625rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:inherit;font:inherit;font-size:var(--cb-text-sm)}.cb-phone-input__search:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-phone-input__list{flex:1;margin:0;padding:0 .375rem .375rem;overflow-y:auto;list-style:none}.cb-phone-input__option{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-phone-input__option--active{background:var(--cb-color-surface-hover)}.cb-phone-input__option[aria-selected=true]{font-weight:var(--cb-font-weight-semibold, 600)}.cb-phone-input__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-phone-input__option-dial{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-phone-input__empty{padding:1rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"] }]
|
|
678
678
|
}], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }, { type: i0.Output, args: ["countryChange"] }], countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], countryLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryLocked", required: false }] }], showFlag: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFlag", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], phoneChange: [{ type: i0.Output, args: ["phoneChange"] }] } });
|
|
679
679
|
|
|
680
680
|
/*
|
|
@@ -204,7 +204,7 @@ class CbPickList {
|
|
|
204
204
|
</ul>
|
|
205
205
|
</section>
|
|
206
206
|
</ng-template>
|
|
207
|
-
`, isInline: true, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-
|
|
207
|
+
`, isInline: true, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-text)}.cb-picklist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-picklist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-picklist__panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-picklist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-picklist__list{flex:1;height:14rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-picklist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem);-webkit-user-select:none;user-select:none}.cb-picklist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-picklist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}@media(max-width:640px){.cb-picklist{grid-template-columns:minmax(0,1fr)}.cb-picklist__controls{flex-direction:row;justify-content:center}.cb-picklist__controls cb-icon{transform:rotate(90deg)}}:host-context([data-theme=\"dark\"]) .cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
208
208
|
}
|
|
209
209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPickList, decorators: [{
|
|
210
210
|
type: Component,
|
|
@@ -261,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
261
261
|
</ul>
|
|
262
262
|
</section>
|
|
263
263
|
</ng-template>
|
|
264
|
-
`, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-
|
|
264
|
+
`, styles: [":host{display:block;color:var(--cb-color-text)}.cb-picklist{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--cb-space-3, .75rem);align-items:stretch}.cb-picklist__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--cb-space-2, .5rem)}.cb-picklist__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:var(--cb-color-surface-raised);color:var(--cb-color-text);cursor:pointer}.cb-picklist__btn:hover:not(:disabled){border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-text)}.cb-picklist__btn:disabled{opacity:.45;cursor:not-allowed}.cb-picklist__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:2px}.cb-picklist__panel{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised);overflow:hidden}.cb-picklist__header{padding:.65rem .85rem;font-weight:var(--cb-font-weight-semibold, 600);border-bottom:1px solid var(--cb-color-border)}.cb-picklist__list{flex:1;height:14rem;margin:0;padding:var(--cb-space-1, .25rem);list-style:none;overflow-y:auto}.cb-picklist__item{padding:.6rem .75rem;border-radius:var(--cb-radius-md, .5rem);cursor:pointer;outline:none;font-size:var(--cb-text-sm, .875rem);-webkit-user-select:none;user-select:none}.cb-picklist__item:hover{background:color-mix(in srgb,var(--cb-color-text) 6%,transparent)}.cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);font-weight:var(--cb-font-weight-medium, 500)}.cb-picklist__item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring, var(--cb-color-primary-500))}@media(max-width:640px){.cb-picklist{grid-template-columns:minmax(0,1fr)}.cb-picklist__controls{flex-direction:row;justify-content:center}.cb-picklist__controls cb-icon{transform:rotate(90deg)}}:host-context([data-theme=\"dark\"]) .cb-picklist__item[aria-selected=true]{color:var(--cb-color-primary-300)}\n"] }]
|
|
265
265
|
}], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], moved: [{ type: i0.Output, args: ["moved"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbPickListItemTemplate), { isSignal: true }] }] } });
|
|
266
266
|
|
|
267
267
|
/**
|
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, input, model, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { cbSummarize, injectCbTranslation, cbFormat, CB_CONFIG, cbFormatAmount } from '@caribeng/ui';
|
|
4
|
+
import { CbButton } from '@caribeng/ui/button';
|
|
5
|
+
import { CbIcon } from '@caribeng/ui/icon';
|
|
6
|
+
import { CbMultiSelect } from '@caribeng/ui/multiselect';
|
|
7
|
+
import { CbSelect } from '@caribeng/ui/select';
|
|
8
|
+
import { currencySymbol, cbDownloadXlsx } from '@caribeng/ui/xlsx';
|
|
9
|
+
|
|
10
|
+
const SEP = '\u0001';
|
|
11
|
+
function keyOf(record, fields) {
|
|
12
|
+
return fields.map((f) => String(record[f] ?? '')).join(SEP);
|
|
13
|
+
}
|
|
14
|
+
function splitKey(key) {
|
|
15
|
+
return key === '' ? [] : key.split(SEP);
|
|
16
|
+
}
|
|
17
|
+
function compare(a, b) {
|
|
18
|
+
return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
|
|
19
|
+
}
|
|
20
|
+
/** Valores distintos (combinados) de las dimensiones de columna, ordenados. */
|
|
21
|
+
function columnKeys(data, fields) {
|
|
22
|
+
if (!fields.length)
|
|
23
|
+
return [''];
|
|
24
|
+
return [...new Set(data.map((r) => keyOf(r, fields)))].sort((a, b) => {
|
|
25
|
+
const pa = splitKey(a);
|
|
26
|
+
const pb = splitKey(b);
|
|
27
|
+
for (let i = 0; i < pa.length; i++) {
|
|
28
|
+
const c = compare(pa[i], pb[i]);
|
|
29
|
+
if (c)
|
|
30
|
+
return c;
|
|
31
|
+
}
|
|
32
|
+
return 0;
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
/** Árbol de filas agrupando por cada dimensión de `fields`, en orden. */
|
|
36
|
+
function rowTree(data, fields, labelOf, level = 0, path = []) {
|
|
37
|
+
if (level >= fields.length)
|
|
38
|
+
return [];
|
|
39
|
+
const field = fields[level];
|
|
40
|
+
const groups = new Map();
|
|
41
|
+
for (const r of data) {
|
|
42
|
+
const k = String(r[field] ?? '');
|
|
43
|
+
if (!groups.has(k))
|
|
44
|
+
groups.set(k, []);
|
|
45
|
+
groups.get(k).push(r);
|
|
46
|
+
}
|
|
47
|
+
return [...groups.keys()].sort(compare).map((k) => {
|
|
48
|
+
const records = groups.get(k);
|
|
49
|
+
const p = [...path, k];
|
|
50
|
+
return { key: p.join(SEP), path: p, level, label: labelOf(field, k), records, children: rowTree(records, fields, labelOf, level + 1, p) };
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
/** Valor agregado de una medida sobre unos registros. */
|
|
54
|
+
function aggregate(records, value) {
|
|
55
|
+
return cbSummarize(records.map((r) => r[value.field]), value.aggregate ?? 'sum');
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
let nextUid = 0;
|
|
59
|
+
/**
|
|
60
|
+
* Tabla dinámica de CaribeNG: cruza los registros por dimensiones de filas y
|
|
61
|
+
* columnas (cuenta, tercero, centro de costo, mes…) y agrega una o varias medidas.
|
|
62
|
+
*
|
|
63
|
+
* - Filas anidadas que se contraen, con subtotales; totales por fila, por columna y general.
|
|
64
|
+
* - Con `configurable`, el usuario elige desde la propia tabla las dimensiones y la medida.
|
|
65
|
+
* - Importes con la moneda de `provideCaribeNG`, exportación a Excel con niveles.
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```html
|
|
69
|
+
* <cb-pivot [data]="movimientos" [fields]="dimensiones" [(rows)]="filas" [(columns)]="columnas" [values]="[{ field: 'valor' }]" configurable />
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
class CbPivot {
|
|
73
|
+
constructor() {
|
|
74
|
+
this.t = injectCbTranslation();
|
|
75
|
+
this.fmt = cbFormat;
|
|
76
|
+
this.config = inject(CB_CONFIG);
|
|
77
|
+
this.uid = `cb-pivot-${++nextUid}`;
|
|
78
|
+
/** Registros a cruzar. */
|
|
79
|
+
this.data = input([], /* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
81
|
+
/** Dimensiones disponibles (clave, etiqueta y formato de sus valores). */
|
|
82
|
+
this.fields = input([], /* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
|
|
84
|
+
/** Dimensiones de las filas, de la más general a la más detallada (bidireccional). */
|
|
85
|
+
this.rows = model([], /* @ts-ignore */
|
|
86
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
87
|
+
/** Dimensiones de las columnas (bidireccional). */
|
|
88
|
+
this.columns = model([], /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
90
|
+
/** Medidas (campo y agregación); por defecto, suma. */
|
|
91
|
+
this.values = input([], /* @ts-ignore */
|
|
92
|
+
...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
|
|
93
|
+
/** Selectores de filas, columnas y agregación sobre la tabla. */
|
|
94
|
+
this.configurable = input(false, { ...(ngDevMode ? { debugName: "configurable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
95
|
+
/** Las filas con hijos empiezan contraídas. */
|
|
96
|
+
this.collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
97
|
+
this.currency = input(undefined, /* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
|
|
99
|
+
this.ariaLabel = input(undefined, /* @ts-ignore */
|
|
100
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
101
|
+
this.collapsedKeys = signal(null, /* @ts-ignore */
|
|
102
|
+
...(ngDevMode ? [{ debugName: "collapsedKeys" }] : /* istanbul ignore next */ []));
|
|
103
|
+
this.aggregateOverride = signal(null, /* @ts-ignore */
|
|
104
|
+
...(ngDevMode ? [{ debugName: "aggregateOverride" }] : /* istanbul ignore next */ []));
|
|
105
|
+
this.measures = computed(() => {
|
|
106
|
+
const override = this.aggregateOverride();
|
|
107
|
+
const list = this.values().length ? this.values() : [{ field: 'value' }];
|
|
108
|
+
return list.map((v) => (override ? { ...v, aggregate: override } : v));
|
|
109
|
+
}, /* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [{ debugName: "measures" }] : /* istanbul ignore next */ []));
|
|
111
|
+
this.aggregateValue = computed(() => this.aggregateOverride() ?? this.values()[0]?.aggregate ?? 'sum', /* @ts-ignore */
|
|
112
|
+
...(ngDevMode ? [{ debugName: "aggregateValue" }] : /* istanbul ignore next */ []));
|
|
113
|
+
this.fieldMap = computed(() => new Map(this.fields().map((f) => [f.key, f])), /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "fieldMap" }] : /* istanbul ignore next */ []));
|
|
115
|
+
this.labelOf = (field, value) => {
|
|
116
|
+
const f = this.fieldMap().get(field);
|
|
117
|
+
return f?.format ? f.format(value) : value || this.t().pivotEmpty;
|
|
118
|
+
};
|
|
119
|
+
this.colKeys = computed(() => (this.columns().length ? columnKeys(this.data(), this.columns()) : []), /* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [{ debugName: "colKeys" }] : /* istanbul ignore next */ []));
|
|
121
|
+
this.colKeysWithTotal = computed(() => [...this.colKeys(), '\u0000total'], /* @ts-ignore */
|
|
122
|
+
...(ngDevMode ? [{ debugName: "colKeysWithTotal" }] : /* istanbul ignore next */ []));
|
|
123
|
+
this.tree = computed(() => rowTree(this.data(), this.rows(), (f, v) => this.labelOf(f, v)), /* @ts-ignore */
|
|
124
|
+
...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
|
|
125
|
+
this.flat = computed(() => {
|
|
126
|
+
const out = [];
|
|
127
|
+
const collapsed = this.collapsedSet();
|
|
128
|
+
const walk = (nodes) => nodes.forEach((node) => {
|
|
129
|
+
const hasChildren = node.children.length > 0;
|
|
130
|
+
out.push({ node, hasChildren });
|
|
131
|
+
if (hasChildren && !collapsed.has(node.key))
|
|
132
|
+
walk(node.children);
|
|
133
|
+
});
|
|
134
|
+
walk(this.tree());
|
|
135
|
+
return out;
|
|
136
|
+
}, /* @ts-ignore */
|
|
137
|
+
...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
|
|
138
|
+
this.dimensionOptions = computed(() => this.fields().map((f) => ({ label: f.label, value: f.key })), /* @ts-ignore */
|
|
139
|
+
...(ngDevMode ? [{ debugName: "dimensionOptions" }] : /* istanbul ignore next */ []));
|
|
140
|
+
this.columnOptions = computed(() => [{ label: this.t().pivotNone, value: '' }, ...this.dimensionOptions()], /* @ts-ignore */
|
|
141
|
+
...(ngDevMode ? [{ debugName: "columnOptions" }] : /* istanbul ignore next */ []));
|
|
142
|
+
this.aggregateOptions = computed(() => {
|
|
143
|
+
const t = this.t();
|
|
144
|
+
return [
|
|
145
|
+
{ label: t.pivotSum, value: 'sum' },
|
|
146
|
+
{ label: t.pivotCount, value: 'count' },
|
|
147
|
+
{ label: t.pivotAvg, value: 'avg' },
|
|
148
|
+
{ label: t.pivotMin, value: 'min' },
|
|
149
|
+
{ label: t.pivotMax, value: 'max' },
|
|
150
|
+
];
|
|
151
|
+
}, /* @ts-ignore */
|
|
152
|
+
...(ngDevMode ? [{ debugName: "aggregateOptions" }] : /* istanbul ignore next */ []));
|
|
153
|
+
}
|
|
154
|
+
collapsedSet() {
|
|
155
|
+
const explicit = this.collapsedKeys();
|
|
156
|
+
if (explicit)
|
|
157
|
+
return explicit;
|
|
158
|
+
if (!this.collapsed())
|
|
159
|
+
return new Set();
|
|
160
|
+
const all = new Set();
|
|
161
|
+
const walk = (nodes) => nodes.forEach((n) => {
|
|
162
|
+
if (!n.children.length)
|
|
163
|
+
return;
|
|
164
|
+
all.add(n.key);
|
|
165
|
+
walk(n.children);
|
|
166
|
+
});
|
|
167
|
+
walk(this.tree());
|
|
168
|
+
return all;
|
|
169
|
+
}
|
|
170
|
+
rowHeader() {
|
|
171
|
+
return this.rows()
|
|
172
|
+
.map((r) => this.fieldMap().get(r)?.label ?? r)
|
|
173
|
+
.join(' › ');
|
|
174
|
+
}
|
|
175
|
+
colLabel(key) {
|
|
176
|
+
const parts = splitKey(key);
|
|
177
|
+
return parts.map((v, i) => this.labelOf(this.columns()[i], v)).join(' / ');
|
|
178
|
+
}
|
|
179
|
+
measureLabel(m) {
|
|
180
|
+
return m.label ?? this.fieldMap().get(m.field)?.label ?? m.field;
|
|
181
|
+
}
|
|
182
|
+
cell(records, colKey, m) {
|
|
183
|
+
const subset = colKey === '\u0000total' ? records : records.filter((r) => keyOf(r, this.columns()) === colKey);
|
|
184
|
+
return subset.length ? aggregate(subset, m) : null;
|
|
185
|
+
}
|
|
186
|
+
text(value, m) {
|
|
187
|
+
if (value === null)
|
|
188
|
+
return '';
|
|
189
|
+
const locale = this.config.numberLocale ?? this.t().intlLocale;
|
|
190
|
+
const agg = m.aggregate ?? 'sum';
|
|
191
|
+
if (agg === 'count' || m.format === 'integer')
|
|
192
|
+
return cbFormatAmount(value, locale, { decimals: 0 });
|
|
193
|
+
if (m.format === 'number')
|
|
194
|
+
return cbFormatAmount(value, locale, { negative: this.config.negativeStyle });
|
|
195
|
+
return cbFormatAmount(value, locale, { currency: this.currency() ?? this.config.currency ?? null, negative: this.config.negativeStyle });
|
|
196
|
+
}
|
|
197
|
+
isCollapsed(key) {
|
|
198
|
+
return this.collapsedSet().has(key);
|
|
199
|
+
}
|
|
200
|
+
toggle(key) {
|
|
201
|
+
const next = new Set(this.collapsedSet());
|
|
202
|
+
if (next.has(key))
|
|
203
|
+
next.delete(key);
|
|
204
|
+
else
|
|
205
|
+
next.add(key);
|
|
206
|
+
this.collapsedKeys.set(next);
|
|
207
|
+
}
|
|
208
|
+
setRows(keys) {
|
|
209
|
+
// Se respeta el orden de las dimensiones en `fields`.
|
|
210
|
+
const order = this.fields().map((f) => f.key);
|
|
211
|
+
this.rows.set([...keys].sort((a, b) => order.indexOf(a) - order.indexOf(b)));
|
|
212
|
+
this.collapsedKeys.set(null);
|
|
213
|
+
}
|
|
214
|
+
/** Hoja de Excel con todas las filas (con niveles plegables) y los totales. */
|
|
215
|
+
toExcelSheet() {
|
|
216
|
+
const currency = this.currency() ?? this.config.currency;
|
|
217
|
+
const symbol = currency ? currencySymbol(currency, this.config.numberLocale ?? this.t().intlLocale) : undefined;
|
|
218
|
+
const keys = this.colKeysWithTotal();
|
|
219
|
+
const measures = this.measures();
|
|
220
|
+
const columns = [{ header: this.rowHeader() || this.t().pivotRows }];
|
|
221
|
+
for (const ck of keys) {
|
|
222
|
+
for (const m of measures) {
|
|
223
|
+
const head = ck === '\u0000total' ? this.t().tableTotal : this.colLabel(ck);
|
|
224
|
+
const agg = m.aggregate ?? 'sum';
|
|
225
|
+
columns.push({ header: measures.length > 1 ? `${head} · ${this.measureLabel(m)}` : head, type: agg === 'count' || m.format === 'integer' ? 'integer' : m.format === 'number' || !currency ? 'number' : 'currency', symbol });
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
const rows = [];
|
|
229
|
+
const walk = (nodes) => nodes.forEach((n) => {
|
|
230
|
+
rows.push({ level: n.level, indent: n.level, bold: n.children.length > 0, cells: [n.label, ...keys.flatMap((ck) => measures.map((m) => this.cell(n.records, ck, m)))] });
|
|
231
|
+
walk(n.children);
|
|
232
|
+
});
|
|
233
|
+
walk(this.tree());
|
|
234
|
+
return { name: this.ariaLabel() || this.t().pivotTitle, columns, rows, totals: [this.t().tableTotal, ...keys.flatMap((ck) => measures.map((m) => this.cell(this.data(), ck, m)))] };
|
|
235
|
+
}
|
|
236
|
+
exportExcel(filename) {
|
|
237
|
+
cbDownloadXlsx(filename ?? (this.ariaLabel() || this.t().pivotTitle), this.toExcelSheet());
|
|
238
|
+
}
|
|
239
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPivot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
240
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPivot, isStandalone: true, selector: "cb-pivot", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, configurable: { classPropertyName: "configurable", publicName: "configurable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", columns: "columnsChange" }, host: { classAttribute: "cb-pivot" }, ngImport: i0, template: `
|
|
241
|
+
@if (configurable()) {
|
|
242
|
+
<div class="cb-pv__config" role="group" [attr.aria-label]="t().pivotConfig">
|
|
243
|
+
<div class="cb-pv__field">
|
|
244
|
+
<span class="cb-pv__label" [id]="uid + '-rows'">{{ t().pivotRows }}</span>
|
|
245
|
+
<cb-multiselect [ariaLabelledBy]="uid + '-rows'" [options]="dimensionOptions()" optionValue="value" [value]="$any(rows())" (valueChange)="setRows($any($event))" />
|
|
246
|
+
</div>
|
|
247
|
+
<div class="cb-pv__field">
|
|
248
|
+
<span class="cb-pv__label" [id]="uid + '-cols'">{{ t().pivotColumns }}</span>
|
|
249
|
+
<cb-select [ariaLabelledBy]="uid + '-cols'" [options]="columnOptions()" optionValue="value" [value]="columns().length ? columns()[0] : ''" (valueChange)="columns.set($event ? [$any($event)] : [])" />
|
|
250
|
+
</div>
|
|
251
|
+
<div class="cb-pv__field">
|
|
252
|
+
<span class="cb-pv__label" [id]="uid + '-agg'">{{ t().pivotAggregate }}</span>
|
|
253
|
+
<cb-select [ariaLabelledBy]="uid + '-agg'" [options]="aggregateOptions()" optionValue="value" [value]="aggregateValue()" (valueChange)="aggregateOverride.set($any($event))" />
|
|
254
|
+
</div>
|
|
255
|
+
<span class="cb-pv__spacer"></span>
|
|
256
|
+
<cb-button size="sm" variant="outlined" (click)="exportExcel()">
|
|
257
|
+
<cb-icon name="download" [size]="15" aria-hidden="true" />
|
|
258
|
+
{{ t().reportExcel }}
|
|
259
|
+
</cb-button>
|
|
260
|
+
</div>
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
<div class="cb-pv__wrap">
|
|
264
|
+
<table class="cb-pv__table" [attr.aria-label]="ariaLabel() || t().pivotTitle">
|
|
265
|
+
<thead>
|
|
266
|
+
<tr>
|
|
267
|
+
<th scope="col" class="cb-pv__corner" [attr.rowspan]="measures().length > 1 ? 2 : null">{{ rowHeader() }}</th>
|
|
268
|
+
@for (ck of colKeys(); track ck) {
|
|
269
|
+
<th scope="colgroup" class="cb-pv__num" [attr.colspan]="measures().length > 1 ? measures().length : null">{{ colLabel(ck) }}</th>
|
|
270
|
+
}
|
|
271
|
+
<th scope="colgroup" class="cb-pv__num cb-pv__total-col" [attr.colspan]="measures().length > 1 ? measures().length : null">{{ t().tableTotal }}</th>
|
|
272
|
+
</tr>
|
|
273
|
+
@if (measures().length > 1) {
|
|
274
|
+
<tr>
|
|
275
|
+
@for (ck of colKeysWithTotal(); track ck) {
|
|
276
|
+
@for (m of measures(); track $index) {
|
|
277
|
+
<th scope="col" class="cb-pv__num cb-pv__measure">{{ measureLabel(m) }}</th>
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
</tr>
|
|
281
|
+
}
|
|
282
|
+
</thead>
|
|
283
|
+
<tbody>
|
|
284
|
+
@for (r of flat(); track r.node.key) {
|
|
285
|
+
<tr [class.cb-pv__group]="r.hasChildren">
|
|
286
|
+
<th scope="row" [style.padding-inline-start]="'calc(0.75rem + ' + r.node.level * 1.1 + 'rem)'">
|
|
287
|
+
@if (r.hasChildren) {
|
|
288
|
+
<button type="button" class="cb-pv__toggle" [attr.aria-expanded]="!isCollapsed(r.node.key)" (click)="toggle(r.node.key)">
|
|
289
|
+
<cb-icon name="chevron-right" [size]="13" [class.cb-is-open]="!isCollapsed(r.node.key)" aria-hidden="true" />
|
|
290
|
+
{{ r.node.label }}
|
|
291
|
+
</button>
|
|
292
|
+
} @else {
|
|
293
|
+
{{ r.node.label }}
|
|
294
|
+
}
|
|
295
|
+
</th>
|
|
296
|
+
@for (ck of colKeysWithTotal(); track ck; let last = $last) {
|
|
297
|
+
@for (m of measures(); track $index) {
|
|
298
|
+
<td class="cb-pv__num" [class.cb-pv__total-col]="last" [class.cb-pv__neg]="(cell(r.node.records, ck, m) ?? 0) < 0">{{ text(cell(r.node.records, ck, m), m) }}</td>
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
</tr>
|
|
302
|
+
} @empty {
|
|
303
|
+
<tr>
|
|
304
|
+
<td class="cb-pv__empty" [attr.colspan]="1 + colKeysWithTotal().length * measures().length">{{ t().noData }}</td>
|
|
305
|
+
</tr>
|
|
306
|
+
}
|
|
307
|
+
</tbody>
|
|
308
|
+
@if (data().length) {
|
|
309
|
+
<tfoot>
|
|
310
|
+
<tr>
|
|
311
|
+
<th scope="row">{{ t().tableTotal }}</th>
|
|
312
|
+
@for (ck of colKeysWithTotal(); track ck; let last = $last) {
|
|
313
|
+
@for (m of measures(); track $index) {
|
|
314
|
+
<td class="cb-pv__num" [class.cb-pv__total-col]="last" [class.cb-pv__neg]="(cell(data(), ck, m) ?? 0) < 0">{{ text(cell(data(), ck, m), m) }}</td>
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
</tr>
|
|
318
|
+
</tfoot>
|
|
319
|
+
}
|
|
320
|
+
</table>
|
|
321
|
+
</div>
|
|
322
|
+
`, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-3, .75rem);width:100%;min-width:0;container-type:inline-size;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-pv__config{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem}.cb-pv__field{display:grid;gap:.25rem;min-width:11rem}.cb-pv__label{font-weight:var(--cb-font-weight-medium, 500)}.cb-pv__spacer{flex:1}.cb-pv__wrap{overflow:auto;max-height:34rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-pv__table{width:100%;border-collapse:separate;border-spacing:0}.cb-pv__table th,.cb-pv__table td{padding:.5rem .75rem;border-bottom:1px solid var(--cb-color-border);text-align:start;white-space:nowrap}.cb-pv__table thead th{position:sticky;top:0;z-index:2;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__table thead tr:nth-child(2) th{top:2.1rem}.cb-pv__table tbody th{position:sticky;left:0;z-index:1;background:var(--cb-color-bg);font-weight:400}.cb-pv__table .cb-pv__num{text-align:end;font-variant-numeric:tabular-nums}.cb-pv__group>th,.cb-pv__group>td{background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__total-col{border-left:1px solid var(--cb-color-border-strong);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__neg{color:var(--cb-color-danger-text, #dc2626)}.cb-pv__toggle{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}.cb-pv__toggle cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-pv__toggle cb-icon.cb-is-open{transform:rotate(90deg)}.cb-pv__toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px;border-radius:2px}.cb-pv__table tfoot th,.cb-pv__table tfoot td{position:sticky;bottom:0;border-top:2px solid var(--cb-color-border-strong);border-bottom:0;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__table tfoot th{left:0;z-index:3}.cb-pv__empty{height:5rem;color:var(--cb-color-text-muted);text-align:center!important}@container (max-width: 40rem){.cb-pv__table tbody th,.cb-pv__table tfoot th,.cb-pv__table thead th:first-child{min-width:8rem;max-width:11rem;white-space:normal}.cb-pv__table tbody th{box-shadow:inset -1px 0 0 var(--cb-color-border)}}\n"], dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbMultiSelect, selector: "cb-multiselect", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "group", "optionGroupLabel", "optionGroupChildren", "placeholder", "size", "filter", "filterPlaceholder", "emptyMessage", "showToggleAll", "maxSelectedLabels", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "invalid", "disabled", "inputId", "ariaLabel", "ariaLabelledBy", "value"], outputs: ["valueChange"] }, { kind: "component", type: CbSelect, selector: "cb-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "group", "optionGroupLabel", "optionGroupChildren", "placeholder", "size", "filter", "filterPlaceholder", "emptyMessage", "showClear", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "invalid", "disabled", "inputId", "ariaLabel", "ariaLabelledBy", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
323
|
+
}
|
|
324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPivot, decorators: [{
|
|
325
|
+
type: Component,
|
|
326
|
+
args: [{ selector: 'cb-pivot', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton, CbIcon, CbMultiSelect, CbSelect], host: { class: 'cb-pivot' }, template: `
|
|
327
|
+
@if (configurable()) {
|
|
328
|
+
<div class="cb-pv__config" role="group" [attr.aria-label]="t().pivotConfig">
|
|
329
|
+
<div class="cb-pv__field">
|
|
330
|
+
<span class="cb-pv__label" [id]="uid + '-rows'">{{ t().pivotRows }}</span>
|
|
331
|
+
<cb-multiselect [ariaLabelledBy]="uid + '-rows'" [options]="dimensionOptions()" optionValue="value" [value]="$any(rows())" (valueChange)="setRows($any($event))" />
|
|
332
|
+
</div>
|
|
333
|
+
<div class="cb-pv__field">
|
|
334
|
+
<span class="cb-pv__label" [id]="uid + '-cols'">{{ t().pivotColumns }}</span>
|
|
335
|
+
<cb-select [ariaLabelledBy]="uid + '-cols'" [options]="columnOptions()" optionValue="value" [value]="columns().length ? columns()[0] : ''" (valueChange)="columns.set($event ? [$any($event)] : [])" />
|
|
336
|
+
</div>
|
|
337
|
+
<div class="cb-pv__field">
|
|
338
|
+
<span class="cb-pv__label" [id]="uid + '-agg'">{{ t().pivotAggregate }}</span>
|
|
339
|
+
<cb-select [ariaLabelledBy]="uid + '-agg'" [options]="aggregateOptions()" optionValue="value" [value]="aggregateValue()" (valueChange)="aggregateOverride.set($any($event))" />
|
|
340
|
+
</div>
|
|
341
|
+
<span class="cb-pv__spacer"></span>
|
|
342
|
+
<cb-button size="sm" variant="outlined" (click)="exportExcel()">
|
|
343
|
+
<cb-icon name="download" [size]="15" aria-hidden="true" />
|
|
344
|
+
{{ t().reportExcel }}
|
|
345
|
+
</cb-button>
|
|
346
|
+
</div>
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
<div class="cb-pv__wrap">
|
|
350
|
+
<table class="cb-pv__table" [attr.aria-label]="ariaLabel() || t().pivotTitle">
|
|
351
|
+
<thead>
|
|
352
|
+
<tr>
|
|
353
|
+
<th scope="col" class="cb-pv__corner" [attr.rowspan]="measures().length > 1 ? 2 : null">{{ rowHeader() }}</th>
|
|
354
|
+
@for (ck of colKeys(); track ck) {
|
|
355
|
+
<th scope="colgroup" class="cb-pv__num" [attr.colspan]="measures().length > 1 ? measures().length : null">{{ colLabel(ck) }}</th>
|
|
356
|
+
}
|
|
357
|
+
<th scope="colgroup" class="cb-pv__num cb-pv__total-col" [attr.colspan]="measures().length > 1 ? measures().length : null">{{ t().tableTotal }}</th>
|
|
358
|
+
</tr>
|
|
359
|
+
@if (measures().length > 1) {
|
|
360
|
+
<tr>
|
|
361
|
+
@for (ck of colKeysWithTotal(); track ck) {
|
|
362
|
+
@for (m of measures(); track $index) {
|
|
363
|
+
<th scope="col" class="cb-pv__num cb-pv__measure">{{ measureLabel(m) }}</th>
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
</tr>
|
|
367
|
+
}
|
|
368
|
+
</thead>
|
|
369
|
+
<tbody>
|
|
370
|
+
@for (r of flat(); track r.node.key) {
|
|
371
|
+
<tr [class.cb-pv__group]="r.hasChildren">
|
|
372
|
+
<th scope="row" [style.padding-inline-start]="'calc(0.75rem + ' + r.node.level * 1.1 + 'rem)'">
|
|
373
|
+
@if (r.hasChildren) {
|
|
374
|
+
<button type="button" class="cb-pv__toggle" [attr.aria-expanded]="!isCollapsed(r.node.key)" (click)="toggle(r.node.key)">
|
|
375
|
+
<cb-icon name="chevron-right" [size]="13" [class.cb-is-open]="!isCollapsed(r.node.key)" aria-hidden="true" />
|
|
376
|
+
{{ r.node.label }}
|
|
377
|
+
</button>
|
|
378
|
+
} @else {
|
|
379
|
+
{{ r.node.label }}
|
|
380
|
+
}
|
|
381
|
+
</th>
|
|
382
|
+
@for (ck of colKeysWithTotal(); track ck; let last = $last) {
|
|
383
|
+
@for (m of measures(); track $index) {
|
|
384
|
+
<td class="cb-pv__num" [class.cb-pv__total-col]="last" [class.cb-pv__neg]="(cell(r.node.records, ck, m) ?? 0) < 0">{{ text(cell(r.node.records, ck, m), m) }}</td>
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
</tr>
|
|
388
|
+
} @empty {
|
|
389
|
+
<tr>
|
|
390
|
+
<td class="cb-pv__empty" [attr.colspan]="1 + colKeysWithTotal().length * measures().length">{{ t().noData }}</td>
|
|
391
|
+
</tr>
|
|
392
|
+
}
|
|
393
|
+
</tbody>
|
|
394
|
+
@if (data().length) {
|
|
395
|
+
<tfoot>
|
|
396
|
+
<tr>
|
|
397
|
+
<th scope="row">{{ t().tableTotal }}</th>
|
|
398
|
+
@for (ck of colKeysWithTotal(); track ck; let last = $last) {
|
|
399
|
+
@for (m of measures(); track $index) {
|
|
400
|
+
<td class="cb-pv__num" [class.cb-pv__total-col]="last" [class.cb-pv__neg]="(cell(data(), ck, m) ?? 0) < 0">{{ text(cell(data(), ck, m), m) }}</td>
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
</tr>
|
|
404
|
+
</tfoot>
|
|
405
|
+
}
|
|
406
|
+
</table>
|
|
407
|
+
</div>
|
|
408
|
+
`, styles: [":host{display:grid;gap:var(--cb-space-3, .75rem);width:100%;min-width:0;container-type:inline-size;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-pv__config{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem}.cb-pv__field{display:grid;gap:.25rem;min-width:11rem}.cb-pv__label{font-weight:var(--cb-font-weight-medium, 500)}.cb-pv__spacer{flex:1}.cb-pv__wrap{overflow:auto;max-height:34rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-pv__table{width:100%;border-collapse:separate;border-spacing:0}.cb-pv__table th,.cb-pv__table td{padding:.5rem .75rem;border-bottom:1px solid var(--cb-color-border);text-align:start;white-space:nowrap}.cb-pv__table thead th{position:sticky;top:0;z-index:2;background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__table thead tr:nth-child(2) th{top:2.1rem}.cb-pv__table tbody th{position:sticky;left:0;z-index:1;background:var(--cb-color-bg);font-weight:400}.cb-pv__table .cb-pv__num{text-align:end;font-variant-numeric:tabular-nums}.cb-pv__group>th,.cb-pv__group>td{background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__total-col{border-left:1px solid var(--cb-color-border-strong);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__neg{color:var(--cb-color-danger-text, #dc2626)}.cb-pv__toggle{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}.cb-pv__toggle cb-icon{transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-pv__toggle cb-icon.cb-is-open{transform:rotate(90deg)}.cb-pv__toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px;border-radius:2px}.cb-pv__table tfoot th,.cb-pv__table tfoot td{position:sticky;bottom:0;border-top:2px solid var(--cb-color-border-strong);border-bottom:0;background:var(--cb-color-surface-subtle);font-weight:var(--cb-font-weight-semibold, 600)}.cb-pv__table tfoot th{left:0;z-index:3}.cb-pv__empty{height:5rem;color:var(--cb-color-text-muted);text-align:center!important}@container (max-width: 40rem){.cb-pv__table tbody th,.cb-pv__table tfoot th,.cb-pv__table thead th:first-child{min-width:8rem;max-width:11rem;white-space:normal}.cb-pv__table tbody th{box-shadow:inset -1px 0 0 var(--cb-color-border)}}\n"] }]
|
|
409
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], configurable: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
410
|
+
|
|
411
|
+
/*
|
|
412
|
+
* Public API Surface de @caribeng/ui/pivot
|
|
413
|
+
*/
|
|
414
|
+
|
|
415
|
+
/**
|
|
416
|
+
* Generated bundle index. Do not edit.
|
|
417
|
+
*/
|
|
418
|
+
|
|
419
|
+
export { CbPivot, aggregate, columnKeys, rowTree };
|
|
@@ -267,7 +267,7 @@ class CbPricing {
|
|
|
267
267
|
</div>
|
|
268
268
|
}
|
|
269
269
|
</div>
|
|
270
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-
|
|
270
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-700, #047857);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--list) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--list) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--list) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--list) .cb-pricing__divider{display:none}:host(.cb-pricing--list) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--list) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--list) .cb-pricing__head{flex:none}:host(.cb-pricing--list) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__cta{flex:none}}.cb-pricing__plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-pricing__badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.75rem;font-weight:600;white-space:nowrap}.cb-pricing__badge cb-icon ::ng-deep svg{fill:currentColor}.cb-pricing__billed{margin:.5rem 0 0;font-size:.75rem;opacity:.7}.cb-pricing__saving{align-self:flex-start;margin-top:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary) 16%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text));font-size:.75rem;font-weight:600}.cb-pricing__plan--featured .cb-pricing__saving{background:#fff3;color:inherit}.cb-pricing__head{display:flex;flex-direction:column}.cb-pricing__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}:host(.cb-pricing--horizontal) .cb-pricing__title{max-width:none;margin:0;text-align:left;font-size:2rem;line-height:1.2}.cb-pricing__subtitle{display:flex;align-items:center;gap:.375rem;margin:.75rem 0 0;color:var(--cb-color-text-muted);font-size:.875rem}.cb-pricing__choices{display:flex;flex-direction:column;gap:.25rem}.cb-pricing__choice{display:inline-flex;align-items:center;gap:.625rem;padding:.25rem .375rem;border:0;border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.cb-pricing__choice:hover{background:var(--cb-color-surface-hover)}.cb-pricing__choice:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pricing__box{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1.5px solid var(--cb-color-border-strong);border-radius:4px;background:var(--cb-color-surface)}.cb-pricing__choice[aria-checked=true] .cb-pricing__box{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-pricing__discount{padding:.125rem .5rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-text);color:var(--cb-color-surface);font-size:.75rem;font-weight:700;white-space:nowrap}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,1fr);align-items:stretch;overflow-x:auto;padding:.25rem .25rem .5rem}:host(.cb-pricing--horizontal) .cb-pricing__plan{padding:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:1rem;font-size:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__price{align-items:baseline}:host(.cb-pricing--horizontal) .cb-pricing__price strong{display:inline-block;font-size:2rem;letter-spacing:-.02em}:host(.cb-pricing--horizontal) .cb-pricing__currency{display:inline-block;margin:.2rem .25rem 0 0;vertical-align:top;letter-spacing:0;font-size:.8rem;font-weight:500;opacity:.7}:host(.cb-pricing--horizontal) .cb-pricing__per{font-size:.9rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{margin:.75rem 0 1rem}:host(.cb-pricing--horizontal) .cb-pricing__features li{align-items:flex-start;line-height:1.45}:host(.cb-pricing--horizontal) .cb-pricing__check{margin-top:.125rem;color:var(--cb-color-primary-text)}:host(.cb-pricing--horizontal) .cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured{border-color:color-mix(in srgb,var(--cb-color-primary) 45%,transparent);background:radial-gradient(circle at 30% 35%,color-mix(in srgb,var(--cb-color-primary) 18%,var(--cb-color-surface)),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--cb-color-primary) 42%,var(--cb-color-surface)),color-mix(in srgb,var(--cb-color-primary) 26%,var(--cb-color-surface)) 50%,color-mix(in srgb,var(--cb-color-primary) 48%,var(--cb-color-surface)));box-shadow:var(--cb-shadow-md, 0 6px 20px rgba(0, 0, 0, .08));color:var(--cb-color-text)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__badge{background:var(--cb-color-surface);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__saving{background:color-mix(in srgb,var(--cb-color-surface) 55%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__check{color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
271
271
|
}
|
|
272
272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPricing, decorators: [{
|
|
273
273
|
type: Component,
|
|
@@ -407,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
407
407
|
</div>
|
|
408
408
|
}
|
|
409
409
|
</div>
|
|
410
|
-
`, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-
|
|
410
|
+
`, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans);color:var(--cb-color-text)}.cb-pricing__title{max-width:30rem;margin:0 auto 1.75rem;text-align:center;font-size:1.4rem;line-height:1.3}.cb-pricing__toggle-wrap{display:flex;justify-content:center;margin-bottom:2rem}.cb-pricing__toggle{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--cb-color-surface-hover, rgba(0, 0, 0, .06))}.cb-pricing__toggle-thumb{position:absolute;top:4px;left:4px;width:110px;height:calc(100% - 8px);border-radius:999px;background:var(--cb-color-surface-raised, #fff);box-shadow:var(--cb-shadow-sm, 0 1px 3px rgba(0, 0, 0, .1));transition:transform .2s ease}.cb-pricing__toggle--annual .cb-pricing__toggle-thumb{transform:translate(110px)}.cb-pricing__toggle-btn{position:relative;z-index:1;width:110px;height:40px;border:0;background:transparent;color:var(--cb-color-text-muted);font:inherit;font-weight:500;cursor:pointer}.cb-pricing__toggle-btn--on{color:var(--cb-color-text)}.cb-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--cb-space-4, 1rem);align-items:start}.cb-pricing__plan{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 16px);background:var(--cb-color-surface)}.cb-pricing__plan--featured{background:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-700, #047857);color:#fff}.cb-pricing__plan-name{font-weight:600;font-size:1.1rem;margin-bottom:.75rem}.cb-pricing__price-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-pricing__price{display:flex;align-items:flex-end;gap:.25rem}.cb-pricing__price strong{font-size:1.9rem;line-height:1}.cb-pricing__per{font-size:.85rem;opacity:.7;margin-bottom:.2rem}.cb-pricing__old{font-size:1.1rem;font-weight:600;text-decoration:line-through;opacity:.45}.cb-pricing__desc{margin:.5rem 0 0;font-size:.85rem;opacity:.8}.cb-pricing__divider{height:1px;margin:1.25rem 0;background:currentColor;opacity:.15}.cb-pricing__features{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.cb-pricing__features li{display:flex;align-items:center;gap:.6rem;font-size:.875rem}.cb-pricing__feature--off{opacity:.5}.cb-pricing__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-pricing__check{color:var(--cb-color-success-500, #22c55e);flex:none}.cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}.cb-pricing__plan--featured .cb-pricing__check{color:#fff}:host(.cb-pricing--list) .cb-pricing__grid{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:row;align-items:center;gap:1.75rem}:host(.cb-pricing--list) .cb-pricing__head{flex:0 0 210px}:host(.cb-pricing--list) .cb-pricing__plan-name{margin-bottom:.5rem}:host(.cb-pricing--list) .cb-pricing__divider{display:none}:host(.cb-pricing--list) .cb-pricing__features{flex:1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}:host(.cb-pricing--list) .cb-pricing__cta{flex:0 0 170px;align-self:center}@media(max-width:720px){:host(.cb-pricing--list) .cb-pricing__plan{flex-direction:column;align-items:stretch;gap:1rem}:host(.cb-pricing--list) .cb-pricing__head{flex:none}:host(.cb-pricing--list) .cb-pricing__features{grid-template-columns:1fr}:host(.cb-pricing--list) .cb-pricing__cta{flex:none}}.cb-pricing__plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-pricing__badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.75rem;font-weight:600;white-space:nowrap}.cb-pricing__badge cb-icon ::ng-deep svg{fill:currentColor}.cb-pricing__billed{margin:.5rem 0 0;font-size:.75rem;opacity:.7}.cb-pricing__saving{align-self:flex-start;margin-top:.25rem;padding:.125rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--cb-color-primary) 16%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text));font-size:.75rem;font-weight:600}.cb-pricing__plan--featured .cb-pricing__saving{background:#fff3;color:inherit}.cb-pricing__head{display:flex;flex-direction:column}.cb-pricing__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.5rem}:host(.cb-pricing--horizontal) .cb-pricing__title{max-width:none;margin:0;text-align:left;font-size:2rem;line-height:1.2}.cb-pricing__subtitle{display:flex;align-items:center;gap:.375rem;margin:.75rem 0 0;color:var(--cb-color-text-muted);font-size:.875rem}.cb-pricing__choices{display:flex;flex-direction:column;gap:.25rem}.cb-pricing__choice{display:inline-flex;align-items:center;gap:.625rem;padding:.25rem .375rem;border:0;border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.cb-pricing__choice:hover{background:var(--cb-color-surface-hover)}.cb-pricing__choice:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pricing__box{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1.5px solid var(--cb-color-border-strong);border-radius:4px;background:var(--cb-color-surface)}.cb-pricing__choice[aria-checked=true] .cb-pricing__box{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-pricing__discount{padding:.125rem .5rem;border-radius:var(--cb-radius-sm, 4px);background:var(--cb-color-text);color:var(--cb-color-surface);font-size:.75rem;font-weight:700;white-space:nowrap}:host(.cb-pricing--horizontal) .cb-pricing__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,1fr);align-items:stretch;overflow-x:auto;padding:.25rem .25rem .5rem}:host(.cb-pricing--horizontal) .cb-pricing__plan{padding:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__plan-name{margin-bottom:1rem;font-size:1.25rem}:host(.cb-pricing--horizontal) .cb-pricing__price{align-items:baseline}:host(.cb-pricing--horizontal) .cb-pricing__price strong{display:inline-block;font-size:2rem;letter-spacing:-.02em}:host(.cb-pricing--horizontal) .cb-pricing__currency{display:inline-block;margin:.2rem .25rem 0 0;vertical-align:top;letter-spacing:0;font-size:.8rem;font-weight:500;opacity:.7}:host(.cb-pricing--horizontal) .cb-pricing__per{font-size:.9rem}:host(.cb-pricing--horizontal) .cb-pricing__divider{margin:.75rem 0 1rem}:host(.cb-pricing--horizontal) .cb-pricing__features li{align-items:flex-start;line-height:1.45}:host(.cb-pricing--horizontal) .cb-pricing__check{margin-top:.125rem;color:var(--cb-color-primary-text)}:host(.cb-pricing--horizontal) .cb-pricing__feature--off .cb-pricing__check{color:var(--cb-color-text-muted)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured{border-color:color-mix(in srgb,var(--cb-color-primary) 45%,transparent);background:radial-gradient(circle at 30% 35%,color-mix(in srgb,var(--cb-color-primary) 18%,var(--cb-color-surface)),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--cb-color-primary) 42%,var(--cb-color-surface)),color-mix(in srgb,var(--cb-color-primary) 26%,var(--cb-color-surface)) 50%,color-mix(in srgb,var(--cb-color-primary) 48%,var(--cb-color-surface)));box-shadow:var(--cb-shadow-md, 0 6px 20px rgba(0, 0, 0, .08));color:var(--cb-color-text)}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__badge{background:var(--cb-color-surface);color:color-mix(in srgb,var(--cb-color-primary) 75%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__saving{background:color-mix(in srgb,var(--cb-color-surface) 55%,transparent);color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}:host(.cb-pricing--horizontal) .cb-pricing__plan--featured .cb-pricing__check{color:color-mix(in srgb,var(--cb-color-primary) 60%,var(--cb-color-text))}\n"] }]
|
|
411
411
|
}], propDecorators: { plans: [{ type: i0.Input, args: [{ isSignal: true, alias: "plans", required: false }] }], billing: [{ type: i0.Input, args: [{ isSignal: true, alias: "billing", required: false }] }, { type: i0.Output, args: ["billingChange"] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], annualBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualBadge", required: false }] }], annualDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualDisplay", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], monthlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthlyLabel", required: false }] }], annualLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "annualLabel", required: false }] }], perMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perMonthLabel", required: false }] }], perYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perYearLabel", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], planSelect: [{ type: i0.Output, args: ["planSelect"] }] } });
|
|
412
412
|
|
|
413
413
|
/*
|