ngwr 12.0.0 → 12.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -20
- package/alert/styles/_index.scss +11 -4
- package/badge/styles/_index.scss +30 -0
- package/badge/styles/_tag.scss +15 -1
- package/descriptions/styles/_index.scss +13 -3
- package/drawer/styles/_index.scss +95 -1
- package/fesm2022/ngwr-action-sheet.mjs +3 -3
- package/fesm2022/ngwr-affix.mjs +3 -3
- package/fesm2022/ngwr-alert.mjs +3 -3
- package/fesm2022/ngwr-anchor.mjs +3 -3
- package/fesm2022/ngwr-aurora.mjs +3 -3
- package/fesm2022/ngwr-avatar.mjs +3 -3
- package/fesm2022/ngwr-back-top.mjs +3 -3
- package/fesm2022/ngwr-badge.mjs +6 -6
- package/fesm2022/ngwr-bar-chart.mjs +3 -3
- package/fesm2022/ngwr-blur-text.mjs +3 -3
- package/fesm2022/ngwr-border-glow.mjs +3 -3
- package/fesm2022/ngwr-breadcrumbs.mjs +6 -6
- package/fesm2022/ngwr-burger.mjs +3 -3
- package/fesm2022/ngwr-button.mjs +6 -6
- package/fesm2022/ngwr-calendar-heatmap.mjs +3 -3
- package/fesm2022/ngwr-calendar.mjs +3 -3
- package/fesm2022/ngwr-card.mjs +9 -9
- package/fesm2022/ngwr-carousel.mjs +6 -6
- package/fesm2022/ngwr-cascader.mjs +3 -3
- package/fesm2022/ngwr-checkbox.mjs +6 -6
- package/fesm2022/ngwr-circular-text.mjs +3 -3
- package/fesm2022/ngwr-click-spark.mjs +3 -3
- package/fesm2022/ngwr-clipboard.mjs +3 -3
- package/fesm2022/ngwr-collapse.mjs +9 -9
- package/fesm2022/ngwr-color-picker.mjs +6 -6
- package/fesm2022/ngwr-color-picker.mjs.map +1 -1
- package/fesm2022/ngwr-command-palette.mjs +3 -3
- package/fesm2022/ngwr-compare.mjs +3 -3
- package/fesm2022/ngwr-confetti.mjs +3 -3
- package/fesm2022/ngwr-context-menu.mjs +12 -12
- package/fesm2022/ngwr-cookie.mjs +3 -3
- package/fesm2022/ngwr-counter.mjs +6 -6
- package/fesm2022/ngwr-date-adapters-fns.mjs +3 -3
- package/fesm2022/ngwr-date-adapters-luxon.mjs +3 -3
- package/fesm2022/ngwr-date-picker.mjs +18 -18
- package/fesm2022/ngwr-date.mjs +3 -3
- package/fesm2022/ngwr-decrypt-text.mjs +3 -3
- package/fesm2022/ngwr-density.mjs +6 -6
- package/fesm2022/ngwr-descriptions.mjs +6 -6
- package/fesm2022/ngwr-dialog.mjs +15 -15
- package/fesm2022/ngwr-directives.mjs +12 -12
- package/fesm2022/ngwr-divider.mjs +3 -3
- package/fesm2022/ngwr-donut-chart.mjs +3 -3
- package/fesm2022/ngwr-drag-drop.mjs +6 -6
- package/fesm2022/ngwr-drawer.mjs +24 -18
- package/fesm2022/ngwr-drawer.mjs.map +1 -1
- package/fesm2022/ngwr-dropdown.mjs +9 -9
- package/fesm2022/ngwr-empty.mjs +3 -3
- package/fesm2022/ngwr-event-calendar.mjs +6 -6
- package/fesm2022/ngwr-falling-text.mjs +3 -3
- package/fesm2022/ngwr-file-upload.mjs +3 -3
- package/fesm2022/ngwr-form.mjs +9 -9
- package/fesm2022/ngwr-fuzzy-text.mjs +3 -3
- package/fesm2022/ngwr-gauge.mjs +3 -3
- package/fesm2022/ngwr-glitch-text.mjs +3 -3
- package/fesm2022/ngwr-gradient-text.mjs +3 -3
- package/fesm2022/ngwr-hotkey.mjs +6 -6
- package/fesm2022/ngwr-i18n.mjs +9 -9
- package/fesm2022/ngwr-icon.mjs +6 -6
- package/fesm2022/ngwr-image-cropper.mjs +3 -3
- package/fesm2022/ngwr-input-number.mjs +3 -3
- package/fesm2022/ngwr-input-otp.mjs +3 -3
- package/fesm2022/ngwr-input.mjs +15 -15
- package/fesm2022/ngwr-keyboard.mjs +3 -3
- package/fesm2022/ngwr-knob.mjs +3 -3
- package/fesm2022/ngwr-layout.mjs +15 -15
- package/fesm2022/ngwr-lightbox.mjs +3 -3
- package/fesm2022/ngwr-line-chart.mjs +3 -3
- package/fesm2022/ngwr-list.mjs +6 -6
- package/fesm2022/ngwr-loading-bar.mjs +6 -6
- package/fesm2022/ngwr-markdown.mjs +6 -6
- package/fesm2022/ngwr-marquee.mjs +3 -3
- package/fesm2022/ngwr-media.mjs +3 -3
- package/fesm2022/ngwr-mention.mjs +6 -6
- package/fesm2022/ngwr-meta.mjs +6 -6
- package/fesm2022/ngwr-meter-group.mjs +3 -3
- package/fesm2022/ngwr-overlay.mjs +6 -6
- package/fesm2022/ngwr-page-header.mjs +3 -3
- package/fesm2022/ngwr-pagination.mjs +72 -9
- package/fesm2022/ngwr-pagination.mjs.map +1 -1
- package/fesm2022/ngwr-pipes.mjs +21 -21
- package/fesm2022/ngwr-platform.mjs +9 -9
- package/fesm2022/ngwr-popconfirm.mjs +6 -6
- package/fesm2022/ngwr-popover.mjs +6 -6
- package/fesm2022/ngwr-progress.mjs +3 -3
- package/fesm2022/ngwr-pull-to-refresh.mjs +3 -3
- package/fesm2022/ngwr-qr.mjs +3 -3
- package/fesm2022/ngwr-radio.mjs +6 -6
- package/fesm2022/ngwr-rating.mjs +3 -3
- package/fesm2022/ngwr-result.mjs +12 -12
- package/fesm2022/ngwr-rotating-text.mjs +3 -3
- package/fesm2022/ngwr-scroll.mjs +3 -3
- package/fesm2022/ngwr-segmented-testing.mjs +71 -0
- package/fesm2022/ngwr-segmented-testing.mjs.map +1 -1
- package/fesm2022/ngwr-segmented.mjs +98 -8
- package/fesm2022/ngwr-segmented.mjs.map +1 -1
- package/fesm2022/ngwr-select.mjs +22 -12
- package/fesm2022/ngwr-select.mjs.map +1 -1
- package/fesm2022/ngwr-shiny-text.mjs +6 -6
- package/fesm2022/ngwr-sidebar.mjs +3 -3
- package/fesm2022/ngwr-skeleton.mjs +3 -3
- package/fesm2022/ngwr-slider.mjs +3 -3
- package/fesm2022/ngwr-sparkline.mjs +3 -3
- package/fesm2022/ngwr-speed-dial.mjs +3 -3
- package/fesm2022/ngwr-spinner.mjs +3 -3
- package/fesm2022/ngwr-splash-cursor.mjs +3 -3
- package/fesm2022/ngwr-split-text.mjs +3 -3
- package/fesm2022/ngwr-splitter.mjs +3 -3
- package/fesm2022/ngwr-spotlight-card.mjs +6 -6
- package/fesm2022/ngwr-squircle.mjs +6 -6
- package/fesm2022/ngwr-star-border.mjs +3 -3
- package/fesm2022/ngwr-statistic.mjs +9 -9
- package/fesm2022/ngwr-stepper.mjs +6 -6
- package/fesm2022/ngwr-storage.mjs +3 -3
- package/fesm2022/ngwr-switch.mjs +3 -3
- package/fesm2022/ngwr-table.mjs +18 -18
- package/fesm2022/ngwr-tabs.mjs +6 -6
- package/fesm2022/ngwr-textarea.mjs +3 -3
- package/fesm2022/ngwr-theme.mjs +3 -3
- package/fesm2022/ngwr-tilt-card.mjs +6 -6
- package/fesm2022/ngwr-timeline.mjs +6 -6
- package/fesm2022/ngwr-toast.mjs +9 -9
- package/fesm2022/ngwr-toolbar.mjs +3 -3
- package/fesm2022/ngwr-tour.mjs +6 -6
- package/fesm2022/ngwr-transfer.mjs +3 -3
- package/fesm2022/ngwr-tree.mjs +3 -3
- package/fesm2022/ngwr-typewriter.mjs +3 -3
- package/fesm2022/ngwr-typography.mjs +3 -3
- package/fesm2022/ngwr-version.mjs +1 -1
- package/fesm2022/ngwr-version.mjs.map +1 -1
- package/fesm2022/ngwr-virtual-scroll.mjs +3 -3
- package/fesm2022/ngwr-waves.mjs +3 -3
- package/fesm2022/ngwr-window.mjs +12 -12
- package/llms-full.txt +1 -1
- package/llms.txt +24 -2
- package/overlay/styles/_arrow.scss +243 -0
- package/package.json +1 -1
- package/popconfirm/styles/_index.scss +17 -0
- package/popover/styles/_index.scss +49 -207
- package/select/styles/_index.scss +30 -4
- package/sidebar/styles/_index.scss +4 -1
- package/stepper/styles/_index.scss +44 -5
- package/theme/styles/_mixins.scss +10 -0
- package/tree/styles/_index.scss +10 -2
- package/types/ngwr-pagination.d.ts +11 -0
- package/types/ngwr-segmented-testing.d.ts +44 -0
- package/types/ngwr-segmented.d.ts +86 -4
- package/types/ngwr-select.d.ts +12 -2
- package/types/ngwr-version.d.ts +1 -1
|
@@ -267,10 +267,10 @@ class WrSquircle {
|
|
|
267
267
|
host.style.removeProperty('--wr-squircle-border-width');
|
|
268
268
|
host.style.removeProperty('--wr-squircle-border-color');
|
|
269
269
|
}
|
|
270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
271
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.
|
|
270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSquircle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
271
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrSquircle, isStandalone: true, selector: "[wrSquircle]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, smoothing: { classPropertyName: "smoothing", publicName: "smoothing", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, corners: { classPropertyName: "corners", publicName: "corners", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enabled: "enabledChange", borderWidth: "borderWidthChange", borderColor: "borderColorChange", corners: "cornersChange" }, host: { properties: { "class.wr-squircle--bordered": "borderWidth() > 0 && enabled()" } }, ngImport: i0 });
|
|
272
272
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSquircle, decorators: [{
|
|
274
274
|
type: Directive,
|
|
275
275
|
args: [{
|
|
276
276
|
selector: '[wrSquircle]',
|
|
@@ -298,10 +298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
298
298
|
* @see https://ngwr.dev/reference/components/squircle
|
|
299
299
|
*/
|
|
300
300
|
class WrSquircleHost {
|
|
301
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.
|
|
301
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSquircleHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: WrSquircleHost, isStandalone: true, selector: "wr-squircle", host: { classAttribute: "wr-squircle" }, hostDirectives: [{ directive: WrSquircle, inputs: ["radius", "radius", "smoothing", "smoothing", "borderWidth", "borderWidth", "borderColor", "borderColor"] }], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
|
|
303
303
|
}
|
|
304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSquircleHost, decorators: [{
|
|
305
305
|
type: Component,
|
|
306
306
|
args: [{
|
|
307
307
|
selector: 'wr-squircle',
|
|
@@ -51,10 +51,10 @@ class WrStarBorder {
|
|
|
51
51
|
parts.push('wr-star-border--single');
|
|
52
52
|
return parts.join(' ');
|
|
53
53
|
};
|
|
54
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: WrStarBorder, isStandalone: true, selector: "wr-star-border, [wr-star-border]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rays: { classPropertyName: "rays", publicName: "rays", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-star-border-color": "color()", "style.--wr-star-border-speed": "speed() + \"s\"", "style.padding": "thickness() + \"px 0\"" } }, ngImport: i0, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:where([class^=wr-],[class*=\" wr-\"]),:where([class^=wr-],[class*=\" wr-\"]):before,:where([class^=wr-],[class*=\" wr-\"]):after{box-sizing:border-box}:root{color-scheme:light;--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-muted-text: #5f6c7d;--wr-color-muted-text-rgb: 95, 108, 125;--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #e21a62;--wr-color-secondary-rgb: 226, 26, 98;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(203.130952381, 23.369047619, 88.0833333333);--wr-color-secondary-darker: rgb(180.2619047619, 20.7380952381, 78.1666666667);--wr-color-secondary-light: rgb(231.0119047619, 46.4880952381, 112.9166666667);--wr-color-secondary-lighter: rgb(233.6428571429, 69.3571428571, 128.5);--wr-color-success: #008800;--wr-color-success-rgb: 0, 136, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 110.5, 0);--wr-color-success-darker: #005500;--wr-color-success-light: rgb(0, 161.5, 0);--wr-color-success-lighter: #00bb00;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #000000;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #dc3137;--wr-color-danger-rgb: 220, 49, 55;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(208.1369294606, 35.3630705394, 41.4253112033);--wr-color-danger-darker: rgb(186.3402489627, 31.6597510373, 37.0871369295);--wr-color-danger-light: rgb(223.7033195021, 70.7966804979, 76.1618257261);--wr-color-danger-lighter: rgb(227.4066390041, 92.5933609959, 97.3236514523);--wr-color-info: #3472d9;--wr-color-info-rgb: 52, 114, 217;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(38.3941908714, 101.0373443983, 205.1058091286);--wr-color-info-darker: rgb(34.3734439834, 90.4564315353, 183.6265560166);--wr-color-info-light: rgb(73.479253112, 128.9190871369, 221.020746888);--wr-color-info-lighter: rgb(94.9585062241, 143.8381742739, 225.0414937759);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #000000;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #6a7683;--wr-color-medium-rgb: 106, 118, 131;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(94.5949367089, 105.3037974684, 116.9050632911);--wr-color-medium-darker: rgb(83.1898734177, 92.6075949367, 102.8101265823);--wr-color-medium-light: rgb(118.1962025316, 130.7278481013, 144.3037974684);--wr-color-medium-lighter: rgb(132.2911392405, 143.5316455696, 155.7088607595);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-disabled-opacity: .6;--wr-focus-ring-width: 2px;--wr-focus-ring-offset: 2px;--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em;--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25)}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-dark-light: rgb(247.5, 249, 251.4);--wr-color-dark-lighter: rgb(251.25, 252, 253.2);--wr-color-dark-dark: rgb(212.7702702703, 221.2162162162, 234.7297297297);--wr-color-dark-darker: rgb(195.5405405405, 207.4324324324, 226.4594594595);--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-light-light: rgb(33.429245283, 41.3466981132, 59.820754717);--wr-color-light-dark: rgb(47.141509434, 58.3066037736, 84.358490566);--wr-color-medium: #6d7682;--wr-color-medium-rgb: 109, 118, 130;--wr-color-medium-contrast: #ffffff;--wr-color-medium-light: rgb(121.4644351464, 130.7092050209, 143.0355648536);--wr-color-medium-lighter: rgb(135.3347280335, 143.6192468619, 154.6652719665);--wr-color-medium-dark: rgb(97.370292887, 105.410041841, 116.129707113);--wr-color-medium-darker: rgb(85.7405857741, 92.820083682, 102.2594142259);--wr-color-muted-text: #9aa6b8;--wr-color-muted-text-rgb: 154, 166, 184;--wr-color-primary: #3567ff;--wr-color-primary-contrast: #ffffff;--wr-color-primary-rgb: 53, 103, 255;--wr-color-primary-light: #547eff;--wr-color-primary-dark: #2848aa;--wr-color-primary-lighter: #7396ff;--wr-color-primary-darker: #183179;--wr-color-success: #23863c;--wr-color-success-contrast: #ffffff;--wr-color-success-rgb: 35, 134, 60;--wr-color-success-light: rgb(40.2810650888, 154.2189349112, 69.0532544379);--wr-color-success-lighter: rgb(45.5621301775, 174.4378698225, 78.1065088757);--wr-color-success-dark: rgb(29.7189349112, 113.7810650888, 50.9467455621);--wr-color-success-darker: rgb(24.4378698225, 93.5621301775, 41.8934911243);--wr-color-warning: #ffcc33;--wr-color-warning-contrast: #000000;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ca4949;--wr-color-danger-contrast: #ffffff;--wr-color-danger-rgb: 202, 73, 73;--wr-color-danger-light: rgb(207.7510638298, 92.7489361702, 92.7489361702);--wr-color-danger-lighter: rgb(213.5021276596, 112.4978723404, 112.4978723404);--wr-color-danger-dark: rgb(193.229787234, 56.270212766, 56.270212766);--wr-color-danger-darker: rgb(173.4808510638, 50.5191489362, 50.5191489362);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark);--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-outline);background:var(--wr-color-surface);color:var(--wr-color-on-surface);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
54
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStarBorder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrStarBorder, isStandalone: true, selector: "wr-star-border, [wr-star-border]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rays: { classPropertyName: "rays", publicName: "rays", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-star-border-color": "color()", "style.--wr-star-border-speed": "speed() + \"s\"", "style.padding": "thickness() + \"px 0\"" } }, ngImport: i0, template: "<span class=\"wr-star-border__ray wr-star-border__ray--bottom\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__ray wr-star-border__ray--top\" aria-hidden=\"true\"></span>\n<span class=\"wr-star-border__inner\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:where([class^=wr-],[class*=\" wr-\"]),:where([class^=wr-],[class*=\" wr-\"]):before,:where([class^=wr-],[class*=\" wr-\"]):after{box-sizing:border-box}:root{color-scheme:light;--wr-color-white: #ffffff;--wr-color-white-rgb: 255, 255, 255;--wr-color-black: #000000;--wr-color-black-rgb: 0, 0, 0;--wr-color-backdrop-rgb: 0, 0, 0;--wr-color-muted-text: #5f6c7d;--wr-color-muted-text-rgb: 95, 108, 125;--wr-color-gray-50: #f8fafc;--wr-color-gray-100: #f1f5f9;--wr-color-gray-200: #e2e8f0;--wr-color-gray-300: #cbd5e1;--wr-color-gray-400: #94a3b8;--wr-color-gray-500: #64748b;--wr-color-gray-600: #475569;--wr-color-gray-700: #334155;--wr-color-gray-800: #1e293b;--wr-color-gray-900: #0f172a;--wr-color-gray-950: #020617;--wr-color-primary: #3969e2;--wr-color-primary-rgb: 57, 105, 226;--wr-color-primary-contrast: #ffffff;--wr-color-primary-dark: rgb(34.7577092511, 88.1497797357, 222.7422907489);--wr-color-primary-darker: rgb(29.6387665198, 78.6960352423, 202.3612334802);--wr-color-primary-light: rgb(79.2422907489, 121.8502202643, 229.2577092511);--wr-color-primary-lighter: rgb(101.4845814978, 138.7004405286, 232.5154185022);--wr-color-secondary: #e21a62;--wr-color-secondary-rgb: 226, 26, 98;--wr-color-secondary-contrast: #ffffff;--wr-color-secondary-dark: rgb(203.130952381, 23.369047619, 88.0833333333);--wr-color-secondary-darker: rgb(180.2619047619, 20.7380952381, 78.1666666667);--wr-color-secondary-light: rgb(231.0119047619, 46.4880952381, 112.9166666667);--wr-color-secondary-lighter: rgb(233.6428571429, 69.3571428571, 128.5);--wr-color-success: #008800;--wr-color-success-rgb: 0, 136, 0;--wr-color-success-contrast: #ffffff;--wr-color-success-dark: rgb(0, 110.5, 0);--wr-color-success-darker: #005500;--wr-color-success-light: rgb(0, 161.5, 0);--wr-color-success-lighter: #00bb00;--wr-color-warning: #ffba00;--wr-color-warning-rgb: 255, 186, 0;--wr-color-warning-contrast: #000000;--wr-color-warning-dark: rgb(229.5, 167.4, 0);--wr-color-warning-darker: rgb(204, 148.8, 0);--wr-color-warning-light: rgb(255, 192.9, 25.5);--wr-color-warning-lighter: rgb(255, 199.8, 51);--wr-color-danger: #dc3137;--wr-color-danger-rgb: 220, 49, 55;--wr-color-danger-contrast: #ffffff;--wr-color-danger-dark: rgb(208.1369294606, 35.3630705394, 41.4253112033);--wr-color-danger-darker: rgb(186.3402489627, 31.6597510373, 37.0871369295);--wr-color-danger-light: rgb(223.7033195021, 70.7966804979, 76.1618257261);--wr-color-danger-lighter: rgb(227.4066390041, 92.5933609959, 97.3236514523);--wr-color-info: #3472d9;--wr-color-info-rgb: 52, 114, 217;--wr-color-info-contrast: #ffffff;--wr-color-info-dark: rgb(38.3941908714, 101.0373443983, 205.1058091286);--wr-color-info-darker: rgb(34.3734439834, 90.4564315353, 183.6265560166);--wr-color-info-light: rgb(73.479253112, 128.9190871369, 221.020746888);--wr-color-info-lighter: rgb(94.9585062241, 143.8381742739, 225.0414937759);--wr-color-light: #cbd5e1;--wr-color-light-rgb: 203, 213, 225;--wr-color-light-contrast: #000000;--wr-color-light-dark: rgb(186.8292682927, 199.9390243902, 215.6707317073);--wr-color-light-darker: rgb(170.6585365854, 186.8780487805, 206.3414634146);--wr-color-light-light: rgb(219.1707317073, 226.0609756098, 234.3292682927);--wr-color-light-lighter: rgb(235.3414634146, 239.1219512195, 243.6585365854);--wr-color-medium: #6a7683;--wr-color-medium-rgb: 106, 118, 131;--wr-color-medium-contrast: #ffffff;--wr-color-medium-dark: rgb(94.5949367089, 105.3037974684, 116.9050632911);--wr-color-medium-darker: rgb(83.1898734177, 92.6075949367, 102.8101265823);--wr-color-medium-light: rgb(118.1962025316, 130.7278481013, 144.3037974684);--wr-color-medium-lighter: rgb(132.2911392405, 143.5316455696, 155.7088607595);--wr-color-dark: #0f172a;--wr-color-dark-rgb: 15, 23, 42;--wr-color-dark-contrast: #ffffff;--wr-color-dark-dark: rgb(8.2894736842, 12.7105263158, 23.2105263158);--wr-color-dark-darker: rgb(1.5789473684, 2.4210526316, 4.4210526316);--wr-color-dark-light: rgb(21.7105263158, 33.2894736842, 60.7894736842);--wr-color-dark-lighter: rgb(28.4210526316, 43.5789473684, 79.5789473684);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark)}:root{--wr-border-radius-sm: .375rem;--wr-border-radius-base: .625rem;--wr-border-radius-lg: 1rem;--wr-border-radius-pill: 50rem;--wr-control-padding-y-sm: .125rem;--wr-control-padding-y-md: .25rem;--wr-control-padding-y-lg: .3125rem;--wr-control-padding-x-sm: .5rem;--wr-control-padding-x-md: .75rem;--wr-control-padding-x-lg: 1rem;--wr-control-line-height-sm: 1rem;--wr-control-line-height-md: 1.25rem;--wr-control-line-height-lg: 1.5rem;--wr-control-font-size-sm: var(--wr-text-xs);--wr-control-font-size-md: var(--wr-text-sm);--wr-control-font-size-lg: var(--wr-text-base);--wr-control-radius-sm: 5px;--wr-control-radius-md: 6px;--wr-control-radius-lg: 7px;--wr-ease-linear: linear;--wr-ease-out: cubic-bezier(.16, 1, .3, 1);--wr-ease-in: cubic-bezier(.7, 0, .84, 0);--wr-ease-in-out: cubic-bezier(.65, 0, .35, 1);--wr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--wr-duration-fast: .1s;--wr-duration-base: .15s;--wr-duration-slow: .3s;--wr-duration-slower: .5s;--wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);--wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);--wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);--wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);--wr-disabled-opacity: .6;--wr-focus-ring-width: 2px;--wr-focus-ring-offset: 2px;--wr-z-overlay: 1000;--wr-z-window: 1100;--wr-z-top: 9999;--wr-overlay-duration: var(--wr-duration-base);--wr-overlay-ease: var(--wr-ease-out);--wr-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--wr-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--wr-text-xs: .75rem;--wr-text-sm: .875rem;--wr-text-base: 1rem;--wr-text-lg: 1.125rem;--wr-text-xl: 1.25rem;--wr-text-2xl: 1.5rem;--wr-text-3xl: 1.875rem;--wr-text-4xl: 2.25rem;--wr-text-5xl: 3rem;--wr-font-weight-thin: 200;--wr-font-weight-light: 300;--wr-font-weight-regular: 400;--wr-font-weight-medium: 500;--wr-font-weight-semibold: 600;--wr-font-weight-bold: 700;--wr-font-weight-extrabold: 800;--wr-leading-none: 1;--wr-leading-tight: 1.25;--wr-leading-snug: 1.375;--wr-leading-normal: 1.5;--wr-leading-relaxed: 1.625;--wr-leading-loose: 2;--wr-tracking-tighter: -.05em;--wr-tracking-tight: -.025em;--wr-tracking-normal: 0;--wr-tracking-wide: .025em;--wr-tracking-wider: .05em;--wr-tracking-widest: .1em;--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25)}@keyframes wr-overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}[data-theme=dark]{--wr-color-white: #0b1120;--wr-color-white-rgb: 11, 17, 32;--wr-color-dark: #e6ebf3;--wr-color-dark-rgb: 230, 235, 243;--wr-color-dark-contrast: #0b1120;--wr-color-white-contrast: #e6ebf3;--wr-color-dark-light: rgb(247.5, 249, 251.4);--wr-color-dark-lighter: rgb(251.25, 252, 253.2);--wr-color-dark-dark: rgb(212.7702702703, 221.2162162162, 234.7297297297);--wr-color-dark-darker: rgb(195.5405405405, 207.4324324324, 226.4594594595);--wr-color-light: #262f44;--wr-color-light-rgb: 38, 47, 68;--wr-color-light-contrast: #e6ebf3;--wr-color-light-lighter: #1a2236;--wr-color-light-darker: #3a4661;--wr-color-light-light: rgb(33.429245283, 41.3466981132, 59.820754717);--wr-color-light-dark: rgb(47.141509434, 58.3066037736, 84.358490566);--wr-color-medium: #6d7682;--wr-color-medium-rgb: 109, 118, 130;--wr-color-medium-contrast: #ffffff;--wr-color-medium-light: rgb(121.4644351464, 130.7092050209, 143.0355648536);--wr-color-medium-lighter: rgb(135.3347280335, 143.6192468619, 154.6652719665);--wr-color-medium-dark: rgb(97.370292887, 105.410041841, 116.129707113);--wr-color-medium-darker: rgb(85.7405857741, 92.820083682, 102.2594142259);--wr-color-muted-text: #9aa6b8;--wr-color-muted-text-rgb: 154, 166, 184;--wr-color-primary: #3567ff;--wr-color-primary-contrast: #ffffff;--wr-color-primary-rgb: 53, 103, 255;--wr-color-primary-light: #547eff;--wr-color-primary-dark: #2848aa;--wr-color-primary-lighter: #7396ff;--wr-color-primary-darker: #183179;--wr-color-success: #23863c;--wr-color-success-contrast: #ffffff;--wr-color-success-rgb: 35, 134, 60;--wr-color-success-light: rgb(40.2810650888, 154.2189349112, 69.0532544379);--wr-color-success-lighter: rgb(45.5621301775, 174.4378698225, 78.1065088757);--wr-color-success-dark: rgb(29.7189349112, 113.7810650888, 50.9467455621);--wr-color-success-darker: rgb(24.4378698225, 93.5621301775, 41.8934911243);--wr-color-warning: #ffcc33;--wr-color-warning-contrast: #000000;--wr-color-warning-rgb: 255, 204, 51;--wr-color-warning-light: rgb(255, 210.375, 76.5);--wr-color-warning-lighter: rgb(255, 216.75, 102);--wr-color-warning-dark: rgb(255, 197.625, 25.5);--wr-color-warning-darker: rgb(255, 191.25, 0);--wr-color-danger: #ca4949;--wr-color-danger-contrast: #ffffff;--wr-color-danger-rgb: 202, 73, 73;--wr-color-danger-light: rgb(207.7510638298, 92.7489361702, 92.7489361702);--wr-color-danger-lighter: rgb(213.5021276596, 112.4978723404, 112.4978723404);--wr-color-danger-dark: rgb(193.229787234, 56.270212766, 56.270212766);--wr-color-danger-darker: rgb(173.4808510638, 50.5191489362, 50.5191489362);--wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);--wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);--wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);--wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);--wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);--wr-color-hover: rgba(var(--wr-color-light-rgb), .4);--wr-color-border: rgba(var(--wr-color-light-rgb), .5);--wr-color-border-subtle: rgba(var(--wr-color-light-rgb), .35);--wr-color-border-strong: rgba(var(--wr-color-light-rgb), .6);--wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), .45);--wr-color-fill-subtle: rgba(var(--wr-color-light-rgb), .15);--wr-color-fill: rgba(var(--wr-color-light-rgb), .3);--wr-color-fill-strong: rgba(var(--wr-color-light-rgb), .55);--wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), .95);--wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), .6);--wr-color-surface: var(--wr-color-white);--wr-color-surface-rgb: var(--wr-color-white-rgb);--wr-color-on-surface: var(--wr-color-dark);--wr-color-on-surface-rgb: var(--wr-color-dark-rgb);--wr-color-on-surface-muted: var(--wr-color-muted-text);--wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);--wr-color-outline: var(--wr-color-light);--wr-color-outline-rgb: var(--wr-color-light-rgb);--wr-color-primary-soft: rgba(var(--wr-color-primary-rgb), .12);--wr-color-primary-soft-border: rgba(var(--wr-color-primary-rgb), .3);--wr-color-primary-soft-contrast: color-mix(in srgb, var(--wr-color-primary) 62%, var(--wr-color-dark));--wr-color-primary-active: rgba(var(--wr-color-primary-rgb), .2);--wr-color-secondary-soft: rgba(var(--wr-color-secondary-rgb), .12);--wr-color-secondary-soft-border: rgba(var(--wr-color-secondary-rgb), .3);--wr-color-secondary-soft-contrast: color-mix(in srgb, var(--wr-color-secondary) 62%, var(--wr-color-dark));--wr-color-secondary-active: rgba(var(--wr-color-secondary-rgb), .2);--wr-color-success-soft: rgba(var(--wr-color-success-rgb), .12);--wr-color-success-soft-border: rgba(var(--wr-color-success-rgb), .3);--wr-color-success-soft-contrast: color-mix(in srgb, var(--wr-color-success) 62%, var(--wr-color-dark));--wr-color-success-active: rgba(var(--wr-color-success-rgb), .2);--wr-color-warning-soft: rgba(var(--wr-color-warning-rgb), .12);--wr-color-warning-soft-border: rgba(var(--wr-color-warning-rgb), .3);--wr-color-warning-soft-contrast: color-mix(in srgb, var(--wr-color-warning) 62%, var(--wr-color-dark));--wr-color-warning-active: rgba(var(--wr-color-warning-rgb), .2);--wr-color-danger-soft: rgba(var(--wr-color-danger-rgb), .12);--wr-color-danger-soft-border: rgba(var(--wr-color-danger-rgb), .3);--wr-color-danger-soft-contrast: color-mix(in srgb, var(--wr-color-danger) 62%, var(--wr-color-dark));--wr-color-danger-active: rgba(var(--wr-color-danger-rgb), .2);--wr-color-info-soft: rgba(var(--wr-color-info-rgb), .12);--wr-color-info-soft-border: rgba(var(--wr-color-info-rgb), .3);--wr-color-info-soft-contrast: color-mix(in srgb, var(--wr-color-info) 62%, var(--wr-color-dark));--wr-color-info-active: rgba(var(--wr-color-info-rgb), .2);--wr-color-medium-soft: rgba(var(--wr-color-medium-rgb), .12);--wr-color-medium-soft-border: rgba(var(--wr-color-medium-rgb), .3);--wr-color-medium-soft-contrast: color-mix(in srgb, var(--wr-color-medium) 62%, var(--wr-color-dark));--wr-color-medium-active: rgba(var(--wr-color-medium-rgb), .2);--wr-color-primary-ink: color-mix(in srgb, var(--wr-color-primary) 78%, var(--wr-color-dark));--wr-color-secondary-ink: color-mix(in srgb, var(--wr-color-secondary) 75%, var(--wr-color-dark));--wr-color-success-ink: color-mix(in srgb, var(--wr-color-success) 67%, var(--wr-color-dark));--wr-color-warning-ink: color-mix(in srgb, var(--wr-color-warning) 48%, var(--wr-color-dark));--wr-color-danger-ink: color-mix(in srgb, var(--wr-color-danger) 72%, var(--wr-color-dark));--wr-color-info-ink: color-mix(in srgb, var(--wr-color-info) 71%, var(--wr-color-dark));--wr-color-medium-ink: color-mix(in srgb, var(--wr-color-medium) 65%, var(--wr-color-dark));--wr-color-light-ink: var(--wr-color-on-surface);--wr-color-dark-ink: var(--wr-color-dark);--wr-focus-ring-color: var(--wr-color-primary);--wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), .25);color-scheme:dark}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible,.wr-command-palette__panel input:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-star-border{--wr-star-border-color: var(--wr-color-primary);--wr-star-border-speed: 6s;--wr-star-border-radius: 20px;--wr-star-border-stop: 16%;--wr-star-border-opacity: 1;display:inline-block;position:relative;border:0;background:transparent;border-radius:var(--wr-star-border-radius);overflow:hidden;cursor:inherit}.wr-star-border__ray{position:absolute;display:block;width:300%;height:50%;opacity:var(--wr-star-border-opacity);border-radius:50%;background:radial-gradient(circle,var(--wr-star-border-color),transparent var(--wr-star-border-stop));animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;z-index:0}.wr-star-border__ray--bottom{bottom:-12px;right:-250%}.wr-star-border__ray--top{top:-12px;left:-250%;animation-name:wr-star-border-top}.wr-star-border--single .wr-star-border__ray--top{display:none}.wr-star-border--hover .wr-star-border__ray{opacity:0;animation:none}.wr-star-border--hover:hover .wr-star-border__ray{animation:wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate}.wr-star-border--hover:hover .wr-star-border__ray--top{animation-name:wr-star-border-top}.wr-star-border__inner{position:relative;display:block;border:1px solid var(--wr-color-outline);background:var(--wr-color-surface);color:var(--wr-color-on-surface);font-size:1rem;text-align:center;padding:1rem 1.625rem;border-radius:var(--wr-star-border-radius);z-index:1}[data-theme=dark] .wr-star-border{--wr-star-border-color: #ffffff;--wr-star-border-stop: 10%;--wr-star-border-opacity: .7}@keyframes wr-star-border-bottom{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes wr-star-border-top{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media(prefers-reduced-motion:reduce){.wr-star-border__ray{animation:none!important;opacity:0!important}}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
56
56
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStarBorder, decorators: [{
|
|
58
58
|
type: Component,
|
|
59
59
|
args: [{ selector: 'wr-star-border, [wr-star-border]', encapsulation: ViewEncapsulation.None, host: {
|
|
60
60
|
'[class]': 'classes()',
|
|
@@ -135,10 +135,10 @@ class WrStatistic {
|
|
|
135
135
|
return `${sign}${d}${this.deltaSuffix()}`;
|
|
136
136
|
}, /* @ts-ignore */
|
|
137
137
|
...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
|
|
138
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStatistic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrStatistic, isStandalone: true, selector: "wr-statistic", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n @if (prefix()) {\n <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n }\n @if (animated()) {\n <wr-count-up\n class=\"wr-statistic__number\"\n [from]=\"animateFrom()\"\n [to]=\"numericValue() ?? 0\"\n [decimals]=\"precision()\"\n [duration]=\"duration()\"\n />\n } @else {\n <span class=\"wr-statistic__number\">{{ displayValue() }}</span>\n }\n @if (suffix()) {\n <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n }\n</div>\n@if (hasDelta()) {\n <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n @if (deltaDirection() === 'up') {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n </svg>\n } @else if (deltaDirection() === 'down') {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n </svg>\n }\n <span>{{ deltaText() }}</span>\n </div>\n}\n", dependencies: [{ kind: "component", type: WrCountUp, selector: "wr-count-up", inputs: ["from", "to", "duration", "delay", "easing", "trigger", "direction", "decimals", "prefix", "suffix", "grouping"], outputs: ["started", "completed"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
140
140
|
}
|
|
141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStatistic, decorators: [{
|
|
142
142
|
type: Component,
|
|
143
143
|
args: [{ selector: 'wr-statistic', encapsulation: ViewEncapsulation.None, host: { class: 'wr-statistic' }, imports: [WrCountUp], template: "@if (label()) {\n <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n @if (prefix()) {\n <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n }\n @if (animated()) {\n <wr-count-up\n class=\"wr-statistic__number\"\n [from]=\"animateFrom()\"\n [to]=\"numericValue() ?? 0\"\n [decimals]=\"precision()\"\n [duration]=\"duration()\"\n />\n } @else {\n <span class=\"wr-statistic__number\">{{ displayValue() }}</span>\n }\n @if (suffix()) {\n <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n }\n</div>\n@if (hasDelta()) {\n <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n @if (deltaDirection() === 'up') {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n </svg>\n } @else if (deltaDirection() === 'down') {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n </svg>\n }\n <span>{{ deltaText() }}</span>\n </div>\n}\n" }]
|
|
144
144
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSuffix", required: false }] }] } });
|
|
@@ -290,10 +290,10 @@ class WrStatisticCountdown {
|
|
|
290
290
|
this.countdownEnd.emit();
|
|
291
291
|
}
|
|
292
292
|
}
|
|
293
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStatisticCountdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrStatisticCountdown, isStandalone: true, selector: "wr-statistic-countdown", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, endText: { classPropertyName: "endText", publicName: "endText", isSignal: true, isRequired: false, transformFunction: null }, tickMs: { classPropertyName: "tickMs", publicName: "tickMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countdownEnd: "countdownEnd" }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
|
|
295
295
|
}
|
|
296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStatisticCountdown, decorators: [{
|
|
297
297
|
type: Component,
|
|
298
298
|
args: [{ selector: 'wr-statistic-countdown', encapsulation: ViewEncapsulation.None, host: { class: 'wr-statistic' }, template: "@if (label()) {\n <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n" }]
|
|
299
299
|
}], ctorParameters: () => [], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], endText: [{ type: i0.Input, args: [{ isSignal: true, alias: "endText", required: false }] }], tickMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickMs", required: false }] }], countdownEnd: [{ type: i0.Output, args: ["countdownEnd"] }] } });
|
|
@@ -336,10 +336,10 @@ class WrStatisticGroup {
|
|
|
336
336
|
* width allows. @default 0
|
|
337
337
|
*/
|
|
338
338
|
columns = input(0, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
|
|
339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
339
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStatisticGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
340
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrStatisticGroup, isStandalone: true, selector: "wr-statistic-group", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--wr-statistic-group-min": "min()", "style.--wr-statistic-group-columns": "columns() || null" }, classAttribute: "wr-statistic-group" }, ngImport: i0, template: '<div class="wr-statistic-group__grid"><ng-content /></div>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
|
|
341
341
|
}
|
|
342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
342
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStatisticGroup, decorators: [{
|
|
343
343
|
type: Component,
|
|
344
344
|
args: [{
|
|
345
345
|
selector: 'wr-statistic-group',
|
|
@@ -55,10 +55,10 @@ class WrStep {
|
|
|
55
55
|
stepper = inject(WR_STEPPER);
|
|
56
56
|
isActive = computed(() => this._index() === this.stepper.active(), /* @ts-ignore */
|
|
57
57
|
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
58
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
59
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrStep, isStandalone: true, selector: "wr-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-step--active": "isActive()" }, classAttribute: "wr-step" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
|
|
60
60
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStep, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{
|
|
64
64
|
selector: 'wr-step',
|
|
@@ -192,8 +192,8 @@ class WrStepper {
|
|
|
192
192
|
prev() {
|
|
193
193
|
this.goTo(this.active() - 1);
|
|
194
194
|
}
|
|
195
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
195
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrStepper, isStandalone: true, selector: "wr-stepper", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class": "classes()" } }, providers: [
|
|
197
197
|
{
|
|
198
198
|
provide: WR_STEPPER,
|
|
199
199
|
// eslint-disable-next-line @angular-eslint/no-forward-ref
|
|
@@ -201,7 +201,7 @@ class WrStepper {
|
|
|
201
201
|
},
|
|
202
202
|
], queries: [{ propertyName: "steps", predicate: WrStep, isSignal: true }], ngImport: i0, template: "<ol class=\"wr-stepper__headers\" role=\"list\">\n @for (step of steps(); track $index) {\n <li\n class=\"wr-stepper__header\"\n [class.wr-stepper__header--active]=\"$index === active()\"\n [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n [class.wr-stepper__header--disabled]=\"step.disabled()\"\n >\n <button\n type=\"button\"\n class=\"wr-stepper__header-button\"\n [disabled]=\"!isReachable($index) || step.disabled()\"\n [attr.aria-current]=\"$index === active() ? 'step' : null\"\n (click)=\"onHeaderClick($index)\"\n >\n <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n @if (isCompleted($index)) {\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n <path\n d=\"M3 7.5 L6 10.5 L11 4.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n } @else {\n {{ $index + 1 }}\n }\n </span>\n <span class=\"wr-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <small class=\"wr-stepper__optional\">{{ optionalLabel() }}</small>\n }\n @if (step.description()) {\n <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n }\n </span>\n </button>\n @if (!$last) {\n <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n</ol>\n\n<div class=\"wr-stepper__body\">\n <ng-content />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStepper, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'wr-stepper', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
|
|
207
207
|
{
|
|
@@ -306,10 +306,10 @@ class WrStorage {
|
|
|
306
306
|
this.listenerInstalled = false;
|
|
307
307
|
});
|
|
308
308
|
}
|
|
309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
310
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.
|
|
309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStorage, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
310
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrStorage });
|
|
311
311
|
}
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrStorage, decorators: [{
|
|
313
313
|
type: Service
|
|
314
314
|
}] });
|
|
315
315
|
|
package/fesm2022/ngwr-switch.mjs
CHANGED
|
@@ -60,10 +60,10 @@ class WrSwitch {
|
|
|
60
60
|
onInputBlur() {
|
|
61
61
|
this.touch.emit();
|
|
62
62
|
}
|
|
63
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
63
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrSwitch, isStandalone: true, selector: "wr-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<label class=\"wr-switch__label\" [for]=\"id()\">\n <input\n class=\"wr-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\"\n />\n\n <span class=\"wr-switch__track\" aria-hidden=\"true\">\n <span class=\"wr-switch__thumb\"></span>\n </span>\n\n <span class=\"wr-switch__text\">\n <ng-content />\n </span>\n</label>\n", encapsulation: i0.ViewEncapsulation.None });
|
|
65
65
|
}
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSwitch, decorators: [{
|
|
67
67
|
type: Component,
|
|
68
68
|
args: [{ selector: 'wr-switch', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<label class=\"wr-switch__label\" [for]=\"id()\">\n <input\n class=\"wr-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onInputBlur()\"\n />\n\n <span class=\"wr-switch__track\" aria-hidden=\"true\">\n <span class=\"wr-switch__thumb\"></span>\n </span>\n\n <span class=\"wr-switch__text\">\n <ng-content />\n </span>\n</label>\n" }]
|
|
69
69
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
|
package/fesm2022/ngwr-table.mjs
CHANGED
|
@@ -32,10 +32,10 @@ class WrTableCell {
|
|
|
32
32
|
/** Column key the template applies to. */
|
|
33
33
|
columnKey = input.required({ ...(ngDevMode ? { debugName: "columnKey" } : /* istanbul ignore next */ {}), alias: 'wrTableCell' });
|
|
34
34
|
template = inject(TemplateRef);
|
|
35
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
36
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
36
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrTableCell, isStandalone: true, selector: "[wrTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "wrTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableCell, decorators: [{
|
|
39
39
|
type: Directive,
|
|
40
40
|
args: [{
|
|
41
41
|
selector: '[wrTableCell]',
|
|
@@ -64,10 +64,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
64
64
|
*/
|
|
65
65
|
class WrTableExpand {
|
|
66
66
|
template = inject(TemplateRef);
|
|
67
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
68
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
67
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
68
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrTableExpand, isStandalone: true, selector: "ng-template[wrTableExpand]", ngImport: i0 });
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableExpand, decorators: [{
|
|
71
71
|
type: Directive,
|
|
72
72
|
args: [{
|
|
73
73
|
selector: 'ng-template[wrTableExpand]',
|
|
@@ -164,10 +164,10 @@ class WrTableFilter {
|
|
|
164
164
|
emitSelected() {
|
|
165
165
|
this.selectionChange.emit(this.items().filter(i => i.selected));
|
|
166
166
|
}
|
|
167
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
168
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, noMatchesLabel: { classPropertyName: "noMatchesLabel", publicName: "noMatchesLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n />\n </svg>\n @if (selectedCount() > 0) {\n <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n }\n</button>\n\n<wr-dropdown-menu #menu>\n <div class=\"wr-table-filter__panel\">\n <input\n class=\"wr-table-filter__search\"\n type=\"search\"\n [placeholder]=\"resolvedSearchLabel()\"\n [attr.aria-label]=\"resolvedSearchLabel()\"\n [value]=\"query()\"\n (input)=\"onSearchInput($event)\"\n />\n\n <div class=\"wr-table-filter__list\">\n @for (item of visible(); track item.value) {\n <button\n type=\"button\"\n class=\"wr-table-filter__item\"\n [class.wr-table-filter__item--selected]=\"item.selected\"\n (click)=\"onToggle(item)\"\n >\n <span class=\"wr-table-filter__check\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </span>\n <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n </button>\n } @empty {\n <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n }\n </div>\n\n @if (selectedCount() > 0) {\n <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">{{ resolvedResetLabel() }}</button>\n }\n </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
169
169
|
}
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableFilter, decorators: [{
|
|
171
171
|
type: Component,
|
|
172
172
|
args: [{ selector: 'wr-table-filter', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrDropdown, WrDropdownMenu], template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n />\n </svg>\n @if (selectedCount() > 0) {\n <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n }\n</button>\n\n<wr-dropdown-menu #menu>\n <div class=\"wr-table-filter__panel\">\n <input\n class=\"wr-table-filter__search\"\n type=\"search\"\n [placeholder]=\"resolvedSearchLabel()\"\n [attr.aria-label]=\"resolvedSearchLabel()\"\n [value]=\"query()\"\n (input)=\"onSearchInput($event)\"\n />\n\n <div class=\"wr-table-filter__list\">\n @for (item of visible(); track item.value) {\n <button\n type=\"button\"\n class=\"wr-table-filter__item\"\n [class.wr-table-filter__item--selected]=\"item.selected\"\n (click)=\"onToggle(item)\"\n >\n <span class=\"wr-table-filter__check\">\n <svg\n class=\"wr-icon__svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </span>\n <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n </button>\n } @empty {\n <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n }\n </div>\n\n @if (selectedCount() > 0) {\n <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">{{ resolvedResetLabel() }}</button>\n }\n </div>\n</wr-dropdown-menu>\n" }]
|
|
173
173
|
}], propDecorators: { filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], noMatchesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noMatchesLabel", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
@@ -196,10 +196,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
196
196
|
*/
|
|
197
197
|
class WrTableGroupHeader {
|
|
198
198
|
template = inject(TemplateRef);
|
|
199
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
200
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
199
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableGroupHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
200
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: WrTableGroupHeader, isStandalone: true, selector: "ng-template[wrTableGroupHeader]", ngImport: i0 });
|
|
201
201
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableGroupHeader, decorators: [{
|
|
203
203
|
type: Directive,
|
|
204
204
|
args: [{ selector: 'ng-template[wrTableGroupHeader]' }]
|
|
205
205
|
}] });
|
|
@@ -227,10 +227,10 @@ class WrTableSort {
|
|
|
227
227
|
return parts.join(' ');
|
|
228
228
|
}, /* @ts-ignore */
|
|
229
229
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
230
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
230
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableSort, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
231
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrTableSort, isStandalone: true, selector: "wr-table-sort", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<svg class="wr-icon__svg wr-table-sort__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
|
|
232
232
|
}
|
|
233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
233
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTableSort, decorators: [{
|
|
234
234
|
type: Component,
|
|
235
235
|
args: [{
|
|
236
236
|
selector: 'wr-table-sort',
|
|
@@ -1400,10 +1400,10 @@ class WrTable {
|
|
|
1400
1400
|
templateFor(key) {
|
|
1401
1401
|
return this.cellMap().get(String(key));
|
|
1402
1402
|
}
|
|
1403
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, toggleRowLabel: { classPropertyName: "toggleRowLabel", publicName: "toggleRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectGroupLabel: { classPropertyName: "selectGroupLabel", publicName: "selectGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleGroupLabel: { classPropertyName: "toggleGroupLabel", publicName: "toggleGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n <div class=\"wr-table__loading\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel()\">\n <wr-spinner size=\"lg\" />\n </div>\n}\n\n<div\n class=\"wr-table__scroll\"\n #scroll\n [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n <table\n class=\"wr-table__table\"\n [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n [attr.role]=\"treeMode() ? 'treegrid' : null\"\n >\n <colgroup>\n @if (rowSelection()) {\n <col class=\"wr-table__col--lead\" />\n }\n @if (expandable()) {\n <col class=\"wr-table__col--lead\" />\n }\n @for (col of displayColumns(); track col.key) {\n <col [style.width.px]=\"colWidth(col.key)\" />\n }\n </colgroup>\n <thead>\n <tr\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"onColumnDrop($event)\"\n >\n @if (rowSelection()) {\n <th class=\"wr-table__th wr-table__th--select\">\n @if (rowSelection() === 'multiple') {\n <!-- Disabled with nothing to sweep, the way `wr-transfer` guards its\n own select-all. `[checked]` is a one-way binding over a checkbox\n that owns its state, and on zero rows `allSelected()` answers\n `false` before and after the click \u2014 an unchanged input is never\n written back, so the box latched CHECKED over an empty table and\n stayed that way when rows returned. -->\n <wr-checkbox\n size=\"sm\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n [disabled]=\"pageRowKeys().length === 0\"\n (checkedChange)=\"toggleAll($event)\"\n [ariaLabel]=\"resolvedSelectAllLabel()\"\n />\n }\n </th>\n }\n @if (expandable()) {\n <th class=\"wr-table__th wr-table__th--expand\"></th>\n }\n @for (col of displayColumns(); track col.key) {\n <th\n #thCell\n cdkDrag\n [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n class=\"wr-table__th\"\n [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n >\n <div class=\"wr-table__th-inner\">\n <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n @if (col.column.sortable) {\n <button\n type=\"button\"\n class=\"wr-table__sort-btn\"\n [attr.aria-label]=\"resolvedSortLabel()\"\n (click)=\"cycleSort(col.key)\"\n >\n <wr-table-sort [direction]=\"directionFor(col.key)\" />\n </button>\n }\n\n @if (col.column.filterItems; as filterItems) {\n @if (filterItems.length) {\n <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n }\n }\n </div>\n\n @if (col.column.resizable) {\n <span\n class=\"wr-table__resize-handle\"\n aria-hidden=\"true\"\n (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n (pointermove)=\"onResizeMove($event)\"\n (pointerup)=\"onResizeEnd($event)\"\n (pointercancel)=\"onResizeEnd($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (touchstart)=\"$event.stopPropagation()\"\n ></span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (visibleItems()) {\n @if (virtualized() && virtualWindow().padTop > 0) {\n <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n </tr>\n }\n @for (entry of windowRows(); track entry.id; let i = $index) {\n @if (entry.kind === 'group') {\n <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n <!-- The cell spans the full table width; this inner box is what sticks. -->\n <div class=\"wr-table__group-inner\">\n @if (rowSelection() === 'multiple') {\n <wr-checkbox\n class=\"wr-table__group-select\"\n size=\"sm\"\n [checked]=\"groupChecked(entry.group.rows)\"\n [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n [ariaLabel]=\"resolvedSelectGroupLabel()\"\n />\n }\n @if (groupTemplate(); as tpl) {\n <button\n type=\"button\"\n class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n [attr.aria-expanded]=\"!entry.group.collapsed\"\n [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n (click)=\"toggleGroupCollapse(entry.group.value)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__group-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n </button>\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n } @else {\n <button\n type=\"button\"\n class=\"wr-table__group-toggle\"\n [attr.aria-expanded]=\"!entry.group.collapsed\"\n (click)=\"toggleGroupCollapse(entry.group.value)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__group-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n @if (showGroupCount()) {\n <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n }\n </button>\n }\n </div>\n </td>\n </tr>\n } @else if (entry.kind === 'group-foot') {\n <tr class=\"wr-table__group-foot-row\">\n @if (rowSelection()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @if (expandable()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @for (col of displayColumns(); track col.key) {\n <td\n class=\"wr-table__foot-cell\"\n [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n >\n {{ entry.summaries.get(col.key) ?? '' }}\n </td>\n }\n </tr>\n } @else {\n <tr\n class=\"wr-table__tr\"\n [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n [class.wr-table__tr--child]=\"entry.depth > 0\"\n [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n [attr.aria-expanded]=\"entry.open\"\n [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n >\n @if (rowSelection()) {\n <td class=\"wr-table__td wr-table__td--select\">\n <wr-checkbox\n size=\"sm\"\n [checked]=\"isRowSelected(entry.row)\"\n (checkedChange)=\"toggleRow(entry.row, $event)\"\n [ariaLabel]=\"resolvedSelectRowLabel()\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"wr-table__td wr-table__td--expand\">\n <button\n type=\"button\"\n class=\"wr-table__expand-btn\"\n [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n [attr.aria-expanded]=\"isExpanded(entry.row)\"\n [attr.aria-label]=\"resolvedExpandRowLabel()\"\n (click)=\"toggleExpand(entry.row)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__expand-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n </button>\n </td>\n }\n @for (col of displayColumns(); track col.key) {\n <td\n class=\"wr-table__td\"\n [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n [attr.data-label]=\"col.column.title\"\n >\n @if (treeMode() && col.key === treeColumnKey()) {\n <span class=\"wr-table__tree-lead\">\n @if (entry.parent) {\n <button\n type=\"button\"\n class=\"wr-table__tree-toggle\"\n [class.wr-table__tree-toggle--open]=\"entry.open\"\n [attr.aria-expanded]=\"entry.open\"\n [attr.aria-label]=\"resolvedToggleRowLabel()\"\n (click)=\"toggleTreeRow(entry.row)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__tree-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n </button>\n } @else {\n <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n }\n </span>\n }\n @if (templateFor(col.key); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n />\n } @else {\n {{ getValue(entry.row, col.key) }}\n }\n </td>\n }\n </tr>\n @if (expandable() && isExpanded(entry.row)) {\n <tr class=\"wr-table__detail-row\">\n <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n <ng-container\n [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n />\n </td>\n </tr>\n }\n }\n }\n @if (virtualized() && virtualWindow().padBottom > 0) {\n <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n </tr>\n }\n }\n <!-- Sibling of the row loop rather than its `@empty` branch, and gated on\n `loading()`. As the `@empty` branch it lived INSIDE `@if (visibleItems())`,\n which passes a nullish `[items]` straight through \u2014 so the input's own\n default rendered a header over a blank body with no \"No data\" anywhere,\n the opposite of what `items`'s docs promise. And the veil is translucent,\n so on the documented `[items]=\"[]\" [loading]=\"true\"` pair the row read\n \"No data\" through the spinner. -->\n @if (!loading() && !renderRows().length) {\n <tr>\n <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n </tr>\n }\n </tbody>\n\n @if (hasSummary() && items()?.length) {\n <tfoot>\n <tr class=\"wr-table__foot-row\">\n @if (rowSelection()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @if (expandable()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @for (col of displayColumns(); track col.key) {\n <td\n class=\"wr-table__foot-cell\"\n [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n >\n {{ summaryFor(col.key) }}\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n\n@if (showPager()) {\n <div class=\"wr-table__pager\">\n <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel", "label"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["filterLabel", "noMatchesLabel", "searchLabel", "resetLabel", "items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1403
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1404
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTable, isStandalone: true, selector: "wr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, treeColumn: { classPropertyName: "treeColumn", publicName: "treeColumn", isSignal: true, isRequired: false, transformFunction: null }, toggleRowLabel: { classPropertyName: "toggleRowLabel", publicName: "toggleRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectGroupLabel: { classPropertyName: "selectGroupLabel", publicName: "selectGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleGroupLabel: { classPropertyName: "toggleGroupLabel", publicName: "toggleGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnOrder: "columnOrderChange", selection: "selectionChange", expanded: "expandedChange", collapsedGroups: "collapsedGroupsChange", sort: "sortChange", filterChange: "filterChange", page: "pageChange" }, host: { properties: { "class.wr-table--responsive": "responsive()", "class.wr-table--virtual": "virtualized()", "attr.aria-busy": "loading() ? true : null" }, classAttribute: "wr-table" }, queries: [{ propertyName: "cellTemplates", predicate: WrTableCell, isSignal: true }, { propertyName: "expandTpl", first: true, predicate: WrTableExpand, descendants: true, isSignal: true }, { propertyName: "groupTpl", first: true, predicate: WrTableGroupHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["thCell"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n <div class=\"wr-table__loading\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel()\">\n <wr-spinner size=\"lg\" />\n </div>\n}\n\n<div\n class=\"wr-table__scroll\"\n #scroll\n [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n [attr.tabindex]=\"virtualized() ? 0 : null\"\n>\n <table\n class=\"wr-table__table\"\n [class.wr-table__table--fixed]=\"fixedLayoutActive()\"\n [style.--wr-table-row-h.px]=\"virtualized() ? effRowH() : null\"\n [attr.aria-rowcount]=\"virtualized() ? renderRows().length + 1 + (hasSummary() && items()?.length ? 1 : 0) : null\"\n [attr.role]=\"treeMode() ? 'treegrid' : null\"\n >\n <colgroup>\n @if (rowSelection()) {\n <col class=\"wr-table__col--lead\" />\n }\n @if (expandable()) {\n <col class=\"wr-table__col--lead\" />\n }\n @for (col of displayColumns(); track col.key) {\n <col [style.width.px]=\"colWidth(col.key)\" />\n }\n </colgroup>\n <thead>\n <tr\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"onColumnDrop($event)\"\n >\n @if (rowSelection()) {\n <th class=\"wr-table__th wr-table__th--select\">\n @if (rowSelection() === 'multiple') {\n <!-- Disabled with nothing to sweep, the way `wr-transfer` guards its\n own select-all. `[checked]` is a one-way binding over a checkbox\n that owns its state, and on zero rows `allSelected()` answers\n `false` before and after the click \u2014 an unchanged input is never\n written back, so the box latched CHECKED over an empty table and\n stayed that way when rows returned. -->\n <wr-checkbox\n size=\"sm\"\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n [disabled]=\"pageRowKeys().length === 0\"\n (checkedChange)=\"toggleAll($event)\"\n [ariaLabel]=\"resolvedSelectAllLabel()\"\n />\n }\n </th>\n }\n @if (expandable()) {\n <th class=\"wr-table__th wr-table__th--expand\"></th>\n }\n @for (col of displayColumns(); track col.key) {\n <th\n #thCell\n cdkDrag\n [cdkDragDisabled]=\"!reorderable() || !!col.column.pin\"\n class=\"wr-table__th\"\n [attr.aria-sort]=\"ariaSortFor(col.key, col.column.sortable)\"\n [class.wr-table__th--draggable]=\"reorderable() && !col.column.pin\"\n [class.wr-table__th--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__th--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__th--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__th--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n >\n <div class=\"wr-table__th-inner\">\n <span class=\"wr-table__title\">{{ col.column.title }}</span>\n\n @if (col.column.sortable) {\n <button\n type=\"button\"\n class=\"wr-table__sort-btn\"\n [attr.aria-label]=\"resolvedSortLabel()\"\n (click)=\"cycleSort(col.key)\"\n >\n <wr-table-sort [direction]=\"directionFor(col.key)\" />\n </button>\n }\n\n @if (col.column.filterItems; as filterItems) {\n @if (filterItems.length) {\n <wr-table-filter [items]=\"filterItems\" (selectionChange)=\"onFilter(col.key, $event)\" />\n }\n }\n </div>\n\n @if (col.column.resizable) {\n <span\n class=\"wr-table__resize-handle\"\n aria-hidden=\"true\"\n (pointerdown)=\"onResizeStart($event, col.key, thCell)\"\n (pointermove)=\"onResizeMove($event)\"\n (pointerup)=\"onResizeEnd($event)\"\n (pointercancel)=\"onResizeEnd($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (touchstart)=\"$event.stopPropagation()\"\n ></span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (visibleItems()) {\n @if (virtualized() && virtualWindow().padTop > 0) {\n <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padTop\"></td>\n </tr>\n }\n @for (entry of windowRows(); track entry.id; let i = $index) {\n @if (entry.kind === 'group') {\n <tr class=\"wr-table__group-row\" [class.wr-table__group-row--collapsed]=\"entry.group.collapsed\">\n <td class=\"wr-table__group-cell\" [attr.colspan]=\"totalCols()\">\n <!-- The cell spans the full table width; this inner box is what sticks. -->\n <div class=\"wr-table__group-inner\">\n @if (rowSelection() === 'multiple') {\n <wr-checkbox\n class=\"wr-table__group-select\"\n size=\"sm\"\n [checked]=\"groupChecked(entry.group.rows)\"\n [indeterminate]=\"groupIndeterminate(entry.group.rows)\"\n (checkedChange)=\"toggleGroupSelection(entry.group.rows, $event)\"\n [ariaLabel]=\"resolvedSelectGroupLabel()\"\n />\n }\n @if (groupTemplate(); as tpl) {\n <button\n type=\"button\"\n class=\"wr-table__group-toggle wr-table__group-toggle--icon\"\n [attr.aria-expanded]=\"!entry.group.collapsed\"\n [attr.aria-label]=\"resolvedToggleGroupLabel()\"\n (click)=\"toggleGroupCollapse(entry.group.value)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__group-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n </button>\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"entry.group\" />\n } @else {\n <button\n type=\"button\"\n class=\"wr-table__group-toggle\"\n [attr.aria-expanded]=\"!entry.group.collapsed\"\n (click)=\"toggleGroupCollapse(entry.group.value)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__group-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span class=\"wr-table__group-label\">{{ entry.group.label }}</span>\n @if (showGroupCount()) {\n <span class=\"wr-table__group-count\">{{ entry.group.count }}</span>\n }\n </button>\n }\n </div>\n </td>\n </tr>\n } @else if (entry.kind === 'group-foot') {\n <tr class=\"wr-table__group-foot-row\">\n @if (rowSelection()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @if (expandable()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @for (col of displayColumns(); track col.key) {\n <td\n class=\"wr-table__foot-cell\"\n [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n >\n {{ entry.summaries.get(col.key) ?? '' }}\n </td>\n }\n </tr>\n } @else {\n <tr\n class=\"wr-table__tr\"\n [class.wr-table__tr--selected]=\"rowSelection() && isRowSelected(entry.row)\"\n [class.wr-table__tr--child]=\"entry.depth > 0\"\n [attr.aria-rowindex]=\"virtualized() ? windowStart() + i + 2 : null\"\n [attr.aria-level]=\"treeMode() ? entry.depth + 1 : null\"\n [attr.aria-posinset]=\"treeMode() ? entry.posinset : null\"\n [attr.aria-setsize]=\"treeMode() ? entry.setsize : null\"\n [attr.aria-expanded]=\"entry.open\"\n [style.--wr-table-depth]=\"treeMode() ? entry.depth : null\"\n >\n @if (rowSelection()) {\n <td class=\"wr-table__td wr-table__td--select\">\n <wr-checkbox\n size=\"sm\"\n [checked]=\"isRowSelected(entry.row)\"\n (checkedChange)=\"toggleRow(entry.row, $event)\"\n [ariaLabel]=\"resolvedSelectRowLabel()\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"wr-table__td wr-table__td--expand\">\n <button\n type=\"button\"\n class=\"wr-table__expand-btn\"\n [class.wr-table__expand-btn--open]=\"isExpanded(entry.row)\"\n [attr.aria-expanded]=\"isExpanded(entry.row)\"\n [attr.aria-label]=\"resolvedExpandRowLabel()\"\n (click)=\"toggleExpand(entry.row)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__expand-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n </button>\n </td>\n }\n @for (col of displayColumns(); track col.key) {\n <td\n class=\"wr-table__td\"\n [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n [attr.data-label]=\"col.column.title\"\n >\n @if (treeMode() && col.key === treeColumnKey()) {\n <span class=\"wr-table__tree-lead\">\n @if (entry.parent) {\n <button\n type=\"button\"\n class=\"wr-table__tree-toggle\"\n [class.wr-table__tree-toggle--open]=\"entry.open\"\n [attr.aria-expanded]=\"entry.open\"\n [attr.aria-label]=\"resolvedToggleRowLabel()\"\n (click)=\"toggleTreeRow(entry.row)\"\n >\n <svg\n class=\"wr-icon__svg wr-table__tree-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n </button>\n } @else {\n <span class=\"wr-table__tree-toggle wr-table__tree-toggle--leaf\" aria-hidden=\"true\"></span>\n }\n </span>\n }\n @if (templateFor(col.key); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"cellContext(entry.row, col.key, col.column)\"\n />\n } @else {\n {{ getValue(entry.row, col.key) }}\n }\n </td>\n }\n </tr>\n @if (expandable() && isExpanded(entry.row)) {\n <tr class=\"wr-table__detail-row\">\n <td class=\"wr-table__detail\" [attr.colspan]=\"totalCols()\">\n <ng-container\n [ngTemplateOutlet]=\"expandTemplate() ?? null\"\n [ngTemplateOutletContext]=\"expandContext(entry.row)\"\n />\n </td>\n </tr>\n }\n }\n }\n @if (virtualized() && virtualWindow().padBottom > 0) {\n <tr class=\"wr-table__spacer\" aria-hidden=\"true\">\n <td [attr.colspan]=\"totalCols()\" [style.height.px]=\"virtualWindow().padBottom\"></td>\n </tr>\n }\n }\n <!-- Sibling of the row loop rather than its `@empty` branch, and gated on\n `loading()`. As the `@empty` branch it lived INSIDE `@if (visibleItems())`,\n which passes a nullish `[items]` straight through \u2014 so the input's own\n default rendered a header over a blank body with no \"No data\" anywhere,\n the opposite of what `items`'s docs promise. And the veil is translucent,\n so on the documented `[items]=\"[]\" [loading]=\"true\"` pair the row read\n \"No data\" through the spinner. -->\n @if (!loading() && !renderRows().length) {\n <tr>\n <td class=\"wr-table__empty\" [attr.colspan]=\"totalCols()\">{{ resolvedEmptyLabel() }}</td>\n </tr>\n }\n </tbody>\n\n @if (hasSummary() && items()?.length) {\n <tfoot>\n <tr class=\"wr-table__foot-row\">\n @if (rowSelection()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @if (expandable()) {\n <td class=\"wr-table__foot-cell wr-table__foot-cell--lead\"></td>\n }\n @for (col of displayColumns(); track col.key) {\n <td\n class=\"wr-table__foot-cell\"\n [class.wr-table__td--pin-left]=\"col.column.pin === 'left'\"\n [class.wr-table__td--pin-right]=\"col.column.pin === 'right'\"\n [class.wr-table__td--pin-edge-left]=\"isPinEdge(col.key, 'left')\"\n [class.wr-table__td--pin-edge-right]=\"isPinEdge(col.key, 'right')\"\n [style.inset-inline-start.px]=\"leftPin(col.key)\"\n [style.inset-inline-end.px]=\"rightPin(col.key)\"\n >\n {{ summaryFor(col.key) }}\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n\n@if (showPager()) {\n <div class=\"wr-table__pager\">\n <wr-pagination [(currentPage)]=\"page\" [pageSize]=\"pageSize()\" [total]=\"resolvedTotal()\" />\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: WrCheckbox, selector: "wr-checkbox", inputs: ["id", "checkboxValue", "ariaLabel", "checked", "disabled", "size", "icon", "indeterminate"], outputs: ["checkedChange", "touch"] }, { kind: "component", type: WrPagination, selector: "wr-pagination", inputs: ["currentPage", "pageSize", "total", "pageSizeOptions", "showSizeChanger", "showTotal", "align", "size", "shape", "disabled", "responsive", "ofLabel", "prevLabel", "nextLabel", "itemsPerPageLabel", "label"], outputs: ["currentPageChange", "pageSizeChange"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }, { kind: "component", type: WrTableSort, selector: "wr-table-sort", inputs: ["direction"] }, { kind: "component", type: WrTableFilter, selector: "wr-table-filter", inputs: ["filterLabel", "noMatchesLabel", "searchLabel", "resetLabel", "items"], outputs: ["selectionChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1405
1405
|
}
|
|
1406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTable, decorators: [{
|
|
1407
1407
|
type: Component,
|
|
1408
1408
|
args: [{ selector: 'wr-table', encapsulation: ViewEncapsulation.None, host: {
|
|
1409
1409
|
class: 'wr-table',
|