npm - ngwr - Versions diffs - 14.0.0 → 14.0.1 - Mend

ngwr 14.0.0 → 14.0.1

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.

Files changed (199) hide show

package/README.md +57 -8
package/aurora/aurora.scss +1 -1
package/aurora/styles/_dark.scss +21 -0
package/aurora/styles/_index.scss +11 -30
package/aurora/styles/_rules.scss +25 -0
package/border-glow/styles/_dark.scss +46 -0
package/border-glow/styles/_index.scss +5 -0
package/border-glow/styles/_rules.scss +0 -31
package/button/styles/_index.scss +16 -0
package/event-calendar/styles/_index.scss +15 -0
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 +4 -4
package/fesm2022/ngwr-aurora.mjs.map +1 -1
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 +4 -4
package/fesm2022/ngwr-border-glow.mjs.map +1 -1
package/fesm2022/ngwr-breadcrumbs.mjs +7 -7
package/fesm2022/ngwr-breadcrumbs.mjs.map +1 -1
package/fesm2022/ngwr-burger.mjs +3 -3
package/fesm2022/ngwr-button.mjs +86 -8
package/fesm2022/ngwr-button.mjs.map +1 -1
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 +4 -4
package/fesm2022/ngwr-cascader.mjs.map +1 -1
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-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 +7 -7
package/fesm2022/ngwr-drag-drop.mjs.map +1 -1
package/fesm2022/ngwr-drawer.mjs +18 -18
package/fesm2022/ngwr-dropdown.mjs +28 -12
package/fesm2022/ngwr-dropdown.mjs.map +1 -1
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-testing.mjs +13 -7
package/fesm2022/ngwr-form-testing.mjs.map +1 -1
package/fesm2022/ngwr-form.mjs +44 -25
package/fesm2022/ngwr-form.mjs.map +1 -1
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 +24 -20
package/fesm2022/ngwr-input.mjs.map +1 -1
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 +4 -4
package/fesm2022/ngwr-lightbox.mjs.map +1 -1
package/fesm2022/ngwr-line-chart.mjs +3 -3
package/fesm2022/ngwr-list.mjs +7 -7
package/fesm2022/ngwr-list.mjs.map +1 -1
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 +3 -3
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 +48 -22
package/fesm2022/ngwr-rating.mjs.map +1 -1
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.mjs +12 -8
package/fesm2022/ngwr-segmented.mjs.map +1 -1
package/fesm2022/ngwr-select.mjs +125 -26
package/fesm2022/ngwr-select.mjs.map +1 -1
package/fesm2022/ngwr-shiny-text.mjs +7 -7
package/fesm2022/ngwr-shiny-text.mjs.map +1 -1
package/fesm2022/ngwr-sidebar.mjs +3 -3
package/fesm2022/ngwr-skeleton.mjs +3 -3
package/fesm2022/ngwr-slider.mjs +12 -8
package/fesm2022/ngwr-slider.mjs.map +1 -1
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 +7 -7
package/fesm2022/ngwr-spotlight-card.mjs.map +1 -1
package/fesm2022/ngwr-squircle.mjs +6 -6
package/fesm2022/ngwr-star-border.mjs +4 -4
package/fesm2022/ngwr-star-border.mjs.map +1 -1
package/fesm2022/ngwr-statistic.mjs +9 -9
package/fesm2022/ngwr-stepper.mjs +6 -6
package/fesm2022/ngwr-storage.mjs +11 -3
package/fesm2022/ngwr-storage.mjs.map +1 -1
package/fesm2022/ngwr-switch.mjs +3 -3
package/fesm2022/ngwr-table.mjs +18 -18
package/fesm2022/ngwr-tabs-router.mjs +3 -3
package/fesm2022/ngwr-tabs.mjs +6 -6
package/fesm2022/ngwr-textarea.mjs +26 -5
package/fesm2022/ngwr-textarea.mjs.map +1 -1
package/fesm2022/ngwr-theme.mjs +90 -4
package/fesm2022/ngwr-theme.mjs.map +1 -1
package/fesm2022/ngwr-tilt-card.mjs +7 -7
package/fesm2022/ngwr-tilt-card.mjs.map +1 -1
package/fesm2022/ngwr-timeline.mjs +6 -6
package/fesm2022/ngwr-toast.mjs +116 -11
package/fesm2022/ngwr-toast.mjs.map +1 -1
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 +18 -11
package/fesm2022/ngwr-tree.mjs.map +1 -1
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 +4 -4
package/fesm2022/ngwr-waves.mjs.map +1 -1
package/fesm2022/ngwr-window.mjs +12 -12
package/llms-full.txt +9 -9
package/llms.txt +82 -11
package/package.json +1 -1
package/shiny-text/styles/_dark.scss +20 -0
package/shiny-text/styles/_index.scss +5 -0
package/shiny-text/styles/_rules.scss +0 -4
package/spotlight-card/styles/_dark.scss +21 -0
package/spotlight-card/styles/_index.scss +5 -0
package/spotlight-card/styles/_rules.scss +0 -6
package/star-border/styles/_dark.scss +21 -0
package/star-border/styles/_index.scss +5 -0
package/star-border/styles/_rules.scss +0 -5
package/theme/styles/_colors.scss +102 -0
package/theme/styles/_focus.scss +31 -1
package/tilt-card/styles/_dark.scss +21 -0
package/tilt-card/styles/_index.scss +5 -0
package/tilt-card/styles/_rules.scss +0 -5
package/types/ngwr-button.d.ts +43 -0
package/types/ngwr-dropdown.d.ts +17 -1
package/types/ngwr-form-testing.d.ts +13 -7
package/types/ngwr-form.d.ts +47 -12
package/types/ngwr-input.d.ts +2 -1
package/types/ngwr-rating.d.ts +25 -4
package/types/ngwr-segmented.d.ts +1 -0
package/types/ngwr-select.d.ts +45 -9
package/types/ngwr-slider.d.ts +1 -0
package/types/ngwr-storage.d.ts +39 -1
package/types/ngwr-textarea.d.ts +20 -0
package/types/ngwr-theme.d.ts +92 -2
package/types/ngwr-toast.d.ts +53 -0
package/types/ngwr-tree.d.ts +3 -2
package/types/ngwr-version.d.ts +1 -1
package/waves/styles/_dark.scss +19 -0
package/waves/styles/_index.scss +5 -0
package/waves/styles/_rules.scss +0 -3

package/fesm2022/ngwr-lightbox.mjs CHANGED Viewed

