npm - @rivet-health/design-system - Versions diffs - 40.44.2 → 40.44.4 - Mend

@rivet-health/design-system 40.44.2 → 40.44.4

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 (123) hide show

package/esm2022/lib/input/select/select-node/select-node.component.mjs CHANGED Viewed

@@ -35,10 +35,10 @@ export class SelectNodeComponent {
     getCount(node) {
         return node.count;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        [titleTemplate]=\"titleTemplate\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i3.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i7.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: i8.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        [titleTemplate]=\"titleTemplate\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i3.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i7.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: i8.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-select-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        [titleTemplate]=\"titleTemplate\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"] }]
         }], propDecorators: { mode: [{

package/esm2022/lib/input/simple-select/option-group.pipe.mjs CHANGED Viewed

@@ -9,10 +9,10 @@ export class OptionGroupPipe {
             },
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivOptionGroup' }]
         }] });

package/esm2022/lib/input/simple-select/simple-select.component.mjs CHANGED Viewed

@@ -114,10 +114,10 @@ export class SimpleSelectComponent extends InputLabelComponent {
     issueAction(action) {
         this.manager?.actions.next(action);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
         }], propDecorators: { optionGroups: [{

package/esm2022/lib/input/switch-checkbox/switch-checkbox.component.mjs CHANGED Viewed

@@ -18,10 +18,10 @@ export class SwitchCheckboxComponent extends CheckboxComponent {
             this.animated = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:var(--switch-size)}label.animated:before{transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:var(--switch-size)}label.animated:before{transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-switch-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:var(--switch-size)}label.animated:before{transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"] }]
         }], propDecorators: { size: [{

package/esm2022/lib/input/text-field/text-field.component.mjs CHANGED Viewed

@@ -50,10 +50,10 @@ export class TextFieldComponent extends InputLabelComponent {
         this._text = TextFieldComponent.format(this._text, this.casing);
         this.blur.emit(TextFieldComponent.clean(this._text, this.casing));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", casing: "casing", type: "type", size: "size", autoFocus: "autoFocus", name: "name", minLength: "minLength", maxLength: "maxLength", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", casing: "casing", type: "type", size: "size", autoFocus: "autoFocus", name: "name", minLength: "minLength", maxLength: "maxLength", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-text-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { disabled: [{

package/esm2022/lib/input/textarea-field/textarea-field.component.mjs CHANGED Viewed

@@ -9,10 +9,10 @@ export class TextareaFieldComponent extends TextFieldComponent {
         this.rows = 4;
         this.type = 'text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaFieldComponent, selector: "riv-textarea-field", inputs: { rows: "rows" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}textarea::placeholder{color:var(--type-light-low-contrast)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaFieldComponent, selector: "riv-textarea-field", inputs: { rows: "rows" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}textarea::placeholder{color:var(--type-light-low-contrast)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}textarea::placeholder{color:var(--type-light-low-contrast)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
         }], propDecorators: { rows: [{

package/esm2022/lib/input/validation-message/validation-message.component.mjs CHANGED Viewed

@@ -5,10 +5,10 @@ export class ValidationMessageComponent {
     constructor() {
         this.message = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: { message: "message" }, ngImport: i0, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: { message: "message" }, ngImport: i0, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-validation-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"] }]
         }], propDecorators: { message: [{

package/esm2022/lib/layout/card/card-actions.component.mjs CHANGED Viewed

@@ -38,10 +38,10 @@ export class CardActionsComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardActionsComponent, selector: "riv-card-actions", inputs: { align: "align", variant: "variant", padding: "padding", orientation: "orientation", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardActionsComponent, selector: "riv-card-actions", inputs: { align: "align", variant: "variant", padding: "padding", orientation: "orientation", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"] }]
         }], propDecorators: { align: [{

package/esm2022/lib/layout/card/card-content.component.mjs CHANGED Viewed

@@ -43,10 +43,10 @@ export class CardContentComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.CardComponent, decorators: [{

package/esm2022/lib/layout/card/card-header.component.mjs CHANGED Viewed

@@ -154,10 +154,10 @@ export class CardHeaderComponent {
                 overflow: 'hidden',
             };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, deps: [{ token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, deps: [{ token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i1.CardComponent, decorators: [{

package/esm2022/lib/layout/card/card-link.component.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, Optional, } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "./card.component";
 /**
  * Makes a `riv-card` activate, applied to a native `<a>` or `<button>` inside
  * the card.
@@ -35,9 +36,10 @@ import * as i0 from "@angular/core";
  * it is the accessible name for the whole card.
  */
 export class CardLinkComponent {
-    constructor(el, renderer) {
+    constructor(el, renderer, card) {
         this.el = el;
         this.renderer = renderer;
+        this.card = card;
         /** Whether the hit area covers the whole card or only the wrapped region. */
         this.mode = 'stretch';
     }
@@ -56,7 +58,18 @@ export class CardLinkComponent {
     get tabIndex() {
         return this.disabled ? '-1' : null;
     }
+    /**
+     * Tells the enclosing card when this link covers it, so the card raises the
+     * same hover shadow as a clickable one. Registered on init too, since an
+     * unbound `mode` defaults to `stretch` without triggering `ngOnChanges`.
+     */
+    ngOnInit() {
+        this.registerStretch();
+    }
     ngOnChanges(changes) {
+        if (changes['mode'] || changes['disabled']) {
+            this.registerStretch();
+        }
         // Anchors have no `disabled` property, so only real controls are disabled
         // natively; the rest rely on `aria-disabled` and suppressed pointer events.
         if (changes['disabled'] && 'disabled' in this.el.nativeElement) {
@@ -68,13 +81,21 @@ export class CardLinkComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardLinkComponent, selector: "[riv-card-link]", inputs: { mode: "mode", disabled: "disabled" }, host: { properties: { "class": "this.classes", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.tabIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    ngOnDestroy() {
+        this.card?.setStretchLink(false);
+    }
+    registerStretch() {
+        this.card?.setStretchLink(this.mode === 'stretch' && !this.disabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardLinkComponent, selector: "[riv-card-link]", inputs: { mode: "mode", disabled: "disabled" }, host: { properties: { "class": "this.classes", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.tabIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[riv-card-link]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { mode: [{
+            args: [{ selector: '[riv-card-link]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.CardComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { mode: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -91,4 +112,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 (function (CardLinkComponent) {
     CardLinkComponent.Modes = ['stretch', 'region'];
 })(CardLinkComponent || (CardLinkComponent = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1saW5rLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2xheW91dC9jYXJkL2NhcmQtbGluay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9sYXlvdXQvY2FyZC9jYXJkLWxpbmsuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsV0FBVyxFQUNYLEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQzs7QUFFdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWlDRztBQU9ILE1BQU0sT0FBTyxpQkFBaUI7SUFDNUIsWUFDbUIsRUFBYyxFQUNkLFFBQW1CO1FBRG5CLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBR3RDLDZFQUE2RTtRQUU3RSxTQUFJLEdBQTJCLFNBQVMsQ0FBQztJQUp0QyxDQUFDO0lBU0osSUFDSSxPQUFPO1FBQ1QsT0FBTyxNQUFNLENBQUMsT0FBTyxDQUFDO1lBQ3BCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUk7WUFDakIsUUFBUSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUTtTQUMxQixDQUFDO2FBQ0MsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQzthQUNyQixHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7YUFDZixJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDZixDQUFDO0lBRUQsSUFDSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUN2QyxDQUFDO0lBRUQsSUFDSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNyQyxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLDBFQUEwRTtRQUMxRSw0RUFBNEU7UUFDNUUsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLElBQUksVUFBVSxJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDL0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7Z0JBQ2xCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFVBQVUsRUFBRSxNQUFNLENBQUMsQ0FBQztZQUN4RSxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDLENBQUM7WUFDbkUsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDOytHQTVDVSxpQkFBaUI7bUdBQWpCLGlCQUFpQiw0UENuRDlCLDZCQUNBOzs0RkRrRGEsaUJBQWlCO2tCQU43QixTQUFTOytCQUNFLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNO3VHQVUvQyxJQUFJO3NCQURILEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlGLE9BQU87c0JBRFYsV0FBVzt1QkFBQyxPQUFPO2dCQVloQixZQUFZO3NCQURmLFdBQVc7dUJBQUMsb0JBQW9CO2dCQU03QixRQUFRO3NCQURYLFdBQVc7dUJBQUMsZUFBZTs7QUFrQjlCLFdBQWlCLGlCQUFpQjtJQUNuQix1QkFBSyxHQUFHLENBQUMsU0FBUyxFQUFFLFFBQVEsQ0FBVSxDQUFDO0FBRXRELENBQUMsRUFIZ0IsaUJBQWlCLEtBQWpCLGlCQUFpQixRQUdqQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBSZW5kZXJlcjIsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIE1ha2VzIGEgYHJpdi1jYXJkYCBhY3RpdmF0ZSwgYXBwbGllZCB0byBhIG5hdGl2ZSBgPGE+YCBvciBgPGJ1dHRvbj5gIGluc2lkZVxuICogdGhlIGNhcmQuXG4gKlxuICogVHdvIG1vZGVzOlxuICogLSBgc3RyZXRjaGAgKGRlZmF1bHQpIOKAlCB0aGUgZWxlbWVudCdzIGhpdCBhcmVhIGV4cGFuZHMgdG8gY292ZXIgdGhlIHdob2xlXG4gKiAgIGNhcmQsIHNvIGNsaWNraW5nIGFueXdoZXJlIGFjdGl2YXRlcyBpdC4gU2libGluZyBjb250cm9scyBpblxuICogICBgcml2LWNhcmQtaGVhZGVyYCdzIGBbYWN0aW9uc11gIHNsb3QgYW5kIGluIGByaXYtY2FyZC1hY3Rpb25zYCBzdGF5IGFib3ZlXG4gKiAgIHRoZSBvdmVybGF5IGFuZCByZW1haW4gaW5kZXBlbmRlbnRseSBjbGlja2FibGUsIHdpdGggbm8gbmVlZCB0byBzdG9wIGV2ZW50XG4gKiAgIHByb3BhZ2F0aW9uLlxuICogLSBgcmVnaW9uYCDigJQgdGhlIGVsZW1lbnQgYmVoYXZlcyBhcyBhbiBvcmRpbmFyeSBibG9jayB3cmFwcGVyLCBhY3RpdmF0aW5nXG4gKiAgIG9ubHkgdGhlIHBhcnQgb2YgdGhlIGNhcmQgaXQgd3JhcHMuIFVzZSB0aGlzIHdoZW4gYSBjYXJkIGhhcyBtb3JlIHRoYW4gb25lXG4gKiAgIG1lYW5pbmdmdWwgZGVzdGluYXRpb24uXG4gKlxuICogYGBgaHRtbFxuICogPHJpdi1jYXJkPlxuICogICA8cml2LWNhcmQtaGVhZGVyIFtoZWFkaW5nXT1cIndvcmtib29rLm5hbWVcIj5cbiAqICAgICA8YSByaXYtY2FyZC1saW5rIFtyb3V0ZXJMaW5rXT1cIlsnL3dvcmtib29rcycsIHdvcmtib29rLmlkXVwiPlxuICogICAgICAge3sgd29ya2Jvb2submFtZSB9fVxuICogICAgIDwvYT5cbiAqICAgICA8cml2LW1lbnUgYWN0aW9ucz4uLi48L3Jpdi1tZW51PlxuICogICA8L3Jpdi1jYXJkLWhlYWRlcj5cbiAqIDwvcml2LWNhcmQ+XG4gKiBgYGBcbiAqXG4gKiBQcmVmZXIgdGhpcyBvdmVyIGEgY2xpY2sgaGFuZGxlciBvbiB0aGUgY2FyZDogYSByZWFsIGA8YT5gIGtlZXBzIGtleWJvYXJkXG4gKiBmb2N1cywgXCJvcGVuIGluIG5ldyB0YWJcIiwgYW5kIHNjcmVlbiByZWFkZXIgbGluayBzZW1hbnRpY3MsIGFuZCBhIHJlYWxcbiAqIGA8YnV0dG9uPmAgZG9lcyB0aGUgc2FtZSBmb3IgYWN0aW9ucyB0aGF0IGRvIG5vdCBuYXZpZ2F0ZS4gQmVjYXVzZSB0aGVcbiAqIG92ZXJsYXkgaXMgYSBzaWJsaW5nIG9mIHRoZSBjYXJkJ3Mgb3RoZXIgY29udHJvbHMgcmF0aGVyIHRoYW4gYW4gYW5jZXN0b3IsXG4gKiB0aGUgY2FyZCBhdm9pZHMgbmVzdGluZyBpbnRlcmFjdGl2ZSBlbGVtZW50cy5cbiAqXG4gKiBXaGVuIGBzdHJldGNoYCBpcyB1c2VkLCBrZWVwIHRoZSB2aXNpYmxlIGxpbmsgdGV4dCBtZWFuaW5nZnVsIG9uIGl0cyBvd24g4oCUXG4gKiBpdCBpcyB0aGUgYWNjZXNzaWJsZSBuYW1lIGZvciB0aGUgd2hvbGUgY2FyZC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnW3Jpdi1jYXJkLWxpbmtdJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQtbGluay5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQtbGluay5jb21wb25lbnQuY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkTGlua0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcmVhZG9ubHkgZWw6IEVsZW1lbnRSZWYsXG4gICAgcHJpdmF0ZSByZWFkb25seSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICApIHt9XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGhpdCBhcmVhIGNvdmVycyB0aGUgd2hvbGUgY2FyZCBvciBvbmx5IHRoZSB3cmFwcGVkIHJlZ2lvbi4gKi9cbiAgQElucHV0KClcbiAgbW9kZTogQ2FyZExpbmtDb21wb25lbnQuTW9kZSA9ICdzdHJldGNoJztcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZD86IGJvb2xlYW47XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBjbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKHtcbiAgICAgIFt0aGlzLm1vZGVdOiB0cnVlLFxuICAgICAgZGlzYWJsZWQ6ICEhdGhpcy5kaXNhYmxlZCxcbiAgICB9KVxuICAgICAgLmZpbHRlcigoW18sIHZdKSA9PiB2KVxuICAgICAgLm1hcCgoW2tdKSA9PiBrKVxuICAgICAgLmpvaW4oJyAnKTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLWRpc2FibGVkJylcbiAgZ2V0IGFyaWFEaXNhYmxlZCgpOiAndHJ1ZScgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/ICd0cnVlJyA6IG51bGw7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2F0dHIudGFiaW5kZXgnKVxuICBnZXQgdGFiSW5kZXgoKTogJy0xJyB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLmRpc2FibGVkID8gJy0xJyA6IG51bGw7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgLy8gQW5jaG9ycyBoYXZlIG5vIGBkaXNhYmxlZGAgcHJvcGVydHksIHNvIG9ubHkgcmVhbCBjb250cm9scyBhcmUgZGlzYWJsZWRcbiAgICAvLyBuYXRpdmVseTsgdGhlIHJlc3QgcmVseSBvbiBgYXJpYS1kaXNhYmxlZGAgYW5kIHN1cHByZXNzZWQgcG9pbnRlciBldmVudHMuXG4gICAgaWYgKGNoYW5nZXNbJ2Rpc2FibGVkJ10gJiYgJ2Rpc2FibGVkJyBpbiB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJywgJ3RydWUnKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJyk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbmV4cG9ydCBuYW1lc3BhY2UgQ2FyZExpbmtDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgTW9kZXMgPSBbJ3N0cmV0Y2gnLCAncmVnaW9uJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIE1vZGUgPSAodHlwZW9mIE1vZGVzKVtudW1iZXJdO1xufVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1saW5rLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2xheW91dC9jYXJkL2NhcmQtbGluay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9sYXlvdXQvY2FyZC9jYXJkLWxpbmsuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsV0FBVyxFQUNYLEtBQUssRUFJTCxRQUFRLEdBR1QsTUFBTSxlQUFlLENBQUM7OztBQUd2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUNHO0FBT0gsTUFBTSxPQUFPLGlCQUFpQjtJQUM1QixZQUNtQixFQUFjLEVBQ2QsUUFBbUIsRUFDUCxJQUEwQjtRQUZ0QyxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNQLFNBQUksR0FBSixJQUFJLENBQXNCO1FBR3pELDZFQUE2RTtRQUU3RSxTQUFJLEdBQTJCLFNBQVMsQ0FBQztJQUp0QyxDQUFDO0lBU0osSUFDSSxPQUFPO1FBQ1QsT0FBTyxNQUFNLENBQUMsT0FBTyxDQUFDO1lBQ3BCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUk7WUFDakIsUUFBUSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUTtTQUMxQixDQUFDO2FBQ0MsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQzthQUNyQixHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7YUFDZixJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDZixDQUFDO0lBRUQsSUFDSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUN2QyxDQUFDO0lBRUQsSUFDSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNyQyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUNILFFBQVE7UUFDTixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztZQUMzQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDekIsQ0FBQztRQUNELDBFQUEwRTtRQUMxRSw0RUFBNEU7UUFDNUUsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLElBQUksVUFBVSxJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDL0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7Z0JBQ2xCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFVBQVUsRUFBRSxNQUFNLENBQUMsQ0FBQztZQUN4RSxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDLENBQUM7WUFDbkUsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxJQUFJLEVBQUUsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25DLENBQUM7SUFFTyxlQUFlO1FBQ3JCLElBQUksQ0FBQyxJQUFJLEVBQUUsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3ZFLENBQUM7K0dBakVVLGlCQUFpQjttR0FBakIsaUJBQWlCLDRQQ3ZEOUIsNkJBQ0E7OzRGRHNEYSxpQkFBaUI7a0JBTjdCLFNBQVM7K0JBQ0UsaUJBQWlCLG1CQUdWLHVCQUF1QixDQUFDLE1BQU07OzBCQU01QyxRQUFRO3lDQUtYLElBQUk7c0JBREgsS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSUYsT0FBTztzQkFEVixXQUFXO3VCQUFDLE9BQU87Z0JBWWhCLFlBQVk7c0JBRGYsV0FBVzt1QkFBQyxvQkFBb0I7Z0JBTTdCLFFBQVE7c0JBRFgsV0FBVzt1QkFBQyxlQUFlOztBQXNDOUIsV0FBaUIsaUJBQWlCO0lBQ25CLHVCQUFLLEdBQUcsQ0FBQyxTQUFTLEVBQUUsUUFBUSxDQUFVLENBQUM7QUFFdEQsQ0FBQyxFQUhnQixpQkFBaUIsS0FBakIsaUJBQWlCLFFBR2pDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPcHRpb25hbCxcbiAgUmVuZGVyZXIyLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhcmRDb21wb25lbnQgfSBmcm9tICcuL2NhcmQuY29tcG9uZW50JztcblxuLyoqXG4gKiBNYWtlcyBhIGByaXYtY2FyZGAgYWN0aXZhdGUsIGFwcGxpZWQgdG8gYSBuYXRpdmUgYDxhPmAgb3IgYDxidXR0b24+YCBpbnNpZGVcbiAqIHRoZSBjYXJkLlxuICpcbiAqIFR3byBtb2RlczpcbiAqIC0gYHN0cmV0Y2hgIChkZWZhdWx0KSDigJQgdGhlIGVsZW1lbnQncyBoaXQgYXJlYSBleHBhbmRzIHRvIGNvdmVyIHRoZSB3aG9sZVxuICogICBjYXJkLCBzbyBjbGlja2luZyBhbnl3aGVyZSBhY3RpdmF0ZXMgaXQuIFNpYmxpbmcgY29udHJvbHMgaW5cbiAqICAgYHJpdi1jYXJkLWhlYWRlcmAncyBgW2FjdGlvbnNdYCBzbG90IGFuZCBpbiBgcml2LWNhcmQtYWN0aW9uc2Agc3RheSBhYm92ZVxuICogICB0aGUgb3ZlcmxheSBhbmQgcmVtYWluIGluZGVwZW5kZW50bHkgY2xpY2thYmxlLCB3aXRoIG5vIG5lZWQgdG8gc3RvcCBldmVudFxuICogICBwcm9wYWdhdGlvbi5cbiAqIC0gYHJlZ2lvbmAg4oCUIHRoZSBlbGVtZW50IGJlaGF2ZXMgYXMgYW4gb3JkaW5hcnkgYmxvY2sgd3JhcHBlciwgYWN0aXZhdGluZ1xuICogICBvbmx5IHRoZSBwYXJ0IG9mIHRoZSBjYXJkIGl0IHdyYXBzLiBVc2UgdGhpcyB3aGVuIGEgY2FyZCBoYXMgbW9yZSB0aGFuIG9uZVxuICogICBtZWFuaW5nZnVsIGRlc3RpbmF0aW9uLlxuICpcbiAqIGBgYGh0bWxcbiAqIDxyaXYtY2FyZD5cbiAqICAgPHJpdi1jYXJkLWhlYWRlciBbaGVhZGluZ109XCJ3b3JrYm9vay5uYW1lXCI+XG4gKiAgICAgPGEgcml2LWNhcmQtbGluayBbcm91dGVyTGlua109XCJbJy93b3JrYm9va3MnLCB3b3JrYm9vay5pZF1cIj5cbiAqICAgICAgIHt7IHdvcmtib29rLm5hbWUgfX1cbiAqICAgICA8L2E+XG4gKiAgICAgPHJpdi1tZW51IGFjdGlvbnM+Li4uPC9yaXYtbWVudT5cbiAqICAgPC9yaXYtY2FyZC1oZWFkZXI+XG4gKiA8L3Jpdi1jYXJkPlxuICogYGBgXG4gKlxuICogUHJlZmVyIHRoaXMgb3ZlciBhIGNsaWNrIGhhbmRsZXIgb24gdGhlIGNhcmQ6IGEgcmVhbCBgPGE+YCBrZWVwcyBrZXlib2FyZFxuICogZm9jdXMsIFwib3BlbiBpbiBuZXcgdGFiXCIsIGFuZCBzY3JlZW4gcmVhZGVyIGxpbmsgc2VtYW50aWNzLCBhbmQgYSByZWFsXG4gKiBgPGJ1dHRvbj5gIGRvZXMgdGhlIHNhbWUgZm9yIGFjdGlvbnMgdGhhdCBkbyBub3QgbmF2aWdhdGUuIEJlY2F1c2UgdGhlXG4gKiBvdmVybGF5IGlzIGEgc2libGluZyBvZiB0aGUgY2FyZCdzIG90aGVyIGNvbnRyb2xzIHJhdGhlciB0aGFuIGFuIGFuY2VzdG9yLFxuICogdGhlIGNhcmQgYXZvaWRzIG5lc3RpbmcgaW50ZXJhY3RpdmUgZWxlbWVudHMuXG4gKlxuICogV2hlbiBgc3RyZXRjaGAgaXMgdXNlZCwga2VlcCB0aGUgdmlzaWJsZSBsaW5rIHRleHQgbWVhbmluZ2Z1bCBvbiBpdHMgb3duIOKAlFxuICogaXQgaXMgdGhlIGFjY2Vzc2libGUgbmFtZSBmb3IgdGhlIHdob2xlIGNhcmQuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1tyaXYtY2FyZC1saW5rXScsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWxpbmsuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jYXJkLWxpbmsuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZExpbmtDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbDogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgQE9wdGlvbmFsKCkgcHJpdmF0ZSByZWFkb25seSBjYXJkOiBDYXJkQ29tcG9uZW50IHwgbnVsbCxcbiAgKSB7fVxuXG4gIC8qKiBXaGV0aGVyIHRoZSBoaXQgYXJlYSBjb3ZlcnMgdGhlIHdob2xlIGNhcmQgb3Igb25seSB0aGUgd3JhcHBlZCByZWdpb24uICovXG4gIEBJbnB1dCgpXG4gIG1vZGU6IENhcmRMaW5rQ29tcG9uZW50Lk1vZGUgPSAnc3RyZXRjaCc7XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgY2xhc3NlcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBPYmplY3QuZW50cmllcyh7XG4gICAgICBbdGhpcy5tb2RlXTogdHJ1ZSxcbiAgICAgIGRpc2FibGVkOiAhIXRoaXMuZGlzYWJsZWQsXG4gICAgfSlcbiAgICAgIC5maWx0ZXIoKFtfLCB2XSkgPT4gdilcbiAgICAgIC5tYXAoKFtrXSkgPT4gaylcbiAgICAgIC5qb2luKCcgJyk7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXJpYS1kaXNhYmxlZCcpXG4gIGdldCBhcmlhRGlzYWJsZWQoKTogJ3RydWUnIHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuZGlzYWJsZWQgPyAndHJ1ZScgOiBudWxsO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnRhYmluZGV4JylcbiAgZ2V0IHRhYkluZGV4KCk6ICctMScgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/ICctMScgOiBudWxsO1xuICB9XG5cbiAgLyoqXG4gICAqIFRlbGxzIHRoZSBlbmNsb3NpbmcgY2FyZCB3aGVuIHRoaXMgbGluayBjb3ZlcnMgaXQsIHNvIHRoZSBjYXJkIHJhaXNlcyB0aGVcbiAgICogc2FtZSBob3ZlciBzaGFkb3cgYXMgYSBjbGlja2FibGUgb25lLiBSZWdpc3RlcmVkIG9uIGluaXQgdG9vLCBzaW5jZSBhblxuICAgKiB1bmJvdW5kIGBtb2RlYCBkZWZhdWx0cyB0byBgc3RyZXRjaGAgd2l0aG91dCB0cmlnZ2VyaW5nIGBuZ09uQ2hhbmdlc2AuXG4gICAqL1xuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnJlZ2lzdGVyU3RyZXRjaCgpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzWydtb2RlJ10gfHwgY2hhbmdlc1snZGlzYWJsZWQnXSkge1xuICAgICAgdGhpcy5yZWdpc3RlclN0cmV0Y2goKTtcbiAgICB9XG4gICAgLy8gQW5jaG9ycyBoYXZlIG5vIGBkaXNhYmxlZGAgcHJvcGVydHksIHNvIG9ubHkgcmVhbCBjb250cm9scyBhcmUgZGlzYWJsZWRcbiAgICAvLyBuYXRpdmVseTsgdGhlIHJlc3QgcmVseSBvbiBgYXJpYS1kaXNhYmxlZGAgYW5kIHN1cHByZXNzZWQgcG9pbnRlciBldmVudHMuXG4gICAgaWYgKGNoYW5nZXNbJ2Rpc2FibGVkJ10gJiYgJ2Rpc2FibGVkJyBpbiB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJywgJ3RydWUnKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJyk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5jYXJkPy5zZXRTdHJldGNoTGluayhmYWxzZSk7XG4gIH1cblxuICBwcml2YXRlIHJlZ2lzdGVyU3RyZXRjaCgpIHtcbiAgICB0aGlzLmNhcmQ/LnNldFN0cmV0Y2hMaW5rKHRoaXMubW9kZSA9PT0gJ3N0cmV0Y2gnICYmICF0aGlzLmRpc2FibGVkKTtcbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIENhcmRMaW5rQ29tcG9uZW50IHtcbiAgZXhwb3J0IGNvbnN0IE1vZGVzID0gWydzdHJldGNoJywgJ3JlZ2lvbiddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBNb2RlID0gKHR5cGVvZiBNb2RlcylbbnVtYmVyXTtcbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiJdfQ==

package/esm2022/lib/layout/card/card-media.component.mjs CHANGED Viewed

@@ -38,10 +38,10 @@ export class CardMediaComponent {
     get heightStyle() {
         return this.height ?? null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardMediaComponent, selector: "riv-card-media", inputs: { src: "src", alt: "alt", aspectRatio: "aspectRatio", height: "height", fit: "fit" }, host: { properties: { "class": "this.classes", "style.aspect-ratio": "this.aspectRatioStyle", "style.height": "this.heightStyle" } }, ngImport: i0, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardMediaComponent, selector: "riv-card-media", inputs: { src: "src", alt: "alt", aspectRatio: "aspectRatio", height: "height", fit: "fit" }, host: { properties: { "class": "this.classes", "style.aspect-ratio": "this.aspectRatioStyle", "style.height": "this.heightStyle" } }, ngImport: i0, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-media', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"] }]
         }], propDecorators: { src: [{