@pecb-ui/components 1.1.19 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/pecb-ui-components.mjs +174 -37
- package/fesm2022/pecb-ui-components.mjs.map +1 -1
- package/index.d.ts +154 -18
- package/package.json +1 -1
- package/styles/abstracts/_mixins.scss +17 -0
|
@@ -257,8 +257,8 @@ function getComputedStyleValue(element, property) {
|
|
|
257
257
|
|
|
258
258
|
// ─── Auto-generated icon SVG registry ─────────────────────────────────────────
|
|
259
259
|
// Generated by: node scripts/generate-icons.js
|
|
260
|
-
// Total icons:
|
|
261
|
-
// Do not edit manually.
|
|
260
|
+
// Total icons: 786
|
|
261
|
+
// Do not edit manually — except for hand-added icons (see 'newspaper').
|
|
262
262
|
/**
|
|
263
263
|
* Map of every PECB icon name to its inline SVG string.
|
|
264
264
|
*
|
|
@@ -1978,6 +1978,10 @@ const PECB_ICONS = {
|
|
|
1978
1978
|
</svg>`,
|
|
1979
1979
|
'move': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1980
1980
|
<path d="M5.76317 15.3635L2.40002 12.0004M2.40002 12.0004L5.76317 8.63725M2.40002 12.0004H21.6M18.2369 15.3635L21.6 12.0004M21.6 12.0004L18.2369 8.63725M8.63688 5.76353L12 2.40039M12 2.40039L15.3632 5.76353M12 2.40039L12 21.6004M8.63688 18.2372L12 21.6004M12 21.6004L15.3632 18.2372" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1981
|
+
</svg>`,
|
|
1982
|
+
'newspaper': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1983
|
+
<path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9h4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1984
|
+
<path d="M18 14h-8M15 18h-5M10 6h8v4h-8z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1981
1985
|
</svg>`,
|
|
1982
1986
|
'note-01': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1983
1987
|
<path d="M18.5687 4.42105L13.5159 2.3999V17.5585C13.5157 18.4483 13.2219 19.3132 12.6801 20.019C12.1382 20.7249 11.3787 21.2322 10.5191 21.4623C9.65961 21.6925 8.74816 21.6326 7.92613 21.292C7.1041 20.9514 6.41744 20.349 5.97262 19.5784C5.5278 18.8077 5.34969 17.9118 5.46591 17.0296C5.58212 16.1475 5.98618 15.3283 6.6154 14.6991C7.24463 14.07 8.06386 13.666 8.94606 13.5499C9.82826 13.4338 10.7241 13.612 11.4947 14.0569C11.8316 14.2135 13.1853 15.2991 13.5159 16.0427" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -4960,11 +4964,11 @@ class TabComponent {
|
|
|
4960
4964
|
}
|
|
4961
4965
|
}
|
|
4962
4966
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TabComponent, isStandalone: true, selector: "pecb-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabStyle: { classPropertyName: "tabStyle", publicName: "tabStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaSelected: { classPropertyName: "ariaSelected", publicName: "ariaSelected", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", closed: "closed" }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [class]=\"tabClasses.join(' ')\"\n role=\"tab\"\n [attr.aria-label]=\"ariaLabel() || label()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-selected]=\"ariaSelected() !== undefined ? ariaSelected() : active()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"onClick($event)\"\n (keydown)=\"onKeyDown($event)\"\n>\n <span class=\"pecb-tab__content\">\n <!-- Label -->\n <span class=\"pecb-tab__label\">{{ label() }}</span>\n\n <!-- Icon/Badge -->\n <span *ngIf=\"icon()\" class=\"pecb-tab__icon\" aria-hidden=\"true\" [innerHTML]=\"iconSvg()\"></span>\n\n <!-- Close button -->\n <button\n *ngIf=\"closable()\"\n type=\"button\"\n class=\"pecb-tab__close\"\n [attr.aria-label]=\"closeAriaLabel() + ' ' + label()\"\n [disabled]=\"disabled()\"\n (click)=\"onClose($event)\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M13.725 4.28249C13.4325 3.98999 12.96 3.98999 12.6675 4.28249L9.00004 7.94249L5.33254 4.27499C5.04004 3.98249 4.56754 3.98249 4.27504 4.27499C3.98254 4.56749 3.98254 5.03999 4.27504 5.33249L7.94254 8.99999L4.27504 12.6675C3.98254 12.96 3.98254 13.4325 4.27504 13.725C4.56754 14.0175 5.04004 14.0175 5.33254 13.725L9.00004 10.0575L12.6675 13.725C12.96 14.0175 13.4325 14.0175 13.725 13.725C14.0175 13.4325 14.0175 12.96 13.725 12.6675L10.0575 8.99999L13.725 5.33249C14.01 5.04749 14.01 4.56749 13.725 4.28249Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n </span>\n</div>\n", styles: [".pecb-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:400;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;color:#616161;border:1px solid transparent;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-tab--sm{padding:6px 12px;font-size:12px;gap:6px;border-radius:6px}.pecb-tab--sm .pecb-tab__content{gap:6px}.pecb-tab--sm .pecb-tab__icon{font-size:12px}.pecb-tab--sm .pecb-tab__close{width:14px;height:14px}.pecb-tab--md{padding:8px 16px;font-size:14px;gap:8px;border-radius:8px}.pecb-tab--md .pecb-tab__content{gap:8px}.pecb-tab--md .pecb-tab__icon{font-size:12px}.pecb-tab--md .pecb-tab__close{width:16px;height:16px}.pecb-tab--rounded{border-radius:80px;background-color:transparent;color:#616161;border-color:transparent}.pecb-tab--rounded.pecb-tab--sm{border-radius:80px}.pecb-tab--rounded:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){background-color:#ececec;color:#313131}.pecb-tab--rounded.pecb-tab--active{background-color:#c2c2c2;color:#212427;border-color:transparent;font-weight:500}.pecb-tab--rounded.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--rounded.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--rounded.pecb-tab--disabled{background-color:transparent;color:#c2c2c2;cursor:not-allowed}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__icon{background-color:#c2c2c2;color:#fff}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__close{color:#c2c2c2}.pecb-tab--line{border-radius:0;background-color:transparent!important;border:none;border-bottom:2px solid transparent;padding-bottom:8px;color:#616161}.pecb-tab--line.pecb-tab--sm{padding-bottom:6px;border-bottom-width:2px}.pecb-tab--line:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){color:#313131;border-bottom-color:#c2c2c2;background-color:transparent!important}.pecb-tab--line.pecb-tab--active{color:#a11e29;border-bottom-color:#a11e29;font-weight:500;background-color:transparent!important}.pecb-tab--line.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--line.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--line.pecb-tab--disabled{color:#919191;cursor:not-allowed;background-color:transparent!important;border-bottom-color:#c2c2c2}.pecb-tab--line.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab--line.pecb-tab--disabled .pecb-tab__close{color:#919191}.pecb-tab__content{display:inline-flex;align-items:center;justify-content:center;gap:12px}.pecb-tab__icon{display:flex;min-width:20px;padding:3px 7px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:65px;background-color:#a11e29;color:#fff;font-size:12px;font-weight:700;line-height:1;flex-shrink:0;white-space:nowrap}.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab__label{white-space:nowrap;line-height:1.2}.pecb-tab__close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background-color:transparent;color:#919191;cursor:pointer;border-radius:50%;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab__close svg{display:block;width:100%;height:100%}.pecb-tab__close:hover:not(:disabled){background-color:#3131311a;color:#313131}.pecb-tab__close:active:not(:disabled){background-color:#31313133}.pecb-tab__close:disabled{cursor:not-allowed;opacity:.5}.pecb-tab__close:focus-visible{outline:2px solid #a11e29;outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4967
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TabComponent, isStandalone: true, selector: "pecb-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabStyle: { classPropertyName: "tabStyle", publicName: "tabStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaSelected: { classPropertyName: "ariaSelected", publicName: "ariaSelected", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", closed: "closed" }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [class]=\"tabClasses.join(' ')\"\n role=\"tab\"\n [attr.aria-label]=\"ariaLabel() || label()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-selected]=\"ariaSelected() !== undefined ? ariaSelected() : active()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"onClick($event)\"\n (keydown)=\"onKeyDown($event)\"\n>\n <span class=\"pecb-tab__content\">\n <!-- Label -->\n <span class=\"pecb-tab__label\">{{ label() }}</span>\n\n <!-- Icon/Badge -->\n <span *ngIf=\"icon()\" class=\"pecb-tab__icon\" aria-hidden=\"true\" [innerHTML]=\"iconSvg()\"></span>\n\n <!-- Close button -->\n <button\n *ngIf=\"closable()\"\n type=\"button\"\n class=\"pecb-tab__close\"\n [attr.aria-label]=\"closeAriaLabel() + ' ' + label()\"\n [disabled]=\"disabled()\"\n (click)=\"onClose($event)\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M13.725 4.28249C13.4325 3.98999 12.96 3.98999 12.6675 4.28249L9.00004 7.94249L5.33254 4.27499C5.04004 3.98249 4.56754 3.98249 4.27504 4.27499C3.98254 4.56749 3.98254 5.03999 4.27504 5.33249L7.94254 8.99999L4.27504 12.6675C3.98254 12.96 3.98254 13.4325 4.27504 13.725C4.56754 14.0175 5.04004 14.0175 5.33254 13.725L9.00004 10.0575L12.6675 13.725C12.96 14.0175 13.4325 14.0175 13.725 13.725C14.0175 13.4325 14.0175 12.96 13.725 12.6675L10.0575 8.99999L13.725 5.33249C14.01 5.04749 14.01 4.56749 13.725 4.28249Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n </span>\n</div>\n", styles: [".pecb-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:400;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;color:#616161;border:1px solid transparent;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-tab--sm{padding:6px 12px;font-size:12px;gap:6px;border-radius:6px}.pecb-tab--sm .pecb-tab__content{gap:6px}.pecb-tab--sm .pecb-tab__icon{font-size:12px}.pecb-tab--sm .pecb-tab__close{width:14px;height:14px}.pecb-tab--md{padding:8px 16px;font-size:14px;gap:8px;border-radius:8px}.pecb-tab--md .pecb-tab__content{gap:8px}.pecb-tab--md .pecb-tab__icon{font-size:12px}.pecb-tab--md .pecb-tab__close{width:16px;height:16px}.pecb-tab--rounded{border-radius:80px;background-color:transparent;color:#616161;border-color:transparent}.pecb-tab--rounded.pecb-tab--sm{border-radius:80px}.pecb-tab--rounded:not(.pecb-tab--active):not(.pecb-tab--disabled) .pecb-tab__icon{background-color:#fdecea;color:#ff606f}.pecb-tab--rounded:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){background-color:#ececec;color:#313131}.pecb-tab--rounded.pecb-tab--active{background-color:#c2c2c2;color:#212427;border-color:transparent;font-weight:500}.pecb-tab--rounded.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--rounded.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--rounded.pecb-tab--disabled{background-color:transparent;color:#c2c2c2;cursor:not-allowed}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__icon{background-color:#c2c2c2;color:#fff}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__close{color:#c2c2c2}.pecb-tab--line{border-radius:0;background-color:transparent!important;border:none;border-bottom:2px solid transparent;padding-bottom:8px;color:#616161}.pecb-tab--line.pecb-tab--sm{padding-bottom:6px;border-bottom-width:2px}.pecb-tab--line:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){color:#313131;border-bottom-color:#c2c2c2;background-color:transparent!important}.pecb-tab--line.pecb-tab--active{color:#a11e29;border-bottom-color:#a11e29;font-weight:500;background-color:transparent!important}.pecb-tab--line.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--line.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--line.pecb-tab--disabled{color:#919191;cursor:not-allowed;background-color:transparent!important;border-bottom-color:#c2c2c2}.pecb-tab--line.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab--line.pecb-tab--disabled .pecb-tab__close{color:#919191}.pecb-tab__content{display:inline-flex;align-items:center;justify-content:center;gap:12px}.pecb-tab__icon{display:flex;min-width:20px;padding:3px 7px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:65px;background-color:#a11e29;color:#fff;font-size:12px;font-weight:700;line-height:1;flex-shrink:0;white-space:nowrap}.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab__label{white-space:nowrap;line-height:1.2}.pecb-tab__close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background-color:transparent;color:#919191;cursor:pointer;border-radius:50%;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab__close svg{display:block;width:100%;height:100%}.pecb-tab__close:hover:not(:disabled){background-color:#3131311a;color:#313131}.pecb-tab__close:active:not(:disabled){background-color:#31313133}.pecb-tab__close:disabled{cursor:not-allowed;opacity:.5}.pecb-tab__close:focus-visible{outline:2px solid #a11e29;outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4964
4968
|
}
|
|
4965
4969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabComponent, decorators: [{
|
|
4966
4970
|
type: Component,
|
|
4967
|
-
args: [{ selector: 'pecb-tab', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n [class]=\"tabClasses.join(' ')\"\n role=\"tab\"\n [attr.aria-label]=\"ariaLabel() || label()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-selected]=\"ariaSelected() !== undefined ? ariaSelected() : active()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"onClick($event)\"\n (keydown)=\"onKeyDown($event)\"\n>\n <span class=\"pecb-tab__content\">\n <!-- Label -->\n <span class=\"pecb-tab__label\">{{ label() }}</span>\n\n <!-- Icon/Badge -->\n <span *ngIf=\"icon()\" class=\"pecb-tab__icon\" aria-hidden=\"true\" [innerHTML]=\"iconSvg()\"></span>\n\n <!-- Close button -->\n <button\n *ngIf=\"closable()\"\n type=\"button\"\n class=\"pecb-tab__close\"\n [attr.aria-label]=\"closeAriaLabel() + ' ' + label()\"\n [disabled]=\"disabled()\"\n (click)=\"onClose($event)\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M13.725 4.28249C13.4325 3.98999 12.96 3.98999 12.6675 4.28249L9.00004 7.94249L5.33254 4.27499C5.04004 3.98249 4.56754 3.98249 4.27504 4.27499C3.98254 4.56749 3.98254 5.03999 4.27504 5.33249L7.94254 8.99999L4.27504 12.6675C3.98254 12.96 3.98254 13.4325 4.27504 13.725C4.56754 14.0175 5.04004 14.0175 5.33254 13.725L9.00004 10.0575L12.6675 13.725C12.96 14.0175 13.4325 14.0175 13.725 13.725C14.0175 13.4325 14.0175 12.96 13.725 12.6675L10.0575 8.99999L13.725 5.33249C14.01 5.04749 14.01 4.56749 13.725 4.28249Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n </span>\n</div>\n", styles: [".pecb-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:400;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;color:#616161;border:1px solid transparent;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-tab--sm{padding:6px 12px;font-size:12px;gap:6px;border-radius:6px}.pecb-tab--sm .pecb-tab__content{gap:6px}.pecb-tab--sm .pecb-tab__icon{font-size:12px}.pecb-tab--sm .pecb-tab__close{width:14px;height:14px}.pecb-tab--md{padding:8px 16px;font-size:14px;gap:8px;border-radius:8px}.pecb-tab--md .pecb-tab__content{gap:8px}.pecb-tab--md .pecb-tab__icon{font-size:12px}.pecb-tab--md .pecb-tab__close{width:16px;height:16px}.pecb-tab--rounded{border-radius:80px;background-color:transparent;color:#616161;border-color:transparent}.pecb-tab--rounded.pecb-tab--sm{border-radius:80px}.pecb-tab--rounded:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){background-color:#ececec;color:#313131}.pecb-tab--rounded.pecb-tab--active{background-color:#c2c2c2;color:#212427;border-color:transparent;font-weight:500}.pecb-tab--rounded.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--rounded.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--rounded.pecb-tab--disabled{background-color:transparent;color:#c2c2c2;cursor:not-allowed}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__icon{background-color:#c2c2c2;color:#fff}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__close{color:#c2c2c2}.pecb-tab--line{border-radius:0;background-color:transparent!important;border:none;border-bottom:2px solid transparent;padding-bottom:8px;color:#616161}.pecb-tab--line.pecb-tab--sm{padding-bottom:6px;border-bottom-width:2px}.pecb-tab--line:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){color:#313131;border-bottom-color:#c2c2c2;background-color:transparent!important}.pecb-tab--line.pecb-tab--active{color:#a11e29;border-bottom-color:#a11e29;font-weight:500;background-color:transparent!important}.pecb-tab--line.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--line.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--line.pecb-tab--disabled{color:#919191;cursor:not-allowed;background-color:transparent!important;border-bottom-color:#c2c2c2}.pecb-tab--line.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab--line.pecb-tab--disabled .pecb-tab__close{color:#919191}.pecb-tab__content{display:inline-flex;align-items:center;justify-content:center;gap:12px}.pecb-tab__icon{display:flex;min-width:20px;padding:3px 7px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:65px;background-color:#a11e29;color:#fff;font-size:12px;font-weight:700;line-height:1;flex-shrink:0;white-space:nowrap}.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab__label{white-space:nowrap;line-height:1.2}.pecb-tab__close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background-color:transparent;color:#919191;cursor:pointer;border-radius:50%;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab__close svg{display:block;width:100%;height:100%}.pecb-tab__close:hover:not(:disabled){background-color:#3131311a;color:#313131}.pecb-tab__close:active:not(:disabled){background-color:#31313133}.pecb-tab__close:disabled{cursor:not-allowed;opacity:.5}.pecb-tab__close:focus-visible{outline:2px solid #a11e29;outline-offset:1px}\n"] }]
|
|
4971
|
+
args: [{ selector: 'pecb-tab', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n [class]=\"tabClasses.join(' ')\"\n role=\"tab\"\n [attr.aria-label]=\"ariaLabel() || label()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-selected]=\"ariaSelected() !== undefined ? ariaSelected() : active()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"onClick($event)\"\n (keydown)=\"onKeyDown($event)\"\n>\n <span class=\"pecb-tab__content\">\n <!-- Label -->\n <span class=\"pecb-tab__label\">{{ label() }}</span>\n\n <!-- Icon/Badge -->\n <span *ngIf=\"icon()\" class=\"pecb-tab__icon\" aria-hidden=\"true\" [innerHTML]=\"iconSvg()\"></span>\n\n <!-- Close button -->\n <button\n *ngIf=\"closable()\"\n type=\"button\"\n class=\"pecb-tab__close\"\n [attr.aria-label]=\"closeAriaLabel() + ' ' + label()\"\n [disabled]=\"disabled()\"\n (click)=\"onClose($event)\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M13.725 4.28249C13.4325 3.98999 12.96 3.98999 12.6675 4.28249L9.00004 7.94249L5.33254 4.27499C5.04004 3.98249 4.56754 3.98249 4.27504 4.27499C3.98254 4.56749 3.98254 5.03999 4.27504 5.33249L7.94254 8.99999L4.27504 12.6675C3.98254 12.96 3.98254 13.4325 4.27504 13.725C4.56754 14.0175 5.04004 14.0175 5.33254 13.725L9.00004 10.0575L12.6675 13.725C12.96 14.0175 13.4325 14.0175 13.725 13.725C14.0175 13.4325 14.0175 12.96 13.725 12.6675L10.0575 8.99999L13.725 5.33249C14.01 5.04749 14.01 4.56749 13.725 4.28249Z\" fill=\"currentColor\"/>\n </svg>\n </button>\n </span>\n</div>\n", styles: [".pecb-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:400;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;color:#616161;border:1px solid transparent;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-tab--sm{padding:6px 12px;font-size:12px;gap:6px;border-radius:6px}.pecb-tab--sm .pecb-tab__content{gap:6px}.pecb-tab--sm .pecb-tab__icon{font-size:12px}.pecb-tab--sm .pecb-tab__close{width:14px;height:14px}.pecb-tab--md{padding:8px 16px;font-size:14px;gap:8px;border-radius:8px}.pecb-tab--md .pecb-tab__content{gap:8px}.pecb-tab--md .pecb-tab__icon{font-size:12px}.pecb-tab--md .pecb-tab__close{width:16px;height:16px}.pecb-tab--rounded{border-radius:80px;background-color:transparent;color:#616161;border-color:transparent}.pecb-tab--rounded.pecb-tab--sm{border-radius:80px}.pecb-tab--rounded:not(.pecb-tab--active):not(.pecb-tab--disabled) .pecb-tab__icon{background-color:#fdecea;color:#ff606f}.pecb-tab--rounded:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){background-color:#ececec;color:#313131}.pecb-tab--rounded.pecb-tab--active{background-color:#c2c2c2;color:#212427;border-color:transparent;font-weight:500}.pecb-tab--rounded.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--rounded.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--rounded.pecb-tab--disabled{background-color:transparent;color:#c2c2c2;cursor:not-allowed}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__icon{background-color:#c2c2c2;color:#fff}.pecb-tab--rounded.pecb-tab--disabled .pecb-tab__close{color:#c2c2c2}.pecb-tab--line{border-radius:0;background-color:transparent!important;border:none;border-bottom:2px solid transparent;padding-bottom:8px;color:#616161}.pecb-tab--line.pecb-tab--sm{padding-bottom:6px;border-bottom-width:2px}.pecb-tab--line:hover:not(.pecb-tab--disabled):not(.pecb-tab--active){color:#313131;border-bottom-color:#c2c2c2;background-color:transparent!important}.pecb-tab--line.pecb-tab--active{color:#a11e29;border-bottom-color:#a11e29;font-weight:500;background-color:transparent!important}.pecb-tab--line.pecb-tab--active .pecb-tab__icon{background-color:#a11e29;color:#fff}.pecb-tab--line.pecb-tab--active .pecb-tab__close{color:#313131}.pecb-tab--line.pecb-tab--disabled{color:#919191;cursor:not-allowed;background-color:transparent!important;border-bottom-color:#c2c2c2}.pecb-tab--line.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab--line.pecb-tab--disabled .pecb-tab__close{color:#919191}.pecb-tab__content{display:inline-flex;align-items:center;justify-content:center;gap:12px}.pecb-tab__icon{display:flex;min-width:20px;padding:3px 7px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:65px;background-color:#a11e29;color:#fff;font-size:12px;font-weight:700;line-height:1;flex-shrink:0;white-space:nowrap}.pecb-tab--disabled .pecb-tab__icon{background-color:#919191;color:#fff}.pecb-tab__label{white-space:nowrap;line-height:1.2}.pecb-tab__close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background-color:transparent;color:#919191;cursor:pointer;border-radius:50%;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tab__close svg{display:block;width:100%;height:100%}.pecb-tab__close:hover:not(:disabled){background-color:#3131311a;color:#313131}.pecb-tab__close:active:not(:disabled){background-color:#31313133}.pecb-tab__close:disabled{cursor:not-allowed;opacity:.5}.pecb-tab__close:focus-visible{outline:2px solid #a11e29;outline-offset:1px}\n"] }]
|
|
4968
4972
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tabStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaSelected", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
4969
4973
|
|
|
4970
4974
|
class DatepickerComponent {
|
|
@@ -5231,7 +5235,7 @@ class DatepickerComponent {
|
|
|
5231
5235
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
5232
5236
|
multi: true
|
|
5233
5237
|
}
|
|
5234
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClasses.join(' ')\" [style.width]=\"width || null\">\n <!-- Input Field -->\n <div class=\"pecb-datepicker__input-wrapper\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <!-- Input -->\n <input\n #inputElement\n [id]=\"id()\"\n type=\"text\"\n class=\"pecb-datepicker__input\"\n [value]=\"displayValue\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || placeholder()\"\n [attr.aria-required]=\"required()\"\n readonly\n (click)=\"toggleCalendar()\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Floating Label -->\n <label\n *ngIf=\"label()\"\n [attr.for]=\"id()\"\n class=\"pecb-datepicker__label\"\n >\n {{ label() }}<span *ngIf=\"required()\" class=\"pecb-datepicker__required\">*</span>\n </label>\n\n <!-- Clear Button (shown when has value) -->\n <button\n *ngIf=\"selectedDate() && !disabled()\"\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--clear\"\n [attr.aria-label]=\"clearDateAriaLabel()\"\n (click)=\"clearDate($event)\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.5 10.1L10.1 11.5L8 9.4L5.9 11.5L4.5 10.1L6.6 8L4.5 5.9L5.9 4.5L8 6.6L10.1 4.5L11.5 5.9L9.4 8L11.5 10.1Z\"/>\n </svg>\n </button>\n\n <!-- Right Icon (Calendar) -->\n <button\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--right\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"openCalendarAriaLabel()\"\n (click)=\"toggleCalendar()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown \u2014 rendered in a CDK overlay so it flips near edges and\n escapes any overflow:hidden / modal clipping. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (backdropClick)=\"closeCalendar()\"\n (detach)=\"closeCalendar()\"\n >\n <div\n class=\"pecb-datepicker__calendar\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"calendarAriaLabel()\"\n >\n <!-- Calendar Header -->\n <div class=\"pecb-datepicker__calendar-header\">\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"previousMonthAriaLabel()\"\n (click)=\"previousMonth()\"\n >\n \u00AB\n </button>\n\n <span class=\"pecb-datepicker__month-year\">{{ monthYearDisplay }}</span>\n\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"nextMonthAriaLabel()\"\n (click)=\"nextMonth()\"\n >\n \u00BB\n </button>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"pecb-datepicker__calendar-body\">\n <!-- Week Days -->\n <div class=\"pecb-datepicker__weekdays\">\n <div\n *ngFor=\"let day of weekDays\"\n class=\"pecb-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <!-- Days Grid -->\n <div class=\"pecb-datepicker__days\">\n <button\n *ngFor=\"let day of calendarDays()\"\n type=\"button\"\n class=\"pecb-datepicker__day\"\n [class.pecb-datepicker__day--other-month]=\"!day.isCurrentMonth\"\n [class.pecb-datepicker__day--weekend]=\"day.isWeekend\"\n [class.pecb-datepicker__day--selected]=\"day.isSelected\"\n [class.pecb-datepicker__day--today]=\"day.isToday\"\n [class.pecb-datepicker__day--disabled]=\"day.isDisabled\"\n [class.pecb-datepicker__day--marked]=\"day.isMarked\"\n [disabled]=\"day.isDisabled\"\n [attr.aria-label]=\"day.date.toDateString()\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day)\"\n >\n {{ day.day }}\n <span *ngIf=\"day.markedLabel\" class=\"pecb-datepicker__day-tooltip\">{{ day.markedLabel }}</span>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".pecb-datepicker{position:relative;display:flex;flex-direction:column;font-family:inherit;width:100%}.pecb-datepicker__input-wrapper{position:relative;display:flex;align-items:center}.pecb-datepicker__label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:400;color:#919191;background-color:transparent;padding:0 4px;pointer-events:none;z-index:1;transition:top .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),font-size .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),font-weight .2s cubic-bezier(.4,0,.2,1)}.pecb-datepicker__required{color:#dc3545;margin-left:2px}.pecb-datepicker--has-label .pecb-datepicker__label{top:0;transform:translateY(-50%) scale(1);font-size:12px;background-color:#fff}.pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--has-value .pecb-datepicker__label{color:#212427;font-weight:500}.pecb-datepicker--disabled .pecb-datepicker__label{color:#919191}.pecb-datepicker--disabled.pecb-datepicker--has-label .pecb-datepicker__label{background-color:#ececec}.pecb-datepicker__input{flex:1;width:100%;font-family:inherit;font-weight:400;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:6px;outline:none;cursor:pointer;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__input::placeholder{color:#919191}.pecb-datepicker__input:hover:not(:disabled){border-color:#919191}.pecb-datepicker__input:focus{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-datepicker__input:disabled{background-color:#ececec;color:#919191;cursor:not-allowed;border-color:#c2c2c2}.pecb-datepicker__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;color:#616161;background:none;border:none;cursor:pointer;padding:0;transition-property:color,opacity,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__icon--right{right:10px}.pecb-datepicker__icon--clear{right:32px;color:#919191;opacity:0;transform:scale(.8);pointer-events:none}.pecb-datepicker__icon--clear:hover{color:#dc3545}.pecb-datepicker__icon:hover:not(:disabled){color:#313131}.pecb-datepicker__icon:disabled{color:#919191;cursor:not-allowed}.pecb-datepicker__icon svg{flex-shrink:0}.pecb-datepicker--has-value .pecb-datepicker__icon--clear{opacity:1;transform:scale(1);pointer-events:auto}.pecb-datepicker--sm .pecb-datepicker__input{padding:0 32px 0 12px;font-size:12px;height:32px}.pecb-datepicker--sm .pecb-datepicker__label{left:12px;font-size:12px}.pecb-datepicker--sm .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-label .pecb-datepicker__label{font-size:10px}.pecb-datepicker--sm .pecb-datepicker__icon--right svg{width:14px;height:14px}.pecb-datepicker--sm .pecb-datepicker__icon--clear{right:28px}.pecb-datepicker--sm .pecb-datepicker__icon--clear svg{width:14px;height:14px}.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:50px}.pecb-datepicker--md .pecb-datepicker__input{padding:0 34px 0 12px;font-size:14px;height:40px}.pecb-datepicker--md .pecb-datepicker__label{left:12px;font-size:14px}.pecb-datepicker--md .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--md .pecb-datepicker__icon--right svg{width:16px;height:16px}.pecb-datepicker--md .pecb-datepicker__icon--clear{right:30px}.pecb-datepicker--md .pecb-datepicker__icon--clear svg{width:16px;height:16px}.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:54px}.pecb-datepicker--lg .pecb-datepicker__input{padding:0 36px 0 16px;font-size:14px;height:48px}.pecb-datepicker--lg .pecb-datepicker__label{left:16px;font-size:14px}.pecb-datepicker--lg .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--lg .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--lg .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--lg .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker--xl .pecb-datepicker__input{padding:0 36px 0 16px;font-size:16px;height:56px}.pecb-datepicker--xl .pecb-datepicker__label{left:16px;font-size:16px}.pecb-datepicker--xl .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--xl .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--xl .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--xl .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker__calendar{background-color:#fff;border:1px solid #c2c2c2;border-radius:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:16px;min-width:296px;max-width:calc(100vw - 16px);box-sizing:border-box}.pecb-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #ececec}.pecb-datepicker__month-year{font-size:14px;font-weight:500;color:#313131}.pecb-datepicker__nav-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background-color:transparent;border:none;border-radius:8px;color:#616161;font-size:18px;font-weight:700;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__nav-button:hover{background-color:#ececec;color:#313131}.pecb-datepicker__nav-button:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__calendar-body{display:flex;flex-direction:column}.pecb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.pecb-datepicker__weekday{display:flex;align-items:center;justify-content:center;padding:6px;font-size:12px;font-weight:500;color:#616161;text-align:center}.pecb-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.pecb-datepicker__day{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:36px;min-width:0;margin:0 auto;height:36px;box-sizing:border-box;padding:0;background-color:transparent;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:500;color:#212427;cursor:pointer;transition-property:background-color,color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day:hover:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){background-color:#ececec}.pecb-datepicker__day:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__day--weekend:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){color:#a11e29}.pecb-datepicker__day--other-month{color:#c2c2c2;cursor:default}.pecb-datepicker__day--other-month:hover{background-color:transparent}.pecb-datepicker__day--disabled{color:#c2c2c2;cursor:not-allowed}.pecb-datepicker__day--disabled:hover{background-color:transparent}.pecb-datepicker__day--selected{background-color:#212427;color:#fff;font-weight:500}.pecb-datepicker__day--selected:hover{background-color:#212427}.pecb-datepicker__day--today:not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){border-color:#a11e29;color:#a11e29;font-weight:500}.pecb-datepicker__day--marked:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:#a11e29}.pecb-datepicker__day--marked.pecb-datepicker__day--selected:after{background-color:#fff}.pecb-datepicker__day--marked.pecb-datepicker__day--disabled:after,.pecb-datepicker__day--marked.pecb-datepicker__day--other-month:after{background-color:#c2c2c2}.pecb-datepicker__day-tooltip{pointer-events:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);white-space:nowrap;background-color:#313131;color:#fff;font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;opacity:0;z-index:100;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#313131}.pecb-datepicker__day:hover .pecb-datepicker__day-tooltip{opacity:1}.pecb-datepicker--disabled{opacity:.6;pointer-events:none}.pecb-datepicker--open .pecb-datepicker__input{border-color:#212427;box-shadow:0 0 0 3px #2124271a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5238
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClasses.join(' ')\" [style.width]=\"width || null\">\n <!-- Input Field -->\n <div class=\"pecb-datepicker__input-wrapper\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <!-- Input -->\n <input\n #inputElement\n [id]=\"id()\"\n type=\"text\"\n class=\"pecb-datepicker__input\"\n [value]=\"displayValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || placeholder()\"\n [attr.aria-required]=\"required()\"\n readonly\n (click)=\"toggleCalendar()\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Floating Label -->\n <label\n *ngIf=\"label()\"\n [attr.for]=\"id()\"\n class=\"pecb-datepicker__label\"\n >\n {{ label() }}<span *ngIf=\"required()\" class=\"pecb-datepicker__required\">*</span>\n </label>\n\n <!-- Clear Button (shown when has value) -->\n <button\n *ngIf=\"selectedDate() && !disabled()\"\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--clear\"\n [attr.aria-label]=\"clearDateAriaLabel()\"\n (click)=\"clearDate($event)\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.5 10.1L10.1 11.5L8 9.4L5.9 11.5L4.5 10.1L6.6 8L4.5 5.9L5.9 4.5L8 6.6L10.1 4.5L11.5 5.9L9.4 8L11.5 10.1Z\"/>\n </svg>\n </button>\n\n <!-- Right Icon (Calendar) -->\n <button\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--right\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"openCalendarAriaLabel()\"\n (click)=\"toggleCalendar()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown \u2014 rendered in a CDK overlay so it flips near edges and\n escapes any overflow:hidden / modal clipping. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (backdropClick)=\"closeCalendar()\"\n (detach)=\"closeCalendar()\"\n >\n <div\n class=\"pecb-datepicker__calendar\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"calendarAriaLabel()\"\n >\n <!-- Calendar Header -->\n <div class=\"pecb-datepicker__calendar-header\">\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"previousMonthAriaLabel()\"\n (click)=\"previousMonth()\"\n >\n \u00AB\n </button>\n\n <span class=\"pecb-datepicker__month-year\">{{ monthYearDisplay }}</span>\n\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"nextMonthAriaLabel()\"\n (click)=\"nextMonth()\"\n >\n \u00BB\n </button>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"pecb-datepicker__calendar-body\">\n <!-- Week Days -->\n <div class=\"pecb-datepicker__weekdays\">\n <div\n *ngFor=\"let day of weekDays\"\n class=\"pecb-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <!-- Days Grid -->\n <div class=\"pecb-datepicker__days\">\n <button\n *ngFor=\"let day of calendarDays()\"\n type=\"button\"\n class=\"pecb-datepicker__day\"\n [class.pecb-datepicker__day--other-month]=\"!day.isCurrentMonth\"\n [class.pecb-datepicker__day--weekend]=\"day.isWeekend\"\n [class.pecb-datepicker__day--selected]=\"day.isSelected\"\n [class.pecb-datepicker__day--today]=\"day.isToday\"\n [class.pecb-datepicker__day--disabled]=\"day.isDisabled\"\n [class.pecb-datepicker__day--marked]=\"day.isMarked\"\n [disabled]=\"day.isDisabled\"\n [attr.aria-label]=\"day.date.toDateString()\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day)\"\n >\n {{ day.day }}\n <span *ngIf=\"day.markedLabel\" class=\"pecb-datepicker__day-tooltip\">{{ day.markedLabel }}</span>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".pecb-datepicker{position:relative;display:flex;flex-direction:column;font-family:inherit;width:100%}.pecb-datepicker__input-wrapper{position:relative;display:flex;align-items:center}.pecb-datepicker__label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:400;color:#919191;background-color:transparent;padding:0 4px;pointer-events:none;z-index:1;transition:top .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),font-size .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),font-weight .2s cubic-bezier(.4,0,.2,1)}.pecb-datepicker__required{color:#dc3545;margin-left:2px}.pecb-datepicker--has-label .pecb-datepicker__label{top:0;transform:translateY(-50%) scale(1);font-size:12px;background-color:#fff}.pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--has-value .pecb-datepicker__label{color:#212427;font-weight:500}.pecb-datepicker--disabled .pecb-datepicker__label{color:#919191}.pecb-datepicker--disabled.pecb-datepicker--has-label .pecb-datepicker__label{background-color:#ececec}.pecb-datepicker__input{flex:1;width:100%;font-family:inherit;font-weight:400;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:6px;outline:none;cursor:pointer;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__input::placeholder{color:#919191}.pecb-datepicker__input:hover:not(:disabled){border-color:#919191}.pecb-datepicker__input:focus{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-datepicker__input:disabled{background-color:#ececec;color:#919191;cursor:not-allowed;border-color:#c2c2c2}.pecb-datepicker__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;color:#616161;background:none;border:none;cursor:pointer;padding:0;transition-property:color,opacity,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__icon--right{right:10px}.pecb-datepicker__icon--clear{right:32px;color:#919191;opacity:0;transform:scale(.8);pointer-events:none}.pecb-datepicker__icon--clear:hover{color:#dc3545}.pecb-datepicker__icon:hover:not(:disabled){color:#313131}.pecb-datepicker__icon:disabled{color:#919191;cursor:not-allowed}.pecb-datepicker__icon svg{flex-shrink:0}.pecb-datepicker--has-value .pecb-datepicker__icon--clear{opacity:1;transform:scale(1);pointer-events:auto}.pecb-datepicker--sm .pecb-datepicker__input{padding:0 32px 0 12px;font-size:12px;height:32px}.pecb-datepicker--sm .pecb-datepicker__label{left:12px;font-size:12px}.pecb-datepicker--sm .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-label .pecb-datepicker__label{font-size:10px}.pecb-datepicker--sm .pecb-datepicker__icon--right svg{width:14px;height:14px}.pecb-datepicker--sm .pecb-datepicker__icon--clear{right:28px}.pecb-datepicker--sm .pecb-datepicker__icon--clear svg{width:14px;height:14px}.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:50px}.pecb-datepicker--md .pecb-datepicker__input{padding:0 34px 0 12px;font-size:14px;height:40px}.pecb-datepicker--md .pecb-datepicker__label{left:12px;font-size:14px}.pecb-datepicker--md .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--md .pecb-datepicker__icon--right svg{width:16px;height:16px}.pecb-datepicker--md .pecb-datepicker__icon--clear{right:30px}.pecb-datepicker--md .pecb-datepicker__icon--clear svg{width:16px;height:16px}.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:54px}.pecb-datepicker--lg .pecb-datepicker__input{padding:0 36px 0 16px;font-size:14px;height:48px}.pecb-datepicker--lg .pecb-datepicker__label{left:16px;font-size:14px}.pecb-datepicker--lg .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--lg .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--lg .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--lg .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker--xl .pecb-datepicker__input{padding:0 36px 0 16px;font-size:16px;height:56px}.pecb-datepicker--xl .pecb-datepicker__label{left:16px;font-size:16px}.pecb-datepicker--xl .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--xl .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--xl .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--xl .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker__calendar{background-color:#fff;border:1px solid #c2c2c2;border-radius:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:16px;min-width:296px;max-width:calc(100vw - 16px);box-sizing:border-box}.pecb-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #ececec}.pecb-datepicker__month-year{font-size:14px;font-weight:500;color:#313131}.pecb-datepicker__nav-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background-color:transparent;border:none;border-radius:8px;color:#616161;font-size:18px;font-weight:700;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__nav-button:hover{background-color:#ececec;color:#313131}.pecb-datepicker__nav-button:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__calendar-body{display:flex;flex-direction:column}.pecb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.pecb-datepicker__weekday{display:flex;align-items:center;justify-content:center;padding:6px;font-size:12px;font-weight:500;color:#616161;text-align:center}.pecb-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.pecb-datepicker__day{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:36px;min-width:0;margin:0 auto;height:36px;box-sizing:border-box;padding:0;background-color:transparent;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:500;color:#212427;cursor:pointer;transition-property:background-color,color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day:hover:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){background-color:#ececec}.pecb-datepicker__day:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__day--weekend:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){color:#a11e29}.pecb-datepicker__day--other-month{color:#c2c2c2;cursor:default}.pecb-datepicker__day--other-month:hover{background-color:transparent}.pecb-datepicker__day--disabled{color:#c2c2c2;cursor:not-allowed}.pecb-datepicker__day--disabled:hover{background-color:transparent}.pecb-datepicker__day--selected{background-color:#212427;color:#fff;font-weight:500}.pecb-datepicker__day--selected:hover{background-color:#212427}.pecb-datepicker__day--today:not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){border-color:#a11e29;color:#a11e29;font-weight:500}.pecb-datepicker__day--marked:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:#a11e29}.pecb-datepicker__day--marked.pecb-datepicker__day--selected:after{background-color:#fff}.pecb-datepicker__day--marked.pecb-datepicker__day--disabled:after,.pecb-datepicker__day--marked.pecb-datepicker__day--other-month:after{background-color:#c2c2c2}.pecb-datepicker__day-tooltip{pointer-events:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);white-space:nowrap;background-color:#313131;color:#fff;font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;opacity:0;z-index:100;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#313131}.pecb-datepicker__day:hover .pecb-datepicker__day-tooltip{opacity:1}.pecb-datepicker--disabled{opacity:.6;pointer-events:none}.pecb-datepicker--open .pecb-datepicker__input{border-color:#212427;box-shadow:0 0 0 3px #2124271a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5235
5239
|
}
|
|
5236
5240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
5237
5241
|
type: Component,
|
|
@@ -5241,7 +5245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5241
5245
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
5242
5246
|
multi: true
|
|
5243
5247
|
}
|
|
5244
|
-
], template: "<div [class]=\"wrapperClasses.join(' ')\" [style.width]=\"width || null\">\n <!-- Input Field -->\n <div class=\"pecb-datepicker__input-wrapper\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <!-- Input -->\n <input\n #inputElement\n [id]=\"id()\"\n type=\"text\"\n class=\"pecb-datepicker__input\"\n [value]=\"displayValue\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || placeholder()\"\n [attr.aria-required]=\"required()\"\n readonly\n (click)=\"toggleCalendar()\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Floating Label -->\n <label\n *ngIf=\"label()\"\n [attr.for]=\"id()\"\n class=\"pecb-datepicker__label\"\n >\n {{ label() }}<span *ngIf=\"required()\" class=\"pecb-datepicker__required\">*</span>\n </label>\n\n <!-- Clear Button (shown when has value) -->\n <button\n *ngIf=\"selectedDate() && !disabled()\"\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--clear\"\n [attr.aria-label]=\"clearDateAriaLabel()\"\n (click)=\"clearDate($event)\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.5 10.1L10.1 11.5L8 9.4L5.9 11.5L4.5 10.1L6.6 8L4.5 5.9L5.9 4.5L8 6.6L10.1 4.5L11.5 5.9L9.4 8L11.5 10.1Z\"/>\n </svg>\n </button>\n\n <!-- Right Icon (Calendar) -->\n <button\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--right\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"openCalendarAriaLabel()\"\n (click)=\"toggleCalendar()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown \u2014 rendered in a CDK overlay so it flips near edges and\n escapes any overflow:hidden / modal clipping. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (backdropClick)=\"closeCalendar()\"\n (detach)=\"closeCalendar()\"\n >\n <div\n class=\"pecb-datepicker__calendar\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"calendarAriaLabel()\"\n >\n <!-- Calendar Header -->\n <div class=\"pecb-datepicker__calendar-header\">\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"previousMonthAriaLabel()\"\n (click)=\"previousMonth()\"\n >\n \u00AB\n </button>\n\n <span class=\"pecb-datepicker__month-year\">{{ monthYearDisplay }}</span>\n\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"nextMonthAriaLabel()\"\n (click)=\"nextMonth()\"\n >\n \u00BB\n </button>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"pecb-datepicker__calendar-body\">\n <!-- Week Days -->\n <div class=\"pecb-datepicker__weekdays\">\n <div\n *ngFor=\"let day of weekDays\"\n class=\"pecb-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <!-- Days Grid -->\n <div class=\"pecb-datepicker__days\">\n <button\n *ngFor=\"let day of calendarDays()\"\n type=\"button\"\n class=\"pecb-datepicker__day\"\n [class.pecb-datepicker__day--other-month]=\"!day.isCurrentMonth\"\n [class.pecb-datepicker__day--weekend]=\"day.isWeekend\"\n [class.pecb-datepicker__day--selected]=\"day.isSelected\"\n [class.pecb-datepicker__day--today]=\"day.isToday\"\n [class.pecb-datepicker__day--disabled]=\"day.isDisabled\"\n [class.pecb-datepicker__day--marked]=\"day.isMarked\"\n [disabled]=\"day.isDisabled\"\n [attr.aria-label]=\"day.date.toDateString()\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day)\"\n >\n {{ day.day }}\n <span *ngIf=\"day.markedLabel\" class=\"pecb-datepicker__day-tooltip\">{{ day.markedLabel }}</span>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".pecb-datepicker{position:relative;display:flex;flex-direction:column;font-family:inherit;width:100%}.pecb-datepicker__input-wrapper{position:relative;display:flex;align-items:center}.pecb-datepicker__label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:400;color:#919191;background-color:transparent;padding:0 4px;pointer-events:none;z-index:1;transition:top .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),font-size .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),font-weight .2s cubic-bezier(.4,0,.2,1)}.pecb-datepicker__required{color:#dc3545;margin-left:2px}.pecb-datepicker--has-label .pecb-datepicker__label{top:0;transform:translateY(-50%) scale(1);font-size:12px;background-color:#fff}.pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--has-value .pecb-datepicker__label{color:#212427;font-weight:500}.pecb-datepicker--disabled .pecb-datepicker__label{color:#919191}.pecb-datepicker--disabled.pecb-datepicker--has-label .pecb-datepicker__label{background-color:#ececec}.pecb-datepicker__input{flex:1;width:100%;font-family:inherit;font-weight:400;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:6px;outline:none;cursor:pointer;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__input::placeholder{color:#919191}.pecb-datepicker__input:hover:not(:disabled){border-color:#919191}.pecb-datepicker__input:focus{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-datepicker__input:disabled{background-color:#ececec;color:#919191;cursor:not-allowed;border-color:#c2c2c2}.pecb-datepicker__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;color:#616161;background:none;border:none;cursor:pointer;padding:0;transition-property:color,opacity,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__icon--right{right:10px}.pecb-datepicker__icon--clear{right:32px;color:#919191;opacity:0;transform:scale(.8);pointer-events:none}.pecb-datepicker__icon--clear:hover{color:#dc3545}.pecb-datepicker__icon:hover:not(:disabled){color:#313131}.pecb-datepicker__icon:disabled{color:#919191;cursor:not-allowed}.pecb-datepicker__icon svg{flex-shrink:0}.pecb-datepicker--has-value .pecb-datepicker__icon--clear{opacity:1;transform:scale(1);pointer-events:auto}.pecb-datepicker--sm .pecb-datepicker__input{padding:0 32px 0 12px;font-size:12px;height:32px}.pecb-datepicker--sm .pecb-datepicker__label{left:12px;font-size:12px}.pecb-datepicker--sm .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-label .pecb-datepicker__label{font-size:10px}.pecb-datepicker--sm .pecb-datepicker__icon--right svg{width:14px;height:14px}.pecb-datepicker--sm .pecb-datepicker__icon--clear{right:28px}.pecb-datepicker--sm .pecb-datepicker__icon--clear svg{width:14px;height:14px}.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:50px}.pecb-datepicker--md .pecb-datepicker__input{padding:0 34px 0 12px;font-size:14px;height:40px}.pecb-datepicker--md .pecb-datepicker__label{left:12px;font-size:14px}.pecb-datepicker--md .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--md .pecb-datepicker__icon--right svg{width:16px;height:16px}.pecb-datepicker--md .pecb-datepicker__icon--clear{right:30px}.pecb-datepicker--md .pecb-datepicker__icon--clear svg{width:16px;height:16px}.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:54px}.pecb-datepicker--lg .pecb-datepicker__input{padding:0 36px 0 16px;font-size:14px;height:48px}.pecb-datepicker--lg .pecb-datepicker__label{left:16px;font-size:14px}.pecb-datepicker--lg .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--lg .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--lg .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--lg .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker--xl .pecb-datepicker__input{padding:0 36px 0 16px;font-size:16px;height:56px}.pecb-datepicker--xl .pecb-datepicker__label{left:16px;font-size:16px}.pecb-datepicker--xl .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--xl .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--xl .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--xl .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker__calendar{background-color:#fff;border:1px solid #c2c2c2;border-radius:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:16px;min-width:296px;max-width:calc(100vw - 16px);box-sizing:border-box}.pecb-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #ececec}.pecb-datepicker__month-year{font-size:14px;font-weight:500;color:#313131}.pecb-datepicker__nav-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background-color:transparent;border:none;border-radius:8px;color:#616161;font-size:18px;font-weight:700;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__nav-button:hover{background-color:#ececec;color:#313131}.pecb-datepicker__nav-button:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__calendar-body{display:flex;flex-direction:column}.pecb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.pecb-datepicker__weekday{display:flex;align-items:center;justify-content:center;padding:6px;font-size:12px;font-weight:500;color:#616161;text-align:center}.pecb-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.pecb-datepicker__day{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:36px;min-width:0;margin:0 auto;height:36px;box-sizing:border-box;padding:0;background-color:transparent;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:500;color:#212427;cursor:pointer;transition-property:background-color,color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day:hover:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){background-color:#ececec}.pecb-datepicker__day:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__day--weekend:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){color:#a11e29}.pecb-datepicker__day--other-month{color:#c2c2c2;cursor:default}.pecb-datepicker__day--other-month:hover{background-color:transparent}.pecb-datepicker__day--disabled{color:#c2c2c2;cursor:not-allowed}.pecb-datepicker__day--disabled:hover{background-color:transparent}.pecb-datepicker__day--selected{background-color:#212427;color:#fff;font-weight:500}.pecb-datepicker__day--selected:hover{background-color:#212427}.pecb-datepicker__day--today:not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){border-color:#a11e29;color:#a11e29;font-weight:500}.pecb-datepicker__day--marked:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:#a11e29}.pecb-datepicker__day--marked.pecb-datepicker__day--selected:after{background-color:#fff}.pecb-datepicker__day--marked.pecb-datepicker__day--disabled:after,.pecb-datepicker__day--marked.pecb-datepicker__day--other-month:after{background-color:#c2c2c2}.pecb-datepicker__day-tooltip{pointer-events:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);white-space:nowrap;background-color:#313131;color:#fff;font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;opacity:0;z-index:100;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#313131}.pecb-datepicker__day:hover .pecb-datepicker__day-tooltip{opacity:1}.pecb-datepicker--disabled{opacity:.6;pointer-events:none}.pecb-datepicker--open .pecb-datepicker__input{border-color:#212427;box-shadow:0 0 0 3px #2124271a}\n"] }]
|
|
5248
|
+
], template: "<div [class]=\"wrapperClasses.join(' ')\" [style.width]=\"width || null\">\n <!-- Input Field -->\n <div class=\"pecb-datepicker__input-wrapper\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <!-- Input -->\n <input\n #inputElement\n [id]=\"id()\"\n type=\"text\"\n class=\"pecb-datepicker__input\"\n [value]=\"displayValue\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || placeholder()\"\n [attr.aria-required]=\"required()\"\n readonly\n (click)=\"toggleCalendar()\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <!-- Floating Label -->\n <label\n *ngIf=\"label()\"\n [attr.for]=\"id()\"\n class=\"pecb-datepicker__label\"\n >\n {{ label() }}<span *ngIf=\"required()\" class=\"pecb-datepicker__required\">*</span>\n </label>\n\n <!-- Clear Button (shown when has value) -->\n <button\n *ngIf=\"selectedDate() && !disabled()\"\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--clear\"\n [attr.aria-label]=\"clearDateAriaLabel()\"\n (click)=\"clearDate($event)\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.5 10.1L10.1 11.5L8 9.4L5.9 11.5L4.5 10.1L6.6 8L4.5 5.9L5.9 4.5L8 6.6L10.1 4.5L11.5 5.9L9.4 8L11.5 10.1Z\"/>\n </svg>\n </button>\n\n <!-- Right Icon (Calendar) -->\n <button\n type=\"button\"\n class=\"pecb-datepicker__icon pecb-datepicker__icon--right\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"openCalendarAriaLabel()\"\n (click)=\"toggleCalendar()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown \u2014 rendered in a CDK overlay so it flips near edges and\n escapes any overflow:hidden / modal clipping. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (backdropClick)=\"closeCalendar()\"\n (detach)=\"closeCalendar()\"\n >\n <div\n class=\"pecb-datepicker__calendar\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"calendarAriaLabel()\"\n >\n <!-- Calendar Header -->\n <div class=\"pecb-datepicker__calendar-header\">\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"previousMonthAriaLabel()\"\n (click)=\"previousMonth()\"\n >\n \u00AB\n </button>\n\n <span class=\"pecb-datepicker__month-year\">{{ monthYearDisplay }}</span>\n\n <button\n type=\"button\"\n class=\"pecb-datepicker__nav-button\"\n [attr.aria-label]=\"nextMonthAriaLabel()\"\n (click)=\"nextMonth()\"\n >\n \u00BB\n </button>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"pecb-datepicker__calendar-body\">\n <!-- Week Days -->\n <div class=\"pecb-datepicker__weekdays\">\n <div\n *ngFor=\"let day of weekDays\"\n class=\"pecb-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <!-- Days Grid -->\n <div class=\"pecb-datepicker__days\">\n <button\n *ngFor=\"let day of calendarDays()\"\n type=\"button\"\n class=\"pecb-datepicker__day\"\n [class.pecb-datepicker__day--other-month]=\"!day.isCurrentMonth\"\n [class.pecb-datepicker__day--weekend]=\"day.isWeekend\"\n [class.pecb-datepicker__day--selected]=\"day.isSelected\"\n [class.pecb-datepicker__day--today]=\"day.isToday\"\n [class.pecb-datepicker__day--disabled]=\"day.isDisabled\"\n [class.pecb-datepicker__day--marked]=\"day.isMarked\"\n [disabled]=\"day.isDisabled\"\n [attr.aria-label]=\"day.date.toDateString()\"\n [attr.aria-selected]=\"day.isSelected\"\n [attr.aria-disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day)\"\n >\n {{ day.day }}\n <span *ngIf=\"day.markedLabel\" class=\"pecb-datepicker__day-tooltip\">{{ day.markedLabel }}</span>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".pecb-datepicker{position:relative;display:flex;flex-direction:column;font-family:inherit;width:100%}.pecb-datepicker__input-wrapper{position:relative;display:flex;align-items:center}.pecb-datepicker__label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:400;color:#919191;background-color:transparent;padding:0 4px;pointer-events:none;z-index:1;transition:top .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),font-size .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1),font-weight .2s cubic-bezier(.4,0,.2,1)}.pecb-datepicker__required{color:#dc3545;margin-left:2px}.pecb-datepicker--has-label .pecb-datepicker__label{top:0;transform:translateY(-50%) scale(1);font-size:12px;background-color:#fff}.pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--has-value .pecb-datepicker__label{color:#212427;font-weight:500}.pecb-datepicker--disabled .pecb-datepicker__label{color:#919191}.pecb-datepicker--disabled.pecb-datepicker--has-label .pecb-datepicker__label{background-color:#ececec}.pecb-datepicker__input{flex:1;width:100%;font-family:inherit;font-weight:400;color:#313131;background-color:#fff;border:1px solid #c2c2c2;border-radius:6px;outline:none;cursor:pointer;transition-property:border-color,box-shadow;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__input::placeholder{color:#919191}.pecb-datepicker__input:hover:not(:disabled){border-color:#919191}.pecb-datepicker__input:focus{border-color:#212427;box-shadow:0 0 0 3px #2124271a}.pecb-datepicker__input:disabled{background-color:#ececec;color:#919191;cursor:not-allowed;border-color:#c2c2c2}.pecb-datepicker__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;color:#616161;background:none;border:none;cursor:pointer;padding:0;transition-property:color,opacity,transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__icon--right{right:10px}.pecb-datepicker__icon--clear{right:32px;color:#919191;opacity:0;transform:scale(.8);pointer-events:none}.pecb-datepicker__icon--clear:hover{color:#dc3545}.pecb-datepicker__icon:hover:not(:disabled){color:#313131}.pecb-datepicker__icon:disabled{color:#919191;cursor:not-allowed}.pecb-datepicker__icon svg{flex-shrink:0}.pecb-datepicker--has-value .pecb-datepicker__icon--clear{opacity:1;transform:scale(1);pointer-events:auto}.pecb-datepicker--sm .pecb-datepicker__input{padding:0 32px 0 12px;font-size:12px;height:32px}.pecb-datepicker--sm .pecb-datepicker__label{left:12px;font-size:12px}.pecb-datepicker--sm .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__label,.pecb-datepicker--sm.pecb-datepicker--has-label .pecb-datepicker__label{font-size:10px}.pecb-datepicker--sm .pecb-datepicker__icon--right svg{width:14px;height:14px}.pecb-datepicker--sm .pecb-datepicker__icon--clear{right:28px}.pecb-datepicker--sm .pecb-datepicker__icon--clear svg{width:14px;height:14px}.pecb-datepicker--sm.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:50px}.pecb-datepicker--md .pecb-datepicker__input{padding:0 34px 0 12px;font-size:14px;height:40px}.pecb-datepicker--md .pecb-datepicker__label{left:12px;font-size:14px}.pecb-datepicker--md .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--md .pecb-datepicker__icon--right svg{width:16px;height:16px}.pecb-datepicker--md .pecb-datepicker__icon--clear{right:30px}.pecb-datepicker--md .pecb-datepicker__icon--clear svg{width:16px;height:16px}.pecb-datepicker--md.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:54px}.pecb-datepicker--lg .pecb-datepicker__input{padding:0 36px 0 16px;font-size:14px;height:48px}.pecb-datepicker--lg .pecb-datepicker__label{left:16px;font-size:14px}.pecb-datepicker--lg .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--lg .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--lg .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--lg .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--lg.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker--xl .pecb-datepicker__input{padding:0 36px 0 16px;font-size:16px;height:56px}.pecb-datepicker--xl .pecb-datepicker__label{left:16px;font-size:16px}.pecb-datepicker--xl .pecb-datepicker__input:focus~.pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--open .pecb-datepicker__label,.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__label{font-size:12px}.pecb-datepicker--xl .pecb-datepicker__icon--right svg{width:18px;height:18px}.pecb-datepicker--xl .pecb-datepicker__icon--clear{right:32px}.pecb-datepicker--xl .pecb-datepicker__icon--clear svg{width:18px;height:18px}.pecb-datepicker--xl.pecb-datepicker--has-value .pecb-datepicker__input{padding-right:58px}.pecb-datepicker__calendar{background-color:#fff;border:1px solid #c2c2c2;border-radius:12px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:16px;min-width:296px;max-width:calc(100vw - 16px);box-sizing:border-box}.pecb-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #ececec}.pecb-datepicker__month-year{font-size:14px;font-weight:500;color:#313131}.pecb-datepicker__nav-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background-color:transparent;border:none;border-radius:8px;color:#616161;font-size:18px;font-weight:700;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__nav-button:hover{background-color:#ececec;color:#313131}.pecb-datepicker__nav-button:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__calendar-body{display:flex;flex-direction:column}.pecb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.pecb-datepicker__weekday{display:flex;align-items:center;justify-content:center;padding:6px;font-size:12px;font-weight:500;color:#616161;text-align:center}.pecb-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.pecb-datepicker__day{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:36px;min-width:0;margin:0 auto;height:36px;box-sizing:border-box;padding:0;background-color:transparent;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:500;color:#212427;cursor:pointer;transition-property:background-color,color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day:hover:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){background-color:#ececec}.pecb-datepicker__day:focus-visible{outline:2px solid #212427;outline-offset:2px}.pecb-datepicker__day--weekend:not(.pecb-datepicker__day--other-month):not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){color:#a11e29}.pecb-datepicker__day--other-month{color:#c2c2c2;cursor:default}.pecb-datepicker__day--other-month:hover{background-color:transparent}.pecb-datepicker__day--disabled{color:#c2c2c2;cursor:not-allowed}.pecb-datepicker__day--disabled:hover{background-color:transparent}.pecb-datepicker__day--selected{background-color:#212427;color:#fff;font-weight:500}.pecb-datepicker__day--selected:hover{background-color:#212427}.pecb-datepicker__day--today:not(.pecb-datepicker__day--selected):not(.pecb-datepicker__day--disabled){border-color:#a11e29;color:#a11e29;font-weight:500}.pecb-datepicker__day--marked:after{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background-color:#a11e29}.pecb-datepicker__day--marked.pecb-datepicker__day--selected:after{background-color:#fff}.pecb-datepicker__day--marked.pecb-datepicker__day--disabled:after,.pecb-datepicker__day--marked.pecb-datepicker__day--other-month:after{background-color:#c2c2c2}.pecb-datepicker__day-tooltip{pointer-events:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);white-space:nowrap;background-color:#313131;color:#fff;font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;opacity:0;z-index:100;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-datepicker__day-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#313131}.pecb-datepicker__day:hover .pecb-datepicker__day-tooltip{opacity:1}.pecb-datepicker--disabled{opacity:.6;pointer-events:none}.pecb-datepicker--open .pecb-datepicker__input{border-color:#212427;box-shadow:0 0 0 3px #2124271a}\n"] }]
|
|
5245
5249
|
}], ctorParameters: () => [], propDecorators: { inputElement: [{
|
|
5246
5250
|
type: ViewChild,
|
|
5247
5251
|
args: ['inputElement']
|
|
@@ -8359,6 +8363,12 @@ class MetricsCardComponent {
|
|
|
8359
8363
|
* 'lg' = 34px value, 20px padding, 34px icon tile.
|
|
8360
8364
|
*/
|
|
8361
8365
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8366
|
+
/**
|
|
8367
|
+
* Icon placement on the stat tile (variation 8 only):
|
|
8368
|
+
* 'end' = value left / icon top-right (default),
|
|
8369
|
+
* 'start' = icon top-left / value right (design .ca-stat with a leading icon).
|
|
8370
|
+
*/
|
|
8371
|
+
this.iconPosition = input('end', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
|
|
8362
8372
|
/** Date string shown on the right side of variation 1 */
|
|
8363
8373
|
this.date = input('Jun 12th, 2023', ...(ngDevMode ? [{ debugName: "date" }] : []));
|
|
8364
8374
|
/** Secondary metric text shown below the value in variation 5 */
|
|
@@ -8375,7 +8385,8 @@ class MetricsCardComponent {
|
|
|
8375
8385
|
`pecb-metrics-card--variation-${this.variation()}`,
|
|
8376
8386
|
`pecb-metrics-card--type-${this.type()}`,
|
|
8377
8387
|
`pecb-metrics-card--size-${this.size()}`,
|
|
8378
|
-
this.orientation() === 'center' ? 'pecb-metrics-card--center' : ''
|
|
8388
|
+
this.orientation() === 'center' ? 'pecb-metrics-card--center' : '',
|
|
8389
|
+
this.variation() === '8' && this.iconPosition() === 'start' ? 'pecb-metrics-card--icon-start' : ''
|
|
8379
8390
|
]
|
|
8380
8391
|
.filter(Boolean)
|
|
8381
8392
|
.join(' ');
|
|
@@ -8417,12 +8428,12 @@ class MetricsCardComponent {
|
|
|
8417
8428
|
this.ctaClicked.emit();
|
|
8418
8429
|
}
|
|
8419
8430
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetricsCardComponent, isStandalone: true, selector: "pecb-metrics-card", inputs: { variation: { classPropertyName: "variation", publicName: "variation", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hasBadge: { classPropertyName: "hasBadge", publicName: "hasBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, badgeStatus: { classPropertyName: "badgeStatus", publicName: "badgeStatus", isSignal: true, isRequired: false, transformFunction: null }, hasDescription: { classPropertyName: "hasDescription", publicName: "hasDescription", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaText: { classPropertyName: "ctaText", publicName: "ctaText", isSignal: true, isRequired: false, transformFunction: null }, hasIcon: { classPropertyName: "hasIcon", publicName: "hasIcon", isSignal: true, isRequired: false, transformFunction: null }, iconSvg: { classPropertyName: "iconSvg", publicName: "iconSvg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClicked: "ctaClicked" }, ngImport: i0, template: "<div [class]=\"hostClasses\">\n\n <div class=\"pecb-metrics-card__body\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 1 \u2014 Wide horizontal card\n Left: label + value + optional inline CTA\n Right: date + status badge\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '1') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n <div class=\"pecb-metrics-card__right\">\n <p class=\"pecb-metrics-card__date\">{{ date() }}</p>\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 2 \u2014 Vertical: icon+label \u2192 value \u2192 badge+desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '2') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 3 \u2014 Vertical: icon+label \u2192 badge+desc \u2192 value\n Badge and description appear ABOVE the value\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '3') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 4 \u2014 Left: label + value + badge+desc, Right: icon\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '4') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 8 \u2014 Stat tile: value \u2192 label, small icon top-right\n The compact dashboard counter (e.g. \"11 / Total items\")\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '8') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 5 \u2014 Horizontal compact\n Left: label + value + subtext\n Right: badge + optional inline CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '5') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--compact\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__subtext\">{{ subtext() }}</p>\n }\n </div>\n </div>\n <div class=\"pecb-metrics-card__right\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 6 \u2014 Center-aligned\n Icon + label, value, badge + desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '6') {\n <div class=\"pecb-metrics-card__center-header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C11.8449 2.5 13.5348 3.15138 14.8523 4.24848\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M17.5 2.5V6.25H13.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label pecb-metrics-card__label--center\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--center\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || (hasDescription() && type() === 'data+cta')) {\n <div class=\"pecb-metrics-card__badge-row pecb-metrics-card__badge-row--center\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription() && type() === 'data+cta') {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 7 \u2014 Enroll card (member dashboard)\n Top row: value + label left, icon tile right, divider under it\n Then a multi-line description and a full-width dark CTA button\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '7') {\n <div class=\"pecb-metrics-card__enroll-top\">\n <div class=\"pecb-metrics-card__enroll-heading\">\n <p class=\"pecb-metrics-card__enroll-value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__enroll-label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n </div>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__enroll-description\">{{ description() }}</p>\n }\n @if (type() === 'data+cta') {\n <button\n class=\"pecb-metrics-card__enroll-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n }\n\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER CTA \u2014 rendered for data+cta type, variations 2, 3, 4, 6, 8\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (showFooterCta) {\n <div class=\"pecb-metrics-card__footer\">\n <button\n class=\"pecb-metrics-card__cta-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n <span>{{ ctaText() }}</span>\n @if (showFooterArrow) {\n <span class=\"pecb-metrics-card__cta-btn-icon\" aria-hidden=\"true\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.5 5L12.5 10L7.5 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n }\n </button>\n </div>\n }\n\n</div>\n", styles: [":host{display:block}.pecb-metrics-card{background-color:#fff;border:1px solid #ececec;border-radius:12px;box-shadow:0 3px 2px -2px #0000000f,0 5px 3px -2px #00000005;display:flex;flex-direction:column;overflow:hidden;position:relative}.pecb-metrics-card__body{padding:16px;display:flex;flex:1;gap:16px}.pecb-metrics-card--variation-1 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-2 .pecb-metrics-card__body,.pecb-metrics-card--variation-3 .pecb-metrics-card__body{flex-direction:column;align-items:flex-start;gap:16px}.pecb-metrics-card--variation-4 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between}.pecb-metrics-card--variation-8 .pecb-metrics-card__body{padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start}.pecb-metrics-card--variation-8 .pecb-metrics-card__left{display:contents}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{grid-column:1;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__right{grid-column:2;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{grid-column:1/-1;grid-row:2;white-space:normal;line-height:1.4;font-weight:400}.pecb-metrics-card--variation-8{height:100%;box-sizing:border-box;padding:16px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg{padding:18px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__value{font-size:28px;font-weight:600;line-height:1}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__label{font-size:13px;color:#616161}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__icon-wrapper{width:32px;height:32px;border-radius:8px}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{font-size:24px}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{font-size:13px}.pecb-metrics-card--variation-7{height:100%;border-radius:14px;box-shadow:none}.pecb-metrics-card--variation-7 .pecb-metrics-card__icon-wrapper--bg-success{color:#57bc57}.pecb-metrics-card--variation-7 .pecb-metrics-card__body{flex-direction:column;align-items:stretch;padding:22px 24px;gap:0}.pecb-metrics-card__enroll-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #ececec}.pecb-metrics-card__enroll-heading{min-width:0}.pecb-metrics-card__enroll-value{margin:0;font-size:34px;font-weight:700;line-height:1;color:#212427}.pecb-metrics-card__enroll-label{margin:8px 0 0;font-size:15px;font-weight:600;color:#212427}.pecb-metrics-card__enroll-description{margin:16px 0 18px;font-size:13.5px;line-height:1.55;color:#616161;flex:1}.pecb-metrics-card__enroll-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:42px;padding:0 18px;border:none;border-radius:8px;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease-in-out}.pecb-metrics-card__enroll-btn:hover{background-color:#616161}.pecb-metrics-card__enroll-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-metrics-card--variation-5 .pecb-metrics-card__body{flex-direction:row;align-items:stretch;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-6 .pecb-metrics-card__body,.pecb-metrics-card--center .pecb-metrics-card__body{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.pecb-metrics-card__left{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}.pecb-metrics-card__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;flex-shrink:0}.pecb-metrics-card__right--icon-only{justify-content:flex-start}.pecb-metrics-card__header{display:flex;align-items:center;gap:12px;width:100%;min-width:0}.pecb-metrics-card__center-header{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.pecb-metrics-card__label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__label--center{text-align:center}.pecb-metrics-card__value{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:32px;font-weight:700;color:#212427;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__subtext{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__date{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__metrics{display:flex;flex-direction:column;gap:12px;min-width:0}.pecb-metrics-card__metrics--compact{gap:6px}.pecb-metrics-card__metrics--center{align-items:center;gap:8px}.pecb-metrics-card__badge-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.pecb-metrics-card__badge-row--center{justify-content:center}.pecb-metrics-card__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:700;line-height:normal;white-space:nowrap;flex-shrink:0}.pecb-metrics-card__badge--success{background-color:#e6f4ea;color:#57bc57}.pecb-metrics-card__badge--warning{background-color:#fff4e5;color:#ff9c4a}.pecb-metrics-card__badge--error{background-color:#fdecea;color:#ff606f}.pecb-metrics-card__badge--info{background-color:#e6f0fa;color:#5eacff}.pecb-metrics-card--variation-1 .pecb-metrics-card__badge{padding:6px 12px;font-size:13px}.pecb-metrics-card__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;margin:0}.pecb-metrics-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;background-color:#fff;border:1px solid #ececec;color:#616161}.pecb-metrics-card__icon-wrapper>span{display:flex;align-items:center;justify-content:center;line-height:0}.pecb-metrics-card__icon-wrapper--sm{width:32px;height:32px}.pecb-metrics-card__icon-wrapper--sm svg{width:16px;height:16px;display:block}.pecb-metrics-card__icon-wrapper--md{width:40px;height:40px}.pecb-metrics-card__icon-wrapper--md svg{width:20px;height:20px;display:block}.pecb-metrics-card__icon-wrapper--lg{width:48px;height:48px;border:none}.pecb-metrics-card__icon-wrapper--lg svg{width:24px;height:24px;display:block}.pecb-metrics-card__icon-wrapper--xl{width:52px;height:52px;border:none;border-radius:14px}.pecb-metrics-card__icon-wrapper--xl svg{width:26px;height:26px;display:block}.pecb-metrics-card__icon-wrapper--bg-gray{background-color:#f4f4f4;border-color:transparent;color:#616161}.pecb-metrics-card__icon-wrapper--bg-pending{background-color:#fff4e5;border-color:transparent;color:#fd7e14}.pecb-metrics-card__icon-wrapper--bg-success{background-color:#e6f4ea;border-color:transparent;color:green}.pecb-metrics-card__icon-wrapper--bg-error{background-color:#fdecea;border-color:transparent;color:#dc3545}.pecb-metrics-card__icon-wrapper--bg-info{background-color:#e6f0fa;border-color:transparent;color:#007bff}.pecb-metrics-card__icon-wrapper--bg-purple{background-color:#eee8ff;border-color:transparent;color:#8e6df0}.pecb-metrics-card__cta-link{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;text-align:left;white-space:nowrap;line-height:normal;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-link:hover{opacity:.75}.pecb-metrics-card__cta-link:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card__footer{background-color:#fafafa;border-top:1px solid #ececec;display:flex;align-items:center;padding:16px;width:100%;box-sizing:border-box}.pecb-metrics-card--center .pecb-metrics-card__footer{justify-content:center}.pecb-metrics-card__cta-btn{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-btn:hover{opacity:.75}.pecb-metrics-card__cta-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card--center .pecb-metrics-card__cta-btn{width:auto;justify-content:center}.pecb-metrics-card__cta-btn-icon{display:flex;align-items:center;flex-shrink:0}.pecb-metrics-card__cta-btn-icon svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8431
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetricsCardComponent, isStandalone: true, selector: "pecb-metrics-card", inputs: { variation: { classPropertyName: "variation", publicName: "variation", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hasBadge: { classPropertyName: "hasBadge", publicName: "hasBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, badgeStatus: { classPropertyName: "badgeStatus", publicName: "badgeStatus", isSignal: true, isRequired: false, transformFunction: null }, hasDescription: { classPropertyName: "hasDescription", publicName: "hasDescription", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaText: { classPropertyName: "ctaText", publicName: "ctaText", isSignal: true, isRequired: false, transformFunction: null }, hasIcon: { classPropertyName: "hasIcon", publicName: "hasIcon", isSignal: true, isRequired: false, transformFunction: null }, iconSvg: { classPropertyName: "iconSvg", publicName: "iconSvg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClicked: "ctaClicked" }, ngImport: i0, template: "<div [class]=\"hostClasses\">\n\n <div class=\"pecb-metrics-card__body\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 1 \u2014 Wide horizontal card\n Left: label + value + optional inline CTA\n Right: date + status badge\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '1') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n <div class=\"pecb-metrics-card__right\">\n <p class=\"pecb-metrics-card__date\">{{ date() }}</p>\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 2 \u2014 Vertical: icon+label \u2192 value \u2192 badge+desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '2') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 3 \u2014 Vertical: icon+label \u2192 badge+desc \u2192 value\n Badge and description appear ABOVE the value\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '3') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 4 \u2014 Left: label + value + badge+desc, Right: icon\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '4') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 8 \u2014 Stat tile: value \u2192 label, small icon top-right\n The compact dashboard counter (e.g. \"11 / Total items\")\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '8') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 5 \u2014 Horizontal compact\n Left: label + value + subtext\n Right: badge + optional inline CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '5') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--compact\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__subtext\">{{ subtext() }}</p>\n }\n </div>\n </div>\n <div class=\"pecb-metrics-card__right\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 6 \u2014 Center-aligned\n Icon + label, value, badge + desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '6') {\n <div class=\"pecb-metrics-card__center-header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C11.8449 2.5 13.5348 3.15138 14.8523 4.24848\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M17.5 2.5V6.25H13.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label pecb-metrics-card__label--center\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--center\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || (hasDescription() && type() === 'data+cta')) {\n <div class=\"pecb-metrics-card__badge-row pecb-metrics-card__badge-row--center\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription() && type() === 'data+cta') {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 7 \u2014 Enroll card (member dashboard)\n Top row: value + label left, icon tile right, divider under it\n Then a multi-line description and a full-width dark CTA button\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '7') {\n <div class=\"pecb-metrics-card__enroll-top\">\n <div class=\"pecb-metrics-card__enroll-heading\">\n <p class=\"pecb-metrics-card__enroll-value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__enroll-label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n </div>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__enroll-description\">{{ description() }}</p>\n }\n @if (type() === 'data+cta') {\n <button\n class=\"pecb-metrics-card__enroll-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n }\n\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER CTA \u2014 rendered for data+cta type, variations 2, 3, 4, 6, 8\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (showFooterCta) {\n <div class=\"pecb-metrics-card__footer\">\n <button\n class=\"pecb-metrics-card__cta-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n <span>{{ ctaText() }}</span>\n @if (showFooterArrow) {\n <span class=\"pecb-metrics-card__cta-btn-icon\" aria-hidden=\"true\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.5 5L12.5 10L7.5 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n }\n </button>\n </div>\n }\n\n</div>\n", styles: [":host{display:block}.pecb-metrics-card{background-color:#fff;border:1px solid #ececec;border-radius:12px;box-shadow:0 3px 2px -2px #0000000f,0 5px 3px -2px #00000005;display:flex;flex-direction:column;overflow:hidden;position:relative}.pecb-metrics-card__body{padding:16px;display:flex;flex:1;gap:16px}.pecb-metrics-card--variation-1 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-2 .pecb-metrics-card__body,.pecb-metrics-card--variation-3 .pecb-metrics-card__body{flex-direction:column;align-items:flex-start;gap:16px}.pecb-metrics-card--variation-4 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between}.pecb-metrics-card--variation-8 .pecb-metrics-card__body{padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start}.pecb-metrics-card--variation-8 .pecb-metrics-card__left{display:contents}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{grid-column:1;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__right{grid-column:2;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{grid-column:1/-1;grid-row:2;white-space:normal;line-height:1.4;font-weight:400}.pecb-metrics-card--variation-8.pecb-metrics-card--icon-start .pecb-metrics-card__body{grid-template-columns:auto minmax(0,1fr)}.pecb-metrics-card--variation-8.pecb-metrics-card--icon-start .pecb-metrics-card__right{grid-column:1;justify-self:start}.pecb-metrics-card--variation-8.pecb-metrics-card--icon-start .pecb-metrics-card__value{grid-column:2;justify-self:end;text-align:right}.pecb-metrics-card--variation-8{height:100%;box-sizing:border-box;padding:16px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg{padding:18px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__value{font-size:28px;font-weight:600;line-height:1}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__label{font-size:13px;color:#616161}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__icon-wrapper{width:32px;height:32px;border-radius:8px}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{font-size:24px}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{font-size:13px}.pecb-metrics-card--variation-7{height:100%;border-radius:14px;box-shadow:none}.pecb-metrics-card--variation-7 .pecb-metrics-card__icon-wrapper--bg-success{color:#57bc57}.pecb-metrics-card--variation-7 .pecb-metrics-card__body{flex-direction:column;align-items:stretch;padding:22px 24px;gap:0}.pecb-metrics-card__enroll-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #ececec}.pecb-metrics-card__enroll-heading{min-width:0}.pecb-metrics-card__enroll-value{margin:0;font-size:34px;font-weight:700;line-height:1;color:#212427}.pecb-metrics-card__enroll-label{margin:8px 0 0;font-size:15px;font-weight:600;color:#212427}.pecb-metrics-card__enroll-description{margin:16px 0 18px;font-size:13.5px;line-height:1.55;color:#616161;flex:1}.pecb-metrics-card__enroll-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:42px;padding:0 18px;border:none;border-radius:8px;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease-in-out}.pecb-metrics-card__enroll-btn:hover{background-color:#616161}.pecb-metrics-card__enroll-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-metrics-card--variation-5 .pecb-metrics-card__body{flex-direction:row;align-items:stretch;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-6 .pecb-metrics-card__body,.pecb-metrics-card--center .pecb-metrics-card__body{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.pecb-metrics-card__left{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}.pecb-metrics-card__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;flex-shrink:0}.pecb-metrics-card__right--icon-only{justify-content:flex-start}.pecb-metrics-card__header{display:flex;align-items:center;gap:12px;width:100%;min-width:0}.pecb-metrics-card__center-header{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.pecb-metrics-card__label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__label--center{text-align:center}.pecb-metrics-card__value{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:32px;font-weight:700;color:#212427;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__subtext{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__date{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__metrics{display:flex;flex-direction:column;gap:12px;min-width:0}.pecb-metrics-card__metrics--compact{gap:6px}.pecb-metrics-card__metrics--center{align-items:center;gap:8px}.pecb-metrics-card__badge-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.pecb-metrics-card__badge-row--center{justify-content:center}.pecb-metrics-card__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:700;line-height:normal;white-space:nowrap;flex-shrink:0}.pecb-metrics-card__badge--success{background-color:#e6f4ea;color:#57bc57}.pecb-metrics-card__badge--warning{background-color:#fff4e5;color:#ff9c4a}.pecb-metrics-card__badge--error{background-color:#fdecea;color:#ff606f}.pecb-metrics-card__badge--info{background-color:#e6f0fa;color:#5eacff}.pecb-metrics-card--variation-1 .pecb-metrics-card__badge{padding:6px 12px;font-size:13px}.pecb-metrics-card__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;margin:0}.pecb-metrics-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;background-color:#fff;border:1px solid #ececec;color:#616161}.pecb-metrics-card__icon-wrapper>span{display:flex;align-items:center;justify-content:center;line-height:0}.pecb-metrics-card__icon-wrapper--sm{width:32px;height:32px}.pecb-metrics-card__icon-wrapper--sm svg{width:16px;height:16px;display:block}.pecb-metrics-card__icon-wrapper--md{width:40px;height:40px}.pecb-metrics-card__icon-wrapper--md svg{width:20px;height:20px;display:block}.pecb-metrics-card__icon-wrapper--lg{width:48px;height:48px;border:none}.pecb-metrics-card__icon-wrapper--lg svg{width:24px;height:24px;display:block}.pecb-metrics-card__icon-wrapper--xl{width:52px;height:52px;border:none;border-radius:14px}.pecb-metrics-card__icon-wrapper--xl svg{width:26px;height:26px;display:block}.pecb-metrics-card__icon-wrapper--bg-gray{background-color:#f4f4f4;border-color:transparent;color:#616161}.pecb-metrics-card__icon-wrapper--bg-pending{background-color:#fff4e5;border-color:transparent;color:#fd7e14}.pecb-metrics-card__icon-wrapper--bg-success{background-color:#e6f4ea;border-color:transparent;color:green}.pecb-metrics-card__icon-wrapper--bg-error{background-color:#fdecea;border-color:transparent;color:#dc3545}.pecb-metrics-card__icon-wrapper--bg-info{background-color:#e6f0fa;border-color:transparent;color:#007bff}.pecb-metrics-card__icon-wrapper--bg-purple{background-color:#eee8ff;border-color:transparent;color:#8e6df0}.pecb-metrics-card__cta-link{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;text-align:left;white-space:nowrap;line-height:normal;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-link:hover{opacity:.75}.pecb-metrics-card__cta-link:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card__footer{background-color:#fafafa;border-top:1px solid #ececec;display:flex;align-items:center;padding:16px;width:100%;box-sizing:border-box}.pecb-metrics-card--center .pecb-metrics-card__footer{justify-content:center}.pecb-metrics-card__cta-btn{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-btn:hover{opacity:.75}.pecb-metrics-card__cta-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card--center .pecb-metrics-card__cta-btn{width:auto;justify-content:center}.pecb-metrics-card__cta-btn-icon{display:flex;align-items:center;flex-shrink:0}.pecb-metrics-card__cta-btn-icon svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8421
8432
|
}
|
|
8422
8433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetricsCardComponent, decorators: [{
|
|
8423
8434
|
type: Component,
|
|
8424
|
-
args: [{ selector: 'pecb-metrics-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"hostClasses\">\n\n <div class=\"pecb-metrics-card__body\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 1 \u2014 Wide horizontal card\n Left: label + value + optional inline CTA\n Right: date + status badge\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '1') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n <div class=\"pecb-metrics-card__right\">\n <p class=\"pecb-metrics-card__date\">{{ date() }}</p>\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 2 \u2014 Vertical: icon+label \u2192 value \u2192 badge+desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '2') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 3 \u2014 Vertical: icon+label \u2192 badge+desc \u2192 value\n Badge and description appear ABOVE the value\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '3') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 4 \u2014 Left: label + value + badge+desc, Right: icon\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '4') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 8 \u2014 Stat tile: value \u2192 label, small icon top-right\n The compact dashboard counter (e.g. \"11 / Total items\")\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '8') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 5 \u2014 Horizontal compact\n Left: label + value + subtext\n Right: badge + optional inline CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '5') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--compact\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__subtext\">{{ subtext() }}</p>\n }\n </div>\n </div>\n <div class=\"pecb-metrics-card__right\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 6 \u2014 Center-aligned\n Icon + label, value, badge + desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '6') {\n <div class=\"pecb-metrics-card__center-header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C11.8449 2.5 13.5348 3.15138 14.8523 4.24848\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M17.5 2.5V6.25H13.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label pecb-metrics-card__label--center\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--center\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || (hasDescription() && type() === 'data+cta')) {\n <div class=\"pecb-metrics-card__badge-row pecb-metrics-card__badge-row--center\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription() && type() === 'data+cta') {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 7 \u2014 Enroll card (member dashboard)\n Top row: value + label left, icon tile right, divider under it\n Then a multi-line description and a full-width dark CTA button\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '7') {\n <div class=\"pecb-metrics-card__enroll-top\">\n <div class=\"pecb-metrics-card__enroll-heading\">\n <p class=\"pecb-metrics-card__enroll-value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__enroll-label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n </div>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__enroll-description\">{{ description() }}</p>\n }\n @if (type() === 'data+cta') {\n <button\n class=\"pecb-metrics-card__enroll-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n }\n\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER CTA \u2014 rendered for data+cta type, variations 2, 3, 4, 6, 8\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (showFooterCta) {\n <div class=\"pecb-metrics-card__footer\">\n <button\n class=\"pecb-metrics-card__cta-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n <span>{{ ctaText() }}</span>\n @if (showFooterArrow) {\n <span class=\"pecb-metrics-card__cta-btn-icon\" aria-hidden=\"true\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.5 5L12.5 10L7.5 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n }\n </button>\n </div>\n }\n\n</div>\n", styles: [":host{display:block}.pecb-metrics-card{background-color:#fff;border:1px solid #ececec;border-radius:12px;box-shadow:0 3px 2px -2px #0000000f,0 5px 3px -2px #00000005;display:flex;flex-direction:column;overflow:hidden;position:relative}.pecb-metrics-card__body{padding:16px;display:flex;flex:1;gap:16px}.pecb-metrics-card--variation-1 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-2 .pecb-metrics-card__body,.pecb-metrics-card--variation-3 .pecb-metrics-card__body{flex-direction:column;align-items:flex-start;gap:16px}.pecb-metrics-card--variation-4 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between}.pecb-metrics-card--variation-8 .pecb-metrics-card__body{padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start}.pecb-metrics-card--variation-8 .pecb-metrics-card__left{display:contents}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{grid-column:1;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__right{grid-column:2;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{grid-column:1/-1;grid-row:2;white-space:normal;line-height:1.4;font-weight:400}.pecb-metrics-card--variation-8{height:100%;box-sizing:border-box;padding:16px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg{padding:18px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__value{font-size:28px;font-weight:600;line-height:1}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__label{font-size:13px;color:#616161}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__icon-wrapper{width:32px;height:32px;border-radius:8px}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{font-size:24px}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{font-size:13px}.pecb-metrics-card--variation-7{height:100%;border-radius:14px;box-shadow:none}.pecb-metrics-card--variation-7 .pecb-metrics-card__icon-wrapper--bg-success{color:#57bc57}.pecb-metrics-card--variation-7 .pecb-metrics-card__body{flex-direction:column;align-items:stretch;padding:22px 24px;gap:0}.pecb-metrics-card__enroll-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #ececec}.pecb-metrics-card__enroll-heading{min-width:0}.pecb-metrics-card__enroll-value{margin:0;font-size:34px;font-weight:700;line-height:1;color:#212427}.pecb-metrics-card__enroll-label{margin:8px 0 0;font-size:15px;font-weight:600;color:#212427}.pecb-metrics-card__enroll-description{margin:16px 0 18px;font-size:13.5px;line-height:1.55;color:#616161;flex:1}.pecb-metrics-card__enroll-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:42px;padding:0 18px;border:none;border-radius:8px;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease-in-out}.pecb-metrics-card__enroll-btn:hover{background-color:#616161}.pecb-metrics-card__enroll-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-metrics-card--variation-5 .pecb-metrics-card__body{flex-direction:row;align-items:stretch;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-6 .pecb-metrics-card__body,.pecb-metrics-card--center .pecb-metrics-card__body{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.pecb-metrics-card__left{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}.pecb-metrics-card__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;flex-shrink:0}.pecb-metrics-card__right--icon-only{justify-content:flex-start}.pecb-metrics-card__header{display:flex;align-items:center;gap:12px;width:100%;min-width:0}.pecb-metrics-card__center-header{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.pecb-metrics-card__label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__label--center{text-align:center}.pecb-metrics-card__value{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:32px;font-weight:700;color:#212427;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__subtext{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__date{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__metrics{display:flex;flex-direction:column;gap:12px;min-width:0}.pecb-metrics-card__metrics--compact{gap:6px}.pecb-metrics-card__metrics--center{align-items:center;gap:8px}.pecb-metrics-card__badge-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.pecb-metrics-card__badge-row--center{justify-content:center}.pecb-metrics-card__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:700;line-height:normal;white-space:nowrap;flex-shrink:0}.pecb-metrics-card__badge--success{background-color:#e6f4ea;color:#57bc57}.pecb-metrics-card__badge--warning{background-color:#fff4e5;color:#ff9c4a}.pecb-metrics-card__badge--error{background-color:#fdecea;color:#ff606f}.pecb-metrics-card__badge--info{background-color:#e6f0fa;color:#5eacff}.pecb-metrics-card--variation-1 .pecb-metrics-card__badge{padding:6px 12px;font-size:13px}.pecb-metrics-card__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;margin:0}.pecb-metrics-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;background-color:#fff;border:1px solid #ececec;color:#616161}.pecb-metrics-card__icon-wrapper>span{display:flex;align-items:center;justify-content:center;line-height:0}.pecb-metrics-card__icon-wrapper--sm{width:32px;height:32px}.pecb-metrics-card__icon-wrapper--sm svg{width:16px;height:16px;display:block}.pecb-metrics-card__icon-wrapper--md{width:40px;height:40px}.pecb-metrics-card__icon-wrapper--md svg{width:20px;height:20px;display:block}.pecb-metrics-card__icon-wrapper--lg{width:48px;height:48px;border:none}.pecb-metrics-card__icon-wrapper--lg svg{width:24px;height:24px;display:block}.pecb-metrics-card__icon-wrapper--xl{width:52px;height:52px;border:none;border-radius:14px}.pecb-metrics-card__icon-wrapper--xl svg{width:26px;height:26px;display:block}.pecb-metrics-card__icon-wrapper--bg-gray{background-color:#f4f4f4;border-color:transparent;color:#616161}.pecb-metrics-card__icon-wrapper--bg-pending{background-color:#fff4e5;border-color:transparent;color:#fd7e14}.pecb-metrics-card__icon-wrapper--bg-success{background-color:#e6f4ea;border-color:transparent;color:green}.pecb-metrics-card__icon-wrapper--bg-error{background-color:#fdecea;border-color:transparent;color:#dc3545}.pecb-metrics-card__icon-wrapper--bg-info{background-color:#e6f0fa;border-color:transparent;color:#007bff}.pecb-metrics-card__icon-wrapper--bg-purple{background-color:#eee8ff;border-color:transparent;color:#8e6df0}.pecb-metrics-card__cta-link{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;text-align:left;white-space:nowrap;line-height:normal;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-link:hover{opacity:.75}.pecb-metrics-card__cta-link:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card__footer{background-color:#fafafa;border-top:1px solid #ececec;display:flex;align-items:center;padding:16px;width:100%;box-sizing:border-box}.pecb-metrics-card--center .pecb-metrics-card__footer{justify-content:center}.pecb-metrics-card__cta-btn{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-btn:hover{opacity:.75}.pecb-metrics-card__cta-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card--center .pecb-metrics-card__cta-btn{width:auto;justify-content:center}.pecb-metrics-card__cta-btn-icon{display:flex;align-items:center;flex-shrink:0}.pecb-metrics-card__cta-btn-icon svg{display:block}\n"] }]
|
|
8425
|
-
}], propDecorators: { variation: [{ type: i0.Input, args: [{ isSignal: true, alias: "variation", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], hasBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBadge", required: false }] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], badgeStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeStatus", required: false }] }], hasDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescription", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaText", required: false }] }], hasIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIcon", required: false }] }], iconSvg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], ctaClicked: [{ type: i0.Output, args: ["ctaClicked"] }] } });
|
|
8435
|
+
args: [{ selector: 'pecb-metrics-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"hostClasses\">\n\n <div class=\"pecb-metrics-card__body\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 1 \u2014 Wide horizontal card\n Left: label + value + optional inline CTA\n Right: date + status badge\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '1') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n <div class=\"pecb-metrics-card__right\">\n <p class=\"pecb-metrics-card__date\">{{ date() }}</p>\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 2 \u2014 Vertical: icon+label \u2192 value \u2192 badge+desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '2') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 3 \u2014 Vertical: icon+label \u2192 badge+desc \u2192 value\n Badge and description appear ABOVE the value\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '3') {\n <div class=\"pecb-metrics-card__header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics\">\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 4 \u2014 Left: label + value + badge+desc, Right: icon\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '4') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || hasDescription()) {\n <div class=\"pecb-metrics-card__badge-row\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 8 \u2014 Stat tile: value \u2192 label, small icon top-right\n The compact dashboard counter (e.g. \"11 / Total items\")\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '8') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <div class=\"pecb-metrics-card__right pecb-metrics-card__right--icon-only\">\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.87384 2 11.5557 2.81444 12.7071 4.10051\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M14 2V5H11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n </div>\n }\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 5 \u2014 Horizontal compact\n Left: label + value + subtext\n Right: badge + optional inline CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '5') {\n <div class=\"pecb-metrics-card__left\">\n <p class=\"pecb-metrics-card__label\">{{ label() }}</p>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--compact\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__subtext\">{{ subtext() }}</p>\n }\n </div>\n </div>\n <div class=\"pecb-metrics-card__right\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (showInlineCta) {\n <button\n class=\"pecb-metrics-card__cta-link\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 6 \u2014 Center-aligned\n Icon + label, value, badge + desc\n Footer CTA rendered outside body\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '6') {\n <div class=\"pecb-metrics-card__center-header\">\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C11.8449 2.5 13.5348 3.15138 14.8523 4.24848\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M17.5 2.5V6.25H13.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n <p class=\"pecb-metrics-card__label pecb-metrics-card__label--center\">{{ label() }}</p>\n </div>\n <div class=\"pecb-metrics-card__metrics pecb-metrics-card__metrics--center\">\n <p class=\"pecb-metrics-card__value\">{{ value() }}</p>\n @if (hasBadge() || (hasDescription() && type() === 'data+cta')) {\n <div class=\"pecb-metrics-card__badge-row pecb-metrics-card__badge-row--center\">\n @if (hasBadge()) {\n <span class=\"pecb-metrics-card__badge pecb-metrics-card__badge--{{ badgeStatus() }}\">\n {{ badgeText() }}\n </span>\n }\n @if (hasDescription() && type() === 'data+cta') {\n <p class=\"pecb-metrics-card__description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n VARIATION 7 \u2014 Enroll card (member dashboard)\n Top row: value + label left, icon tile right, divider under it\n Then a multi-line description and a full-width dark CTA button\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (variation() === '7') {\n <div class=\"pecb-metrics-card__enroll-top\">\n <div class=\"pecb-metrics-card__enroll-heading\">\n <p class=\"pecb-metrics-card__enroll-value\">{{ value() }}</p>\n <p class=\"pecb-metrics-card__enroll-label\">{{ label() }}</p>\n </div>\n @if (hasIcon()) {\n <span\n class=\"pecb-metrics-card__icon-wrapper {{ iconSizeClass }} {{ iconBgClass }}\"\n aria-hidden=\"true\"\n >\n @if (safeIconSvg()) {\n <span [innerHTML]=\"safeIconSvg()\"></span>\n } @else {\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8109 3 17.3337 4.22164 19.0607 6.15077\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M21 3V7H17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </span>\n }\n </div>\n @if (hasDescription()) {\n <p class=\"pecb-metrics-card__enroll-description\">{{ description() }}</p>\n }\n @if (type() === 'data+cta') {\n <button\n class=\"pecb-metrics-card__enroll-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n {{ ctaText() }}\n </button>\n }\n }\n\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER CTA \u2014 rendered for data+cta type, variations 2, 3, 4, 6, 8\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (showFooterCta) {\n <div class=\"pecb-metrics-card__footer\">\n <button\n class=\"pecb-metrics-card__cta-btn\"\n type=\"button\"\n (click)=\"onCtaClick()\"\n >\n <span>{{ ctaText() }}</span>\n @if (showFooterArrow) {\n <span class=\"pecb-metrics-card__cta-btn-icon\" aria-hidden=\"true\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.5 5L12.5 10L7.5 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n }\n </button>\n </div>\n }\n\n</div>\n", styles: [":host{display:block}.pecb-metrics-card{background-color:#fff;border:1px solid #ececec;border-radius:12px;box-shadow:0 3px 2px -2px #0000000f,0 5px 3px -2px #00000005;display:flex;flex-direction:column;overflow:hidden;position:relative}.pecb-metrics-card__body{padding:16px;display:flex;flex:1;gap:16px}.pecb-metrics-card--variation-1 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-2 .pecb-metrics-card__body,.pecb-metrics-card--variation-3 .pecb-metrics-card__body{flex-direction:column;align-items:flex-start;gap:16px}.pecb-metrics-card--variation-4 .pecb-metrics-card__body{flex-direction:row;align-items:flex-start;justify-content:space-between}.pecb-metrics-card--variation-8 .pecb-metrics-card__body{padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start}.pecb-metrics-card--variation-8 .pecb-metrics-card__left{display:contents}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{grid-column:1;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__right{grid-column:2;grid-row:1}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{grid-column:1/-1;grid-row:2;white-space:normal;line-height:1.4;font-weight:400}.pecb-metrics-card--variation-8.pecb-metrics-card--icon-start .pecb-metrics-card__body{grid-template-columns:auto minmax(0,1fr)}.pecb-metrics-card--variation-8.pecb-metrics-card--icon-start .pecb-metrics-card__right{grid-column:1;justify-self:start}.pecb-metrics-card--variation-8.pecb-metrics-card--icon-start .pecb-metrics-card__value{grid-column:2;justify-self:end;text-align:right}.pecb-metrics-card--variation-8{height:100%;box-sizing:border-box;padding:16px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg{padding:18px}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__value{font-size:28px;font-weight:600;line-height:1}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__label{font-size:13px;color:#616161}.pecb-metrics-card--variation-8.pecb-metrics-card--size-lg .pecb-metrics-card__icon-wrapper{width:32px;height:32px;border-radius:8px}.pecb-metrics-card--variation-8 .pecb-metrics-card__value{font-size:24px}.pecb-metrics-card--variation-8 .pecb-metrics-card__label{font-size:13px}.pecb-metrics-card--variation-7{height:100%;border-radius:14px;box-shadow:none}.pecb-metrics-card--variation-7 .pecb-metrics-card__icon-wrapper--bg-success{color:#57bc57}.pecb-metrics-card--variation-7 .pecb-metrics-card__body{flex-direction:column;align-items:stretch;padding:22px 24px;gap:0}.pecb-metrics-card__enroll-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #ececec}.pecb-metrics-card__enroll-heading{min-width:0}.pecb-metrics-card__enroll-value{margin:0;font-size:34px;font-weight:700;line-height:1;color:#212427}.pecb-metrics-card__enroll-label{margin:8px 0 0;font-size:15px;font-weight:600;color:#212427}.pecb-metrics-card__enroll-description{margin:16px 0 18px;font-size:13.5px;line-height:1.55;color:#616161;flex:1}.pecb-metrics-card__enroll-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:42px;padding:0 18px;border:none;border-radius:8px;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease-in-out}.pecb-metrics-card__enroll-btn:hover{background-color:#616161}.pecb-metrics-card__enroll-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-metrics-card--variation-5 .pecb-metrics-card__body{flex-direction:row;align-items:stretch;justify-content:space-between;gap:16px}.pecb-metrics-card--variation-6 .pecb-metrics-card__body,.pecb-metrics-card--center .pecb-metrics-card__body{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.pecb-metrics-card__left{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}.pecb-metrics-card__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;flex-shrink:0}.pecb-metrics-card__right--icon-only{justify-content:flex-start}.pecb-metrics-card__header{display:flex;align-items:center;gap:12px;width:100%;min-width:0}.pecb-metrics-card__center-header{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.pecb-metrics-card__label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__label--center{text-align:center}.pecb-metrics-card__value{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:32px;font-weight:700;color:#212427;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__subtext{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__date{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin:0}.pecb-metrics-card__metrics{display:flex;flex-direction:column;gap:12px;min-width:0}.pecb-metrics-card__metrics--compact{gap:6px}.pecb-metrics-card__metrics--center{align-items:center;gap:8px}.pecb-metrics-card__badge-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.pecb-metrics-card__badge-row--center{justify-content:center}.pecb-metrics-card__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:700;line-height:normal;white-space:nowrap;flex-shrink:0}.pecb-metrics-card__badge--success{background-color:#e6f4ea;color:#57bc57}.pecb-metrics-card__badge--warning{background-color:#fff4e5;color:#ff9c4a}.pecb-metrics-card__badge--error{background-color:#fdecea;color:#ff606f}.pecb-metrics-card__badge--info{background-color:#e6f0fa;color:#5eacff}.pecb-metrics-card--variation-1 .pecb-metrics-card__badge{padding:6px 12px;font-size:13px}.pecb-metrics-card__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#919191;line-height:normal;white-space:nowrap;margin:0}.pecb-metrics-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;background-color:#fff;border:1px solid #ececec;color:#616161}.pecb-metrics-card__icon-wrapper>span{display:flex;align-items:center;justify-content:center;line-height:0}.pecb-metrics-card__icon-wrapper--sm{width:32px;height:32px}.pecb-metrics-card__icon-wrapper--sm svg{width:16px;height:16px;display:block}.pecb-metrics-card__icon-wrapper--md{width:40px;height:40px}.pecb-metrics-card__icon-wrapper--md svg{width:20px;height:20px;display:block}.pecb-metrics-card__icon-wrapper--lg{width:48px;height:48px;border:none}.pecb-metrics-card__icon-wrapper--lg svg{width:24px;height:24px;display:block}.pecb-metrics-card__icon-wrapper--xl{width:52px;height:52px;border:none;border-radius:14px}.pecb-metrics-card__icon-wrapper--xl svg{width:26px;height:26px;display:block}.pecb-metrics-card__icon-wrapper--bg-gray{background-color:#f4f4f4;border-color:transparent;color:#616161}.pecb-metrics-card__icon-wrapper--bg-pending{background-color:#fff4e5;border-color:transparent;color:#fd7e14}.pecb-metrics-card__icon-wrapper--bg-success{background-color:#e6f4ea;border-color:transparent;color:green}.pecb-metrics-card__icon-wrapper--bg-error{background-color:#fdecea;border-color:transparent;color:#dc3545}.pecb-metrics-card__icon-wrapper--bg-info{background-color:#e6f0fa;border-color:transparent;color:#007bff}.pecb-metrics-card__icon-wrapper--bg-purple{background-color:#eee8ff;border-color:transparent;color:#8e6df0}.pecb-metrics-card__cta-link{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;text-align:left;white-space:nowrap;line-height:normal;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-link:hover{opacity:.75}.pecb-metrics-card__cta-link:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card__footer{background-color:#fafafa;border-top:1px solid #ececec;display:flex;align-items:center;padding:16px;width:100%;box-sizing:border-box}.pecb-metrics-card--center .pecb-metrics-card__footer{justify-content:center}.pecb-metrics-card__cta-btn{background:none;border:none;padding:0;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;transition:opacity .15s ease-in-out}.pecb-metrics-card__cta-btn:hover{opacity:.75}.pecb-metrics-card__cta-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px;border-radius:6px}.pecb-metrics-card--center .pecb-metrics-card__cta-btn{width:auto;justify-content:center}.pecb-metrics-card__cta-btn-icon{display:flex;align-items:center;flex-shrink:0}.pecb-metrics-card__cta-btn-icon svg{display:block}\n"] }]
|
|
8436
|
+
}], propDecorators: { variation: [{ type: i0.Input, args: [{ isSignal: true, alias: "variation", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], hasBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBadge", required: false }] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], badgeStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeStatus", required: false }] }], hasDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescription", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaText", required: false }] }], hasIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIcon", required: false }] }], iconSvg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], ctaClicked: [{ type: i0.Output, args: ["ctaClicked"] }] } });
|
|
8426
8437
|
|
|
8427
8438
|
// =============================================================================
|
|
8428
8439
|
// BADGE COMPONENT
|
|
@@ -8499,14 +8510,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
8499
8510
|
args: [{ selector: 'pecb-badge', standalone: true, imports: [CommonModule], template: "<!-- DOT \u2014 6px red circle --> \n@if (variant() === 'dot') {\n <span [id]=\"id()\" class=\"pecb-badge pecb-badge--dot\" [attr.aria-label]=\"notificationAriaLabel()\"></span>\n}\n\n<!-- COUNT \u2014 numbered pill -->\n@if (variant() === 'count') {\n <span\n [id]=\"id()\"\n class=\"pecb-badge pecb-badge--count\"\n [class.pecb-badge--count-small]=\"size() === 'small'\"\n [attr.aria-label]=\"displayCount() + ' ' + notificationsLabel()\"\n >\n {{ displayCount() }}\n </span>\n}\n\n<!-- STATUS \u2014 colored dot + label text -->\n@if (variant() === 'status') {\n <span [id]=\"id()\" class=\"pecb-badge pecb-badge--status\">\n <span\n class=\"pecb-badge__status-dot\"\n [class.pecb-badge__status-dot--success]=\"status() === 'success'\"\n [class.pecb-badge__status-dot--error]=\"status() === 'error'\"\n [class.pecb-badge__status-dot--default]=\"status() === 'default'\"\n [class.pecb-badge__status-dot--processing]=\"status() === 'processing'\"\n [class.pecb-badge__status-dot--warning]=\"status() === 'warning'\"\n ></span>\n @if (showLabel()) {\n <span class=\"pecb-badge__status-text\">{{ statusLabel() }}</span>\n }\n </span>\n}\n\n<!-- SOFT \u2014 dot-less pill: tinted background + colored text -->\n@if (variant() === 'soft') {\n <span\n [id]=\"id()\"\n class=\"pecb-badge pecb-badge--soft\"\n [class.pecb-badge--soft-success]=\"status() === 'success'\"\n [class.pecb-badge--soft-error]=\"status() === 'error'\"\n [class.pecb-badge--soft-default]=\"status() === 'default'\"\n [class.pecb-badge--soft-processing]=\"status() === 'processing'\"\n [class.pecb-badge--soft-warning]=\"status() === 'warning'\"\n >\n @if (showLabel()) {\n <span class=\"pecb-badge__soft-text\">{{ statusLabel() }}</span>\n }\n </span>\n}\n\n<!-- RIBBON \u2014 colored tag with arrow fold -->\n@if (variant() === 'ribbon') {\n <span\n [id]=\"id()\"\n class=\"pecb-badge pecb-badge--ribbon\"\n [class.pecb-badge--ribbon-blue]=\"ribbonColor() === 'blue'\"\n [class.pecb-badge--ribbon-orange]=\"ribbonColor() === 'orange'\"\n [class.pecb-badge--ribbon-gray]=\"ribbonColor() === 'gray'\"\n [class.pecb-badge--ribbon-red]=\"ribbonColor() === 'red'\"\n [class.pecb-badge--ribbon-purple]=\"ribbonColor() === 'purple'\"\n [class.pecb-badge--ribbon-green]=\"ribbonColor() === 'green'\"\n [class.pecb-badge--ribbon-black]=\"ribbonColor() === 'black'\"\n >\n <span class=\"pecb-badge__ribbon-text\">{{ text() }}</span>\n <span class=\"pecb-badge__ribbon-arrow\"></span>\n </span>\n}\n", styles: [".pecb-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle}.pecb-badge--dot{width:6px;height:6px;border-radius:50%;background-color:#dc3545}.pecb-badge--count{height:20px;min-width:20px;padding:0 4px;border-radius:16px;background-color:#dc3545;border:1px solid #ffffff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#fff;text-align:center;line-height:20px;white-space:nowrap}.pecb-badge--count-small{height:14px;min-width:14px;border-radius:12px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:#fff;line-height:14px}.pecb-badge--status{gap:8px}.pecb-badge__status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.pecb-badge__status-dot--success{background-color:#57bc57}.pecb-badge__status-dot--error{background-color:#ff606f}.pecb-badge__status-dot--default{background-color:#919191}.pecb-badge__status-dot--processing{background-color:#5eacff}.pecb-badge__status-dot--warning{background-color:#ff9c4a}.pecb-badge__status-text{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;color:#212427;white-space:nowrap;line-height:1.5}.pecb-badge--soft{padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap}.pecb-badge--soft-success{background-color:#e6f4ea;color:#57bc57}.pecb-badge--soft-error{background-color:#fdecea;color:#ff606f}.pecb-badge--soft-warning{background-color:#fff4e5;color:#ff9c4a}.pecb-badge--soft-default{background-color:#ececec;color:#919191}.pecb-badge--soft-processing{background-color:#e6f0fa;color:#5eacff}.pecb-badge--ribbon{position:relative;padding:0 8px;border-radius:4px 4px 0;color:#fff}.pecb-badge--ribbon-blue{background-color:#5eacff}.pecb-badge--ribbon-blue .pecb-badge__ribbon-arrow{border-top-color:#007bff}.pecb-badge--ribbon-orange{background-color:#ff9c4a}.pecb-badge--ribbon-orange .pecb-badge__ribbon-arrow{border-top-color:#fd7e14}.pecb-badge--ribbon-gray{background-color:#616161}.pecb-badge--ribbon-gray .pecb-badge__ribbon-arrow{border-top-color:#313131}.pecb-badge--ribbon-red{background-color:#ff606f}.pecb-badge--ribbon-red .pecb-badge__ribbon-arrow{border-top-color:#dc3545}.pecb-badge--ribbon-purple{background-color:#a98cff}.pecb-badge--ribbon-purple .pecb-badge__ribbon-arrow{border-top-color:#8e6df0}.pecb-badge--ribbon-green{background-color:#57bc57}.pecb-badge--ribbon-green .pecb-badge__ribbon-arrow{border-top-color:green}.pecb-badge--ribbon-black{background-color:#212427}.pecb-badge--ribbon-black .pecb-badge__ribbon-arrow{border-top-color:#616161}.pecb-badge__ribbon-text{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;color:#fff;text-align:center;white-space:nowrap;line-height:1.5}.pecb-badge__ribbon-arrow{position:absolute;bottom:-6px;right:0;width:0;height:0;border-style:solid;border-width:6px 8px 0 0;border-color:transparent}\n"] }]
|
|
8500
8511
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], maxCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], ribbonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ribbonColor", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], notificationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationAriaLabel", required: false }] }], notificationsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsLabel", required: false }] }] } });
|
|
8501
8512
|
|
|
8502
|
-
const PLUS_SVG = '<svg viewBox="0 0 24 24" width="
|
|
8513
|
+
const PLUS_SVG = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>';
|
|
8514
|
+
/** Default emblem glyph for the head tile (rosette / ribbon). */
|
|
8515
|
+
const EMBLEM_SVG = '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="9" r="6"></circle><path d="M8.2 14 7 22l5-3 5 3-1.2-8"></path></svg>';
|
|
8503
8516
|
/**
|
|
8504
8517
|
* Credential card — a summary tile for a credential/qualification.
|
|
8505
8518
|
*
|
|
8506
|
-
* Composes
|
|
8507
|
-
*
|
|
8519
|
+
* Composes a divided head (tone-tinted emblem tile + status pill, title below),
|
|
8520
|
+
* label/value rows, progress lines (label + counter over a bar with a round "+"),
|
|
8508
8521
|
* a tinted notice (expired/suspended/revoked/pending reasons — supports <b> markup),
|
|
8509
|
-
* a
|
|
8522
|
+
* a footer of action buttons in one row (or stacked), an optional centered link and
|
|
8510
8523
|
* an optional muted footnote. Purely presentational: every interaction surfaces
|
|
8511
8524
|
* through outputs.
|
|
8512
8525
|
*/
|
|
@@ -8515,11 +8528,13 @@ class CredentialCardComponent {
|
|
|
8515
8528
|
this.sanitizer = inject(DomSanitizer);
|
|
8516
8529
|
/** Credential title */
|
|
8517
8530
|
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
8518
|
-
/**
|
|
8531
|
+
/** Tone of the status pill and the emblem tile tint */
|
|
8519
8532
|
this.tone = input('neutral', ...(ngDevMode ? [{ debugName: "tone" }] : []));
|
|
8533
|
+
/** Raw SVG for the emblem tile; a rosette glyph is used when empty */
|
|
8534
|
+
this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
8520
8535
|
/** Status pill text; pill hidden when empty */
|
|
8521
8536
|
this.statusLabel = input('', ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
|
|
8522
|
-
/**
|
|
8537
|
+
/** Label/value rows (Issued, Expires, ...) — label left, value right */
|
|
8523
8538
|
this.metaRows = input([], ...(ngDevMode ? [{ debugName: "metaRows" }] : []));
|
|
8524
8539
|
/** Progress lines (credits, fees, ...) */
|
|
8525
8540
|
this.progressRows = input([], ...(ngDevMode ? [{ debugName: "progressRows" }] : []));
|
|
@@ -8542,6 +8557,7 @@ class CredentialCardComponent {
|
|
|
8542
8557
|
/** The centered link clicked */
|
|
8543
8558
|
this.linkClick = output();
|
|
8544
8559
|
this.plusIcon = this.sanitizer.bypassSecurityTrustHtml(PLUS_SVG);
|
|
8560
|
+
this.safeIcon = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.icon() || EMBLEM_SVG), ...(ngDevMode ? [{ debugName: "safeIcon" }] : []));
|
|
8545
8561
|
this.safeNotice = computed(() => this.noticeText()
|
|
8546
8562
|
? this.sanitizer.bypassSecurityTrustHtml(this.noticeText())
|
|
8547
8563
|
: null, ...(ngDevMode ? [{ debugName: "safeNotice" }] : []));
|
|
@@ -8570,12 +8586,12 @@ class CredentialCardComponent {
|
|
|
8570
8586
|
return svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
|
|
8571
8587
|
}
|
|
8572
8588
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CredentialCardComponent, isStandalone: true, selector: "pecb-credential-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, metaRows: { classPropertyName: "metaRows", publicName: "metaRows", isSignal: true, isRequired: false, transformFunction: null }, progressRows: { classPropertyName: "progressRows", publicName: "progressRows", isSignal: true, isRequired: false, transformFunction: null }, noticeText: { classPropertyName: "noticeText", publicName: "noticeText", isSignal: true, isRequired: false, transformFunction: null }, noticeTone: { classPropertyName: "noticeTone", publicName: "noticeTone", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsLayout: { classPropertyName: "actionsLayout", publicName: "actionsLayout", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, footnote: { classPropertyName: "footnote", publicName: "footnote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progressAction: "progressAction", actionClick: "actionClick", linkClick: "linkClick" }, ngImport: i0, template: "<div class=\"pecb-credential-card\">\n <div class=\"pecb-credential-card__head\">\n <h4 class=\"pecb-credential-card__title\">{{ title() }}</h4>\n @if (statusLabel()) {\n <pecb-badge\n class=\"pecb-credential-card__pill\"\n variant=\"soft\"\n [status]=\"pillStatus()\"\n [label]=\"statusLabel()\"\n [showLabel]=\"true\"\n ></pecb-badge>\n }\n </div>\n\n @if (metaRows().length) {\n <div class=\"pecb-credential-card__meta\">\n @for (row of metaRows(); track row.label) {\n <div class=\"pecb-credential-card__meta-item\">\n <span class=\"pecb-credential-card__meta-label\">{{ row.label }}</span>\n <b class=\"pecb-credential-card__meta-value\">{{ row.value }}</b>\n </div>\n }\n </div>\n }\n\n @if (progressRows().length) {\n <div class=\"pecb-credential-card__progress-list\">\n @for (progress of progressRows(); track progress.id) {\n <div class=\"pecb-credential-card__progress\">\n <span class=\"pecb-credential-card__progress-label\">{{ progress.label }}</span>\n <div class=\"pecb-credential-card__bar\">\n <i\n class=\"pecb-credential-card__bar-fill\"\n [class]=\"'pecb-credential-card__bar-fill ' + barToneClass(progress.percent)\"\n [style.width.%]=\"clampPercent(progress.percent)\"\n ></i>\n </div>\n <b class=\"pecb-credential-card__progress-value\">{{ progress.valueText }}</b>\n <button\n type=\"button\"\n class=\"pecb-credential-card__plus\"\n [disabled]=\"progress.actionDisabled\"\n [attr.aria-label]=\"progress.actionAriaLabel || progress.label\"\n (click)=\"progressAction.emit(progress.id)\"\n [innerHTML]=\"plusIcon\"\n ></button>\n </div>\n }\n </div>\n }\n\n @if (noticeText()) {\n <div\n class=\"pecb-credential-card__notice\"\n [class]=\"'pecb-credential-card__notice pecb-credential-card__notice--' + noticeTone()\"\n >\n <p [innerHTML]=\"safeNotice()\"></p>\n </div>\n }\n\n @if (actions().length || linkLabel() || footnote()) {\n <div class=\"pecb-credential-card__footer\">\n @if (actions().length) {\n <div\n class=\"pecb-credential-card__actions\"\n [class]=\"'pecb-credential-card__actions pecb-credential-card__actions--' + actionsLayout()\"\n >\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n [class]=\"actionClass(action)\"\n [disabled]=\"!!action.disabled\"\n (click)=\"actionClick.emit(action.id)\"\n >\n @if (action.icon) {\n <span class=\"pecb-credential-card__btn-icon\" aria-hidden=\"true\" [innerHTML]=\"safeSvg(action.icon)\"></span>\n }\n {{ action.label }}\n </button>\n }\n </div>\n }\n\n @if (linkLabel()) {\n <button type=\"button\" class=\"pecb-credential-card__link\" (click)=\"linkClick.emit()\">\n {{ linkLabel() }}\n </button>\n }\n\n @if (footnote()) {\n <span class=\"pecb-credential-card__footnote\">{{ footnote() }}</span>\n }\n </div>\n }\n</div>\n", styles: [".pecb-credential-card{display:flex;flex-direction:column;gap:18px;height:100%;padding:20px;background-color:#fff;border:1px solid #ececec;border-radius:12px;overflow:hidden;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-credential-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.pecb-credential-card__title{flex:1 1 auto;margin:0;font-size:18px;font-weight:700;line-height:1.3;color:#212427;overflow-wrap:anywhere;min-width:0}.pecb-credential-card__pill{flex-shrink:0}.pecb-credential-card__meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.pecb-credential-card__meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.pecb-credential-card__meta-item:last-child:not(:first-child){text-align:right}.pecb-credential-card__meta-label{font-size:14px;font-weight:500;color:#919191;white-space:nowrap}.pecb-credential-card__meta-value{font-size:16px;font-weight:700;color:#212427;white-space:nowrap}.pecb-credential-card__progress-list{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:12px;row-gap:14px}.pecb-credential-card__progress{display:contents}.pecb-credential-card__progress-label{font-size:14px;font-weight:500;color:#919191;white-space:nowrap}.pecb-credential-card__progress-value{font-size:14px;font-weight:700;color:#212427;white-space:nowrap;text-align:right}.pecb-credential-card__bar{min-width:0;height:6px;border-radius:9999px;background-color:#ececec;overflow:hidden}.pecb-credential-card__bar-fill{display:block;height:100%;border-radius:9999px;transform-origin:left;animation:pecb-credential-card-bar-fill 1s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){.pecb-credential-card__bar-fill{animation:none}}.pecb-credential-card__bar-fill--success{background-color:green}.pecb-credential-card__bar-fill--warning{background-color:#fd7e14}.pecb-credential-card__bar-fill--danger{background-color:#dc3545}.pecb-credential-card__plus{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid #c2c2c2;background-color:#fff;color:#212427;display:flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.pecb-credential-card__plus:hover:not(:disabled){background-color:#212427;border-color:#212427;color:#fff}.pecb-credential-card__plus:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.pecb-credential-card__notice{border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.5}.pecb-credential-card__notice p{margin:0}.pecb-credential-card__notice b{font-weight:700}.pecb-credential-card__notice--error{background-color:#fdecea;color:#a11e29}.pecb-credential-card__notice--warning{background-color:#fff4e5;color:#fd7e14}.pecb-credential-card__footer{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #ececec}.pecb-credential-card__actions{display:flex;gap:8px}.pecb-credential-card__actions--row{flex-direction:row;flex-wrap:wrap}.pecb-credential-card__actions--row .pecb-credential-card__btn{flex:1 1 0;min-width:fit-content}.pecb-credential-card__actions--stack{flex-direction:column}.pecb-credential-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 12px;border-radius:8px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1;cursor:pointer;border:1px solid transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease;min-width:0;white-space:nowrap}.pecb-credential-card__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.pecb-credential-card__btn--primary{background-color:#212427;color:#fff}.pecb-credential-card__btn--primary:hover:not(:disabled){background-color:#616161}.pecb-credential-card__btn--ghost{background-color:#fff;color:#616161;border-color:#c2c2c2}.pecb-credential-card__btn--ghost:hover:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-credential-card__btn--accent{background-color:#a11e29;color:#fff}.pecb-credential-card__btn--accent:hover:not(:disabled){background-color:#671018}.pecb-credential-card__btn--success{background-color:#57bc57;color:#fff}.pecb-credential-card__btn--success:hover:not(:disabled){background-color:green}.pecb-credential-card__btn-icon{display:flex;line-height:0;flex-shrink:0}.pecb-credential-card__link{align-self:center;border:0;background:none;padding:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;cursor:pointer}.pecb-credential-card__link:hover{text-decoration:underline}.pecb-credential-card__footnote{align-self:center;font-size:13px;color:#919191;text-align:center}@keyframes pecb-credential-card-bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "pecb-badge", inputs: ["id", "variant", "count", "maxCount", "size", "status", "label", "showLabel", "ribbonColor", "text", "notificationAriaLabel", "notificationsLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8589
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CredentialCardComponent, isStandalone: true, selector: "pecb-credential-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, metaRows: { classPropertyName: "metaRows", publicName: "metaRows", isSignal: true, isRequired: false, transformFunction: null }, progressRows: { classPropertyName: "progressRows", publicName: "progressRows", isSignal: true, isRequired: false, transformFunction: null }, noticeText: { classPropertyName: "noticeText", publicName: "noticeText", isSignal: true, isRequired: false, transformFunction: null }, noticeTone: { classPropertyName: "noticeTone", publicName: "noticeTone", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsLayout: { classPropertyName: "actionsLayout", publicName: "actionsLayout", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, footnote: { classPropertyName: "footnote", publicName: "footnote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progressAction: "progressAction", actionClick: "actionClick", linkClick: "linkClick" }, ngImport: i0, template: "<div class=\"pecb-credential-card\">\n <!-- Head: tinted emblem tile (left) + status pill (right) on the first line, title on its own line -->\n <div class=\"pecb-credential-card__head\">\n <span [class]=\"'pecb-credential-card__icon pecb-credential-card__icon--' + tone()\" aria-hidden=\"true\" [innerHTML]=\"safeIcon()\"></span>\n @if (statusLabel()) {\n <pecb-badge\n class=\"pecb-credential-card__pill\"\n variant=\"soft\"\n [status]=\"pillStatus()\"\n [label]=\"statusLabel()\"\n [showLabel]=\"true\"\n ></pecb-badge>\n }\n <h4 class=\"pecb-credential-card__title\">{{ title() }}</h4>\n </div>\n\n <div class=\"pecb-credential-card__body\">\n @if (metaRows().length || progressRows().length) {\n <div class=\"pecb-credential-card__meta\">\n @for (row of metaRows(); track row.label) {\n <div class=\"pecb-credential-card__meta-row\">\n <span>{{ row.label }}</span>\n <b>{{ row.value }}</b>\n </div>\n }\n\n @for (progress of progressRows(); track progress.id) {\n <div class=\"pecb-credential-card__progress\">\n <div class=\"pecb-credential-card__progress-head\">\n <span>{{ progress.label }}</span>\n <b>{{ progress.valueText }}</b>\n </div>\n <div class=\"pecb-credential-card__progress-bar\">\n <div class=\"pecb-credential-card__bar\">\n <i\n [class]=\"'pecb-credential-card__bar-fill ' + barToneClass(progress.percent)\"\n [style.width.%]=\"clampPercent(progress.percent)\"\n ></i>\n </div>\n <button\n type=\"button\"\n class=\"pecb-credential-card__plus\"\n [disabled]=\"progress.actionDisabled\"\n [attr.aria-label]=\"progress.actionAriaLabel || progress.label\"\n (click)=\"progressAction.emit(progress.id)\"\n [innerHTML]=\"plusIcon\"\n ></button>\n </div>\n </div>\n }\n </div>\n }\n\n @if (noticeText()) {\n <div [class]=\"'pecb-credential-card__notice pecb-credential-card__notice--' + noticeTone()\">\n <p [innerHTML]=\"safeNotice()\"></p>\n </div>\n }\n\n @if (actions().length || linkLabel() || footnote()) {\n <div class=\"pecb-credential-card__footer\">\n @if (actions().length) {\n <div [class]=\"'pecb-credential-card__actions pecb-credential-card__actions--' + actionsLayout()\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n [class]=\"actionClass(action)\"\n [disabled]=\"!!action.disabled\"\n (click)=\"actionClick.emit(action.id)\"\n >\n @if (action.icon) {\n <span class=\"pecb-credential-card__btn-icon\" aria-hidden=\"true\" [innerHTML]=\"safeSvg(action.icon)\"></span>\n }\n {{ action.label }}\n </button>\n }\n </div>\n }\n\n @if (linkLabel()) {\n <button type=\"button\" class=\"pecb-credential-card__link\" (click)=\"linkClick.emit()\">\n {{ linkLabel() }}\n </button>\n }\n\n @if (footnote()) {\n <span class=\"pecb-credential-card__footnote\">{{ footnote() }}</span>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;height:100%}.pecb-credential-card{display:flex;flex-direction:column;height:100%;background-color:#fff;border:1px solid #ececec;border-radius:12px;overflow:hidden;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-credential-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:18px 18px 16px;border-bottom:1px solid #ececec}.pecb-credential-card__icon{order:-2;margin-right:auto;flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;line-height:0}.pecb-credential-card__icon--success{background-color:#57bc571a;color:#57bc57}.pecb-credential-card__icon--warning{background-color:#ff9c4a1a;color:#ff9c4a}.pecb-credential-card__icon--error{background-color:#ff606f1a;color:#ff606f}.pecb-credential-card__icon--neutral{background-color:#ececec;color:#616161}.pecb-credential-card__pill{order:-1;flex:none;margin-left:auto;margin-top:2px}.pecb-credential-card__title{order:1;flex:1 1 100%;min-width:0;margin:0;font-size:16px;font-weight:700;line-height:1.3;color:#212427;overflow-wrap:anywhere}.pecb-credential-card__body{display:flex;flex-direction:column;gap:16px;flex:1;padding:18px}.pecb-credential-card__meta{display:flex;flex-direction:column;gap:12px}.pecb-credential-card__meta-row,.pecb-credential-card__progress-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#616161}.pecb-credential-card__meta-row span,.pecb-credential-card__progress-head span{min-width:0;white-space:nowrap}.pecb-credential-card__meta-row b,.pecb-credential-card__progress-head b{color:#212427;font-weight:600;white-space:nowrap}.pecb-credential-card__meta-row{font-size:13px}.pecb-credential-card__progress{display:flex;flex-direction:column;gap:6px}.pecb-credential-card__progress-head{font-size:13px}.pecb-credential-card__progress-bar{display:flex;align-items:center;gap:8px}.pecb-credential-card__bar{flex:1;min-width:0;height:6px;border-radius:9999px;background-color:#ececec;overflow:hidden}.pecb-credential-card__bar-fill{display:block;height:100%;border-radius:9999px;transform-origin:left;animation:pecb-credential-card-bar-fill 1s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){.pecb-credential-card__bar-fill{animation:none}}.pecb-credential-card__bar-fill--success{background-color:#57bc57}.pecb-credential-card__bar-fill--warning{background-color:#ff9c4a}.pecb-credential-card__bar-fill--danger{background-color:#ff606f}.pecb-credential-card__plus{flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background-color:#ececec;color:#616161;display:flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pecb-credential-card__plus:hover:not(:disabled){background-color:#616161;color:#fff}.pecb-credential-card__plus:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.pecb-credential-card__notice{border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.5}.pecb-credential-card__notice p{margin:0}.pecb-credential-card__notice b{font-weight:700}.pecb-credential-card__notice--error{background-color:#fdecea;color:#ff606f}.pecb-credential-card__notice--warning{background-color:#fff4e5;color:#ff9c4a}.pecb-credential-card__footer{display:flex;flex-direction:column;gap:12px;margin-top:auto}.pecb-credential-card__actions{display:flex;gap:6px}.pecb-credential-card__actions--row{flex-direction:row;flex-wrap:nowrap}.pecb-credential-card__actions--stack{flex-direction:column}.pecb-credential-card__btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:8px;border-radius:8px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.pecb-credential-card__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.pecb-credential-card__btn--primary{background-color:#212427;color:#fff}.pecb-credential-card__btn--primary:hover:not(:disabled){background-color:#616161}.pecb-credential-card__btn--ghost{background-color:#fff;color:#616161;border-color:#c2c2c2}.pecb-credential-card__btn--ghost:hover:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-credential-card__btn--accent{background-color:#a11e29;border-color:#a11e29;color:#fff}.pecb-credential-card__btn--accent:hover:not(:disabled){background-color:#671018;border-color:#671018}.pecb-credential-card__btn--success{background-color:#57bc57;border-color:#57bc57;color:#fff}.pecb-credential-card__btn--success:hover:not(:disabled){background-color:green;border-color:green}.pecb-credential-card__btn-icon{display:flex;line-height:0;flex-shrink:0}.pecb-credential-card__link{align-self:center;border:0;background:none;padding:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;cursor:pointer}.pecb-credential-card__link:hover{text-decoration:underline}.pecb-credential-card__footnote{align-self:center;font-size:13px;color:#919191;text-align:center}@keyframes pecb-credential-card-bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "pecb-badge", inputs: ["id", "variant", "count", "maxCount", "size", "status", "label", "showLabel", "ribbonColor", "text", "notificationAriaLabel", "notificationsLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8574
8590
|
}
|
|
8575
8591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CredentialCardComponent, decorators: [{
|
|
8576
8592
|
type: Component,
|
|
8577
|
-
args: [{ selector: 'pecb-credential-card', standalone: true, imports: [BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-credential-card\">\n <div class=\"pecb-credential-card__head\">\n <
|
|
8578
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], metaRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaRows", required: false }] }], progressRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressRows", required: false }] }], noticeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noticeText", required: false }] }], noticeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "noticeTone", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsLayout", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], footnote: [{ type: i0.Input, args: [{ isSignal: true, alias: "footnote", required: false }] }], progressAction: [{ type: i0.Output, args: ["progressAction"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
|
|
8593
|
+
args: [{ selector: 'pecb-credential-card', standalone: true, imports: [BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-credential-card\">\n <!-- Head: tinted emblem tile (left) + status pill (right) on the first line, title on its own line -->\n <div class=\"pecb-credential-card__head\">\n <span [class]=\"'pecb-credential-card__icon pecb-credential-card__icon--' + tone()\" aria-hidden=\"true\" [innerHTML]=\"safeIcon()\"></span>\n @if (statusLabel()) {\n <pecb-badge\n class=\"pecb-credential-card__pill\"\n variant=\"soft\"\n [status]=\"pillStatus()\"\n [label]=\"statusLabel()\"\n [showLabel]=\"true\"\n ></pecb-badge>\n }\n <h4 class=\"pecb-credential-card__title\">{{ title() }}</h4>\n </div>\n\n <div class=\"pecb-credential-card__body\">\n @if (metaRows().length || progressRows().length) {\n <div class=\"pecb-credential-card__meta\">\n @for (row of metaRows(); track row.label) {\n <div class=\"pecb-credential-card__meta-row\">\n <span>{{ row.label }}</span>\n <b>{{ row.value }}</b>\n </div>\n }\n\n @for (progress of progressRows(); track progress.id) {\n <div class=\"pecb-credential-card__progress\">\n <div class=\"pecb-credential-card__progress-head\">\n <span>{{ progress.label }}</span>\n <b>{{ progress.valueText }}</b>\n </div>\n <div class=\"pecb-credential-card__progress-bar\">\n <div class=\"pecb-credential-card__bar\">\n <i\n [class]=\"'pecb-credential-card__bar-fill ' + barToneClass(progress.percent)\"\n [style.width.%]=\"clampPercent(progress.percent)\"\n ></i>\n </div>\n <button\n type=\"button\"\n class=\"pecb-credential-card__plus\"\n [disabled]=\"progress.actionDisabled\"\n [attr.aria-label]=\"progress.actionAriaLabel || progress.label\"\n (click)=\"progressAction.emit(progress.id)\"\n [innerHTML]=\"plusIcon\"\n ></button>\n </div>\n </div>\n }\n </div>\n }\n\n @if (noticeText()) {\n <div [class]=\"'pecb-credential-card__notice pecb-credential-card__notice--' + noticeTone()\">\n <p [innerHTML]=\"safeNotice()\"></p>\n </div>\n }\n\n @if (actions().length || linkLabel() || footnote()) {\n <div class=\"pecb-credential-card__footer\">\n @if (actions().length) {\n <div [class]=\"'pecb-credential-card__actions pecb-credential-card__actions--' + actionsLayout()\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n [class]=\"actionClass(action)\"\n [disabled]=\"!!action.disabled\"\n (click)=\"actionClick.emit(action.id)\"\n >\n @if (action.icon) {\n <span class=\"pecb-credential-card__btn-icon\" aria-hidden=\"true\" [innerHTML]=\"safeSvg(action.icon)\"></span>\n }\n {{ action.label }}\n </button>\n }\n </div>\n }\n\n @if (linkLabel()) {\n <button type=\"button\" class=\"pecb-credential-card__link\" (click)=\"linkClick.emit()\">\n {{ linkLabel() }}\n </button>\n }\n\n @if (footnote()) {\n <span class=\"pecb-credential-card__footnote\">{{ footnote() }}</span>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;height:100%}.pecb-credential-card{display:flex;flex-direction:column;height:100%;background-color:#fff;border:1px solid #ececec;border-radius:12px;overflow:hidden;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-credential-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:18px 18px 16px;border-bottom:1px solid #ececec}.pecb-credential-card__icon{order:-2;margin-right:auto;flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;line-height:0}.pecb-credential-card__icon--success{background-color:#57bc571a;color:#57bc57}.pecb-credential-card__icon--warning{background-color:#ff9c4a1a;color:#ff9c4a}.pecb-credential-card__icon--error{background-color:#ff606f1a;color:#ff606f}.pecb-credential-card__icon--neutral{background-color:#ececec;color:#616161}.pecb-credential-card__pill{order:-1;flex:none;margin-left:auto;margin-top:2px}.pecb-credential-card__title{order:1;flex:1 1 100%;min-width:0;margin:0;font-size:16px;font-weight:700;line-height:1.3;color:#212427;overflow-wrap:anywhere}.pecb-credential-card__body{display:flex;flex-direction:column;gap:16px;flex:1;padding:18px}.pecb-credential-card__meta{display:flex;flex-direction:column;gap:12px}.pecb-credential-card__meta-row,.pecb-credential-card__progress-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#616161}.pecb-credential-card__meta-row span,.pecb-credential-card__progress-head span{min-width:0;white-space:nowrap}.pecb-credential-card__meta-row b,.pecb-credential-card__progress-head b{color:#212427;font-weight:600;white-space:nowrap}.pecb-credential-card__meta-row{font-size:13px}.pecb-credential-card__progress{display:flex;flex-direction:column;gap:6px}.pecb-credential-card__progress-head{font-size:13px}.pecb-credential-card__progress-bar{display:flex;align-items:center;gap:8px}.pecb-credential-card__bar{flex:1;min-width:0;height:6px;border-radius:9999px;background-color:#ececec;overflow:hidden}.pecb-credential-card__bar-fill{display:block;height:100%;border-radius:9999px;transform-origin:left;animation:pecb-credential-card-bar-fill 1s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){.pecb-credential-card__bar-fill{animation:none}}.pecb-credential-card__bar-fill--success{background-color:#57bc57}.pecb-credential-card__bar-fill--warning{background-color:#ff9c4a}.pecb-credential-card__bar-fill--danger{background-color:#ff606f}.pecb-credential-card__plus{flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background-color:#ececec;color:#616161;display:flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pecb-credential-card__plus:hover:not(:disabled){background-color:#616161;color:#fff}.pecb-credential-card__plus:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.pecb-credential-card__notice{border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.5}.pecb-credential-card__notice p{margin:0}.pecb-credential-card__notice b{font-weight:700}.pecb-credential-card__notice--error{background-color:#fdecea;color:#ff606f}.pecb-credential-card__notice--warning{background-color:#fff4e5;color:#ff9c4a}.pecb-credential-card__footer{display:flex;flex-direction:column;gap:12px;margin-top:auto}.pecb-credential-card__actions{display:flex;gap:6px}.pecb-credential-card__actions--row{flex-direction:row;flex-wrap:nowrap}.pecb-credential-card__actions--stack{flex-direction:column}.pecb-credential-card__btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:8px;border-radius:8px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.pecb-credential-card__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.pecb-credential-card__btn--primary{background-color:#212427;color:#fff}.pecb-credential-card__btn--primary:hover:not(:disabled){background-color:#616161}.pecb-credential-card__btn--ghost{background-color:#fff;color:#616161;border-color:#c2c2c2}.pecb-credential-card__btn--ghost:hover:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-credential-card__btn--accent{background-color:#a11e29;border-color:#a11e29;color:#fff}.pecb-credential-card__btn--accent:hover:not(:disabled){background-color:#671018;border-color:#671018}.pecb-credential-card__btn--success{background-color:#57bc57;border-color:#57bc57;color:#fff}.pecb-credential-card__btn--success:hover:not(:disabled){background-color:green;border-color:green}.pecb-credential-card__btn-icon{display:flex;line-height:0;flex-shrink:0}.pecb-credential-card__link{align-self:center;border:0;background:none;padding:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#a11e29;cursor:pointer}.pecb-credential-card__link:hover{text-decoration:underline}.pecb-credential-card__footnote{align-self:center;font-size:13px;color:#919191;text-align:center}@keyframes pecb-credential-card-bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"] }]
|
|
8594
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], metaRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaRows", required: false }] }], progressRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressRows", required: false }] }], noticeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noticeText", required: false }] }], noticeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "noticeTone", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsLayout", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], footnote: [{ type: i0.Input, args: [{ isSignal: true, alias: "footnote", required: false }] }], progressAction: [{ type: i0.Output, args: ["progressAction"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
|
|
8579
8595
|
|
|
8580
8596
|
/**
|
|
8581
8597
|
* Preview card — an image/media panel beside a titled summary with actions.
|
|
@@ -9682,13 +9698,13 @@ class TagSelectComponent {
|
|
|
9682
9698
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TagSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9683
9699
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TagSelectComponent, isStandalone: true, selector: "pecb-tag-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
|
|
9684
9700
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagSelectComponent), multi: true }
|
|
9685
|
-
], ngImport: i0, template: "<div class=\"pecb-tag-select\">\n <button\n type=\"button\"\n class=\"pecb-tag-select__trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggleMenu()\"\n >\n <span class=\"pecb-tag-select__tags\">\n @if (selectedOptions().length) {\n @for (option of selectedOptions(); track option.value) {\n <span class=\"pecb-tag-select__tag\">\n {{ option.label }}\n <span\n class=\"pecb-tag-select__remove\"\n role=\"button\"\n [attr.aria-label]=\"removeAriaLabel() + ' ' + option.label\"\n (click)=\"removeValue(option.value, $event)\"\n >\u00D7</span>\n </span>\n }\n } @else {\n <span class=\"pecb-tag-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n </button>\n\n @if (open()) {\n <div class=\"pecb-tag-select__menu\">\n <div class=\"pecb-tag-select__search\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n <input type=\"text\" [placeholder]=\"searchPlaceholder()\" [value]=\"query()\" (input)=\"onSearch($event)\" />\n </div>\n <div class=\"pecb-tag-select__list\" role=\"listbox\" aria-multiselectable=\"true\">\n @for (option of filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"pecb-tag-select__option\"\n [class.pecb-tag-select__option--on]=\"isSelected(option)\"\n [disabled]=\"!!option.disabled\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n {{ option.label }}\n @if (isSelected(option)) {\n <svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n }\n </button>\n }\n @if (!filteredOptions().length) {\n <span class=\"pecb-tag-select__empty\">{{ noResultsText() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".pecb-tag-select{position:relative;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-tag-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:46px;padding:8px 14px;border:0;background:transparent;cursor:pointer;color:#616161;text-align:left;font-family:inherit}.pecb-tag-select__trigger:disabled{cursor:not-allowed;opacity:.6}.pecb-tag-select__tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}.pecb-tag-select__tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:6px;background:#f4f4f4;color:#212427;font-size:13px;font-weight:500}.pecb-tag-select__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:#616161;font-size:14px;line-height:1;cursor:pointer}.pecb-tag-select__remove:hover{background:#c2c2c2;color:#fff}.pecb-tag-select__placeholder{color:#c2c2c2;font-size:14px}.pecb-tag-select__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 12px 32px -8px #1019282e;overflow:hidden}.pecb-tag-select__search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #ececec;color:#919191}.pecb-tag-select__search input{flex:1;border:0;outline:none;font-family:inherit;font-size:13px;color:#212427;background:transparent}.pecb-tag-select__search input::placeholder{color:#c2c2c2}.pecb-tag-select__list{max-height:220px;overflow-y:auto;padding:6px}.pecb-tag-select__option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;font-family:inherit;font-size:13px;color:#212427;cursor:pointer;text-align:left}.pecb-tag-select__option:hover:not(:disabled){background:#f4f4f4}.pecb-tag-select__option--on{font-weight:500}.pecb-tag-select__option--on svg{color:#212427;flex-shrink:0}.pecb-tag-select__option:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-tag-select__empty{display:block;padding:12px 10px;font-size:13px;color:#919191}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9701
|
+
], ngImport: i0, template: "<div class=\"pecb-tag-select\">\n <button\n type=\"button\"\n class=\"pecb-tag-select__trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggleMenu()\"\n >\n <span class=\"pecb-tag-select__tags\">\n @if (selectedOptions().length) {\n @for (option of selectedOptions(); track option.value) {\n <span class=\"pecb-tag-select__tag\">\n {{ option.label }}\n <span\n class=\"pecb-tag-select__remove\"\n role=\"button\"\n [attr.aria-label]=\"removeAriaLabel() + ' ' + option.label\"\n (click)=\"removeValue(option.value, $event)\"\n >\u00D7</span>\n </span>\n }\n } @else {\n <span class=\"pecb-tag-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n </button>\n\n @if (open()) {\n <div class=\"pecb-tag-select__menu\">\n <div class=\"pecb-tag-select__search\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n <input type=\"text\" [placeholder]=\"searchPlaceholder()\" [value]=\"query()\" (input)=\"onSearch($event)\" />\n </div>\n <div class=\"pecb-tag-select__list\" role=\"listbox\" aria-multiselectable=\"true\">\n @for (option of filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"pecb-tag-select__option\"\n [class.pecb-tag-select__option--on]=\"isSelected(option)\"\n [disabled]=\"!!option.disabled\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n {{ option.label }}\n @if (isSelected(option)) {\n <svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n }\n </button>\n }\n @if (!filteredOptions().length) {\n <span class=\"pecb-tag-select__empty\">{{ noResultsText() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.pecb-tag-select{position:relative;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-tag-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:46px;padding:8px 14px;border:0;background:transparent;cursor:pointer;color:#616161;text-align:left;font-family:inherit}.pecb-tag-select__trigger:disabled{cursor:not-allowed;opacity:.6}.pecb-tag-select__tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}.pecb-tag-select__tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:6px;background:#f4f4f4;color:#212427;font-size:13px;font-weight:500}.pecb-tag-select__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:#616161;font-size:14px;line-height:1;cursor:pointer}.pecb-tag-select__remove:hover{background:#c2c2c2;color:#fff}.pecb-tag-select__placeholder{color:#c2c2c2;font-size:14px}.pecb-tag-select__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 12px 32px -8px #1019282e;overflow:hidden}.pecb-tag-select__search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #ececec;color:#919191}.pecb-tag-select__search input{flex:1;border:0;outline:none;font-family:inherit;font-size:13px;color:#212427;background:transparent}.pecb-tag-select__search input::placeholder{color:#c2c2c2}.pecb-tag-select__list{max-height:220px;overflow-y:auto;padding:6px}.pecb-tag-select__option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;font-family:inherit;font-size:13px;color:#212427;cursor:pointer;text-align:left}.pecb-tag-select__option:hover:not(:disabled){background:#f4f4f4}.pecb-tag-select__option--on{font-weight:500}.pecb-tag-select__option--on svg{color:#212427;flex-shrink:0}.pecb-tag-select__option:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-tag-select__empty{display:block;padding:12px 10px;font-size:13px;color:#919191}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9686
9702
|
}
|
|
9687
9703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TagSelectComponent, decorators: [{
|
|
9688
9704
|
type: Component,
|
|
9689
9705
|
args: [{ selector: 'pecb-tag-select', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
9690
9706
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagSelectComponent), multi: true }
|
|
9691
|
-
], template: "<div class=\"pecb-tag-select\">\n <button\n type=\"button\"\n class=\"pecb-tag-select__trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggleMenu()\"\n >\n <span class=\"pecb-tag-select__tags\">\n @if (selectedOptions().length) {\n @for (option of selectedOptions(); track option.value) {\n <span class=\"pecb-tag-select__tag\">\n {{ option.label }}\n <span\n class=\"pecb-tag-select__remove\"\n role=\"button\"\n [attr.aria-label]=\"removeAriaLabel() + ' ' + option.label\"\n (click)=\"removeValue(option.value, $event)\"\n >\u00D7</span>\n </span>\n }\n } @else {\n <span class=\"pecb-tag-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n </button>\n\n @if (open()) {\n <div class=\"pecb-tag-select__menu\">\n <div class=\"pecb-tag-select__search\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n <input type=\"text\" [placeholder]=\"searchPlaceholder()\" [value]=\"query()\" (input)=\"onSearch($event)\" />\n </div>\n <div class=\"pecb-tag-select__list\" role=\"listbox\" aria-multiselectable=\"true\">\n @for (option of filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"pecb-tag-select__option\"\n [class.pecb-tag-select__option--on]=\"isSelected(option)\"\n [disabled]=\"!!option.disabled\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n {{ option.label }}\n @if (isSelected(option)) {\n <svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n }\n </button>\n }\n @if (!filteredOptions().length) {\n <span class=\"pecb-tag-select__empty\">{{ noResultsText() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".pecb-tag-select{position:relative;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-tag-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:46px;padding:8px 14px;border:0;background:transparent;cursor:pointer;color:#616161;text-align:left;font-family:inherit}.pecb-tag-select__trigger:disabled{cursor:not-allowed;opacity:.6}.pecb-tag-select__tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}.pecb-tag-select__tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:6px;background:#f4f4f4;color:#212427;font-size:13px;font-weight:500}.pecb-tag-select__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:#616161;font-size:14px;line-height:1;cursor:pointer}.pecb-tag-select__remove:hover{background:#c2c2c2;color:#fff}.pecb-tag-select__placeholder{color:#c2c2c2;font-size:14px}.pecb-tag-select__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 12px 32px -8px #1019282e;overflow:hidden}.pecb-tag-select__search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #ececec;color:#919191}.pecb-tag-select__search input{flex:1;border:0;outline:none;font-family:inherit;font-size:13px;color:#212427;background:transparent}.pecb-tag-select__search input::placeholder{color:#c2c2c2}.pecb-tag-select__list{max-height:220px;overflow-y:auto;padding:6px}.pecb-tag-select__option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;font-family:inherit;font-size:13px;color:#212427;cursor:pointer;text-align:left}.pecb-tag-select__option:hover:not(:disabled){background:#f4f4f4}.pecb-tag-select__option--on{font-weight:500}.pecb-tag-select__option--on svg{color:#212427;flex-shrink:0}.pecb-tag-select__option:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-tag-select__empty{display:block;padding:12px 10px;font-size:13px;color:#919191}\n"] }]
|
|
9707
|
+
], template: "<div class=\"pecb-tag-select\">\n <button\n type=\"button\"\n class=\"pecb-tag-select__trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggleMenu()\"\n >\n <span class=\"pecb-tag-select__tags\">\n @if (selectedOptions().length) {\n @for (option of selectedOptions(); track option.value) {\n <span class=\"pecb-tag-select__tag\">\n {{ option.label }}\n <span\n class=\"pecb-tag-select__remove\"\n role=\"button\"\n [attr.aria-label]=\"removeAriaLabel() + ' ' + option.label\"\n (click)=\"removeValue(option.value, $event)\"\n >\u00D7</span>\n </span>\n }\n } @else {\n <span class=\"pecb-tag-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n </button>\n\n @if (open()) {\n <div class=\"pecb-tag-select__menu\">\n <div class=\"pecb-tag-select__search\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n <input type=\"text\" [placeholder]=\"searchPlaceholder()\" [value]=\"query()\" (input)=\"onSearch($event)\" />\n </div>\n <div class=\"pecb-tag-select__list\" role=\"listbox\" aria-multiselectable=\"true\">\n @for (option of filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"pecb-tag-select__option\"\n [class.pecb-tag-select__option--on]=\"isSelected(option)\"\n [disabled]=\"!!option.disabled\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n (click)=\"toggleOption(option)\"\n >\n {{ option.label }}\n @if (isSelected(option)) {\n <svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n }\n </button>\n }\n @if (!filteredOptions().length) {\n <span class=\"pecb-tag-select__empty\">{{ noResultsText() }}</span>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.pecb-tag-select{position:relative;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-tag-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:46px;padding:8px 14px;border:0;background:transparent;cursor:pointer;color:#616161;text-align:left;font-family:inherit}.pecb-tag-select__trigger:disabled{cursor:not-allowed;opacity:.6}.pecb-tag-select__tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}.pecb-tag-select__tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:6px;background:#f4f4f4;color:#212427;font-size:13px;font-weight:500}.pecb-tag-select__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:#616161;font-size:14px;line-height:1;cursor:pointer}.pecb-tag-select__remove:hover{background:#c2c2c2;color:#fff}.pecb-tag-select__placeholder{color:#c2c2c2;font-size:14px}.pecb-tag-select__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 12px 32px -8px #1019282e;overflow:hidden}.pecb-tag-select__search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #ececec;color:#919191}.pecb-tag-select__search input{flex:1;border:0;outline:none;font-family:inherit;font-size:13px;color:#212427;background:transparent}.pecb-tag-select__search input::placeholder{color:#c2c2c2}.pecb-tag-select__list{max-height:220px;overflow-y:auto;padding:6px}.pecb-tag-select__option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;font-family:inherit;font-size:13px;color:#212427;cursor:pointer;text-align:left}.pecb-tag-select__option:hover:not(:disabled){background:#f4f4f4}.pecb-tag-select__option--on{font-weight:500}.pecb-tag-select__option--on svg{color:#212427;flex-shrink:0}.pecb-tag-select__option:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-tag-select__empty{display:block;padding:12px 10px;font-size:13px;color:#919191}\n"] }]
|
|
9692
9708
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onDocumentClick: [{
|
|
9693
9709
|
type: HostListener,
|
|
9694
9710
|
args: ['document:click', ['$event']]
|
|
@@ -9722,11 +9738,11 @@ class FormSectionCardComponent {
|
|
|
9722
9738
|
this.expanded.set(!this.expanded());
|
|
9723
9739
|
}
|
|
9724
9740
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormSectionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormSectionCardComponent, isStandalone: true, selector: "pecb-form-section-card", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", removed: "removed" }, ngImport: i0, template: "<div class=\"pecb-form-section-card\">\n <div class=\"pecb-form-section-card__head\" (click)=\"toggle()\">\n <span class=\"pecb-form-section-card__num\">{{ index() }}</span>\n <div class=\"pecb-form-section-card__titles\">\n <b>{{ title() }}</b>\n @if (subtitle()) {\n <small>{{ subtitle() }}</small>\n }\n </div>\n <div class=\"pecb-form-section-card__buttons\">\n @if (removable()) {\n <button\n type=\"button\"\n class=\"pecb-form-section-card__icon-btn\"\n [attr.aria-label]=\"removeAriaLabel()\"\n (click)=\"$event.stopPropagation(); removed.emit()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"
|
|
9741
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormSectionCardComponent, isStandalone: true, selector: "pecb-form-section-card", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", removed: "removed" }, ngImport: i0, template: "<div class=\"pecb-form-section-card\">\n <div class=\"pecb-form-section-card__head\" (click)=\"toggle()\">\n <span class=\"pecb-form-section-card__num\">{{ index() }}</span>\n <div class=\"pecb-form-section-card__titles\">\n <b>{{ title() }}</b>\n @if (subtitle()) {\n <small>{{ subtitle() }}</small>\n }\n </div>\n <div class=\"pecb-form-section-card__buttons\">\n @if (removable()) {\n <button\n type=\"button\"\n class=\"pecb-form-section-card__icon-btn\"\n [attr.aria-label]=\"removeAriaLabel()\"\n (click)=\"$event.stopPropagation(); removed.emit()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6.5h18M9 6.5V4.25c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25V6.5M5.5 6.5H18.5v12.25A2.25 2.25 0 0 1 16.25 21h-8.5a2.25 2.25 0 0 1-2.25-2.25V6.5z\"></path></svg>\n </button>\n }\n @if (collapsible()) {\n <button\n type=\"button\"\n class=\"pecb-form-section-card__icon-btn\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"$event.stopPropagation(); toggle()\"\n >\n <svg class=\"pecb-form-section-card__chevron\" [class.pecb-form-section-card__chevron--open]=\"expanded()\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n </button>\n }\n </div>\n </div>\n @if (expanded()) {\n <div class=\"pecb-form-section-card__body\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [".pecb-form-section-card{background:#fff;border:1px solid #ececec;border-radius:12px;overflow:visible;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-form-section-card__head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}.pecb-form-section-card__num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#212427;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.pecb-form-section-card__titles{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.pecb-form-section-card__titles b{font-size:14px;font-weight:700;color:#212427;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-form-section-card__titles small{font-size:12px;color:#919191}.pecb-form-section-card__buttons{display:flex;gap:8px;flex-shrink:0}.pecb-form-section-card__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #ececec;border-radius:8px;background:#fff;color:#616161;cursor:pointer;transition:background-color .12s ease}.pecb-form-section-card__icon-btn:hover{background:#f4f4f4}.pecb-form-section-card__chevron{transition:transform .2s ease}.pecb-form-section-card__chevron--open{transform:rotate(180deg)}.pecb-form-section-card__body{padding:18px;border-top:1px solid #ececec}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9726
9742
|
}
|
|
9727
9743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormSectionCardComponent, decorators: [{
|
|
9728
9744
|
type: Component,
|
|
9729
|
-
args: [{ selector: 'pecb-form-section-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-form-section-card\">\n <div class=\"pecb-form-section-card__head\" (click)=\"toggle()\">\n <span class=\"pecb-form-section-card__num\">{{ index() }}</span>\n <div class=\"pecb-form-section-card__titles\">\n <b>{{ title() }}</b>\n @if (subtitle()) {\n <small>{{ subtitle() }}</small>\n }\n </div>\n <div class=\"pecb-form-section-card__buttons\">\n @if (removable()) {\n <button\n type=\"button\"\n class=\"pecb-form-section-card__icon-btn\"\n [attr.aria-label]=\"removeAriaLabel()\"\n (click)=\"$event.stopPropagation(); removed.emit()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"
|
|
9745
|
+
args: [{ selector: 'pecb-form-section-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-form-section-card\">\n <div class=\"pecb-form-section-card__head\" (click)=\"toggle()\">\n <span class=\"pecb-form-section-card__num\">{{ index() }}</span>\n <div class=\"pecb-form-section-card__titles\">\n <b>{{ title() }}</b>\n @if (subtitle()) {\n <small>{{ subtitle() }}</small>\n }\n </div>\n <div class=\"pecb-form-section-card__buttons\">\n @if (removable()) {\n <button\n type=\"button\"\n class=\"pecb-form-section-card__icon-btn\"\n [attr.aria-label]=\"removeAriaLabel()\"\n (click)=\"$event.stopPropagation(); removed.emit()\"\n >\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6.5h18M9 6.5V4.25c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25V6.5M5.5 6.5H18.5v12.25A2.25 2.25 0 0 1 16.25 21h-8.5a2.25 2.25 0 0 1-2.25-2.25V6.5z\"></path></svg>\n </button>\n }\n @if (collapsible()) {\n <button\n type=\"button\"\n class=\"pecb-form-section-card__icon-btn\"\n [attr.aria-label]=\"toggleAriaLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"$event.stopPropagation(); toggle()\"\n >\n <svg class=\"pecb-form-section-card__chevron\" [class.pecb-form-section-card__chevron--open]=\"expanded()\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n </button>\n }\n </div>\n </div>\n @if (expanded()) {\n <div class=\"pecb-form-section-card__body\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [".pecb-form-section-card{background:#fff;border:1px solid #ececec;border-radius:12px;overflow:visible;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-form-section-card__head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}.pecb-form-section-card__num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#212427;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.pecb-form-section-card__titles{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.pecb-form-section-card__titles b{font-size:14px;font-weight:700;color:#212427;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-form-section-card__titles small{font-size:12px;color:#919191}.pecb-form-section-card__buttons{display:flex;gap:8px;flex-shrink:0}.pecb-form-section-card__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #ececec;border-radius:8px;background:#fff;color:#616161;cursor:pointer;transition:background-color .12s ease}.pecb-form-section-card__icon-btn:hover{background:#f4f4f4}.pecb-form-section-card__chevron{transition:transform .2s ease}.pecb-form-section-card__chevron--open{transform:rotate(180deg)}.pecb-form-section-card__body{padding:18px;border-top:1px solid #ececec}\n"] }]
|
|
9730
9746
|
}], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], toggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAriaLabel", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
9731
9747
|
|
|
9732
9748
|
// ─── FloatButtonItemComponent ─────────────────────────────────────────────────
|
|
@@ -10170,6 +10186,14 @@ class FullscreenModalComponent {
|
|
|
10170
10186
|
this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
10171
10187
|
/** Title rendered in the modal header */
|
|
10172
10188
|
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
10189
|
+
/**
|
|
10190
|
+
* Width of the modal panel — any CSS length (`'640px'`, `'60%'`, `'clamp(…)'`).
|
|
10191
|
+
* The panel still shrinks to fit the backdrop's 28px/30px inset, so this is an
|
|
10192
|
+
* upper bound in practice. Use it for compact dialogs instead of overriding
|
|
10193
|
+
* `.pecb-fullscreen-modal__panel` with `!important`.
|
|
10194
|
+
* @default '100%'
|
|
10195
|
+
*/
|
|
10196
|
+
this.panelWidth = input('100%', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
|
|
10173
10197
|
/** Show or hide the built-in close (×) button */
|
|
10174
10198
|
this.showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
|
|
10175
10199
|
/** Accessible label for the close (×) button. Override to localize. */
|
|
@@ -10262,12 +10286,12 @@ class FullscreenModalComponent {
|
|
|
10262
10286
|
}
|
|
10263
10287
|
}
|
|
10264
10288
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FullscreenModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FullscreenModalComponent, isStandalone: true, selector: "pecb-fullscreen-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isOpen()) {\n<div\n [id]=\"id()\"\n class=\"pecb-fullscreen-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"resolvedLabelledBy\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (click)=\"onBackdropClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n <div\n #modalPanel\n class=\"pecb-fullscreen-modal__panel\"\n tabindex=\"-1\"\n >\n\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__header\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"pecb-fullscreen-modal__title\">{{ title() }}</h2>\n }\n <ng-content select=\"[pecbFullscreenModalHeader]\"></ng-content>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"pecb-fullscreen-modal__close-btn\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n\n <!-- \u2500\u2500 Divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__divider\" aria-hidden=\"true\"></div>\n\n <!-- \u2500\u2500 Body (scrollable) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__body\">\n <ng-content select=\"[pecbFullscreenModalContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n\n <!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__footer\">\n <ng-content select=\"[pecbFullscreenModalFooter]\"></ng-content>\n </div>\n\n </div>\n</div>\n}\n", styles: [".pecb-fullscreen-modal{position:fixed;inset:0;z-index:var(--pecb-z-modal, 1050);background-color:#00000080;display:flex;align-items:center;justify-content:center;padding:28px 30px;box-sizing:border-box;animation:pecb-fm-fade-in .15s ease-in-out forwards}.pecb-fullscreen-modal__panel{position:relative;width:100%;max-height:100%;background-color:#fff;border-radius:12px;box-shadow:0 8px 24px -4px #1018281f,0 2px 8px -2px #1018280f;display:flex;flex-direction:column;overflow:hidden;animation:pecb-fm-scale-in .25s ease-in-out forwards;outline:none}.pecb-fullscreen-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px;flex-shrink:0;min-height:0}.pecb-fullscreen-modal__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:20px;font-weight:700;color:#313131;line-height:1.2;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-fullscreen-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;color:#919191;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-fullscreen-modal__close-btn:focus{outline:none}.pecb-fullscreen-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-fullscreen-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-fullscreen-modal__divider{height:1px;background-color:#ececec;flex-shrink:0;margin:0 24px}.pecb-fullscreen-modal__body{flex:1;min-height:0;overflow-y:auto;padding:16px 24px}.pecb-fullscreen-modal__body::-webkit-scrollbar{width:8px;height:8px}.pecb-fullscreen-modal__body::-webkit-scrollbar-track{background:#ececec}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-fullscreen-modal__footer{display:flex;align-items:center;gap:12px;padding:16px 24px 24px;flex-shrink:0}@keyframes pecb-fm-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pecb-fm-scale-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media (max-width: 767px){.pecb-fullscreen-modal{padding:12px}.pecb-fullscreen-modal__header{padding:16px 16px 12px}.pecb-fullscreen-modal__divider{margin:0 16px}.pecb-fullscreen-modal__body{padding:12px 16px}.pecb-fullscreen-modal__footer{flex-wrap:wrap;padding:12px 16px 16px}}@media (prefers-reduced-motion: reduce){.pecb-fullscreen-modal,.pecb-fullscreen-modal__panel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FullscreenModalComponent, isStandalone: true, selector: "pecb-fullscreen-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isOpen()) {\n<div\n [id]=\"id()\"\n class=\"pecb-fullscreen-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"resolvedLabelledBy\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (click)=\"onBackdropClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n <div\n #modalPanel\n class=\"pecb-fullscreen-modal__panel\"\n [style.width]=\"panelWidth()\"\n tabindex=\"-1\"\n >\n\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__header\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"pecb-fullscreen-modal__title\">{{ title() }}</h2>\n }\n <ng-content select=\"[pecbFullscreenModalHeader]\"></ng-content>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"pecb-fullscreen-modal__close-btn\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n\n <!-- \u2500\u2500 Divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__divider\" aria-hidden=\"true\"></div>\n\n <!-- \u2500\u2500 Body (scrollable) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__body\">\n <ng-content select=\"[pecbFullscreenModalContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n\n <!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__footer\">\n <ng-content select=\"[pecbFullscreenModalFooter]\"></ng-content>\n </div>\n\n </div>\n</div>\n}\n", styles: [".pecb-fullscreen-modal{position:fixed;inset:0;z-index:var(--pecb-z-modal, 1050);background-color:#00000080;display:flex;align-items:center;justify-content:center;padding:28px 30px;box-sizing:border-box;animation:pecb-fm-fade-in .15s ease-in-out forwards}.pecb-fullscreen-modal__panel{position:relative;width:100%;max-width:100%;max-height:100%;background-color:#fff;border-radius:12px;box-shadow:0 8px 24px -4px #1018281f,0 2px 8px -2px #1018280f;display:flex;flex-direction:column;overflow:hidden;animation:pecb-fm-scale-in .25s ease-in-out forwards;outline:none}.pecb-fullscreen-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px;flex-shrink:0;min-height:0}.pecb-fullscreen-modal__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:20px;font-weight:700;color:#313131;line-height:1.2;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-fullscreen-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;color:#919191;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-fullscreen-modal__close-btn:focus{outline:none}.pecb-fullscreen-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-fullscreen-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-fullscreen-modal__divider{height:1px;background-color:#ececec;flex-shrink:0;margin:0 24px}.pecb-fullscreen-modal__body{flex:1;min-height:0;overflow-y:auto;padding:16px 24px}.pecb-fullscreen-modal__body::-webkit-scrollbar{width:8px;height:8px}.pecb-fullscreen-modal__body::-webkit-scrollbar-track{background:#ececec}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-fullscreen-modal__footer{display:flex;align-items:center;gap:12px;padding:16px 24px 24px;flex-shrink:0}@keyframes pecb-fm-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pecb-fm-scale-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media (max-width: 767px){.pecb-fullscreen-modal{padding:12px}.pecb-fullscreen-modal__header{padding:16px 16px 12px}.pecb-fullscreen-modal__divider{margin:0 16px}.pecb-fullscreen-modal__body{padding:12px 16px}.pecb-fullscreen-modal__footer{flex-wrap:wrap;padding:12px 16px 16px}}@media (prefers-reduced-motion: reduce){.pecb-fullscreen-modal,.pecb-fullscreen-modal__panel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10266
10290
|
}
|
|
10267
10291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FullscreenModalComponent, decorators: [{
|
|
10268
10292
|
type: Component,
|
|
10269
|
-
args: [{ selector: 'pecb-fullscreen-modal', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n<div\n [id]=\"id()\"\n class=\"pecb-fullscreen-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"resolvedLabelledBy\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (click)=\"onBackdropClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n <div\n #modalPanel\n class=\"pecb-fullscreen-modal__panel\"\n tabindex=\"-1\"\n >\n\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__header\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"pecb-fullscreen-modal__title\">{{ title() }}</h2>\n }\n <ng-content select=\"[pecbFullscreenModalHeader]\"></ng-content>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"pecb-fullscreen-modal__close-btn\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n\n <!-- \u2500\u2500 Divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__divider\" aria-hidden=\"true\"></div>\n\n <!-- \u2500\u2500 Body (scrollable) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__body\">\n <ng-content select=\"[pecbFullscreenModalContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n\n <!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__footer\">\n <ng-content select=\"[pecbFullscreenModalFooter]\"></ng-content>\n </div>\n\n </div>\n</div>\n}\n", styles: [".pecb-fullscreen-modal{position:fixed;inset:0;z-index:var(--pecb-z-modal, 1050);background-color:#00000080;display:flex;align-items:center;justify-content:center;padding:28px 30px;box-sizing:border-box;animation:pecb-fm-fade-in .15s ease-in-out forwards}.pecb-fullscreen-modal__panel{position:relative;width:100%;max-height:100%;background-color:#fff;border-radius:12px;box-shadow:0 8px 24px -4px #1018281f,0 2px 8px -2px #1018280f;display:flex;flex-direction:column;overflow:hidden;animation:pecb-fm-scale-in .25s ease-in-out forwards;outline:none}.pecb-fullscreen-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px;flex-shrink:0;min-height:0}.pecb-fullscreen-modal__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:20px;font-weight:700;color:#313131;line-height:1.2;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-fullscreen-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;color:#919191;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-fullscreen-modal__close-btn:focus{outline:none}.pecb-fullscreen-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-fullscreen-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-fullscreen-modal__divider{height:1px;background-color:#ececec;flex-shrink:0;margin:0 24px}.pecb-fullscreen-modal__body{flex:1;min-height:0;overflow-y:auto;padding:16px 24px}.pecb-fullscreen-modal__body::-webkit-scrollbar{width:8px;height:8px}.pecb-fullscreen-modal__body::-webkit-scrollbar-track{background:#ececec}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-fullscreen-modal__footer{display:flex;align-items:center;gap:12px;padding:16px 24px 24px;flex-shrink:0}@keyframes pecb-fm-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pecb-fm-scale-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media (max-width: 767px){.pecb-fullscreen-modal{padding:12px}.pecb-fullscreen-modal__header{padding:16px 16px 12px}.pecb-fullscreen-modal__divider{margin:0 16px}.pecb-fullscreen-modal__body{padding:12px 16px}.pecb-fullscreen-modal__footer{flex-wrap:wrap;padding:12px 16px 16px}}@media (prefers-reduced-motion: reduce){.pecb-fullscreen-modal,.pecb-fullscreen-modal__panel{animation:none}}\n"] }]
|
|
10270
|
-
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], modalPanel: [{ type: i0.ViewChild, args: ['modalPanel', { isSignal: true }] }] } });
|
|
10293
|
+
args: [{ selector: 'pecb-fullscreen-modal', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n<div\n [id]=\"id()\"\n class=\"pecb-fullscreen-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"resolvedLabelledBy\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (click)=\"onBackdropClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n <div\n #modalPanel\n class=\"pecb-fullscreen-modal__panel\"\n [style.width]=\"panelWidth()\"\n tabindex=\"-1\"\n >\n\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__header\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"pecb-fullscreen-modal__title\">{{ title() }}</h2>\n }\n <ng-content select=\"[pecbFullscreenModalHeader]\"></ng-content>\n\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"pecb-fullscreen-modal__close-btn\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n\n <!-- \u2500\u2500 Divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__divider\" aria-hidden=\"true\"></div>\n\n <!-- \u2500\u2500 Body (scrollable) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__body\">\n <ng-content select=\"[pecbFullscreenModalContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n\n <!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"pecb-fullscreen-modal__footer\">\n <ng-content select=\"[pecbFullscreenModalFooter]\"></ng-content>\n </div>\n\n </div>\n</div>\n}\n", styles: [".pecb-fullscreen-modal{position:fixed;inset:0;z-index:var(--pecb-z-modal, 1050);background-color:#00000080;display:flex;align-items:center;justify-content:center;padding:28px 30px;box-sizing:border-box;animation:pecb-fm-fade-in .15s ease-in-out forwards}.pecb-fullscreen-modal__panel{position:relative;width:100%;max-width:100%;max-height:100%;background-color:#fff;border-radius:12px;box-shadow:0 8px 24px -4px #1018281f,0 2px 8px -2px #1018280f;display:flex;flex-direction:column;overflow:hidden;animation:pecb-fm-scale-in .25s ease-in-out forwards;outline:none}.pecb-fullscreen-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px;flex-shrink:0;min-height:0}.pecb-fullscreen-modal__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:20px;font-weight:700;color:#313131;line-height:1.2;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pecb-fullscreen-modal__close-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;color:#919191;border-radius:6px;transition-property:color,background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-fullscreen-modal__close-btn:focus{outline:none}.pecb-fullscreen-modal__close-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-fullscreen-modal__close-btn:hover{color:#313131;background-color:#ececec}.pecb-fullscreen-modal__divider{height:1px;background-color:#ececec;flex-shrink:0;margin:0 24px}.pecb-fullscreen-modal__body{flex:1;min-height:0;overflow-y:auto;padding:16px 24px}.pecb-fullscreen-modal__body::-webkit-scrollbar{width:8px;height:8px}.pecb-fullscreen-modal__body::-webkit-scrollbar-track{background:#ececec}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:12px}.pecb-fullscreen-modal__body::-webkit-scrollbar-thumb:hover{background:#a9a9a9}.pecb-fullscreen-modal__footer{display:flex;align-items:center;gap:12px;padding:16px 24px 24px;flex-shrink:0}@keyframes pecb-fm-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pecb-fm-scale-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media (max-width: 767px){.pecb-fullscreen-modal{padding:12px}.pecb-fullscreen-modal__header{padding:16px 16px 12px}.pecb-fullscreen-modal__divider{margin:0 16px}.pecb-fullscreen-modal__body{padding:12px 16px}.pecb-fullscreen-modal__footer{flex-wrap:wrap;padding:12px 16px 16px}}@media (prefers-reduced-motion: reduce){.pecb-fullscreen-modal,.pecb-fullscreen-modal__panel{animation:none}}\n"] }]
|
|
10294
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], modalPanel: [{ type: i0.ViewChild, args: ['modalPanel', { isSignal: true }] }] } });
|
|
10271
10295
|
|
|
10272
10296
|
// ─── Default PECB design-system palette ───────────────────────────────────────
|
|
10273
10297
|
const PECB_COLOR_PALETTE = [
|
|
@@ -17786,11 +17810,11 @@ class IconComponent {
|
|
|
17786
17810
|
this.safeIcon = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.resolvedSvg()), ...(ngDevMode ? [{ debugName: "safeIcon" }] : []));
|
|
17787
17811
|
}
|
|
17788
17812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "pecb-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"hostClasses()\"\n [attr.role]=\"ariaLabel() ? 'img' : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-hidden]=\"ariaLabel() ? null : true\"\n>\n @if (resolvedSvg()) {\n <span\n class=\"pecb-icon__svg\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n [innerHTML]=\"safeIcon()\"\n ></span>\n } @else {\n <span\n class=\"pecb-icon__content\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n >\n <ng-content></ng-content>\n </span>\n }\n</div>\n", styles: [".pecb-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon--xs{width:24px;height:24px}.pecb-icon--sm{width:32px;height:32px}.pecb-icon--md{width:40px;height:40px}.pecb-icon--lg{width:48px;height:48px}.pecb-icon--xl{width:56px;height:56px}.pecb-icon--2xl{width:64px;height:64px}.pecb-icon--round{border-radius:50%}.pecb-icon--square{border-radius:8px}.pecb-icon--square.pecb-icon--xs,.pecb-icon--square.pecb-icon--sm,.pecb-icon--square.pecb-icon--md{border-radius:6px}.pecb-icon--square.pecb-icon--2xl{border-radius:12px}.pecb-icon--none{background:transparent;color:inherit}.pecb-icon--primary{background-color:#e6f0fa;color:#007bff}.pecb-icon--gray{background-color:#f4f4f4;color:#616161}.pecb-icon--white{background-color:#fff;border:1px solid #ececec;color:#212427}.pecb-icon--error{background-color:#fdecea;color:#dc3545}.pecb-icon--warning{background-color:#fff4e5;color:#fd7e14}.pecb-icon--success{background-color:#e6f4ea;color:green}.pecb-icon__svg,.pecb-icon__content{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon__svg svg,.pecb-icon__content svg{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "pecb-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"hostClasses()\"\n [attr.role]=\"ariaLabel() ? 'img' : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-hidden]=\"ariaLabel() ? null : true\"\n>\n @if (resolvedSvg()) {\n <span\n class=\"pecb-icon__svg\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n [innerHTML]=\"safeIcon()\"\n ></span>\n } @else {\n <span\n class=\"pecb-icon__content\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n >\n <ng-content></ng-content>\n </span>\n }\n</div>\n", styles: [".pecb-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon--xs{width:24px;height:24px}.pecb-icon--sm{width:32px;height:32px}.pecb-icon--md{width:40px;height:40px}.pecb-icon--lg{width:48px;height:48px}.pecb-icon--xl{width:56px;height:56px}.pecb-icon--2xl{width:64px;height:64px}.pecb-icon--round{border-radius:50%}.pecb-icon--square{border-radius:8px}.pecb-icon--square.pecb-icon--xs,.pecb-icon--square.pecb-icon--sm,.pecb-icon--square.pecb-icon--md{border-radius:6px}.pecb-icon--square.pecb-icon--2xl{border-radius:12px}.pecb-icon--none{background:transparent;color:inherit}.pecb-icon--primary{background-color:#e6f0fa;color:#007bff}.pecb-icon--gray{background-color:#f4f4f4;color:#616161}.pecb-icon--white{background-color:#fff;border:1px solid #ececec;color:#212427}.pecb-icon--error{background-color:#fdecea;color:#dc3545}.pecb-icon--warning{background-color:#fff4e5;color:#fd7e14}.pecb-icon--success{background-color:#e6f4ea;color:green}.pecb-icon--brand{background-color:#f4f4f4;color:#a11e29}.pecb-icon__svg,.pecb-icon__content{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon__svg svg,.pecb-icon__content svg{display:block;width:100%;height:100%}.pecb-icon__svg svg [stroke=black]{stroke:currentColor}.pecb-icon__svg svg [fill=black]{fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17790
17814
|
}
|
|
17791
17815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
|
|
17792
17816
|
type: Component,
|
|
17793
|
-
args: [{ selector: 'pecb-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"hostClasses()\"\n [attr.role]=\"ariaLabel() ? 'img' : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-hidden]=\"ariaLabel() ? null : true\"\n>\n @if (resolvedSvg()) {\n <span\n class=\"pecb-icon__svg\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n [innerHTML]=\"safeIcon()\"\n ></span>\n } @else {\n <span\n class=\"pecb-icon__content\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n >\n <ng-content></ng-content>\n </span>\n }\n</div>\n", styles: [".pecb-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon--xs{width:24px;height:24px}.pecb-icon--sm{width:32px;height:32px}.pecb-icon--md{width:40px;height:40px}.pecb-icon--lg{width:48px;height:48px}.pecb-icon--xl{width:56px;height:56px}.pecb-icon--2xl{width:64px;height:64px}.pecb-icon--round{border-radius:50%}.pecb-icon--square{border-radius:8px}.pecb-icon--square.pecb-icon--xs,.pecb-icon--square.pecb-icon--sm,.pecb-icon--square.pecb-icon--md{border-radius:6px}.pecb-icon--square.pecb-icon--2xl{border-radius:12px}.pecb-icon--none{background:transparent;color:inherit}.pecb-icon--primary{background-color:#e6f0fa;color:#007bff}.pecb-icon--gray{background-color:#f4f4f4;color:#616161}.pecb-icon--white{background-color:#fff;border:1px solid #ececec;color:#212427}.pecb-icon--error{background-color:#fdecea;color:#dc3545}.pecb-icon--warning{background-color:#fff4e5;color:#fd7e14}.pecb-icon--success{background-color:#e6f4ea;color:green}.pecb-icon__svg,.pecb-icon__content{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon__svg svg,.pecb-icon__content svg{display:block;width:100%;height:100%}\n"] }]
|
|
17817
|
+
args: [{ selector: 'pecb-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"hostClasses()\"\n [attr.role]=\"ariaLabel() ? 'img' : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-hidden]=\"ariaLabel() ? null : true\"\n>\n @if (resolvedSvg()) {\n <span\n class=\"pecb-icon__svg\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n [innerHTML]=\"safeIcon()\"\n ></span>\n } @else {\n <span\n class=\"pecb-icon__content\"\n [style.width.px]=\"innerSize()\"\n [style.height.px]=\"innerSize()\"\n >\n <ng-content></ng-content>\n </span>\n }\n</div>\n", styles: [".pecb-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon--xs{width:24px;height:24px}.pecb-icon--sm{width:32px;height:32px}.pecb-icon--md{width:40px;height:40px}.pecb-icon--lg{width:48px;height:48px}.pecb-icon--xl{width:56px;height:56px}.pecb-icon--2xl{width:64px;height:64px}.pecb-icon--round{border-radius:50%}.pecb-icon--square{border-radius:8px}.pecb-icon--square.pecb-icon--xs,.pecb-icon--square.pecb-icon--sm,.pecb-icon--square.pecb-icon--md{border-radius:6px}.pecb-icon--square.pecb-icon--2xl{border-radius:12px}.pecb-icon--none{background:transparent;color:inherit}.pecb-icon--primary{background-color:#e6f0fa;color:#007bff}.pecb-icon--gray{background-color:#f4f4f4;color:#616161}.pecb-icon--white{background-color:#fff;border:1px solid #ececec;color:#212427}.pecb-icon--error{background-color:#fdecea;color:#dc3545}.pecb-icon--warning{background-color:#fff4e5;color:#fd7e14}.pecb-icon--success{background-color:#e6f4ea;color:green}.pecb-icon--brand{background-color:#f4f4f4;color:#a11e29}.pecb-icon__svg,.pecb-icon__content{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pecb-icon__svg svg,.pecb-icon__content svg{display:block;width:100%;height:100%}.pecb-icon__svg svg [stroke=black]{stroke:currentColor}.pecb-icon__svg svg [fill=black]{fill:currentColor}\n"] }]
|
|
17794
17818
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
17795
17819
|
|
|
17796
17820
|
// =============================================================================
|
|
@@ -17851,11 +17875,11 @@ class GridComponent {
|
|
|
17851
17875
|
}, ...(ngDevMode ? [{ debugName: "gridStyle" }] : []));
|
|
17852
17876
|
}
|
|
17853
17877
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17854
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: GridComponent, isStandalone: true, selector: "pecb-grid", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, minChildWidth: { classPropertyName: "minChildWidth", publicName: "minChildWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowGap: { classPropertyName: "rowGap", publicName: "rowGap", isSignal: true, isRequired: false, transformFunction: null }, columnGap: { classPropertyName: "columnGap", publicName: "columnGap", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [class]=\"gridClasses().join(' ')\"\n [ngStyle]=\"gridStyle()\"\n [attr.role]=\"ariaLabel() ? 'region' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
17878
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: GridComponent, isStandalone: true, selector: "pecb-grid", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, minChildWidth: { classPropertyName: "minChildWidth", publicName: "minChildWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowGap: { classPropertyName: "rowGap", publicName: "rowGap", isSignal: true, isRequired: false, transformFunction: null }, columnGap: { classPropertyName: "columnGap", publicName: "columnGap", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [class]=\"gridClasses().join(' ')\"\n [ngStyle]=\"gridStyle()\"\n [attr.role]=\"ariaLabel() ? 'region' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0;height:100%}.pecb-grid__item{height:100%}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0;height:100%}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
17855
17879
|
}
|
|
17856
17880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridComponent, decorators: [{
|
|
17857
17881
|
type: Component,
|
|
17858
|
-
args: [{ selector: 'pecb-grid', standalone: true, imports: [CommonModule], template: "<div\n [id]=\"id()\"\n [class]=\"gridClasses().join(' ')\"\n [ngStyle]=\"gridStyle()\"\n [attr.role]=\"ariaLabel() ? 'region' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }]
|
|
17882
|
+
args: [{ selector: 'pecb-grid', standalone: true, imports: [CommonModule], template: "<div\n [id]=\"id()\"\n [class]=\"gridClasses().join(' ')\"\n [ngStyle]=\"gridStyle()\"\n [attr.role]=\"ariaLabel() ? 'region' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0;height:100%}.pecb-grid__item{height:100%}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0;height:100%}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }]
|
|
17859
17883
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], minChildWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChildWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], rowGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGap", required: false }] }], columnGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGap", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
17860
17884
|
// =============================================================================
|
|
17861
17885
|
// GRID ITEM COMPONENT
|
|
@@ -17892,7 +17916,7 @@ class GridItemComponent {
|
|
|
17892
17916
|
<div [class]="itemClasses()" [attr.role]="role()">
|
|
17893
17917
|
<ng-content></ng-content>
|
|
17894
17918
|
</div>
|
|
17895
|
-
`, isInline: true, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }); }
|
|
17919
|
+
`, isInline: true, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0;height:100%}.pecb-grid__item{height:100%}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0;height:100%}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }); }
|
|
17896
17920
|
}
|
|
17897
17921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridItemComponent, decorators: [{
|
|
17898
17922
|
type: Component,
|
|
@@ -17902,7 +17926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
17902
17926
|
</div>
|
|
17903
17927
|
`, host: {
|
|
17904
17928
|
'[class]': 'itemClasses()'
|
|
17905
|
-
}, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }]
|
|
17929
|
+
}, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0;height:100%}.pecb-grid__item{height:100%}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0;height:100%}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }]
|
|
17906
17930
|
}], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }], spanSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "spanSm", required: false }] }], spanMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "spanMd", required: false }] }], spanLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "spanLg", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
|
|
17907
17931
|
// =============================================================================
|
|
17908
17932
|
// SPACER COMPONENT
|
|
@@ -17923,11 +17947,11 @@ class SpacerComponent {
|
|
|
17923
17947
|
}, ...(ngDevMode ? [{ debugName: "spacerClasses" }] : []));
|
|
17924
17948
|
}
|
|
17925
17949
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17926
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: SpacerComponent, isStandalone: true, selector: "pecb-spacer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div [class]="spacerClasses()" [attr.aria-hidden]="true"></div>`, isInline: true, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }); }
|
|
17950
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: SpacerComponent, isStandalone: true, selector: "pecb-spacer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div [class]="spacerClasses()" [attr.aria-hidden]="true"></div>`, isInline: true, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0;height:100%}.pecb-grid__item{height:100%}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0;height:100%}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }); }
|
|
17927
17951
|
}
|
|
17928
17952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpacerComponent, decorators: [{
|
|
17929
17953
|
type: Component,
|
|
17930
|
-
args: [{ selector: 'pecb-spacer', standalone: true, template: `<div [class]="spacerClasses()" [attr.aria-hidden]="true"></div>`, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }]
|
|
17954
|
+
args: [{ selector: 'pecb-spacer', standalone: true, template: `<div [class]="spacerClasses()" [attr.aria-hidden]="true"></div>`, styles: [".pecb-grid{display:grid;width:100%;box-sizing:border-box}.pecb-grid--cols-1{grid-template-columns:1fr}.pecb-grid--cols-2{grid-template-columns:repeat(2,1fr)}.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}.pecb-grid--cols-auto{grid-template-columns:repeat(auto-fit,minmax(var(--pecb-grid-min-child-width, 200px),1fr))}@media (max-width: 767px){.pecb-grid--cols-2,.pecb-grid--cols-3,.pecb-grid--cols-4,.pecb-grid--cols-6,.pecb-grid--cols-12{grid-template-columns:1fr}}@media (min-width: 768px){.pecb-grid--cols-3,.pecb-grid--cols-4{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.pecb-grid--cols-3{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-4{grid-template-columns:repeat(4,1fr)}.pecb-grid--cols-6{grid-template-columns:repeat(3,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(6,1fr)}}@media (min-width: 1280px){.pecb-grid--cols-6{grid-template-columns:repeat(6,1fr)}.pecb-grid--cols-12{grid-template-columns:repeat(12,1fr)}}.pecb-grid--gap-none{gap:0}.pecb-grid--gap-xs{gap:6px}.pecb-grid--gap-sm{gap:8px}.pecb-grid--gap-md{gap:16px}.pecb-grid--gap-lg{gap:20px}.pecb-grid--gap-xl{gap:24px}.pecb-grid--gap-2xl{gap:32px}.pecb-grid--row-gap-none{row-gap:0}.pecb-grid--row-gap-xs{row-gap:6px}.pecb-grid--row-gap-sm{row-gap:8px}.pecb-grid--row-gap-md{row-gap:16px}.pecb-grid--row-gap-lg{row-gap:20px}.pecb-grid--row-gap-xl{row-gap:24px}.pecb-grid--row-gap-2xl{row-gap:32px}.pecb-grid--col-gap-none{column-gap:0}.pecb-grid--col-gap-xs{column-gap:6px}.pecb-grid--col-gap-sm{column-gap:8px}.pecb-grid--col-gap-md{column-gap:16px}.pecb-grid--col-gap-lg{column-gap:20px}.pecb-grid--col-gap-xl{column-gap:24px}.pecb-grid--col-gap-2xl{column-gap:32px}.pecb-grid--padding-xs{padding:6px}.pecb-grid--padding-sm{padding:8px}.pecb-grid--padding-md{padding:16px}.pecb-grid--padding-lg{padding:20px}.pecb-grid--padding-xl{padding:24px}.pecb-grid--padding-2xl{padding:32px}.pecb-grid--align-start{justify-items:start}.pecb-grid--align-center{justify-items:center}.pecb-grid--align-end{justify-items:end}.pecb-grid--valign-start{align-items:start}.pecb-grid--valign-center{align-items:center}.pecb-grid--valign-end{align-items:end}.pecb-grid--valign-baseline{align-items:baseline}:host(.pecb-grid__item){display:block;min-width:0;height:100%}.pecb-grid__item{height:100%}:host(.pecb-grid__item--span-1){grid-column:span 1}:host(.pecb-grid__item--span-2){grid-column:span 2}:host(.pecb-grid__item--span-3){grid-column:span 3}:host(.pecb-grid__item--span-4){grid-column:span 4}:host(.pecb-grid__item--span-6){grid-column:span 6}:host(.pecb-grid__item--span-12){grid-column:span 12}:host(.pecb-grid__item--span-full){grid-column:1/-1}@media (min-width: 768px){:host(.pecb-grid__item--sm-span-1){grid-column:span 1}:host(.pecb-grid__item--sm-span-2){grid-column:span 2}:host(.pecb-grid__item--sm-span-3){grid-column:span 3}:host(.pecb-grid__item--sm-span-4){grid-column:span 4}:host(.pecb-grid__item--sm-span-6){grid-column:span 6}:host(.pecb-grid__item--sm-span-12){grid-column:span 12}:host(.pecb-grid__item--sm-span-full){grid-column:1/-1}}@media (min-width: 1024px){:host(.pecb-grid__item--md-span-1){grid-column:span 1}:host(.pecb-grid__item--md-span-2){grid-column:span 2}:host(.pecb-grid__item--md-span-3){grid-column:span 3}:host(.pecb-grid__item--md-span-4){grid-column:span 4}:host(.pecb-grid__item--md-span-6){grid-column:span 6}:host(.pecb-grid__item--md-span-12){grid-column:span 12}:host(.pecb-grid__item--md-span-full){grid-column:1/-1}}@media (min-width: 1280px){:host(.pecb-grid__item--lg-span-1){grid-column:span 1}:host(.pecb-grid__item--lg-span-2){grid-column:span 2}:host(.pecb-grid__item--lg-span-3){grid-column:span 3}:host(.pecb-grid__item--lg-span-4){grid-column:span 4}:host(.pecb-grid__item--lg-span-6){grid-column:span 6}:host(.pecb-grid__item--lg-span-12){grid-column:span 12}:host(.pecb-grid__item--lg-span-full){grid-column:1/-1}}.pecb-grid__item{min-width:0;height:100%}.pecb-grid__item--span-1{grid-column:span 1}.pecb-grid__item--span-2{grid-column:span 2}.pecb-grid__item--span-3{grid-column:span 3}.pecb-grid__item--span-4{grid-column:span 4}.pecb-grid__item--span-6{grid-column:span 6}.pecb-grid__item--span-12{grid-column:span 12}.pecb-grid__item--span-full{grid-column:1/-1}@media (min-width: 768px){.pecb-grid__item--sm-span-1{grid-column:span 1}.pecb-grid__item--sm-span-2{grid-column:span 2}.pecb-grid__item--sm-span-3{grid-column:span 3}.pecb-grid__item--sm-span-4{grid-column:span 4}.pecb-grid__item--sm-span-6{grid-column:span 6}.pecb-grid__item--sm-span-12{grid-column:span 12}.pecb-grid__item--sm-span-full{grid-column:1/-1}}@media (min-width: 1024px){.pecb-grid__item--md-span-1{grid-column:span 1}.pecb-grid__item--md-span-2{grid-column:span 2}.pecb-grid__item--md-span-3{grid-column:span 3}.pecb-grid__item--md-span-4{grid-column:span 4}.pecb-grid__item--md-span-6{grid-column:span 6}.pecb-grid__item--md-span-12{grid-column:span 12}.pecb-grid__item--md-span-full{grid-column:1/-1}}@media (min-width: 1280px){.pecb-grid__item--lg-span-1{grid-column:span 1}.pecb-grid__item--lg-span-2{grid-column:span 2}.pecb-grid__item--lg-span-3{grid-column:span 3}.pecb-grid__item--lg-span-4{grid-column:span 4}.pecb-grid__item--lg-span-6{grid-column:span 6}.pecb-grid__item--lg-span-12{grid-column:span 12}.pecb-grid__item--lg-span-full{grid-column:1/-1}}.pecb-spacer{display:block;flex-shrink:0}.pecb-spacer--xs{height:6px;width:100%}.pecb-spacer--sm{height:8px;width:100%}.pecb-spacer--md{height:16px;width:100%}.pecb-spacer--lg{height:20px;width:100%}.pecb-spacer--xl{height:24px;width:100%}.pecb-spacer--2xl{height:32px;width:100%}.pecb-spacer--3xl{height:40px;width:100%}.pecb-spacer--4xl{height:48px;width:100%}.pecb-spacer--inline{display:inline-block;height:auto;width:auto}.pecb-spacer--inline.pecb-spacer--xs{width:6px;height:100%}.pecb-spacer--inline.pecb-spacer--sm{width:8px;height:100%}.pecb-spacer--inline.pecb-spacer--md{width:16px;height:100%}.pecb-spacer--inline.pecb-spacer--lg{width:20px;height:100%}.pecb-spacer--inline.pecb-spacer--xl{width:24px;height:100%}.pecb-spacer--inline.pecb-spacer--2xl{width:32px;height:100%}.pecb-spacer--inline.pecb-spacer--3xl{width:40px;height:100%}.pecb-spacer--inline.pecb-spacer--4xl{width:48px;height:100%}\n"] }]
|
|
17931
17955
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
|
|
17932
17956
|
|
|
17933
17957
|
// =============================================================================
|
|
@@ -23202,13 +23226,126 @@ class CourseTileComponent {
|
|
|
23202
23226
|
this.cardClick.emit();
|
|
23203
23227
|
}
|
|
23204
23228
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CourseTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CourseTileComponent, isStandalone: true, selector: "pecb-course-tile", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSvg: { classPropertyName: "iconSvg", publicName: "iconSvg", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "@if (isLink()) {\n <a\n class=\"pecb-course-tile\"\n [href]=\"href()\"\n [attr.target]=\"target() || null\"\n [attr.rel]=\"rel()\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </a>\n} @else {\n <div\n class=\"pecb-course-tile\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onActivate($event)\"\n (keydown.enter)=\"onActivate($event)\"\n (keydown.space)=\"onActivate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </div>\n}\n\n<ng-template #tileContent>\n @if (hasThumb()) {\n <span class=\"pecb-course-tile__thumb\" aria-hidden=\"true\">\n @if (icon() && safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n } @else if (iconSrc()) {\n <img [src]=\"iconSrc()\" alt=\"\" />\n } @else if (safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n }\n </span>\n }\n\n @if (category()) {\n <span class=\"pecb-course-tile__category\">{{ category() }}</span>\n }\n\n <b class=\"pecb-course-tile__title\">{{ title() }}</b>\n\n @if (meta()) {\n <small class=\"pecb-course-tile__meta\">{{ meta() }}</small>\n }\n\n <span class=\"pecb-course-tile__foot\">\n <span class=\"pecb-course-tile__cta\">\n {{ ctaLabel() }}\n <svg\n width=\"13\"\n height=\"13\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 12h14M13 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n</ng-template>\n", styles: [":host{display:block;height:100%}.pecb-course-tile{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;background-color:#fff;border:1px solid #ececec;border-radius:12px;color:#212427;text-decoration:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.pecb-course-tile:hover{border-color:#c2c2c2;box-shadow:0 8px 22px -12px #10192833}.pecb-course-tile:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-tile__thumb{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:11px;background-color:#212427;color:#fff;flex:none}.pecb-course-tile__thumb img{display:block;width:22px;height:22px}.pecb-course-tile__thumb-svg{display:flex;align-items:center;justify-content:center}.pecb-course-tile__thumb ::ng-deep svg{display:block;width:22px;height:22px}.pecb-course-tile__thumb ::ng-deep svg [stroke]:
|
|
23229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CourseTileComponent, isStandalone: true, selector: "pecb-course-tile", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSvg: { classPropertyName: "iconSvg", publicName: "iconSvg", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "@if (isLink()) {\n <a\n class=\"pecb-course-tile\"\n [href]=\"href()\"\n [attr.target]=\"target() || null\"\n [attr.rel]=\"rel()\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </a>\n} @else {\n <div\n class=\"pecb-course-tile\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onActivate($event)\"\n (keydown.enter)=\"onActivate($event)\"\n (keydown.space)=\"onActivate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </div>\n}\n\n<ng-template #tileContent>\n @if (hasThumb()) {\n <span class=\"pecb-course-tile__thumb\" aria-hidden=\"true\">\n @if (icon() && safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n } @else if (iconSrc()) {\n <img [src]=\"iconSrc()\" alt=\"\" />\n } @else if (safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n }\n </span>\n }\n\n @if (category()) {\n <span class=\"pecb-course-tile__category\">{{ category() }}</span>\n }\n\n <b class=\"pecb-course-tile__title\">{{ title() }}</b>\n\n @if (meta()) {\n <small class=\"pecb-course-tile__meta\">{{ meta() }}</small>\n }\n\n <span class=\"pecb-course-tile__foot\">\n <span class=\"pecb-course-tile__cta\">\n {{ ctaLabel() }}\n <svg\n width=\"13\"\n height=\"13\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 12h14M13 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n</ng-template>\n", styles: [":host{display:block;height:100%}.pecb-course-tile{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;background-color:#fff;border:1px solid #ececec;border-radius:12px;color:#212427;text-decoration:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.pecb-course-tile:hover{border-color:#c2c2c2;box-shadow:0 8px 22px -12px #10192833}.pecb-course-tile:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-tile__thumb{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:11px;background-color:#212427;color:#fff;flex:none}.pecb-course-tile__thumb img{display:block;width:22px;height:22px}.pecb-course-tile__thumb-svg{display:flex;align-items:center;justify-content:center}.pecb-course-tile__thumb ::ng-deep svg{display:block;width:22px;height:22px}.pecb-course-tile__thumb ::ng-deep svg [stroke=black]{stroke:currentColor}.pecb-course-tile__thumb ::ng-deep svg [fill=black]{fill:currentColor}.pecb-course-tile__category{font-size:11px;font-weight:600;color:#a11e29;text-transform:uppercase;letter-spacing:.4px}.pecb-course-tile__title{font-size:14.5px;font-weight:600;color:#212427}.pecb-course-tile__meta{font-size:12.5px;line-height:1.45;color:#919191;flex:1}.pecb-course-tile__foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.pecb-course-tile__cta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#a11e29}.pecb-course-tile__cta svg{display:block;flex:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23206
23230
|
}
|
|
23207
23231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CourseTileComponent, decorators: [{
|
|
23208
23232
|
type: Component,
|
|
23209
|
-
args: [{ selector: 'pecb-course-tile', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLink()) {\n <a\n class=\"pecb-course-tile\"\n [href]=\"href()\"\n [attr.target]=\"target() || null\"\n [attr.rel]=\"rel()\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </a>\n} @else {\n <div\n class=\"pecb-course-tile\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onActivate($event)\"\n (keydown.enter)=\"onActivate($event)\"\n (keydown.space)=\"onActivate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </div>\n}\n\n<ng-template #tileContent>\n @if (hasThumb()) {\n <span class=\"pecb-course-tile__thumb\" aria-hidden=\"true\">\n @if (icon() && safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n } @else if (iconSrc()) {\n <img [src]=\"iconSrc()\" alt=\"\" />\n } @else if (safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n }\n </span>\n }\n\n @if (category()) {\n <span class=\"pecb-course-tile__category\">{{ category() }}</span>\n }\n\n <b class=\"pecb-course-tile__title\">{{ title() }}</b>\n\n @if (meta()) {\n <small class=\"pecb-course-tile__meta\">{{ meta() }}</small>\n }\n\n <span class=\"pecb-course-tile__foot\">\n <span class=\"pecb-course-tile__cta\">\n {{ ctaLabel() }}\n <svg\n width=\"13\"\n height=\"13\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 12h14M13 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n</ng-template>\n", styles: [":host{display:block;height:100%}.pecb-course-tile{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;background-color:#fff;border:1px solid #ececec;border-radius:12px;color:#212427;text-decoration:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.pecb-course-tile:hover{border-color:#c2c2c2;box-shadow:0 8px 22px -12px #10192833}.pecb-course-tile:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-tile__thumb{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:11px;background-color:#212427;color:#fff;flex:none}.pecb-course-tile__thumb img{display:block;width:22px;height:22px}.pecb-course-tile__thumb-svg{display:flex;align-items:center;justify-content:center}.pecb-course-tile__thumb ::ng-deep svg{display:block;width:22px;height:22px}.pecb-course-tile__thumb ::ng-deep svg [stroke]:
|
|
23233
|
+
args: [{ selector: 'pecb-course-tile', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLink()) {\n <a\n class=\"pecb-course-tile\"\n [href]=\"href()\"\n [attr.target]=\"target() || null\"\n [attr.rel]=\"rel()\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </a>\n} @else {\n <div\n class=\"pecb-course-tile\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onActivate($event)\"\n (keydown.enter)=\"onActivate($event)\"\n (keydown.space)=\"onActivate($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"tileContent\"></ng-container>\n </div>\n}\n\n<ng-template #tileContent>\n @if (hasThumb()) {\n <span class=\"pecb-course-tile__thumb\" aria-hidden=\"true\">\n @if (icon() && safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n } @else if (iconSrc()) {\n <img [src]=\"iconSrc()\" alt=\"\" />\n } @else if (safeThumbSvg()) {\n <span class=\"pecb-course-tile__thumb-svg\" [innerHTML]=\"safeThumbSvg()\"></span>\n }\n </span>\n }\n\n @if (category()) {\n <span class=\"pecb-course-tile__category\">{{ category() }}</span>\n }\n\n <b class=\"pecb-course-tile__title\">{{ title() }}</b>\n\n @if (meta()) {\n <small class=\"pecb-course-tile__meta\">{{ meta() }}</small>\n }\n\n <span class=\"pecb-course-tile__foot\">\n <span class=\"pecb-course-tile__cta\">\n {{ ctaLabel() }}\n <svg\n width=\"13\"\n height=\"13\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 12h14M13 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </span>\n</ng-template>\n", styles: [":host{display:block;height:100%}.pecb-course-tile{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;background-color:#fff;border:1px solid #ececec;border-radius:12px;color:#212427;text-decoration:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.pecb-course-tile:hover{border-color:#c2c2c2;box-shadow:0 8px 22px -12px #10192833}.pecb-course-tile:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-tile__thumb{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:11px;background-color:#212427;color:#fff;flex:none}.pecb-course-tile__thumb img{display:block;width:22px;height:22px}.pecb-course-tile__thumb-svg{display:flex;align-items:center;justify-content:center}.pecb-course-tile__thumb ::ng-deep svg{display:block;width:22px;height:22px}.pecb-course-tile__thumb ::ng-deep svg [stroke=black]{stroke:currentColor}.pecb-course-tile__thumb ::ng-deep svg [fill=black]{fill:currentColor}.pecb-course-tile__category{font-size:11px;font-weight:600;color:#a11e29;text-transform:uppercase;letter-spacing:.4px}.pecb-course-tile__title{font-size:14.5px;font-weight:600;color:#212427}.pecb-course-tile__meta{font-size:12.5px;line-height:1.45;color:#919191;flex:1}.pecb-course-tile__foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.pecb-course-tile__cta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#a11e29}.pecb-course-tile__cta svg{display:block;flex:none}\n"] }]
|
|
23210
23234
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconSvg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvg", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
|
|
23211
23235
|
|
|
23236
|
+
/**
|
|
23237
|
+
* Course card — the "My courses" record card used across the member and
|
|
23238
|
+
* partner areas (assigned courses, independent-learning assignments, training
|
|
23239
|
+
* events, exam events, browse results).
|
|
23240
|
+
*
|
|
23241
|
+
* Head: 44px icon + small delivery label (e.g. "eLearning"), status pill on the
|
|
23242
|
+
* right, then the title and a muted subtitle. A divider separates the head
|
|
23243
|
+
* from the body. Body: label/value meta rows (a row can render its value as a
|
|
23244
|
+
* soft badge), an optional progress line, an optional tinted note, and the
|
|
23245
|
+
* action buttons (stacked full-width by default, or in a row).
|
|
23246
|
+
*
|
|
23247
|
+
* The icon can be provided three ways (first match wins):
|
|
23248
|
+
* 1. [icon] — registry icon name (general or custom, e.g. `custom-content-elearning-md-active`)
|
|
23249
|
+
* 2. [iconSrc] — image URL
|
|
23250
|
+
* 3. [iconSvg] — raw SVG string (sanitized internally)
|
|
23251
|
+
*
|
|
23252
|
+
* Purely presentational: every interaction surfaces through outputs.
|
|
23253
|
+
*
|
|
23254
|
+
* @example
|
|
23255
|
+
* <pecb-course-card
|
|
23256
|
+
* icon="custom-content-selfstudy-md-active"
|
|
23257
|
+
* iconLabel="Self Study"
|
|
23258
|
+
* title="ISO 9001 Lead Implementer"
|
|
23259
|
+
* subtitle="English"
|
|
23260
|
+
* statusLabel="Not Attended"
|
|
23261
|
+
* statusTone="warning"
|
|
23262
|
+
* [metaRows]="[
|
|
23263
|
+
* { label: 'Candidate', value: 'africa@pecb.com' },
|
|
23264
|
+
* { label: 'Assigned', value: '2026-06-10' }
|
|
23265
|
+
* ]"
|
|
23266
|
+
* [actions]="[{ id: 'view', label: 'View assignment', variant: 'primary' }]"
|
|
23267
|
+
* (actionClick)="onAction($event)"
|
|
23268
|
+
* />
|
|
23269
|
+
*/
|
|
23270
|
+
class CourseCardComponent {
|
|
23271
|
+
constructor() {
|
|
23272
|
+
this.sanitizer = inject(DomSanitizer);
|
|
23273
|
+
this.registry = inject(IconRegistry);
|
|
23274
|
+
/** Registry icon name shown at 44px in the head; see also [iconSrc]/[iconSvg] */
|
|
23275
|
+
this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
23276
|
+
/** Icon image URL — used when [icon] is empty */
|
|
23277
|
+
this.iconSrc = input('', ...(ngDevMode ? [{ debugName: "iconSrc" }] : []));
|
|
23278
|
+
/** Raw SVG string for the icon — used when [icon] and [iconSrc] are empty */
|
|
23279
|
+
this.iconSvg = input('', ...(ngDevMode ? [{ debugName: "iconSvg" }] : []));
|
|
23280
|
+
/** Small muted label next to the icon (e.g. "eLearning", "Self Study", "Exam"); hidden when empty */
|
|
23281
|
+
this.iconLabel = input('', ...(ngDevMode ? [{ debugName: "iconLabel" }] : []));
|
|
23282
|
+
/** Card heading (required) */
|
|
23283
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
23284
|
+
/** Muted line under the title (e.g. language, "Event ID 123 · English"); hidden when empty */
|
|
23285
|
+
this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
|
|
23286
|
+
/** Status pill text in the head; pill hidden when empty */
|
|
23287
|
+
this.statusLabel = input('', ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
|
|
23288
|
+
/** Status pill colour */
|
|
23289
|
+
this.statusTone = input('default', ...(ngDevMode ? [{ debugName: "statusTone" }] : []));
|
|
23290
|
+
/** Label/value rows in the body */
|
|
23291
|
+
this.metaRows = input([], ...(ngDevMode ? [{ debugName: "metaRows" }] : []));
|
|
23292
|
+
/** Optional progress line under the meta rows; hidden when null */
|
|
23293
|
+
this.progress = input(null, ...(ngDevMode ? [{ debugName: "progress" }] : []));
|
|
23294
|
+
/** Optional note under the meta rows (supports <b>); hidden when empty */
|
|
23295
|
+
this.noteText = input('', ...(ngDevMode ? [{ debugName: "noteText" }] : []));
|
|
23296
|
+
/** Note tint */
|
|
23297
|
+
this.noteTone = input('neutral', ...(ngDevMode ? [{ debugName: "noteTone" }] : []));
|
|
23298
|
+
/** Footer buttons */
|
|
23299
|
+
this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
|
|
23300
|
+
/** 'stack' = full-width column, 'row' = side by side */
|
|
23301
|
+
this.actionsLayout = input('stack', ...(ngDevMode ? [{ debugName: "actionsLayout" }] : []));
|
|
23302
|
+
/** Fades the head and meta rows (e.g. pending / not yet available) */
|
|
23303
|
+
this.dimmed = input(false, ...(ngDevMode ? [{ debugName: "dimmed" }] : []));
|
|
23304
|
+
/** Emits the clicked action's id */
|
|
23305
|
+
this.actionClick = output();
|
|
23306
|
+
/** The icon slot renders only when an icon source is provided */
|
|
23307
|
+
this.hasIcon = computed(() => !!(this.icon() || this.iconSrc() || this.iconSvg()), ...(ngDevMode ? [{ debugName: "hasIcon" }] : []));
|
|
23308
|
+
this.safeIconSvg = computed(() => {
|
|
23309
|
+
const name = this.icon();
|
|
23310
|
+
if (name) {
|
|
23311
|
+
const svg = this.registry.get(name) ?? '';
|
|
23312
|
+
return svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
|
|
23313
|
+
}
|
|
23314
|
+
if (!this.iconSrc() && this.iconSvg()) {
|
|
23315
|
+
return this.sanitizer.bypassSecurityTrustHtml(this.iconSvg());
|
|
23316
|
+
}
|
|
23317
|
+
return null;
|
|
23318
|
+
}, ...(ngDevMode ? [{ debugName: "safeIconSvg" }] : []));
|
|
23319
|
+
this.safeNote = computed(() => this.noteText() ? this.sanitizer.bypassSecurityTrustHtml(this.noteText()) : null, ...(ngDevMode ? [{ debugName: "safeNote" }] : []));
|
|
23320
|
+
this.progressPercent = computed(() => {
|
|
23321
|
+
const p = this.progress();
|
|
23322
|
+
return p ? Math.min(100, Math.max(0, p.percent)) : 0;
|
|
23323
|
+
}, ...(ngDevMode ? [{ debugName: "progressPercent" }] : []));
|
|
23324
|
+
this.progressValueText = computed(() => {
|
|
23325
|
+
const p = this.progress();
|
|
23326
|
+
if (!p)
|
|
23327
|
+
return '';
|
|
23328
|
+
return p.valueText ?? `${this.progressPercent()}%`;
|
|
23329
|
+
}, ...(ngDevMode ? [{ debugName: "progressValueText" }] : []));
|
|
23330
|
+
this.progressToneClass = computed(() => `pecb-course-card__bar-fill--${this.progress()?.tone ?? 'success'}`, ...(ngDevMode ? [{ debugName: "progressToneClass" }] : []));
|
|
23331
|
+
}
|
|
23332
|
+
actionClass(action) {
|
|
23333
|
+
const classes = ['pecb-course-card__btn', `pecb-course-card__btn--${action.variant ?? 'ghost'}`];
|
|
23334
|
+
if (action.iconOnly)
|
|
23335
|
+
classes.push('pecb-course-card__btn--icon-only');
|
|
23336
|
+
return classes.join(' ');
|
|
23337
|
+
}
|
|
23338
|
+
safeSvg(svg) {
|
|
23339
|
+
return svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
|
|
23340
|
+
}
|
|
23341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CourseCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23342
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CourseCardComponent, isStandalone: true, selector: "pecb-course-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSvg: { classPropertyName: "iconSvg", publicName: "iconSvg", isSignal: true, isRequired: false, transformFunction: null }, iconLabel: { classPropertyName: "iconLabel", publicName: "iconLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, statusTone: { classPropertyName: "statusTone", publicName: "statusTone", isSignal: true, isRequired: false, transformFunction: null }, metaRows: { classPropertyName: "metaRows", publicName: "metaRows", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, noteText: { classPropertyName: "noteText", publicName: "noteText", isSignal: true, isRequired: false, transformFunction: null }, noteTone: { classPropertyName: "noteTone", publicName: "noteTone", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsLayout: { classPropertyName: "actionsLayout", publicName: "actionsLayout", isSignal: true, isRequired: false, transformFunction: null }, dimmed: { classPropertyName: "dimmed", publicName: "dimmed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"pecb-course-card\" [class.pecb-course-card--dimmed]=\"dimmed()\">\n <div class=\"pecb-course-card__head\">\n @if (hasIcon() || iconLabel()) {\n <span class=\"pecb-course-card__icon-wrap\">\n @if (hasIcon()) {\n <span class=\"pecb-course-card__icon\" aria-hidden=\"true\">\n @if (icon() && safeIconSvg()) {\n <span class=\"pecb-course-card__icon-svg\" [innerHTML]=\"safeIconSvg()\"></span>\n } @else if (iconSrc()) {\n <img [src]=\"iconSrc()\" alt=\"\" />\n } @else if (safeIconSvg()) {\n <span class=\"pecb-course-card__icon-svg\" [innerHTML]=\"safeIconSvg()\"></span>\n }\n </span>\n }\n @if (iconLabel()) {\n <small class=\"pecb-course-card__icon-label\">{{ iconLabel() }}</small>\n }\n </span>\n }\n\n @if (statusLabel()) {\n <pecb-badge\n class=\"pecb-course-card__pill\"\n variant=\"soft\"\n [status]=\"statusTone()\"\n [label]=\"statusLabel()\"\n [showLabel]=\"true\"\n ></pecb-badge>\n }\n\n <div class=\"pecb-course-card__heading\">\n <h4 class=\"pecb-course-card__title\">{{ title() }}</h4>\n @if (subtitle()) {\n <span class=\"pecb-course-card__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n </div>\n\n <div class=\"pecb-course-card__body\">\n @if (metaRows().length) {\n <div class=\"pecb-course-card__meta\">\n @for (row of metaRows(); track row.label) {\n <div class=\"pecb-course-card__meta-row\">\n <span class=\"pecb-course-card__meta-label\">{{ row.label }}</span>\n @if (row.tone) {\n <pecb-badge\n variant=\"soft\"\n [status]=\"row.tone\"\n [label]=\"row.value\"\n [showLabel]=\"true\"\n ></pecb-badge>\n } @else {\n <b class=\"pecb-course-card__meta-value\">{{ row.value }}</b>\n }\n </div>\n }\n </div>\n }\n\n @if (progress(); as p) {\n <div class=\"pecb-course-card__progress\">\n <div class=\"pecb-course-card__meta-row\">\n <span class=\"pecb-course-card__meta-label\">{{ p.label }}</span>\n <b class=\"pecb-course-card__meta-value\">{{ progressValueText() }}</b>\n </div>\n <div\n class=\"pecb-course-card__bar\"\n role=\"progressbar\"\n [attr.aria-label]=\"p.label\"\n [attr.aria-valuenow]=\"progressPercent()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <i\n [class]=\"'pecb-course-card__bar-fill ' + progressToneClass()\"\n [style.width.%]=\"progressPercent()\"\n ></i>\n </div>\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (safeNote()) {\n <div [class]=\"'pecb-course-card__note pecb-course-card__note--' + noteTone()\">\n <p [innerHTML]=\"safeNote()\"></p>\n </div>\n }\n\n @if (actions().length) {\n <div [class]=\"'pecb-course-card__actions pecb-course-card__actions--' + actionsLayout()\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n [class]=\"actionClass(action)\"\n [disabled]=\"!!action.disabled\"\n [attr.aria-label]=\"action.iconOnly ? action.label : null\"\n [attr.title]=\"action.iconOnly ? action.label : null\"\n (click)=\"actionClick.emit(action.id)\"\n >\n @if (action.icon) {\n <span class=\"pecb-course-card__btn-icon\" aria-hidden=\"true\" [innerHTML]=\"safeSvg(action.icon)\"></span>\n }\n @if (!action.iconOnly) {\n {{ action.label }}\n }\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;height:100%;container-type:inline-size}.pecb-course-card{display:flex;flex-direction:column;height:100%;background-color:#fff;border:1px solid #ececec;border-radius:12px;overflow:hidden;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#212427}.pecb-course-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:18px 18px 16px;border-bottom:1px solid #ececec}.pecb-course-card__icon-wrap{display:flex;align-items:center;gap:8px;flex:none;margin-right:auto}.pecb-course-card__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}.pecb-course-card__icon img{display:block;width:44px;height:44px}.pecb-course-card__icon-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.pecb-course-card__icon ::ng-deep svg{display:block;width:100%;height:100%}.pecb-course-card__icon-label{font-size:10.5px;font-weight:600;line-height:1.2;color:#919191;white-space:nowrap}.pecb-course-card__pill{flex:none;margin-left:auto;margin-top:2px}.pecb-course-card__heading{flex:1 1 100%;min-width:0}.pecb-course-card__title{margin:0;font-size:16px;font-weight:700;line-height:1.3;color:#212427;overflow-wrap:anywhere}.pecb-course-card__subtitle{display:block;margin-top:3px;font-size:12px;font-weight:500;color:#919191}.pecb-course-card__body{display:flex;flex-direction:column;gap:16px;flex:1;padding:18px}.pecb-course-card__meta{display:flex;flex-direction:column;gap:12px}.pecb-course-card__meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#616161}.pecb-course-card__meta-label{flex:0 1 auto;max-width:60%;min-width:0;overflow-wrap:anywhere}.pecb-course-card__meta-value{flex:1 1 auto;min-width:0;font-weight:600;color:#212427;text-align:right;overflow-wrap:anywhere}.pecb-course-card__progress{display:flex;flex-direction:column;gap:8px}.pecb-course-card__bar{height:6px;border-radius:9999px;background-color:#ececec;overflow:hidden}.pecb-course-card__bar-fill{display:block;height:100%;border-radius:9999px;transform-origin:left;animation:pecb-course-card-bar-fill 1s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){.pecb-course-card__bar-fill{animation:none}}.pecb-course-card__bar-fill--success{background-color:#57bc57}.pecb-course-card__bar-fill--warning{background-color:#fd7e14}.pecb-course-card__bar-fill--error{background-color:#dc3545}.pecb-course-card__bar-fill--processing{background-color:#007bff}.pecb-course-card__note{border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.5}.pecb-course-card__note p{margin:0}.pecb-course-card__note b{font-weight:700}.pecb-course-card__note--neutral{background-color:#f7f5f5;color:#616161}.pecb-course-card__note--warning{background-color:#fff4e5;color:#fd7e14}.pecb-course-card__note--danger{background-color:#fdecea;color:#dc3545}.pecb-course-card__actions{display:flex;gap:8px;margin-top:auto}.pecb-course-card__actions--stack{flex-direction:column}.pecb-course-card__actions--stack .pecb-course-card__btn{width:100%}.pecb-course-card__actions--row{flex-direction:row;flex-wrap:wrap;align-items:stretch}.pecb-course-card__actions--row .pecb-course-card__btn{flex:1 1 0;min-width:fit-content}.pecb-course-card__actions--row .pecb-course-card__btn--icon-only{flex:0 0 auto}.pecb-course-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:8px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.pecb-course-card__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.pecb-course-card__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-card__btn--primary{background-color:#212427;color:#fff}.pecb-course-card__btn--primary:hover:not(:disabled){background-color:#616161}.pecb-course-card__btn--ghost{background-color:#fff;color:#212427;border-color:#c2c2c2}.pecb-course-card__btn--ghost:hover:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-course-card__btn--accent{background-color:#a11e29;color:#fff}.pecb-course-card__btn--accent:hover:not(:disabled){background-color:#671018}.pecb-course-card__btn--success{background-color:#57bc57;color:#fff}.pecb-course-card__btn--success:hover:not(:disabled){background-color:green}.pecb-course-card__btn--icon-only{padding:0 12px}.pecb-course-card__btn-icon{display:flex;line-height:0;flex-shrink:0}.pecb-course-card__btn-icon ::ng-deep svg{display:block}.pecb-course-card--dimmed .pecb-course-card__head,.pecb-course-card--dimmed .pecb-course-card__meta{opacity:.6}@container (max-width: 299px){.pecb-course-card__head{padding:16px 16px 12px}.pecb-course-card__body{padding:16px}.pecb-course-card__meta-row{flex-direction:column;align-items:flex-start;gap:2px}.pecb-course-card__meta-label{max-width:none}.pecb-course-card__meta-value{text-align:left}.pecb-course-card__progress .pecb-course-card__meta-row{flex-direction:row;align-items:center}.pecb-course-card__btn{height:40px;padding:0 12px}}@keyframes pecb-course-card-bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "pecb-badge", inputs: ["id", "variant", "count", "maxCount", "size", "status", "label", "showLabel", "ribbonColor", "text", "notificationAriaLabel", "notificationsLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23343
|
+
}
|
|
23344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CourseCardComponent, decorators: [{
|
|
23345
|
+
type: Component,
|
|
23346
|
+
args: [{ selector: 'pecb-course-card', standalone: true, imports: [BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pecb-course-card\" [class.pecb-course-card--dimmed]=\"dimmed()\">\n <div class=\"pecb-course-card__head\">\n @if (hasIcon() || iconLabel()) {\n <span class=\"pecb-course-card__icon-wrap\">\n @if (hasIcon()) {\n <span class=\"pecb-course-card__icon\" aria-hidden=\"true\">\n @if (icon() && safeIconSvg()) {\n <span class=\"pecb-course-card__icon-svg\" [innerHTML]=\"safeIconSvg()\"></span>\n } @else if (iconSrc()) {\n <img [src]=\"iconSrc()\" alt=\"\" />\n } @else if (safeIconSvg()) {\n <span class=\"pecb-course-card__icon-svg\" [innerHTML]=\"safeIconSvg()\"></span>\n }\n </span>\n }\n @if (iconLabel()) {\n <small class=\"pecb-course-card__icon-label\">{{ iconLabel() }}</small>\n }\n </span>\n }\n\n @if (statusLabel()) {\n <pecb-badge\n class=\"pecb-course-card__pill\"\n variant=\"soft\"\n [status]=\"statusTone()\"\n [label]=\"statusLabel()\"\n [showLabel]=\"true\"\n ></pecb-badge>\n }\n\n <div class=\"pecb-course-card__heading\">\n <h4 class=\"pecb-course-card__title\">{{ title() }}</h4>\n @if (subtitle()) {\n <span class=\"pecb-course-card__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n </div>\n\n <div class=\"pecb-course-card__body\">\n @if (metaRows().length) {\n <div class=\"pecb-course-card__meta\">\n @for (row of metaRows(); track row.label) {\n <div class=\"pecb-course-card__meta-row\">\n <span class=\"pecb-course-card__meta-label\">{{ row.label }}</span>\n @if (row.tone) {\n <pecb-badge\n variant=\"soft\"\n [status]=\"row.tone\"\n [label]=\"row.value\"\n [showLabel]=\"true\"\n ></pecb-badge>\n } @else {\n <b class=\"pecb-course-card__meta-value\">{{ row.value }}</b>\n }\n </div>\n }\n </div>\n }\n\n @if (progress(); as p) {\n <div class=\"pecb-course-card__progress\">\n <div class=\"pecb-course-card__meta-row\">\n <span class=\"pecb-course-card__meta-label\">{{ p.label }}</span>\n <b class=\"pecb-course-card__meta-value\">{{ progressValueText() }}</b>\n </div>\n <div\n class=\"pecb-course-card__bar\"\n role=\"progressbar\"\n [attr.aria-label]=\"p.label\"\n [attr.aria-valuenow]=\"progressPercent()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <i\n [class]=\"'pecb-course-card__bar-fill ' + progressToneClass()\"\n [style.width.%]=\"progressPercent()\"\n ></i>\n </div>\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (safeNote()) {\n <div [class]=\"'pecb-course-card__note pecb-course-card__note--' + noteTone()\">\n <p [innerHTML]=\"safeNote()\"></p>\n </div>\n }\n\n @if (actions().length) {\n <div [class]=\"'pecb-course-card__actions pecb-course-card__actions--' + actionsLayout()\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n [class]=\"actionClass(action)\"\n [disabled]=\"!!action.disabled\"\n [attr.aria-label]=\"action.iconOnly ? action.label : null\"\n [attr.title]=\"action.iconOnly ? action.label : null\"\n (click)=\"actionClick.emit(action.id)\"\n >\n @if (action.icon) {\n <span class=\"pecb-course-card__btn-icon\" aria-hidden=\"true\" [innerHTML]=\"safeSvg(action.icon)\"></span>\n }\n @if (!action.iconOnly) {\n {{ action.label }}\n }\n </button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{display:block;height:100%;container-type:inline-size}.pecb-course-card{display:flex;flex-direction:column;height:100%;background-color:#fff;border:1px solid #ececec;border-radius:12px;overflow:hidden;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#212427}.pecb-course-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:18px 18px 16px;border-bottom:1px solid #ececec}.pecb-course-card__icon-wrap{display:flex;align-items:center;gap:8px;flex:none;margin-right:auto}.pecb-course-card__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}.pecb-course-card__icon img{display:block;width:44px;height:44px}.pecb-course-card__icon-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.pecb-course-card__icon ::ng-deep svg{display:block;width:100%;height:100%}.pecb-course-card__icon-label{font-size:10.5px;font-weight:600;line-height:1.2;color:#919191;white-space:nowrap}.pecb-course-card__pill{flex:none;margin-left:auto;margin-top:2px}.pecb-course-card__heading{flex:1 1 100%;min-width:0}.pecb-course-card__title{margin:0;font-size:16px;font-weight:700;line-height:1.3;color:#212427;overflow-wrap:anywhere}.pecb-course-card__subtitle{display:block;margin-top:3px;font-size:12px;font-weight:500;color:#919191}.pecb-course-card__body{display:flex;flex-direction:column;gap:16px;flex:1;padding:18px}.pecb-course-card__meta{display:flex;flex-direction:column;gap:12px}.pecb-course-card__meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#616161}.pecb-course-card__meta-label{flex:0 1 auto;max-width:60%;min-width:0;overflow-wrap:anywhere}.pecb-course-card__meta-value{flex:1 1 auto;min-width:0;font-weight:600;color:#212427;text-align:right;overflow-wrap:anywhere}.pecb-course-card__progress{display:flex;flex-direction:column;gap:8px}.pecb-course-card__bar{height:6px;border-radius:9999px;background-color:#ececec;overflow:hidden}.pecb-course-card__bar-fill{display:block;height:100%;border-radius:9999px;transform-origin:left;animation:pecb-course-card-bar-fill 1s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){.pecb-course-card__bar-fill{animation:none}}.pecb-course-card__bar-fill--success{background-color:#57bc57}.pecb-course-card__bar-fill--warning{background-color:#fd7e14}.pecb-course-card__bar-fill--error{background-color:#dc3545}.pecb-course-card__bar-fill--processing{background-color:#007bff}.pecb-course-card__note{border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.5}.pecb-course-card__note p{margin:0}.pecb-course-card__note b{font-weight:700}.pecb-course-card__note--neutral{background-color:#f7f5f5;color:#616161}.pecb-course-card__note--warning{background-color:#fff4e5;color:#fd7e14}.pecb-course-card__note--danger{background-color:#fdecea;color:#dc3545}.pecb-course-card__actions{display:flex;gap:8px;margin-top:auto}.pecb-course-card__actions--stack{flex-direction:column}.pecb-course-card__actions--stack .pecb-course-card__btn{width:100%}.pecb-course-card__actions--row{flex-direction:row;flex-wrap:wrap;align-items:stretch}.pecb-course-card__actions--row .pecb-course-card__btn{flex:1 1 0;min-width:fit-content}.pecb-course-card__actions--row .pecb-course-card__btn--icon-only{flex:0 0 auto}.pecb-course-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:8px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.pecb-course-card__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.pecb-course-card__btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-course-card__btn--primary{background-color:#212427;color:#fff}.pecb-course-card__btn--primary:hover:not(:disabled){background-color:#616161}.pecb-course-card__btn--ghost{background-color:#fff;color:#212427;border-color:#c2c2c2}.pecb-course-card__btn--ghost:hover:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-course-card__btn--accent{background-color:#a11e29;color:#fff}.pecb-course-card__btn--accent:hover:not(:disabled){background-color:#671018}.pecb-course-card__btn--success{background-color:#57bc57;color:#fff}.pecb-course-card__btn--success:hover:not(:disabled){background-color:green}.pecb-course-card__btn--icon-only{padding:0 12px}.pecb-course-card__btn-icon{display:flex;line-height:0;flex-shrink:0}.pecb-course-card__btn-icon ::ng-deep svg{display:block}.pecb-course-card--dimmed .pecb-course-card__head,.pecb-course-card--dimmed .pecb-course-card__meta{opacity:.6}@container (max-width: 299px){.pecb-course-card__head{padding:16px 16px 12px}.pecb-course-card__body{padding:16px}.pecb-course-card__meta-row{flex-direction:column;align-items:flex-start;gap:2px}.pecb-course-card__meta-label{max-width:none}.pecb-course-card__meta-value{text-align:left}.pecb-course-card__progress .pecb-course-card__meta-row{flex-direction:row;align-items:center}.pecb-course-card__btn{height:40px;padding:0 12px}}@keyframes pecb-course-card-bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"] }]
|
|
23347
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconSvg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvg", required: false }] }], iconLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], statusTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusTone", required: false }] }], metaRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaRows", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], noteText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteText", required: false }] }], noteTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteTone", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsLayout", required: false }] }], dimmed: [{ type: i0.Input, args: [{ isSignal: true, alias: "dimmed", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
|
|
23348
|
+
|
|
23212
23349
|
/*
|
|
23213
23350
|
* Public API Surface of @pecb-ui/components
|
|
23214
23351
|
*
|
|
@@ -23223,5 +23360,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
23223
23360
|
* Generated bundle index. Do not edit.
|
|
23224
23361
|
*/
|
|
23225
23362
|
|
|
23226
|
-
export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, ActionItemComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseContentPanelComponent, CoursePlayerComponent, CourseTileComponent, CredentialCardComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_SLIDE_VIEWER_KEY_MAP, DEFAULT_SLIDE_VIEWER_LABELS, DEFAULT_SLIDE_VIEWER_TOOLS, DEFAULT_SLIDE_VIEWER_ZOOM_STEPS, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FormSectionCardComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, HubCardComponent, HubCardGridComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, ListItemComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NestedTableComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, OutlinedFieldComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PaymentPlanCardComponent, PaymentScheduleCardComponent, PaymentSummaryComponent, PeriodPaymentModalComponent, PreviewCardComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressArcComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SlideViewerComponent, SlideViewerDayDirective, SlideViewerThumbnailDirective, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TagSelectComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, TimelineComponent, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, clampSlidePage, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
|
|
23363
|
+
export { APP_HEADER_TRANSLATIONS, APP_SHELL_LOCALES, APP_SIDEBAR_MENU_ICONS, APP_SIDEBAR_MENU_TRANSLATIONS, APP_SIDEBAR_TRANSLATIONS, AccordionItemComponent, AccordionSmallComponent, ActionItemComponent, AddButtonComponent, AdminHeaderComponent, AdminHeaderFieldTemplateDirective, AffixComponent, AlertComponent, AnchorComponent, AppHeaderComponent, AppSidebarComponent, ApplicationStatusBarComponent, AuditorStatusComponent, AuthorDateTimeComponent, BackToTopComponent, BadgeComponent, BlurDirective, BottomSheetComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CancelUpdateButtonsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CertificateUploadBarComponent, CheckDeleteIconComponent, CheckboxComponent, CheckboxDisplayComponent, CodeInputComponent, CodeSnippetComponent, ColorPaletteComponent, ConfirmationComponent, ContentTypeTagComponent, CourseCardComponent, CourseContentPanelComponent, CoursePlayerComponent, CourseTileComponent, CredentialCardComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_COURSE_CONTENT_PANEL_LABELS, DEFAULT_LANGUAGES, DEFAULT_SLIDE_VIEWER_KEY_MAP, DEFAULT_SLIDE_VIEWER_LABELS, DEFAULT_SLIDE_VIEWER_TOOLS, DEFAULT_SLIDE_VIEWER_ZOOM_STEPS, DEFAULT_VIDEO_PLAYER_LABELS, DEFAULT_VIDEO_PLAYER_RATES, DashboardGridComponent, DatepickerComponent, DividerComponent, DropdownComponent, EMPTY_STATE_MAX_BUTTONS, EditButtonComponent, EditCoverPhotoComponent, EmptyStateComponent, ExpandableRowTableComponent, FileUploadComponent, FilterColumnsComponent, FloatButtonComponent, FloatButtonItemComponent, FormSectionCardComponent, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, GeneralComponent, GridComponent, GridItemComponent, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderSearchComponent, HeaderUserComponent, HierarchicalTableComponent, HorizontalStepsComponent, HubCardComponent, HubCardGridComponent, IconComponent, IconRegistry, IconTagComponent, InformationBoxComponent, InputComponent, LanguageDropdownComponent, LinkButtonComponent, ListItemComponent, LoadingService, MediaComponent, MessageBubbleComponent, MessageItemComponent, MetricsCardComponent, MiniIconButtonComponent, NestedTableComponent, NoResultsComponent, NoteSidebarItemComponent, NotesPanelComponent, NotificationService, NotificationStatusLinkComponent, OutlinedFieldComponent, PECB_COLOR_PALETTE, PECB_CUSTOM_ICONS, PECB_FONT_STYLES, PECB_ICONS, PECB_TYPE_SCALE, PaginationComponent, PaymentPlanCardComponent, PaymentScheduleCardComponent, PaymentSummaryComponent, PeriodPaymentModalComponent, PreviewCardComponent, PriceMethodComponent, ProfileComponent, ProfileElementsCardComponent, ProfileGroupComponent, ProgressArcComponent, ProgressBarComponent, ProgressCircleComponent, ProjectLayoutComponent, QuantitySelectorComponent, QuestionTypeTagComponent, RadioComponent, RadioDisplayComponent, RatingNumberComponent, ReasonForReturnComponent, RequestSentByComponent, RequestStatusBarComponent, ResultPageComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, ShadowDirective, SidebarComponent, SkeletonComponent, SlidePointsComponent, SlideViewerComponent, SlideViewerDayDirective, SlideViewerThumbnailDirective, SpacerComponent, SpinnerComponent, StandardsPdfCardComponent, StatisticsCardComponent, StatusComponent, StepperComponent, TabComponent, TableComponent, TagComponent, TagSelectComponent, TestimonialComponent, TextFormFieldComponent, ThemeService, TimelineComponent, ToggleComponent, ToolbarBarComponent, TooltipComponent, TooltipDirective, TourComponent, TranscriptLineComponent, TypographyComponent, UserWithEmailComponent, VerifyChecklistComponent, VideoPlayerComponent, VideoUploadBarComponent, VirtualTableComponent, addClass, announceToScreenReader, appHeaderLabels, appSidebarLabels, appSidebarMenu, appSidebarRoles, capitalize, clampSlidePage, closestElement, copyToClipboard, courseModuleStats, courseProgress, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, findCourseLesson, findCourseModule, formatCount, formatCourseDuration, formatCourseTime, formatErrorForLog, formatErrorMessage, formatVideoTime, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, parseLessonPartTitle, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, resolveAppShellLocale, resolveLessonStatus, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
|
|
23227
23364
|
//# sourceMappingURL=pecb-ui-components.mjs.map
|