@@ -231,15 +231,15 @@ class WrLightbox {
         if (restore && typeof restore.focus === 'function')
             restore.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLightbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrLightbox, isStandalone: true, selector: "wr-lightbox", inputs: { openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.aspect-ratio": "aspectRatio()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["viewerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\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=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance \u2014 the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard \u2014 so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [".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-lightbox{display:inline-block;position:relative;overflow:hidden;border-radius:var(--wr-lightbox-radius, var(--wr-border-radius-base))}@supports (corner-shape: squircle){.wr-lightbox{corner-shape:squircle;border-radius:calc(var(--wr-lightbox-radius, var(--wr-border-radius-base)) * 1.85)}}.wr-lightbox{background:var(--wr-color-hover)}.wr-lightbox--loading{min-height:var(--wr-lightbox-loading-min-height, 4rem)}.wr-lightbox--loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wr-color-surface-rgb),0),rgba(var(--wr-color-surface-rgb),.45),rgba(var(--wr-color-surface-rgb),0));background-size:200% 100%;animation:wr-lightbox-shimmer 1.4s linear infinite;pointer-events:none;z-index:1}.wr-lightbox__trigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}.wr-lightbox__trigger:focus-visible{outline:none}.wr-lightbox__thumb{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:2;opacity:1;transition:opacity .25s ease}.wr-lightbox--loading .wr-lightbox__thumb{opacity:0}.wr-lightbox:has(.wr-lightbox__trigger: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)}@keyframes wr-lightbox-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.wr-lightbox-backdrop{background:rgba(var(--wr-color-backdrop-rgb),.85)}.wr-lightbox-overlay{pointer-events:auto}.wr-lightbox-viewer{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:95vw;max-height:95vh;max-height:95dvh;padding:1rem;animation:wr-lightbox-viewer-in .18s ease;outline:none;touch-action:none}.wr-lightbox-viewer__close{--wr-icon-size: 1.25rem;position:absolute;top:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:999px;background:rgba(var(--wr-color-surface-rgb),.12);color:rgba(var(--wr-color-surface-rgb),.9);cursor:pointer;transition:background .15s ease,transform .15s ease}@media(pointer:coarse){.wr-lightbox-viewer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-lightbox-viewer__close:hover{background:rgba(var(--wr-color-surface-rgb),.2)}.wr-lightbox-viewer__close:active{transform:scale(.95)}.wr-lightbox-viewer__close:focus-visible{outline:2px solid rgba(var(--wr-color-surface-rgb),.9);outline-offset:2px}.wr-lightbox-viewer__full{display:block;max-width:100%;max-height:calc(95vh - 4rem);max-height:calc(95dvh - 4rem);object-fit:contain;cursor:zoom-out;border-radius:.5rem}@supports (corner-shape: squircle){.wr-lightbox-viewer__full{corner-shape:squircle;border-radius:.925rem}}.wr-lightbox-viewer__caption{color:rgba(var(--wr-color-surface-rgb),.85);font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);text-align:center;max-width:60ch}@keyframes wr-lightbox-viewer-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLightbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrLightbox, isStandalone: true, selector: "wr-lightbox", inputs: { openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.aspect-ratio": "aspectRatio()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["viewerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\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=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance \u2014 the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard \u2014 so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-btn: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-table__sort-btn: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-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-lightbox{display:inline-block;position:relative;overflow:hidden;border-radius:var(--wr-lightbox-radius, var(--wr-border-radius-base))}@supports (corner-shape: squircle){.wr-lightbox{corner-shape:squircle;border-radius:calc(var(--wr-lightbox-radius, var(--wr-border-radius-base)) * 1.85)}}.wr-lightbox{background:var(--wr-color-hover)}.wr-lightbox--loading{min-height:var(--wr-lightbox-loading-min-height, 4rem)}.wr-lightbox--loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wr-color-surface-rgb),0),rgba(var(--wr-color-surface-rgb),.45),rgba(var(--wr-color-surface-rgb),0));background-size:200% 100%;animation:wr-lightbox-shimmer 1.4s linear infinite;pointer-events:none;z-index:1}.wr-lightbox__trigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}.wr-lightbox__trigger:focus-visible{outline:none}.wr-lightbox__thumb{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:2;opacity:1;transition:opacity .25s ease}.wr-lightbox--loading .wr-lightbox__thumb{opacity:0}.wr-lightbox:has(.wr-lightbox__trigger: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)}@keyframes wr-lightbox-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.wr-lightbox-backdrop{background:rgba(var(--wr-color-backdrop-rgb),.85)}.wr-lightbox-overlay{pointer-events:auto}.wr-lightbox-viewer{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:95vw;max-height:95vh;max-height:95dvh;padding:1rem;animation:wr-lightbox-viewer-in .18s ease;outline:none;touch-action:none}.wr-lightbox-viewer__close{--wr-icon-size: 1.25rem;position:absolute;top:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:999px;background:rgba(var(--wr-color-surface-rgb),.12);color:rgba(var(--wr-color-surface-rgb),.9);cursor:pointer;transition:background .15s ease,transform .15s ease}@media(pointer:coarse){.wr-lightbox-viewer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-lightbox-viewer__close:hover{background:rgba(var(--wr-color-surface-rgb),.2)}.wr-lightbox-viewer__close:active{transform:scale(.95)}.wr-lightbox-viewer__close:focus-visible{outline:2px solid rgba(var(--wr-color-surface-rgb),.9);outline-offset:2px}.wr-lightbox-viewer__full{display:block;max-width:100%;max-height:calc(95vh - 4rem);max-height:calc(95dvh - 4rem);object-fit:contain;cursor:zoom-out;border-radius:.5rem}@supports (corner-shape: squircle){.wr-lightbox-viewer__full{corner-shape:squircle;border-radius:.925rem}}.wr-lightbox-viewer__caption{color:rgba(var(--wr-color-surface-rgb),.85);font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);text-align:center;max-width:60ch}@keyframes wr-lightbox-viewer-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLightbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLightbox, decorators: [{
             type: Component,
             args: [{ selector: 'wr-lightbox', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[style.aspect-ratio]': 'aspectRatio()',
-                    }, template: "@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\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=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance \u2014 the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard \u2014 so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [".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-lightbox{display:inline-block;position:relative;overflow:hidden;border-radius:var(--wr-lightbox-radius, var(--wr-border-radius-base))}@supports (corner-shape: squircle){.wr-lightbox{corner-shape:squircle;border-radius:calc(var(--wr-lightbox-radius, var(--wr-border-radius-base)) * 1.85)}}.wr-lightbox{background:var(--wr-color-hover)}.wr-lightbox--loading{min-height:var(--wr-lightbox-loading-min-height, 4rem)}.wr-lightbox--loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wr-color-surface-rgb),0),rgba(var(--wr-color-surface-rgb),.45),rgba(var(--wr-color-surface-rgb),0));background-size:200% 100%;animation:wr-lightbox-shimmer 1.4s linear infinite;pointer-events:none;z-index:1}.wr-lightbox__trigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}.wr-lightbox__trigger:focus-visible{outline:none}.wr-lightbox__thumb{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:2;opacity:1;transition:opacity .25s ease}.wr-lightbox--loading .wr-lightbox__thumb{opacity:0}.wr-lightbox:has(.wr-lightbox__trigger: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)}@keyframes wr-lightbox-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.wr-lightbox-backdrop{background:rgba(var(--wr-color-backdrop-rgb),.85)}.wr-lightbox-overlay{pointer-events:auto}.wr-lightbox-viewer{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:95vw;max-height:95vh;max-height:95dvh;padding:1rem;animation:wr-lightbox-viewer-in .18s ease;outline:none;touch-action:none}.wr-lightbox-viewer__close{--wr-icon-size: 1.25rem;position:absolute;top:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:999px;background:rgba(var(--wr-color-surface-rgb),.12);color:rgba(var(--wr-color-surface-rgb),.9);cursor:pointer;transition:background .15s ease,transform .15s ease}@media(pointer:coarse){.wr-lightbox-viewer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-lightbox-viewer__close:hover{background:rgba(var(--wr-color-surface-rgb),.2)}.wr-lightbox-viewer__close:active{transform:scale(.95)}.wr-lightbox-viewer__close:focus-visible{outline:2px solid rgba(var(--wr-color-surface-rgb),.9);outline-offset:2px}.wr-lightbox-viewer__full{display:block;max-width:100%;max-height:calc(95vh - 4rem);max-height:calc(95dvh - 4rem);object-fit:contain;cursor:zoom-out;border-radius:.5rem}@supports (corner-shape: squircle){.wr-lightbox-viewer__full{corner-shape:squircle;border-radius:.925rem}}.wr-lightbox-viewer__caption{color:rgba(var(--wr-color-surface-rgb),.85);font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);text-align:center;max-width:60ch}@keyframes wr-lightbox-viewer-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
+                    }, template: "@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\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=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance \u2014 the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard \u2014 so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-btn: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-table__sort-btn: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-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-lightbox{display:inline-block;position:relative;overflow:hidden;border-radius:var(--wr-lightbox-radius, var(--wr-border-radius-base))}@supports (corner-shape: squircle){.wr-lightbox{corner-shape:squircle;border-radius:calc(var(--wr-lightbox-radius, var(--wr-border-radius-base)) * 1.85)}}.wr-lightbox{background:var(--wr-color-hover)}.wr-lightbox--loading{min-height:var(--wr-lightbox-loading-min-height, 4rem)}.wr-lightbox--loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wr-color-surface-rgb),0),rgba(var(--wr-color-surface-rgb),.45),rgba(var(--wr-color-surface-rgb),0));background-size:200% 100%;animation:wr-lightbox-shimmer 1.4s linear infinite;pointer-events:none;z-index:1}.wr-lightbox__trigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}.wr-lightbox__trigger:focus-visible{outline:none}.wr-lightbox__thumb{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:2;opacity:1;transition:opacity .25s ease}.wr-lightbox--loading .wr-lightbox__thumb{opacity:0}.wr-lightbox:has(.wr-lightbox__trigger: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)}@keyframes wr-lightbox-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.wr-lightbox-backdrop{background:rgba(var(--wr-color-backdrop-rgb),.85)}.wr-lightbox-overlay{pointer-events:auto}.wr-lightbox-viewer{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:95vw;max-height:95vh;max-height:95dvh;padding:1rem;animation:wr-lightbox-viewer-in .18s ease;outline:none;touch-action:none}.wr-lightbox-viewer__close{--wr-icon-size: 1.25rem;position:absolute;top:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:999px;background:rgba(var(--wr-color-surface-rgb),.12);color:rgba(var(--wr-color-surface-rgb),.9);cursor:pointer;transition:background .15s ease,transform .15s ease}@media(pointer:coarse){.wr-lightbox-viewer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-lightbox-viewer__close:hover{background:rgba(var(--wr-color-surface-rgb),.2)}.wr-lightbox-viewer__close:active{transform:scale(.95)}.wr-lightbox-viewer__close:focus-visible{outline:2px solid rgba(var(--wr-color-surface-rgb),.9);outline-offset:2px}.wr-lightbox-viewer__full{display:block;max-width:100%;max-height:calc(95vh - 4rem);max-height:calc(95dvh - 4rem);object-fit:contain;cursor:zoom-out;border-radius:.5rem}@supports (corner-shape: squircle){.wr-lightbox-viewer__full{corner-shape:squircle;border-radius:.925rem}}.wr-lightbox-viewer__caption{color:rgba(var(--wr-color-surface-rgb),.85);font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);text-align:center;max-width:60ch}@keyframes wr-lightbox-viewer-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], disablePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePreview", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: ['viewerTpl', { isSignal: true }] }] } });
 /**

package/fesm2022/ngwr-lightbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngwr-lightbox.mjs","sources":["../../../projects/lib/lightbox/lightbox.ts","../../../projects/lib/lightbox/lightbox.html","../../../projects/lib/lightbox/ngwr-lightbox.ts"],"sourcesContent":["/*\n @license\n \n Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n /\n\nimport { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { type OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport type { TemplateRef } from '@angular/core';\nimport {\n Component,\n DestroyRef,\n ViewContainerRef,\n ViewEncapsulation,\n computed,\n effect,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WR_OVERLAY } from 'ngwr/overlay';\n\nlet viewerUid = 0;\n\n/\n Image with click-to-zoom lightbox. The thumbnail is a plain `<img>`\n * with whatever sizing/`object-fit` you give it; clicking opens a CDK\n * overlay showing the full image, with Escape + close button + backdrop\n * to dismiss.\n \n @example\n * ```html\n * <wr-lightbox\n * src=\"/photo.jpg\"\n * alt=\"Mountain\"\n * style=\"width: 16rem; height: 10rem; object-fit: cover\"\n * />\n * ```\n \n @see https://ngwr.dev/reference/components/lightbox\n /\n@Component({\n selector: 'wr-lightbox',\n templateUrl: './lightbox.html',\n styleUrl: './lightbox.scss',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[style.aspect-ratio]': 'aspectRatio()',\n },\n})\nexport class WrLightbox {\n /* Accessible name. Falls back to `image.close`, then `'Close preview'`. /\n /* Accessible name of the thumbnail button. Falls back to `alt`, then `image.open`. /\n readonly openLabel = input<string \| null>(null);\n\n readonly closeLabel = input<string \| null>(null);\n\n protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'image.close', 'Close preview');\n\n /* Image source. /\n readonly src = input.required<string>();\n\n /* Alt text. Required for a11y; falls back to an empty string. @default '' /\n readonly alt = input<string>('');\n\n /\n Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not\n * pull full-size images. The viewer always shows `src`; the thumbnail does not swap\n * to it later.\n /\n readonly preview = input<string \| null>(null);\n\n // Both of these were hard-coded English literals in the template, next to a catalog\n // that already carried `image.open` translated and unread. `useI18nText` already\n // does the whole chain — a non-empty binding wins, then the catalog, then the\n // English default — so the alt text (which describes the actual picture) is what\n // gets forwarded, with `openLabel` ahead of it as the explicit override.\n protected readonly resolvedOpenLabel = useI18nText(\n computed(() => {\n // Not `??`: an empty `openLabel` is no label at all, so it has to fall through\n // to the alt text rather than winning as an empty string.\n const explicit = this.openLabel();\n if (explicit) return explicit;\n return this.alt();\n }),\n 'image.open',\n 'Open preview'\n );\n\n protected readonly resolvedViewerLabel = useI18nText(this.alt, 'image.viewer', 'Image preview');\n\n /* Disable the click-to-zoom lightbox. @default false /\n readonly disablePreview = input(false, { transform: coerceBooleanProperty });\n\n /* Caption shown under the full image in the lightbox. /\n readonly caption = input<string>('');\n\n /\n Reserve space before the image resolves by fixing the thumbnail's\n * `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`).\n * Prevents the layout jump when the intrinsic image size isn't known up\n * front — pair it with a `width` and the box keeps its height from first\n * paint. @default null\n /\n readonly aspectRatio = input<string \| number \| null>(null);\n\n protected readonly open = signal(false);\n protected readonly loaded = signal(false);\n\n /\n Id the trigger's `aria-controls` points at while the viewer is open.\n \n @internal Public so the host bindings can read it.\n /\n protected readonly viewerId = `wr-lightbox-viewer-${++viewerUid}`;\n\n protected readonly classes = computed(() => {\n const parts = ['wr-lightbox'];\n if (this.open()) parts.push('wr-lightbox--open');\n if (!this.loaded()) parts.push('wr-lightbox--loading');\n return parts.join(' ');\n });\n\n // Query by name — `@if` blocks register their own TemplateRefs, so an\n // unqualified TemplateRef query would grab the thumbnail branch instead.\n protected readonly panelTpl = viewChild.required<TemplateRef<unknown>>('viewerTpl');\n\n private readonly overlay = inject(WR_OVERLAY);\n private readonly vcr = inject(ViewContainerRef);\n private readonly destroyRef = inject(DestroyRef);\n private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n private focusTrap: ConfigurableFocusTrap \| null = null;\n private previouslyFocused: HTMLElement \| null = null;\n private overlayRef: OverlayRef \| null = null;\n\n constructor() {\n // Destroying the component while the viewer is open removes the projected\n // content (the portal uses this component's ViewContainerRef) but leaves the\n // overlay pane and its full-screen backdrop behind, with page scroll still\n // blocked. Dispose the overlay explicitly.\n this.destroyRef.onDestroy(() => this.closeOverlay());\n\n effect(() => {\n if (this.open()) this.openOverlay();\n else this.closeOverlay();\n });\n }\n\n protected onClick(): void {\n if (this.disablePreview()) return;\n this.open.set(true);\n }\n\n protected onClose(): void {\n this.open.set(false);\n }\n\n // Swipe-down-to-dismiss on the open viewer. The image follows the finger and\n // fades; releasing past ~20% of the viewer height closes it.\n private viewerStartY = 0;\n private viewerSwiping = false;\n\n protected onViewerSwipeStart(event: TouchEvent): void {\n const touch = event.touches[0];\n if (!touch) return;\n this.viewerStartY = touch.clientY;\n this.viewerSwiping = true;\n }\n\n protected onViewerSwipeMove(event: TouchEvent, viewer: HTMLElement): void {\n if (!this.viewerSwiping) return;\n const touch = event.touches[0];\n if (!touch) return;\n const dy = touch.clientY - this.viewerStartY;\n if (dy <= 0) {\n viewer.style.transform = '';\n viewer.style.opacity = '';\n return;\n }\n event.preventDefault();\n viewer.style.transition = 'none';\n viewer.style.transform = `translateY(${dy}px)`;\n viewer.style.opacity = String(Math.max(0.3, 1 - dy / (viewer.offsetHeight \|\| 1)));\n }\n\n protected onViewerSwipeEnd(event: TouchEvent, viewer: HTMLElement): void {\n if (!this.viewerSwiping) return;\n this.viewerSwiping = false;\n const touch = event.changedTouches[0];\n const dy = touch ? touch.clientY - this.viewerStartY : 0;\n if (dy > (viewer.offsetHeight \|\| 0) 0.2) {\n this.onClose();\n } else {\n viewer.style.transition = '';\n viewer.style.transform = '';\n viewer.style.opacity = '';\n }\n }\n\n /*\n The thumbnail has settled, one way or the other. A failure counts: `--loading`\n * animates a shimmer AND sets `opacity: 0` on the image, so a broken `src` with no\n * error path left an invisible box shimmering for ever instead of showing its alt\n * text.\n /\n protected onSettled(): void {\n this.loaded.set(true);\n }\n\n // Overlay\n\n private openOverlay(): void {\n if (this.overlayRef) return;\n\n this.overlayRef = this.overlay.create({\n hasBackdrop: true,\n backdropClass: 'wr-lightbox-backdrop',\n positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\n scrollStrategy: this.overlay.scrollStrategies.block(),\n panelClass: 'wr-lightbox-overlay',\n });\n\n const portal = new TemplatePortal(this.panelTpl(), this.vcr);\n this.overlayRef.attach(portal);\n\n // The viewer declares role=\"dialog\" + aria-modal=\"true\", which promises the\n // rest of the page is inert. Without a focus trap that promise is a lie:\n // Tab walks straight out of the viewer into the page behind the backdrop.\n const active = document.activeElement;\n this.previouslyFocused = active instanceof HTMLElement ? active : null;\n this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);\n void this.focusTrap.focusInitialElementWhenReady();\n\n this.overlayRef\n .backdropClick()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.open.set(false));\n\n this.overlayRef\n .keydownEvents()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(event => {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.open.set(false);\n }\n });\n }\n\n private closeOverlay(): void {\n if (!this.overlayRef) return;\n this.focusTrap?.destroy();\n this.focusTrap = null;\n const restore = this.previouslyFocused;\n this.previouslyFocused = null;\n this.overlayRef.dispose();\n this.overlayRef = null;\n // Send focus back where it came from, or it lands on <body> and the user\n // has to tab from the top of the page again.\n if (restore && typeof restore.focus === 'function') restore.focus();\n }\n}\n","@if (disablePreview()) {\n <img\n class=\"wr-lightbox__thumb\"\n [src]=\"preview() \|\| src()\"\n [alt]=\"alt()\"\n (load)=\"onSettled()\"\n (error)=\"onSettled()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n} @else {\n <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n opens anything, and nothing on the page tying it to the viewer it opened. -->\n <button\n type=\"button\"\n class=\"wr-lightbox__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-controls]=\"open() ? viewerId : null\"\n [attr.aria-label]=\"resolvedOpenLabel()\"\n (click)=\"onClick()\"\n >\n <img\n class=\"wr-lightbox__thumb\"\n [src]=\"preview() \|\| src()\"\n [alt]=\"alt()\"\n (load)=\"onSettled()\"\n (error)=\"onSettled()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </button>\n}\n\n<ng-template #viewerTpl>\n <div\n #viewer\n class=\"wr-lightbox-viewer\"\n [id]=\"viewerId\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"resolvedViewerLabel()\"\n (touchstart)=\"onViewerSwipeStart($event)\"\n (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n >\n <button\n type=\"button\"\n class=\"wr-lightbox-viewer__close\"\n [attr.aria-label]=\"resolvedCloseLabel()\"\n (click)=\"onClose()\"\n (keydown.enter)=\"onClose()\"\n (keydown.space)=\"onClose()\"\n >\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=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n <!--\n Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n REDUNDANT mouse affordance — the close button, Escape, the backdrop and\n swipe-down all do the same thing and all reach a keyboard — so the image stays\n out of the tab order rather than becoming a second close stop.\n -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n @if (caption()) {\n <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n }\n </div>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ngwr-lightbox.mjs","sources":["../../../projects/lib/lightbox/lightbox.ts","../../../projects/lib/lightbox/lightbox.html","../../../projects/lib/lightbox/ngwr-lightbox.ts"],"sourcesContent":["/*\n @license\n \n Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n /\n\nimport { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { type OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport type { TemplateRef } from '@angular/core';\nimport {\n Component,\n DestroyRef,\n ViewContainerRef,\n ViewEncapsulation,\n computed,\n effect,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WR_OVERLAY } from 'ngwr/overlay';\n\nlet viewerUid = 0;\n\n/\n Image with click-to-zoom lightbox. The thumbnail is a plain `<img>`\n * with whatever sizing/`object-fit` you give it; clicking opens a CDK\n * overlay showing the full image, with Escape + close button + backdrop\n * to dismiss.\n \n @example\n * ```html\n * <wr-lightbox\n * src=\"/photo.jpg\"\n * alt=\"Mountain\"\n * style=\"width: 16rem; height: 10rem; object-fit: cover\"\n * />\n * ```\n \n @see https://ngwr.dev/reference/components/lightbox\n /\n@Component({\n selector: 'wr-lightbox',\n templateUrl: './lightbox.html',\n styleUrl: './lightbox.scss',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[style.aspect-ratio]': 'aspectRatio()',\n },\n})\nexport class WrLightbox {\n /* Accessible name. Falls back to `image.close`, then `'Close preview'`. /\n /* Accessible name of the thumbnail button. Falls back to `alt`, then `image.open`. /\n readonly openLabel = input<string \| null>(null);\n\n readonly closeLabel = input<string \| null>(null);\n\n protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'image.close', 'Close preview');\n\n /* Image source. /\n readonly src = input.required<string>();\n\n /* Alt text. Required for a11y; falls back to an empty string. @default '' /\n readonly alt = input<string>('');\n\n /\n Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not\n * pull full-size images. The viewer always shows `src`; the thumbnail does not swap\n * to it later.\n /\n readonly preview = input<string \| null>(null);\n\n // Both of these were hard-coded English literals in the template, next to a catalog\n // that already carried `image.open` translated and unread. `useI18nText` already\n // does the whole chain — a non-empty binding wins, then the catalog, then the\n // English default — so the alt text (which describes the actual picture) is what\n // gets forwarded, with `openLabel` ahead of it as the explicit override.\n protected readonly resolvedOpenLabel = useI18nText(\n computed(() => {\n // Not `??`: an empty `openLabel` is no label at all, so it has to fall through\n // to the alt text rather than winning as an empty string.\n const explicit = this.openLabel();\n if (explicit) return explicit;\n return this.alt();\n }),\n 'image.open',\n 'Open preview'\n );\n\n protected readonly resolvedViewerLabel = useI18nText(this.alt, 'image.viewer', 'Image preview');\n\n /* Disable the click-to-zoom lightbox. @default false /\n readonly disablePreview = input(false, { transform: coerceBooleanProperty });\n\n /* Caption shown under the full image in the lightbox. /\n readonly caption = input<string>('');\n\n /\n Reserve space before the image resolves by fixing the thumbnail's\n * `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`).\n * Prevents the layout jump when the intrinsic image size isn't known up\n * front — pair it with a `width` and the box keeps its height from first\n * paint. @default null\n /\n readonly aspectRatio = input<string \| number \| null>(null);\n\n protected readonly open = signal(false);\n protected readonly loaded = signal(false);\n\n /\n Id the trigger's `aria-controls` points at while the viewer is open.\n \n @internal Public so the host bindings can read it.\n /\n protected readonly viewerId = `wr-lightbox-viewer-${++viewerUid}`;\n\n protected readonly classes = computed(() => {\n const parts = ['wr-lightbox'];\n if (this.open()) parts.push('wr-lightbox--open');\n if (!this.loaded()) parts.push('wr-lightbox--loading');\n return parts.join(' ');\n });\n\n // Query by name — `@if` blocks register their own TemplateRefs, so an\n // unqualified TemplateRef query would grab the thumbnail branch instead.\n protected readonly panelTpl = viewChild.required<TemplateRef<unknown>>('viewerTpl');\n\n private readonly overlay = inject(WR_OVERLAY);\n private readonly vcr = inject(ViewContainerRef);\n private readonly destroyRef = inject(DestroyRef);\n private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n private focusTrap: ConfigurableFocusTrap \| null = null;\n private previouslyFocused: HTMLElement \| null = null;\n private overlayRef: OverlayRef \| null = null;\n\n constructor() {\n // Destroying the component while the viewer is open removes the projected\n // content (the portal uses this component's ViewContainerRef) but leaves the\n // overlay pane and its full-screen backdrop behind, with page scroll still\n // blocked. Dispose the overlay explicitly.\n this.destroyRef.onDestroy(() => this.closeOverlay());\n\n effect(() => {\n if (this.open()) this.openOverlay();\n else this.closeOverlay();\n });\n }\n\n protected onClick(): void {\n if (this.disablePreview()) return;\n this.open.set(true);\n }\n\n protected onClose(): void {\n this.open.set(false);\n }\n\n // Swipe-down-to-dismiss on the open viewer. The image follows the finger and\n // fades; releasing past ~20% of the viewer height closes it.\n private viewerStartY = 0;\n private viewerSwiping = false;\n\n protected onViewerSwipeStart(event: TouchEvent): void {\n const touch = event.touches[0];\n if (!touch) return;\n this.viewerStartY = touch.clientY;\n this.viewerSwiping = true;\n }\n\n protected onViewerSwipeMove(event: TouchEvent, viewer: HTMLElement): void {\n if (!this.viewerSwiping) return;\n const touch = event.touches[0];\n if (!touch) return;\n const dy = touch.clientY - this.viewerStartY;\n if (dy <= 0) {\n viewer.style.transform = '';\n viewer.style.opacity = '';\n return;\n }\n event.preventDefault();\n viewer.style.transition = 'none';\n viewer.style.transform = `translateY(${dy}px)`;\n viewer.style.opacity = String(Math.max(0.3, 1 - dy / (viewer.offsetHeight \|\| 1)));\n }\n\n protected onViewerSwipeEnd(event: TouchEvent, viewer: HTMLElement): void {\n if (!this.viewerSwiping) return;\n this.viewerSwiping = false;\n const touch = event.changedTouches[0];\n const dy = touch ? touch.clientY - this.viewerStartY : 0;\n if (dy > (viewer.offsetHeight \|\| 0) 0.2) {\n this.onClose();\n } else {\n viewer.style.transition = '';\n viewer.style.transform = '';\n viewer.style.opacity = '';\n }\n }\n\n /*\n The thumbnail has settled, one way or the other. A failure counts: `--loading`\n * animates a shimmer AND sets `opacity: 0` on the image, so a broken `src` with no\n * error path left an invisible box shimmering for ever instead of showing its alt\n * text.\n /\n protected onSettled(): void {\n this.loaded.set(true);\n }\n\n // Overlay\n\n private openOverlay(): void {\n if (this.overlayRef) return;\n\n this.overlayRef = this.overlay.create({\n hasBackdrop: true,\n backdropClass: 'wr-lightbox-backdrop',\n positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\n scrollStrategy: this.overlay.scrollStrategies.block(),\n panelClass: 'wr-lightbox-overlay',\n });\n\n const portal = new TemplatePortal(this.panelTpl(), this.vcr);\n this.overlayRef.attach(portal);\n\n // The viewer declares role=\"dialog\" + aria-modal=\"true\", which promises the\n // rest of the page is inert. Without a focus trap that promise is a lie:\n // Tab walks straight out of the viewer into the page behind the backdrop.\n const active = document.activeElement;\n this.previouslyFocused = active instanceof HTMLElement ? active : null;\n this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);\n void this.focusTrap.focusInitialElementWhenReady();\n\n this.overlayRef\n .backdropClick()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.open.set(false));\n\n this.overlayRef\n .keydownEvents()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(event => {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.open.set(false);\n }\n });\n }\n\n private closeOverlay(): void {\n if (!this.overlayRef) return;\n this.focusTrap?.destroy();\n this.focusTrap = null;\n const restore = this.previouslyFocused;\n this.previouslyFocused = null;\n this.overlayRef.dispose();\n this.overlayRef = null;\n // Send focus back where it came from, or it lands on <body> and the user\n // has to tab from the top of the page again.\n if (restore && typeof restore.focus === 'function') restore.focus();\n }\n}\n","@if (disablePreview()) {\n <img\n class=\"wr-lightbox__thumb\"\n [src]=\"preview() \|\| src()\"\n [alt]=\"alt()\"\n (load)=\"onSettled()\"\n (error)=\"onSettled()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n} @else {\n <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n opens anything, and nothing on the page tying it to the viewer it opened. -->\n <button\n type=\"button\"\n class=\"wr-lightbox__trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-controls]=\"open() ? viewerId : null\"\n [attr.aria-label]=\"resolvedOpenLabel()\"\n (click)=\"onClick()\"\n >\n <img\n class=\"wr-lightbox__thumb\"\n [src]=\"preview() \|\| src()\"\n [alt]=\"alt()\"\n (load)=\"onSettled()\"\n (error)=\"onSettled()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </button>\n}\n\n<ng-template #viewerTpl>\n <div\n #viewer\n class=\"wr-lightbox-viewer\"\n [id]=\"viewerId\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"resolvedViewerLabel()\"\n (touchstart)=\"onViewerSwipeStart($event)\"\n (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n >\n <button\n type=\"button\"\n class=\"wr-lightbox-viewer__close\"\n [attr.aria-label]=\"resolvedCloseLabel()\"\n (click)=\"onClose()\"\n (keydown.enter)=\"onClose()\"\n (keydown.space)=\"onClose()\"\n >\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=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n <!--\n Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n REDUNDANT mouse affordance — the close button, Escape, the backdrop and\n swipe-down all do the same thing and all reach a keyboard — so the image stays\n out of the tab order rather than becoming a second close stop.\n -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n @if (caption()) {\n <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n }\n </div>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-line-chart.mjs CHANGED Viewed

@@ -220,10 +220,10 @@ class WrLineChart {
     ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
     // Convenience accessor so the host can be referenced from the template.
     hostEl = this.host.nativeElement;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrLineChart, isStandalone: true, selector: "wr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-line-chart" }, ngImport: i0, template: "@let hovered = hoveredIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <span class=\"wr-line-chart__swatch\" [style.background]=\"s.color\"></span>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <svg\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <div class=\"wr-line-chart__tooltip\" [style.left.%]=\"(pointX(hovered) / vbW) * 100\" [style.top.px]=\"padding.top\">\n      <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n      @for (p of hoverPoints(); track p.label) {\n        <div class=\"wr-line-chart__tooltip-row\">\n          <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n          <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n          <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrLineChart, isStandalone: true, selector: "wr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-line-chart" }, ngImport: i0, template: "@let hovered = hoveredIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <span class=\"wr-line-chart__swatch\" [style.background]=\"s.color\"></span>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <svg\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <div class=\"wr-line-chart__tooltip\" [style.left.%]=\"(pointX(hovered) / vbW) * 100\" [style.top.px]=\"padding.top\">\n      <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n      @for (p of hoverPoints(); track p.label) {\n        <div class=\"wr-line-chart__tooltip-row\">\n          <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n          <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n          <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLineChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLineChart, decorators: [{
             type: Component,
             args: [{ selector: 'wr-line-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-line-chart' }, template: "@let hovered = hoveredIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <span class=\"wr-line-chart__swatch\" [style.background]=\"s.color\"></span>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <svg\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <div class=\"wr-line-chart__tooltip\" [style.left.%]=\"(pointX(hovered) / vbW) * 100\" [style.top.px]=\"padding.top\">\n      <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n      @for (p of hoverPoints(); track p.label) {\n        <div class=\"wr-line-chart__tooltip-row\">\n          <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n          <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n          <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n" }]
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], xLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabels", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }] } });

package/fesm2022/ngwr-list.mjs CHANGED Viewed

@@ -51,15 +51,15 @@ class WrList {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrList, isStandalone: true, selector: "wr-list", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', isInline: true, styles: [".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-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive: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-list__item--disabled{opacity:var(--wr-disabled-opacity);pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrList, isStandalone: true, selector: "wr-list", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', isInline: true, styles: [".wr-btn: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-table__sort-btn: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-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-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive: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-list__item--disabled{opacity:var(--wr-disabled-opacity);pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrList, decorators: [{
             type: Component,
             args: [{ selector: 'wr-list', template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[attr.aria-label]': 'ariaLabel() || null',
-                    }, styles: [".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-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive: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-list__item--disabled{opacity:var(--wr-disabled-opacity);pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    }, styles: [".wr-btn: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-table__sort-btn: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-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-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive: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-list__item--disabled{opacity:var(--wr-disabled-opacity);pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 /**
@@ -114,10 +114,10 @@ class WrListItem {
         event.preventDefault();
         event.currentTarget.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrListItem, isStandalone: true, selector: "wr-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, listeners: { "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class": "classes()", "attr.tabindex": "interactive() ? \"0\" : null", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0, template: "<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrListItem, isStandalone: true, selector: "wr-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, listeners: { "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class": "classes()", "attr.tabindex": "interactive() ? \"0\" : null", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0, template: "<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrListItem, decorators: [{
             type: Component,
             args: [{ selector: 'wr-list-item', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngwr-list.mjs","sources":["../../../projects/lib/list/list.ts","../../../projects/lib/list/list-item.ts","../../../projects/lib/list/list-item.html","../../../projects/lib/list/ngwr-list.ts"],"sourcesContent":["/*\n @license\n \n Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n /\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/\n Generic list container. Renders `<ul role=\"list\">` with optional\n * borders, dividers between items, and dense (compact) padding. Project\n * `<wr-list-item>` children — they pick up the container's settings\n * through CSS cascade, no DI needed.\n \n @example\n * ```html\n * <wr-list bordered dividers>\n * <wr-list-item>\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * <wr-list-item interactive (click)=\"open(item)\">\n * Click anywhere on this row\n * </wr-list-item>\n * </wr-list>\n * ```\n \n @see https://ngwr.dev/reference/components/list\n /\n@Component({\n selector: 'wr-list',\n template: '<ul class=\"wr-list__items\" role=\"list\"><ng-content /></ul>',\n styleUrl: './list.scss',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.aria-label]': 'ariaLabel() \|\| null',\n },\n})\nexport class WrList {\n /* Wrap the list in a card-style border + radius. @default false /\n readonly bordered = input(false, { transform: coerceBooleanProperty });\n\n /* Draw a thin divider between items. @default false /\n readonly dividers = input(false, { transform: coerceBooleanProperty });\n\n /* Use compact padding on every item. @default false /\n readonly dense = input(false, { transform: coerceBooleanProperty });\n\n /* Optional accessible label for the list. /\n readonly ariaLabel = input<string>('');\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list'];\n if (this.bordered()) parts.push('wr-list--bordered');\n if (this.dividers()) parts.push('wr-list--dividers');\n if (this.dense()) parts.push('wr-list--dense');\n return parts.join(' ');\n });\n}\n","/\n @license\n \n Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n /\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/\n Row inside `<wr-list>`. Three projection slots:\n \n - `[wrListItemLeading]` — icon, avatar, status dot, etc.\n * - default — main label / body\n * - `[wrListItemTrailing]` — meta value, action button, chevron\n \n Set `interactive` to get hover and cursor styles, a tab stop, and Enter /\n * Space activation. The role stays `listitem`: the row lives inside a\n * `<ul role=\"list\">`, where a `button` or `option` child role would break the\n * structure the container promises. That means an interactive row ANNOUNCES as\n * a list item rather than as a control — deliberate, but worth knowing when the\n * whole row is the only way to reach an action. Where the action needs to be\n * announced as one, project a real button into `[wrListItemTrailing]`.\n \n @example\n * ```html\n * <wr-list-item>Plain row</wr-list-item>\n \n <wr-list-item interactive (click)=\"onPick(item)\">\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * ```\n /\n@Component({\n selector: 'wr-list-item',\n templateUrl: './list-item.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n role: 'listitem',\n '[attr.tabindex]': 'interactive() ? \"0\" : null',\n '[attr.aria-disabled]': 'disabled() \|\| null',\n '(keydown.enter)': 'onActivate($event)',\n '(keydown.space)': 'onActivate($event)',\n },\n})\nexport class WrListItem {\n /* Adds hover / cursor styles + keyboard activation. @default false /\n readonly interactive = input(false, { transform: coerceBooleanProperty });\n\n /* Visual disabled state. Suppresses hover + keyboard activation. @default false /\n readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list__item'];\n if (this.interactive()) parts.push('wr-list__item--interactive');\n if (this.disabled()) parts.push('wr-list__item--disabled');\n return parts.join(' ');\n });\n\n protected onActivate(event: Event): void {\n if (!this.interactive() \|\| this.disabled()) return;\n event.preventDefault();\n (event.currentTarget as HTMLElement).click();\n }\n}\n","<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;AAqBG;MAWU,MAAM,CAAA;;IAER,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG1D,SAAS,GAAG,KAAK,CAAS,EAAE;kFAAC;AAEnB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,SAAS,CAAC;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACpD,IAAI,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC;AAC9C,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAnBS,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,uqBARP,4DAA4D,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA~~,+jLAAA~~,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQ3D,MAAM,EAAA,UAAA,EAAA,CAAA;kBAVlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,YACT,4DAA4D,EAAA,aAAA,EAEvD,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,mBAAmB,EAAE,qBAAqB;AAC3C,qBAAA,EAAA,MAAA,EAAA,CAAA~~,+jLAAA~~,CAAA,EAAA;;;ACxCH;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MAcU,UAAU,CAAA;;IAEZ,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAGhE,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEnD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,eAAe,CAAC;QAC/B,IAAI,IAAI,CAAC,WAAW,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,4BAA4B,CAAC;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC;AAC1D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEQ,IAAA,UAAU,CAAC,KAAY,EAAA;QAC/B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QAC5C,KAAK,CAAC,cAAc,EAAE;AACrB,QAAA,KAAK,CAAC,aAA6B,CAAC,KAAK,EAAE;IAC9C;uGAlBW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,6mBCjDvB,uOAGA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD8Ca,UAAU,EAAA,UAAA,EAAA,CAAA;kBAbtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,IAAI,EAAE,UAAU;AAChB,wBAAA,iBAAiB,EAAE,4BAA4B;AAC/C,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,iBAAiB,EAAE,oBAAoB;AACxC,qBAAA,EAAA,QAAA,EAAA,uOAAA,EAAA;;;AE/CH;;AAEG;;;;"}
1	+ {"version":3,"file":"ngwr-list.mjs","sources":["../../../projects/lib/list/list.ts","../../../projects/lib/list/list-item.ts","../../../projects/lib/list/list-item.html","../../../projects/lib/list/ngwr-list.ts"],"sourcesContent":["/*\n @license\n \n Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n /\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/\n Generic list container. Renders `<ul role=\"list\">` with optional\n * borders, dividers between items, and dense (compact) padding. Project\n * `<wr-list-item>` children — they pick up the container's settings\n * through CSS cascade, no DI needed.\n \n @example\n * ```html\n * <wr-list bordered dividers>\n * <wr-list-item>\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * <wr-list-item interactive (click)=\"open(item)\">\n * Click anywhere on this row\n * </wr-list-item>\n * </wr-list>\n * ```\n \n @see https://ngwr.dev/reference/components/list\n /\n@Component({\n selector: 'wr-list',\n template: '<ul class=\"wr-list__items\" role=\"list\"><ng-content /></ul>',\n styleUrl: './list.scss',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n '[attr.aria-label]': 'ariaLabel() \|\| null',\n },\n})\nexport class WrList {\n /* Wrap the list in a card-style border + radius. @default false /\n readonly bordered = input(false, { transform: coerceBooleanProperty });\n\n /* Draw a thin divider between items. @default false /\n readonly dividers = input(false, { transform: coerceBooleanProperty });\n\n /* Use compact padding on every item. @default false /\n readonly dense = input(false, { transform: coerceBooleanProperty });\n\n /* Optional accessible label for the list. /\n readonly ariaLabel = input<string>('');\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list'];\n if (this.bordered()) parts.push('wr-list--bordered');\n if (this.dividers()) parts.push('wr-list--dividers');\n if (this.dense()) parts.push('wr-list--dense');\n return parts.join(' ');\n });\n}\n","/\n @license\n \n Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n /\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/\n Row inside `<wr-list>`. Three projection slots:\n \n - `[wrListItemLeading]` — icon, avatar, status dot, etc.\n * - default — main label / body\n * - `[wrListItemTrailing]` — meta value, action button, chevron\n \n Set `interactive` to get hover and cursor styles, a tab stop, and Enter /\n * Space activation. The role stays `listitem`: the row lives inside a\n * `<ul role=\"list\">`, where a `button` or `option` child role would break the\n * structure the container promises. That means an interactive row ANNOUNCES as\n * a list item rather than as a control — deliberate, but worth knowing when the\n * whole row is the only way to reach an action. Where the action needs to be\n * announced as one, project a real button into `[wrListItemTrailing]`.\n \n @example\n * ```html\n * <wr-list-item>Plain row</wr-list-item>\n \n <wr-list-item interactive (click)=\"onPick(item)\">\n * <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n * Reports\n * <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * ```\n /\n@Component({\n selector: 'wr-list-item',\n templateUrl: './list-item.html',\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'classes()',\n role: 'listitem',\n '[attr.tabindex]': 'interactive() ? \"0\" : null',\n '[attr.aria-disabled]': 'disabled() \|\| null',\n '(keydown.enter)': 'onActivate($event)',\n '(keydown.space)': 'onActivate($event)',\n },\n})\nexport class WrListItem {\n /* Adds hover / cursor styles + keyboard activation. @default false /\n readonly interactive = input(false, { transform: coerceBooleanProperty });\n\n /* Visual disabled state. Suppresses hover + keyboard activation. @default false /\n readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n protected readonly classes = computed(() => {\n const parts = ['wr-list__item'];\n if (this.interactive()) parts.push('wr-list__item--interactive');\n if (this.disabled()) parts.push('wr-list__item--disabled');\n return parts.join(' ');\n });\n\n protected onActivate(event: Event): void {\n if (!this.interactive() \|\| this.disabled()) return;\n event.preventDefault();\n (event.currentTarget as HTMLElement).click();\n }\n}\n","<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;AAqBG;MAWU,MAAM,CAAA;;IAER,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG1D,SAAS,GAAG,KAAK,CAAS,EAAE;kFAAC;AAEnB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,SAAS,CAAC;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC;QACpD,IAAI,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC;AAC9C,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAnBS,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,uqBARP,4DAA4D,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,m+LAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQ3D,MAAM,EAAA,UAAA,EAAA,CAAA;kBAVlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,YACT,4DAA4D,EAAA,aAAA,EAEvD,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,mBAAmB,EAAE,qBAAqB;AAC3C,qBAAA,EAAA,MAAA,EAAA,CAAA,m+LAAA,CAAA,EAAA;;;ACxCH;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MAcU,UAAU,CAAA;;IAEZ,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAGhE,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEnD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,eAAe,CAAC;QAC/B,IAAI,IAAI,CAAC,WAAW,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,4BAA4B,CAAC;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC;AAC1D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEQ,IAAA,UAAU,CAAC,KAAY,EAAA;QAC/B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QAC5C,KAAK,CAAC,cAAc,EAAE;AACrB,QAAA,KAAK,CAAC,aAA6B,CAAC,KAAK,EAAE;IAC9C;uGAlBW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,6mBCjDvB,uOAGA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD8Ca,UAAU,EAAA,UAAA,EAAA,CAAA;kBAbtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,IAAI,EAAE,UAAU;AAChB,wBAAA,iBAAiB,EAAE,4BAA4B;AAC/C,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,iBAAiB,EAAE,oBAAoB;AACxC,qBAAA,EAAA,QAAA,EAAA,uOAAA,EAAA;;;AE/CH;;AAEG;;;;"}

package/fesm2022/ngwr-loading-bar.mjs CHANGED Viewed

@@ -131,10 +131,10 @@ class WrLoadingBar {
                 this._progress.set(0);
         }, 220);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLoadingBar, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrLoadingBar });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLoadingBar, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: WrLoadingBar });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLoadingBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLoadingBar, decorators: [{
             type: Service
         }] });
@@ -173,10 +173,10 @@ class WrLoadingBarComponent {
     bar = inject(WrLoadingBar);
     active = computed(() => this.bar.state() !== 'idle', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrLoadingBarComponent, isStandalone: true, selector: "wr-loading-bar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-loading-bar" }, ngImport: i0, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n  <div\n    class=\"wr-loading-bar__fill\"\n    [style.width.%]=\"bar.progress() * 100\"\n    [style.background]=\"color()\"\n    [style.height]=\"height()\"\n  ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;inset-inline:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrLoadingBarComponent, isStandalone: true, selector: "wr-loading-bar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-loading-bar" }, ngImport: i0, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n  <div\n    class=\"wr-loading-bar__fill\"\n    [style.width.%]=\"bar.progress() * 100\"\n    [style.background]=\"color()\"\n    [style.height]=\"height()\"\n  ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;inset-inline:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrLoadingBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrLoadingBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wr-loading-bar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-loading-bar' }, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n  <div\n    class=\"wr-loading-bar__fill\"\n    [style.width.%]=\"bar.progress() * 100\"\n    [style.background]=\"color()\"\n    [style.height]=\"height()\"\n  ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;inset-inline:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });

package/fesm2022/ngwr-markdown.mjs CHANGED Viewed

@@ -1295,10 +1295,10 @@ class WrMarkdownHighlight {
             this.cache.delete(oldest.value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrMarkdownHighlight, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrMarkdownHighlight, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrMarkdownHighlight, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrMarkdownHighlight, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrMarkdownHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrMarkdownHighlight, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1539,10 +1539,10 @@ class WrMarkdown {
     asCells(value) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrMarkdown, isStandalone: true, selector: "wr-markdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, headingIds: { classPropertyName: "headingIds", publicName: "headingIds", isSignal: true, isRequired: false, transformFunction: null }, headingIdPrefix: { classPropertyName: "headingIdPrefix", publicName: "headingIdPrefix", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, taskDoneLabel: { classPropertyName: "taskDoneLabel", publicName: "taskDoneLabel", isSignal: true, isRequired: false, transformFunction: null }, taskTodoLabel: { classPropertyName: "taskTodoLabel", publicName: "taskTodoLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-markdown--streaming": "streaming()" }, classAttribute: "wr-markdown" }, ngImport: i0, template: "<!--\n  Recursion runs through `ngTemplateOutlet` into these templates rather than\n  through a child component, so the rendered DOM is exactly the document \u2014 no\n  wrapper element between a `<ul>` and its `<li>`. See `asBlocks` for the whole\n  reasoning.\n-->\n<ng-template #inlineList let-raw>\n  @let nodes = asInlines(raw);\n\n  @for (node of nodes; track $index) {\n    @switch (node.kind) {\n      @case ('text') {\n        <!-- Wrapped, and not for tidiness: a bare interpolation on its own line is\n             ONE text node that includes the indentation around it, so `a **b** c`\n             rendered with a space inside every `<strong>`. Inside an element the\n             whitespace becomes separate whitespace-only nodes, which Angular\n             removes, and `<ng-container>` itself renders nothing. Prettier\n             reformats the bare form back, so this also has to survive `--fix`. -->\n        <ng-container>{{ node.value }}</ng-container>\n      }\n      @case ('code') {\n        <!-- `dir=\"ltr\"` because code is not prose: under RTL the browser\n             reorders `foo();` to `;foo()`. -->\n        <code class=\"wr-markdown__code-inline\" dir=\"ltr\">{{ node.value }}</code>\n      }\n      @case ('strong') {\n        <strong class=\"wr-markdown__strong\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em class=\"wr-markdown__em\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></em>\n      }\n      @case ('del') {\n        <del class=\"wr-markdown__del\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></del>\n      }\n      @case ('link') {\n        <a\n          class=\"wr-markdown__link\"\n          [href]=\"hrefOf(node.href)\"\n          [attr.title]=\"node.title\"\n          [attr.target]=\"resolvedLinkTarget()\"\n          [attr.rel]=\"linkRel()\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></a>\n      }\n      @case ('image') {\n        <img\n          class=\"wr-markdown__image\"\n          [src]=\"node.src\"\n          [alt]=\"node.alt\"\n          [attr.title]=\"node.title\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      }\n      @case ('break') {\n        <br />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #itemList let-raw let-tight=\"tight\">\n  @let items = asItems(raw);\n\n  @for (item of items; track $index) {\n    <li class=\"wr-markdown__item\" [class.wr-markdown__item--task]=\"item.checked !== null\">\n      @if (item.checked !== null) {\n        <!-- Presentational, with the state as text beside it: a real\n             `<input type=\"checkbox\">` here would be an unlabelled form control,\n             which is a serious axe violation, and making it operable would\n             promise an interaction a renderer cannot honour. -->\n        <span class=\"wr-markdown__task\" [class.wr-markdown__task--checked]=\"item.checked\" aria-hidden=\"true\"></span>\n        <span class=\"wr-markdown__sr-only\">{{ item.checked ? resolvedTaskDoneLabel() : resolvedTaskTodoLabel() }}</span>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"blockList\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.children, tight: tight }\"\n      />\n    </li>\n  }\n</ng-template>\n\n<ng-template #blockList let-raw let-tight=\"tight\">\n  @let list = asBlocks(raw);\n\n  @for (block of list; track $index) {\n    @switch (block.kind) {\n      @case ('paragraph') {\n        <!-- A tight list drops the `<p>`, which is what CommonMark specifies and\n             what keeps a one-line list from being double-spaced. -->\n        @if (tight) {\n          <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n        } @else {\n          <p class=\"wr-markdown__paragraph\">\n            <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n          </p>\n        }\n      }\n      @case ('heading') {\n        @switch (block.level) {\n          @case (1) {\n            <h1 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h1>\n          }\n          @case (2) {\n            <h2 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h2>\n          }\n          @case (3) {\n            <h3 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h3>\n          }\n          @case (4) {\n            <h4 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h4>\n          }\n          @case (5) {\n            <h5 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h5>\n          }\n          @default {\n            <h6 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h6>\n          }\n        }\n      }\n      @case ('code') {\n        @let highlighted = linesOf(block.code, block.language);\n\n        <div class=\"wr-markdown__code-block\">\n          <pre\n            class=\"wr-markdown__pre\"\n            dir=\"ltr\"\n            tabindex=\"0\"\n          ><code class=\"wr-markdown__code\" [attr.data-language]=\"block.language\">@if (highlighted) {@for (row of highlighted; track $index) {<span class=\"wr-markdown__line\">@for (span of row; track $index) {<span\n            [style.color]=\"span.color\"\n            [style.font-style]=\"span.fontStyle === 'italic' ? 'italic' : null\"\n            [style.font-weight]=\"span.fontStyle === 'bold' ? 'bold' : null\"\n            [style.text-decoration]=\"span.fontStyle === 'underline' ? 'underline' : null\"\n          >{{ span.text }}</span>}</span>@if (!$last) {{{ newline }}}}} @else {{{ block.code }}}</code></pre>\n\n          @if (resolvedCopyable() && block.closed) {\n            <button\n              type=\"button\"\n              class=\"wr-markdown__copy\"\n              [wrCopyToClipboard]=\"block.code\"\n              [attr.aria-label]=\"isCopied(block) ? resolvedCopiedLabel() : resolvedCopyLabel()\"\n              (copied)=\"onCopied(block)\"\n            >\n              <svg\n                class=\"wr-markdown__copy-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                @if (isCopied(block)) {\n                  <path d=\"M20 6 9 17l-5-5\" />\n                } @else {\n                  <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n                  <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n                }\n              </svg>\n            </button>\n          }\n        </div>\n      }\n      @case ('quote') {\n        <blockquote class=\"wr-markdown__quote\">\n          <ng-container\n            [ngTemplateOutlet]=\"blockList\"\n            [ngTemplateOutletContext]=\"{ $implicit: block.children, tight: false }\"\n          />\n        </blockquote>\n      }\n      @case ('list') {\n        @if (block.ordered) {\n          <ol\n            class=\"wr-markdown__list wr-markdown__list--ordered\"\n            [attr.start]=\"block.start === 1 ? null : block.start\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ol>\n        } @else {\n          <ul class=\"wr-markdown__list\">\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ul>\n        }\n      }\n      @case ('table') {\n        <!-- Its own scroller: a wide table must not push the page sideways, which\n             is also what keeps the RTL layout gate quiet about it. -->\n        <div class=\"wr-markdown__table-scroll\" tabindex=\"0\">\n          <table class=\"wr-markdown__table\">\n            <thead>\n              <tr>\n                @for (cell of block.head; track column; let column = $index) {\n                  <th class=\"wr-markdown__th\" scope=\"col\" [style.text-align]=\"block.align[column]\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"inlineList\"\n                      [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                    />\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of block.rows; track $index) {\n                <tr>\n                  @for (cell of asCells(row); track column; let column = $index) {\n                    <td class=\"wr-markdown__td\" [style.text-align]=\"block.align[column]\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"inlineList\"\n                        [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                      />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n      @case ('rule') {\n        <hr class=\"wr-markdown__rule\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"blockList\" [ngTemplateOutletContext]=\"{ $implicit: blocks(), tight: false }\" />\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WrCopyToClipboard, selector: "[wrCopyToClipboard]", inputs: ["wrCopyToClipboard"], outputs: ["copied", "copyFailed"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrMarkdown, isStandalone: true, selector: "wr-markdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, headingIds: { classPropertyName: "headingIds", publicName: "headingIds", isSignal: true, isRequired: false, transformFunction: null }, headingIdPrefix: { classPropertyName: "headingIdPrefix", publicName: "headingIdPrefix", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, taskDoneLabel: { classPropertyName: "taskDoneLabel", publicName: "taskDoneLabel", isSignal: true, isRequired: false, transformFunction: null }, taskTodoLabel: { classPropertyName: "taskTodoLabel", publicName: "taskTodoLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-markdown--streaming": "streaming()" }, classAttribute: "wr-markdown" }, ngImport: i0, template: "<!--\n  Recursion runs through `ngTemplateOutlet` into these templates rather than\n  through a child component, so the rendered DOM is exactly the document \u2014 no\n  wrapper element between a `<ul>` and its `<li>`. See `asBlocks` for the whole\n  reasoning.\n-->\n<ng-template #inlineList let-raw>\n  @let nodes = asInlines(raw);\n\n  @for (node of nodes; track $index) {\n    @switch (node.kind) {\n      @case ('text') {\n        <!-- Wrapped, and not for tidiness: a bare interpolation on its own line is\n             ONE text node that includes the indentation around it, so `a **b** c`\n             rendered with a space inside every `<strong>`. Inside an element the\n             whitespace becomes separate whitespace-only nodes, which Angular\n             removes, and `<ng-container>` itself renders nothing. Prettier\n             reformats the bare form back, so this also has to survive `--fix`. -->\n        <ng-container>{{ node.value }}</ng-container>\n      }\n      @case ('code') {\n        <!-- `dir=\"ltr\"` because code is not prose: under RTL the browser\n             reorders `foo();` to `;foo()`. -->\n        <code class=\"wr-markdown__code-inline\" dir=\"ltr\">{{ node.value }}</code>\n      }\n      @case ('strong') {\n        <strong class=\"wr-markdown__strong\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></strong>\n      }\n      @case ('em') {\n        <em class=\"wr-markdown__em\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></em>\n      }\n      @case ('del') {\n        <del class=\"wr-markdown__del\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></del>\n      }\n      @case ('link') {\n        <a\n          class=\"wr-markdown__link\"\n          [href]=\"hrefOf(node.href)\"\n          [attr.title]=\"node.title\"\n          [attr.target]=\"resolvedLinkTarget()\"\n          [attr.rel]=\"linkRel()\"\n          ><ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: node.children }\"\n        /></a>\n      }\n      @case ('image') {\n        <img\n          class=\"wr-markdown__image\"\n          [src]=\"node.src\"\n          [alt]=\"node.alt\"\n          [attr.title]=\"node.title\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        />\n      }\n      @case ('break') {\n        <br />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #itemList let-raw let-tight=\"tight\">\n  @let items = asItems(raw);\n\n  @for (item of items; track $index) {\n    <li class=\"wr-markdown__item\" [class.wr-markdown__item--task]=\"item.checked !== null\">\n      @if (item.checked !== null) {\n        <!-- Presentational, with the state as text beside it: a real\n             `<input type=\"checkbox\">` here would be an unlabelled form control,\n             which is a serious axe violation, and making it operable would\n             promise an interaction a renderer cannot honour. -->\n        <span class=\"wr-markdown__task\" [class.wr-markdown__task--checked]=\"item.checked\" aria-hidden=\"true\"></span>\n        <span class=\"wr-markdown__sr-only\">{{ item.checked ? resolvedTaskDoneLabel() : resolvedTaskTodoLabel() }}</span>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"blockList\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.children, tight: tight }\"\n      />\n    </li>\n  }\n</ng-template>\n\n<ng-template #blockList let-raw let-tight=\"tight\">\n  @let list = asBlocks(raw);\n\n  @for (block of list; track $index) {\n    @switch (block.kind) {\n      @case ('paragraph') {\n        <!-- A tight list drops the `<p>`, which is what CommonMark specifies and\n             what keeps a one-line list from being double-spaced. -->\n        @if (tight) {\n          <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n        } @else {\n          <p class=\"wr-markdown__paragraph\">\n            <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n          </p>\n        }\n      }\n      @case ('heading') {\n        @switch (block.level) {\n          @case (1) {\n            <h1 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h1>\n          }\n          @case (2) {\n            <h2 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h2>\n          }\n          @case (3) {\n            <h3 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h3>\n          }\n          @case (4) {\n            <h4 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h4>\n          }\n          @case (5) {\n            <h5 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h5>\n          }\n          @default {\n            <h6 class=\"wr-markdown__heading\" [attr.id]=\"idOf(block.id)\">\n              <ng-container [ngTemplateOutlet]=\"inlineList\" [ngTemplateOutletContext]=\"{ $implicit: block.inlines }\" />\n            </h6>\n          }\n        }\n      }\n      @case ('code') {\n        @let highlighted = linesOf(block.code, block.language);\n\n        <div class=\"wr-markdown__code-block\">\n          <pre\n            class=\"wr-markdown__pre\"\n            dir=\"ltr\"\n            tabindex=\"0\"\n          ><code class=\"wr-markdown__code\" [attr.data-language]=\"block.language\">@if (highlighted) {@for (row of highlighted; track $index) {<span class=\"wr-markdown__line\">@for (span of row; track $index) {<span\n            [style.color]=\"span.color\"\n            [style.font-style]=\"span.fontStyle === 'italic' ? 'italic' : null\"\n            [style.font-weight]=\"span.fontStyle === 'bold' ? 'bold' : null\"\n            [style.text-decoration]=\"span.fontStyle === 'underline' ? 'underline' : null\"\n          >{{ span.text }}</span>}</span>@if (!$last) {{{ newline }}}}} @else {{{ block.code }}}</code></pre>\n\n          @if (resolvedCopyable() && block.closed) {\n            <button\n              type=\"button\"\n              class=\"wr-markdown__copy\"\n              [wrCopyToClipboard]=\"block.code\"\n              [attr.aria-label]=\"isCopied(block) ? resolvedCopiedLabel() : resolvedCopyLabel()\"\n              (copied)=\"onCopied(block)\"\n            >\n              <svg\n                class=\"wr-markdown__copy-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                @if (isCopied(block)) {\n                  <path d=\"M20 6 9 17l-5-5\" />\n                } @else {\n                  <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n                  <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n                }\n              </svg>\n            </button>\n          }\n        </div>\n      }\n      @case ('quote') {\n        <blockquote class=\"wr-markdown__quote\">\n          <ng-container\n            [ngTemplateOutlet]=\"blockList\"\n            [ngTemplateOutletContext]=\"{ $implicit: block.children, tight: false }\"\n          />\n        </blockquote>\n      }\n      @case ('list') {\n        @if (block.ordered) {\n          <ol\n            class=\"wr-markdown__list wr-markdown__list--ordered\"\n            [attr.start]=\"block.start === 1 ? null : block.start\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ol>\n        } @else {\n          <ul class=\"wr-markdown__list\">\n            <ng-container\n              [ngTemplateOutlet]=\"itemList\"\n              [ngTemplateOutletContext]=\"{ $implicit: block.items, tight: block.tight }\"\n            />\n          </ul>\n        }\n      }\n      @case ('table') {\n        <!-- Its own scroller: a wide table must not push the page sideways, which\n             is also what keeps the RTL layout gate quiet about it. -->\n        <div class=\"wr-markdown__table-scroll\" tabindex=\"0\">\n          <table class=\"wr-markdown__table\">\n            <thead>\n              <tr>\n                @for (cell of block.head; track column; let column = $index) {\n                  <th class=\"wr-markdown__th\" scope=\"col\" [style.text-align]=\"block.align[column]\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"inlineList\"\n                      [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                    />\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of block.rows; track $index) {\n                <tr>\n                  @for (cell of asCells(row); track column; let column = $index) {\n                    <td class=\"wr-markdown__td\" [style.text-align]=\"block.align[column]\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"inlineList\"\n                        [ngTemplateOutletContext]=\"{ $implicit: cell.inlines }\"\n                      />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n      @case ('rule') {\n        <hr class=\"wr-markdown__rule\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-container [ngTemplateOutlet]=\"blockList\" [ngTemplateOutletContext]=\"{ $implicit: blocks(), tight: false }\" />\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WrCopyToClipboard, selector: "[wrCopyToClipboard]", inputs: ["wrCopyToClipboard"], outputs: ["copied", "copyFailed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrMarkdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrMarkdown, decorators: [{
             type: Component,
             args: [{ selector: 'wr-markdown', imports: [NgTemplateOutlet, WrCopyToClipboard], encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-markdown',