@valtimo/components 12.1.2 → 12.2.0

package/esm2022/lib/components/paragraph/paragraph.component.mjs

@@ -29,11 +29,11 @@ export class ParagraphComponent {
         this.loading = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ParagraphComponent, selector: "v-paragraph", inputs: { center: "center", fullWidth: "fullWidth", margin: "margin", italic: "italic", loading: "loading" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<p\n  class=\"v-paragraph\"\n  [ngClass]=\"{\n    'v-paragraph--center': center,\n    'v-paragraph--full-width': fullWidth,\n    'v-paragraph--margin': margin,\n    'v-paragraph--italic': italic\n  }\"\n>\n  <ng-container *ngIf=\"loading\">\n    <ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-paragraph-skeleton-loading-width)',\n        height: 'var(--v-paragraph-font-size)',\n        margin: '0',\n        'background-color': 'var(--v-paragraph-loading-skeleton-bg-color)'\n      }\"\n    ></ngx-skeleton-loader>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content></ng-content>\n  </ng-container>\n</p>\n", styles: [".v-paragraph{margin:0;font-size:var(--v-paragraph-font-size);line-height:var(--v-paragraph-line-height);color:var(--v-paragraph-color);font-weight:var(--v-paragraph-font-weight)}.v-paragraph--center{text-align:center}.v-paragraph--full-width{width:100%}.v-paragraph--margin{margin-block-end:var(--v-paragraph-margin)}.v-paragraph--italic{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ParagraphComponent, selector: "v-paragraph", inputs: { center: "center", fullWidth: "fullWidth", margin: "margin", italic: "italic", loading: "loading", dataTestId: "dataTestId" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<p\n  [attr.data-testid]=\"dataTestId\"\n  class=\"v-paragraph\"\n  [ngClass]=\"{\n    'v-paragraph--center': center,\n    'v-paragraph--full-width': fullWidth,\n    'v-paragraph--margin': margin,\n    'v-paragraph--italic': italic\n  }\"\n>\n  <ng-container *ngIf=\"loading\">\n    <ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-paragraph-skeleton-loading-width)',\n        height: 'var(--v-paragraph-font-size)',\n        margin: '0',\n        'background-color': 'var(--v-paragraph-loading-skeleton-bg-color)'\n      }\"\n    ></ngx-skeleton-loader>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content></ng-content>\n  </ng-container>\n</p>\n", styles: [".v-paragraph{margin:0;font-size:var(--v-paragraph-font-size);line-height:var(--v-paragraph-line-height);color:var(--v-paragraph-color);font-weight:var(--v-paragraph-font-weight)}.v-paragraph--center{text-align:center}.v-paragraph--full-width{width:100%}.v-paragraph--margin{margin-block-end:var(--v-paragraph-margin)}.v-paragraph--italic{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ParagraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-paragraph', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<p\n  class=\"v-paragraph\"\n  [ngClass]=\"{\n    'v-paragraph--center': center,\n    'v-paragraph--full-width': fullWidth,\n    'v-paragraph--margin': margin,\n    'v-paragraph--italic': italic\n  }\"\n>\n  <ng-container *ngIf=\"loading\">\n    <ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-paragraph-skeleton-loading-width)',\n        height: 'var(--v-paragraph-font-size)',\n        margin: '0',\n        'background-color': 'var(--v-paragraph-loading-skeleton-bg-color)'\n      }\"\n    ></ngx-skeleton-loader>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content></ng-content>\n  </ng-container>\n</p>\n", styles: [".v-paragraph{margin:0;font-size:var(--v-paragraph-font-size);line-height:var(--v-paragraph-line-height);color:var(--v-paragraph-color);font-weight:var(--v-paragraph-font-weight)}.v-paragraph--center{text-align:center}.v-paragraph--full-width{width:100%}.v-paragraph--margin{margin-block-end:var(--v-paragraph-margin)}.v-paragraph--italic{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'v-paragraph', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<p\n  [attr.data-testid]=\"dataTestId\"\n  class=\"v-paragraph\"\n  [ngClass]=\"{\n    'v-paragraph--center': center,\n    'v-paragraph--full-width': fullWidth,\n    'v-paragraph--margin': margin,\n    'v-paragraph--italic': italic\n  }\"\n>\n  <ng-container *ngIf=\"loading\">\n    <ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-paragraph-skeleton-loading-width)',\n        height: 'var(--v-paragraph-font-size)',\n        margin: '0',\n        'background-color': 'var(--v-paragraph-loading-skeleton-bg-color)'\n      }\"\n    ></ngx-skeleton-loader>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content></ng-content>\n  </ng-container>\n</p>\n", styles: [".v-paragraph{margin:0;font-size:var(--v-paragraph-font-size);line-height:var(--v-paragraph-line-height);color:var(--v-paragraph-color);font-weight:var(--v-paragraph-font-weight)}.v-paragraph--center{text-align:center}.v-paragraph--full-width{width:100%}.v-paragraph--margin{margin-block-end:var(--v-paragraph-margin)}.v-paragraph--italic{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], propDecorators: { center: [{
                 type: Input
             }], fullWidth: [{
@@ -44,5 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], dataTestId: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFyYWdyYXBoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRpbW8vY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcGFyYWdyYXBoL3BhcmFncmFwaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3BhcmFncmFwaC9wYXJhZ3JhcGguY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQzs7OztBQUUvQzs7R0FFRztBQU1ILE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFNVyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLFlBQU8sR0FBRyxLQUFLLENBQUM7S0FDMUI7K0dBTlksa0JBQWtCO21HQUFsQixrQkFBa0IsaUtDMUIvQixvekNBd0NBOzs0RkRkYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsYUFBYTs4QkFLZCxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAxNS0yMDI0IFJpdGVuc2UgQlYsIHRoZSBOZXRoZXJsYW5kcy5cbiAqXG4gKiBMaWNlbnNlZCB1bmRlciBFVVBMLCBWZXJzaW9uIDEuMiAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqIGh0dHBzOi8vam9pbnVwLmVjLmV1cm9wYS5ldS9jb2xsZWN0aW9uL2V1cGwvZXVwbC10ZXh0LWV1cGwtMTJcbiAqXG4gKiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgYmFzaXMsXG4gKiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG5cbmltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogQGRlcHJlY2F0ZWQgTWlncmF0ZSBvbGQgZGVzaWduIHRvIENhcmJvblxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2LXBhcmFncmFwaCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9wYXJhZ3JhcGguY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYXJhZ3JhcGguY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgUGFyYWdyYXBoQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY2VudGVyID0gZmFsc2U7XG4gIEBJbnB1dCgpIGZ1bGxXaWR0aCA9IGZhbHNlO1xuICBASW5wdXQoKSBtYXJnaW4gPSBmYWxzZTtcbiAgQElucHV0KCkgaXRhbGljID0gZmFsc2U7XG4gIEBJbnB1dCgpIGxvYWRpbmcgPSBmYWxzZTtcbn1cbiIsIjwhLS1cbiAgfiBDb3B5cmlnaHQgMjAxNS0yMDI0IFJpdGVuc2UgQlYsIHRoZSBOZXRoZXJsYW5kcy5cbiAgflxuICB+IExpY2Vuc2VkIHVuZGVyIEVVUEwsIFZlcnNpb24gMS4yICh0aGUgXCJMaWNlbnNlXCIpO1xuICB+IHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAgfiBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAgflxuICB+IGh0dHBzOi8vam9pbnVwLmVjLmV1cm9wYS5ldS9jb2xsZWN0aW9uL2V1cGwvZXVwbC10ZXh0LWV1cGwtMTJcbiAgflxuICB+IFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAgfiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgYmFzaXMsXG4gIH4gV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gIH4gU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICB+IGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICAtLT5cblxuPHBcbiAgY2xhc3M9XCJ2LXBhcmFncmFwaFwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAndi1wYXJhZ3JhcGgtLWNlbnRlcic6IGNlbnRlcixcbiAgICAndi1wYXJhZ3JhcGgtLWZ1bGwtd2lkdGgnOiBmdWxsV2lkdGgsXG4gICAgJ3YtcGFyYWdyYXBoLS1tYXJnaW4nOiBtYXJnaW4sXG4gICAgJ3YtcGFyYWdyYXBoLS1pdGFsaWMnOiBpdGFsaWNcbiAgfVwiXG4+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJsb2FkaW5nXCI+XG4gICAgPG5neC1za2VsZXRvbi1sb2FkZXJcbiAgICAgIGFwcGVhcmFuY2U9XCJsaW5lXCJcbiAgICAgIFt0aGVtZV09XCJ7XG4gICAgICAgIHdpZHRoOiAndmFyKC0tdi1wYXJhZ3JhcGgtc2tlbGV0b24tbG9hZGluZy13aWR0aCknLFxuICAgICAgICBoZWlnaHQ6ICd2YXIoLS12LXBhcmFncmFwaC1mb250LXNpemUpJyxcbiAgICAgICAgbWFyZ2luOiAnMCcsXG4gICAgICAgICdiYWNrZ3JvdW5kLWNvbG9yJzogJ3ZhcigtLXYtcGFyYWdyYXBoLWxvYWRpbmctc2tlbGV0b24tYmctY29sb3IpJ1xuICAgICAgfVwiXG4gICAgPjwvbmd4LXNrZWxldG9uLWxvYWRlcj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbG9hZGluZ1wiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9uZy1jb250YWluZXI+XG48L3A+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFyYWdyYXBoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRpbW8vY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcGFyYWdyYXBoL3BhcmFncmFwaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0aW1vL2NvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3BhcmFncmFwaC9wYXJhZ3JhcGguY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQzs7OztBQUUvQzs7R0FFRztBQU1ILE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFNVyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLFlBQU8sR0FBRyxLQUFLLENBQUM7S0FFMUI7K0dBUFksa0JBQWtCO21HQUFsQixrQkFBa0IsMkxDMUIvQix5MUNBeUNBOzs0RkRmYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsYUFBYTs4QkFLZCxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAyMDE1LTIwMjQgUml0ZW5zZSBCViwgdGhlIE5ldGhlcmxhbmRzLlxuICpcbiAqIExpY2Vuc2VkIHVuZGVyIEVVUEwsIFZlcnNpb24gMS4yICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cHM6Ly9qb2ludXAuZWMuZXVyb3BhLmV1L2NvbGxlY3Rpb24vZXVwbC9ldXBsLXRleHQtZXVwbC0xMlxuICpcbiAqIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBiYXNpcyxcbiAqIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cblxuaW1wb3J0IHtDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBAZGVwcmVjYXRlZCBNaWdyYXRlIG9sZCBkZXNpZ24gdG8gQ2FyYm9uXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3YtcGFyYWdyYXBoJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhcmFncmFwaC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BhcmFncmFwaC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBQYXJhZ3JhcGhDb21wb25lbnQge1xuICBASW5wdXQoKSBjZW50ZXIgPSBmYWxzZTtcbiAgQElucHV0KCkgZnVsbFdpZHRoID0gZmFsc2U7XG4gIEBJbnB1dCgpIG1hcmdpbiA9IGZhbHNlO1xuICBASW5wdXQoKSBpdGFsaWMgPSBmYWxzZTtcbiAgQElucHV0KCkgbG9hZGluZyA9IGZhbHNlO1xuICBASW5wdXQoKSBkYXRhVGVzdElkPzogc3RyaW5nO1xufVxuIiwiPCEtLVxuICB+IENvcHlyaWdodCAyMDE1LTIwMjQgUml0ZW5zZSBCViwgdGhlIE5ldGhlcmxhbmRzLlxuICB+XG4gIH4gTGljZW5zZWQgdW5kZXIgRVVQTCwgVmVyc2lvbiAxLjIgKHRoZSBcIkxpY2Vuc2VcIik7XG4gIH4geW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICB+IFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICB+XG4gIH4gaHR0cHM6Ly9qb2ludXAuZWMuZXVyb3BhLmV1L2NvbGxlY3Rpb24vZXVwbC9ldXBsLXRleHQtZXVwbC0xMlxuICB+XG4gIH4gVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICB+IGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBiYXNpcyxcbiAgfiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAgfiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gIH4gbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gIC0tPlxuXG48cFxuICBbYXR0ci5kYXRhLXRlc3RpZF09XCJkYXRhVGVzdElkXCJcbiAgY2xhc3M9XCJ2LXBhcmFncmFwaFwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAndi1wYXJhZ3JhcGgtLWNlbnRlcic6IGNlbnRlcixcbiAgICAndi1wYXJhZ3JhcGgtLWZ1bGwtd2lkdGgnOiBmdWxsV2lkdGgsXG4gICAgJ3YtcGFyYWdyYXBoLS1tYXJnaW4nOiBtYXJnaW4sXG4gICAgJ3YtcGFyYWdyYXBoLS1pdGFsaWMnOiBpdGFsaWNcbiAgfVwiXG4+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJsb2FkaW5nXCI+XG4gICAgPG5neC1za2VsZXRvbi1sb2FkZXJcbiAgICAgIGFwcGVhcmFuY2U9XCJsaW5lXCJcbiAgICAgIFt0aGVtZV09XCJ7XG4gICAgICAgIHdpZHRoOiAndmFyKC0tdi1wYXJhZ3JhcGgtc2tlbGV0b24tbG9hZGluZy13aWR0aCknLFxuICAgICAgICBoZWlnaHQ6ICd2YXIoLS12LXBhcmFncmFwaC1mb250LXNpemUpJyxcbiAgICAgICAgbWFyZ2luOiAnMCcsXG4gICAgICAgICdiYWNrZ3JvdW5kLWNvbG9yJzogJ3ZhcigtLXYtcGFyYWdyYXBoLWxvYWRpbmctc2tlbGV0b24tYmctY29sb3IpJ1xuICAgICAgfVwiXG4gICAgPjwvbmd4LXNrZWxldG9uLWxvYWRlcj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbG9hZGluZ1wiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9uZy1jb250YWluZXI+XG48L3A+XG4iXX0=

package/esm2022/lib/components/prompt/prompt.component.mjs

@@ -59,7 +59,7 @@ export class PromptComponent {
         this.promptService.setAppearingDelay(this.appearingDelayMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PromptComponent, deps: [{ token: i1.PromptService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PromptComponent, selector: "v-prompt", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async\n  } as obs\"\n>\n  <div\n    class=\"v-prompt-backdrop\"\n    [ngClass]=\"{\n      'v-prompt-backdrop--visible': obs.visible || obs.disappearing,\n      'v-prompt-backdrop--backdrop': obs.showBackdrop,\n      'v-prompt-backdrop--hidden': !obs.visible,\n      'v-prompt-backdrop--appearing': obs.appearing,\n      'v-prompt-backdrop--disappearing': obs.disappearing\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt\" [style.max-width.px]=\"maxWidthPx\">\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"modalFooter; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__header\">\n    <v-title [margin]=\"false\" type=\"h2\">{{ headerText$ | async }}</v-title>\n  </div>\n  <div class=\"v-prompt__close\" *ngIf=\"closeButtonVisible$ | async\">\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-prompt__content\">\n    <v-paragraph>{{ bodyText$ | async }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__footer\">\n    <div class=\"v-prompt__buttons\">\n      <v-button\n        [disabled]=\"appearing || disappearing\"\n        (clickEvent)=\"cancel()\"\n        [mdiIcon]=\"(cancelMdiIcon$ | async) || 'cancel'\"\n        [type]=\"(cancelButtonType$ | async) || 'primary'\"\n        >{{ cancelText$ | async }}\n      </v-button>\n      <v-button\n        [disabled]=\"appearing || disappearing\"\n        (clickEvent)=\"confirm()\"\n        [mdiIcon]=\"(confirmMdiIcon$ | async) || 'check'\"\n        [type]=\"(confirmButtonType$ | async) || 'primary'\"\n        >{{ confirmText$ | async }}\n      </v-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".v-prompt-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-prompt-z-index);background-color:var(--v-color-backdrop-transparant);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:var(--v-prompt-backdrop-transition);display:none;cursor:var(--v-prompt-backdrop-cursor);padding-inline-start:var(--v-prompt-backdrop-padding-inline);padding-inline-end:var(--v-prompt-backdrop-padding-inline);padding-block-start:var(--v-prompt-backdrop-padding-block);padding-block-end:var(--v-prompt-backdrop-padding-block)}.v-prompt-backdrop--visible,.v-prompt-backdrop--disappearing{display:flex;align-items:center;justify-content:center}.v-prompt{background-color:var(--v-prompt-background-color);min-height:var(--v-prompt-min-height);max-height:100%;width:100%;max-width:var(--v-prompt-max-width);transform:translateY(-100%);opacity:0;transition:var(--v-prompt-transition);cursor:var(--v-prompt-cursor);border-radius:var(--v-prompt-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-prompt-box-shadow)}.v-prompt-backdrop--backdrop{background-color:var(--v-prompt-backdrop-color);-webkit-backdrop-filter:var(--v-prompt-backdrop-filter);backdrop-filter:var(--v-prompt-backdrop-filter)}.v-prompt-backdrop--backdrop .v-prompt{transform:translateY(0);opacity:1}.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--disappearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--appearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:hover{background-color:var(--v-prompt-backdrop-color-hover);-webkit-backdrop-filter:var(--v-prompt-backdrop-filter-hover);backdrop-filter:var(--v-prompt-backdrop-filter-hover)}.v-prompt-backdrop--hidden,.v-prompt-backdrop--appearing{cursor:var(--v-prompt-backdrop-cursor-disappearing)}.v-prompt__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-prompt-header-bg-color);padding-block-start:var(--v-prompt-header-padding-block);padding-block-end:var(--v-prompt-header-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-bottom:var(--v-prompt-header-border);min-height:var(--v-prompt-header-min-height);box-sizing:content-box}.v-prompt__close{position:absolute;top:0;right:0;padding-block-start:var(--v-prompt-border-radius);padding-block-end:var(--v-prompt-border-radius);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline)}.v-prompt__footer{display:flex;flex-shrink:0;background-color:var(--v-prompt-footer-bg-color);padding-block-start:var(--v-prompt-footer-padding-block);padding-block-end:var(--v-prompt-footer-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-top:var(--v-prompt-footer-border)}.v-prompt__content{height:100%;padding-block-start:var(--v-prompt-content-padding-block-start);padding-block-end:var(--v-prompt-content-padding-block-end);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);overflow:auto}.v-prompt__buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i4.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PromptComponent, selector: "v-prompt", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async\n  } as obs\"\n>\n  <div\n    class=\"v-prompt-backdrop\"\n    [ngClass]=\"{\n      'v-prompt-backdrop--visible': obs.visible || obs.disappearing,\n      'v-prompt-backdrop--backdrop': obs.showBackdrop,\n      'v-prompt-backdrop--hidden': !obs.visible,\n      'v-prompt-backdrop--appearing': obs.appearing,\n      'v-prompt-backdrop--disappearing': obs.disappearing\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt\" [style.max-width.px]=\"maxWidthPx\">\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"modalFooter; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__header\">\n    <v-title [margin]=\"false\" type=\"h2\">{{ headerText$ | async }}</v-title>\n  </div>\n  <div class=\"v-prompt__close\" *ngIf=\"closeButtonVisible$ | async\">\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-prompt__content\">\n    <v-paragraph>{{ bodyText$ | async }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__footer\">\n    <div class=\"v-prompt__buttons\">\n      <v-button\n        [disabled]=\"appearing || disappearing\"\n        (clickEvent)=\"cancel()\"\n        [mdiIcon]=\"(cancelMdiIcon$ | async) || 'cancel'\"\n        [type]=\"(cancelButtonType$ | async) || 'primary'\"\n        >{{ cancelText$ | async }}\n      </v-button>\n      <v-button\n        [disabled]=\"appearing || disappearing\"\n        (clickEvent)=\"confirm()\"\n        [mdiIcon]=\"(confirmMdiIcon$ | async) || 'check'\"\n        [type]=\"(confirmButtonType$ | async) || 'primary'\"\n        >{{ confirmText$ | async }}\n      </v-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".v-prompt-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-prompt-z-index);background-color:var(--v-color-backdrop-transparant);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:var(--v-prompt-backdrop-transition);display:none;cursor:var(--v-prompt-backdrop-cursor);padding-inline-start:var(--v-prompt-backdrop-padding-inline);padding-inline-end:var(--v-prompt-backdrop-padding-inline);padding-block-start:var(--v-prompt-backdrop-padding-block);padding-block-end:var(--v-prompt-backdrop-padding-block)}.v-prompt-backdrop--visible,.v-prompt-backdrop--disappearing{display:flex;align-items:center;justify-content:center}.v-prompt{background-color:var(--v-prompt-background-color);min-height:var(--v-prompt-min-height);max-height:100%;width:100%;max-width:var(--v-prompt-max-width);transform:translateY(-100%);opacity:0;transition:var(--v-prompt-transition);cursor:var(--v-prompt-cursor);border-radius:var(--v-prompt-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-prompt-box-shadow)}.v-prompt-backdrop--backdrop{background-color:var(--v-prompt-backdrop-color);-webkit-backdrop-filter:var(--v-prompt-backdrop-filter);backdrop-filter:var(--v-prompt-backdrop-filter)}.v-prompt-backdrop--backdrop .v-prompt{transform:translateY(0);opacity:1}.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--disappearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--appearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:hover{background-color:var(--v-prompt-backdrop-color-hover);-webkit-backdrop-filter:var(--v-prompt-backdrop-filter-hover);backdrop-filter:var(--v-prompt-backdrop-filter-hover)}.v-prompt-backdrop--hidden,.v-prompt-backdrop--appearing{cursor:var(--v-prompt-backdrop-cursor-disappearing)}.v-prompt__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-prompt-header-bg-color);padding-block-start:var(--v-prompt-header-padding-block);padding-block-end:var(--v-prompt-header-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-bottom:var(--v-prompt-header-border);min-height:var(--v-prompt-header-min-height);box-sizing:content-box}.v-prompt__close{position:absolute;top:0;right:0;padding-block-start:var(--v-prompt-border-radius);padding-block-end:var(--v-prompt-border-radius);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline)}.v-prompt__footer{display:flex;flex-shrink:0;background-color:var(--v-prompt-footer-bg-color);padding-block-start:var(--v-prompt-footer-padding-block);padding-block-end:var(--v-prompt-footer-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-top:var(--v-prompt-footer-border)}.v-prompt__content{height:100%;padding-block-start:var(--v-prompt-content-padding-block-start);padding-block-end:var(--v-prompt-content-padding-block-end);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);overflow:auto}.v-prompt__buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i4.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PromptComponent, decorators: [{
             type: Component,

package/esm2022/lib/components/right-sidebar/right-sidebar.component.mjs

@@ -297,7 +297,7 @@ export class RightSidebarComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i2.UserProviderService }, { token: i3.FormBuilder }, { token: i4.VersionService }, { token: i5.ShellService }, { token: i0.ElementRef }, { token: i6.ConfigService }, { token: i6.UserSettingsService }, { token: i5.PageHeaderService }, { token: i5.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"right-sidebar-menu\">\n  <cds-panel [expanded]=\"panelExpanded$ | async\">\n    <div cdsGrid [condensed]=\"true\">\n      <div cdsRow>\n        <div cdsCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\" cdsLayer>\n          <cds-tabs class=\"cds--tab--list--full-width\">\n            <cds-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </cds-tab>\n\n            <cds-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </cds-tab>\n          </cds-tabs>\n        </div>\n      </div>\n    </div>\n  </cds-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"interfaceSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n\n  @if (showValtimoVersions) {\n    <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.informationTitle' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <cds-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.email' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.email }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.username' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.username }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.name' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.quickLinks' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <cds-structured-list>\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" cdsLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" cdsLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"resetUrl\">\n        <cds-list-column>\n          <a [href]=\"resetUrl\" cdsLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"javascript:void(0)\" cdsLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"showPlantATreeButton\">\n        <cds-list-column>\n          <a\n            class=\"text-success\"\n            href=\"mailto:valtimo@ritense.com?subject=Plant een boom voor Valtimo&body=Hallo Valtimo gebruiker,%0D%0DMet het versturen van deze e-mail gaan we gelijk aan de slag om een boom te planten. Hiermee compenseren we voor een deel de CO2 uitstoot van je Valtimo gebruik.%0D%0DMet Groene Groet,%0D%0DHet Valtimo team%0D%0D*Deze bomenplantactie kan 1 keer ingezet worden door elke geregistreerde Valtimo gebruiker.%0D%0D** Ritense plant ook jaarlijks bomen voor alle Valtimo installaties die in gebruik zijn.\"\n            target=\"_blank\"\n            cdsLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.language.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-dropdown\n          [id]=\"'language-dropdown'\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"updateUserLanguage($event)\"\n        >\n          <cds-dropdown-list [items]=\"(languageListItems$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <cds-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.notification.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #interfaceSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.interface.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.collapsibleMenu' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"collapsibleWidescreenMenu$ | async\"\n          (ngModelChange)=\"setCollapsibleWidescreenMenu($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"allowUserThemeSwitching\">\n      <cds-list-column>\n        <cds-dropdown\n          [label]=\"'settings.interface.themePreference' | translate\"\n          [appendInline]=\"true\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"setPreferredTheme($event)\"\n          [dropUp]=\"false\"\n        >\n          <cds-dropdown-list [items]=\"(themeOptions$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableCompactModeToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.compactMode' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"compactMode$ | async\"\n          (ngModelChange)=\"setCompactMode($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableShowUserNameToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.showUserName' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"showUserNameInTopBar$ | async\"\n          (ngModelChange)=\"setShowUserName($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <cds-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <cds-list-header>\n        <cds-list-column>{{ 'settings.version.title' | translate }}</cds-list-column>\n      </cds-list-header>\n\n      <cds-list-row *ngIf=\"obs.backendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ obs.backendVersion.version }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"frontendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.valtimo-frontend-libraries' | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ frontendVersion }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <cds-list-column>\n    <a\n      [href]=\"\n        'mailto:' +\n        overrideFeedbackMenuItemToMailTo.email +\n        '?subject=' +\n        (overrideFeedbackMenuItemToMailTo.subjectTranslationKey | translate) +\n        '&body=' +\n        (overrideFeedbackMenuItemToMailTo.bodyTranslationKey | translate)\n      \"\n      target=\"_blank\"\n      cdsLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </cds-list-column>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu cds-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--grid--condensed{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu cds-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .build-information .tag-container .cds--tag{margin-left:0;margin-right:0;margin-bottom:0}.right-sidebar-menu .information-table cds-list-row:first-child{border-top:0}.right-sidebar-menu .information-table cds-list-row:first-child cds-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table cds-list-row:last-child cds-list-column{padding-bottom:0}.right-sidebar-menu .information-table cds-list-row cds-list-column:first-child{padding-left:0!important}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:fit-content}.cds--select-input{background-color:var(--cds-field-02)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.Panel, selector: "cds-panel, ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[cdsCol], [ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i8.GridDirective, selector: "[cdsGrid], [ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i8.RowDirective, selector: "[cdsRow], [ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i8.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i8.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i8.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i8.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i8.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i8.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i8.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "component", type: i8.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i8.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i8.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i8.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i8.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"right-sidebar-menu\">\n  <cds-panel [expanded]=\"panelExpanded$ | async\">\n    <div cdsGrid [condensed]=\"true\">\n      <div cdsRow>\n        <div cdsCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\" cdsLayer>\n          <cds-tabs class=\"cds--tab--list--full-width\">\n            <cds-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </cds-tab>\n\n            <cds-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </cds-tab>\n          </cds-tabs>\n        </div>\n      </div>\n    </div>\n  </cds-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"interfaceSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n\n  @if (showValtimoVersions) {\n    <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.informationTitle' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <cds-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.email' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.email }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.username' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.username }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.name' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.quickLinks' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <cds-structured-list>\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" cdsLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" cdsLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"resetUrl\">\n        <cds-list-column>\n          <a [href]=\"resetUrl\" cdsLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"javascript:void(0)\" cdsLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"showPlantATreeButton\">\n        <cds-list-column>\n          <a\n            class=\"text-success\"\n            href=\"mailto:valtimo@ritense.com?subject=Plant een boom voor Valtimo&body=Hallo Valtimo gebruiker,%0D%0DMet het versturen van deze e-mail gaan we gelijk aan de slag om een boom te planten. Hiermee compenseren we voor een deel de CO2 uitstoot van je Valtimo gebruik.%0D%0DMet Groene Groet,%0D%0DHet Valtimo team%0D%0D*Deze bomenplantactie kan 1 keer ingezet worden door elke geregistreerde Valtimo gebruiker.%0D%0D** Ritense plant ook jaarlijks bomen voor alle Valtimo installaties die in gebruik zijn.\"\n            target=\"_blank\"\n            cdsLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.language.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-dropdown\n          [id]=\"'language-dropdown'\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"updateUserLanguage($event)\"\n        >\n          <cds-dropdown-list [items]=\"(languageListItems$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <cds-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.notification.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #interfaceSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.interface.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.collapsibleMenu' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"collapsibleWidescreenMenu$ | async\"\n          (ngModelChange)=\"setCollapsibleWidescreenMenu($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"allowUserThemeSwitching\">\n      <cds-list-column>\n        <cds-dropdown\n          [label]=\"'settings.interface.themePreference' | translate\"\n          [appendInline]=\"true\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"setPreferredTheme($event)\"\n          [dropUp]=\"false\"\n        >\n          <cds-dropdown-list [items]=\"(themeOptions$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableCompactModeToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.compactMode' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"compactMode$ | async\"\n          (ngModelChange)=\"setCompactMode($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableShowUserNameToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.showUserName' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"showUserNameInTopBar$ | async\"\n          (ngModelChange)=\"setShowUserName($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <cds-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <cds-list-header>\n        <cds-list-column>{{ 'settings.version.title' | translate }}</cds-list-column>\n      </cds-list-header>\n\n      <cds-list-row *ngIf=\"obs.backendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ obs.backendVersion.version }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"frontendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.valtimo-frontend-libraries' | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ frontendVersion }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <cds-list-column>\n    <a\n      [href]=\"\n        'mailto:' +\n        overrideFeedbackMenuItemToMailTo.email +\n        '?subject=' +\n        (overrideFeedbackMenuItemToMailTo.subjectTranslationKey | translate) +\n        '&body=' +\n        (overrideFeedbackMenuItemToMailTo.bodyTranslationKey | translate)\n      \"\n      target=\"_blank\"\n      cdsLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </cds-list-column>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu cds-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--grid--condensed{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu cds-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .build-information .tag-container .cds--tag{margin-left:0;margin-right:0;margin-bottom:0}.right-sidebar-menu .information-table cds-list-row:first-child{border-top:0}.right-sidebar-menu .information-table cds-list-row:first-child cds-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table cds-list-row:last-child cds-list-column{padding-bottom:0}.right-sidebar-menu .information-table cds-list-row cds-list-column:first-child{padding-left:0!important}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:fit-content}.cds--select-input{background-color:var(--cds-field-02)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.Panel, selector: "cds-panel, ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[cdsCol], [ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i8.GridDirective, selector: "[cdsGrid], [ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i8.RowDirective, selector: "[cdsRow], [ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i8.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i8.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i8.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i8.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i8.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i8.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i8.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "component", type: i8.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i8.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i8.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i8.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i8.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RightSidebarComponent, decorators: [{
             type: Component,