valtech-components 2.0.1014 → 2.0.1016

package/esm2022/lib/components/organisms/settings-hub/settings-menu.mjs

@@ -1,9 +1,9 @@
 export const VALTECH_SETTINGS_MENU_LINKS = [
     { textKey: 'menuGeneral', route: ['/app/settings/general'] },
     { textKey: 'menuAccount', route: ['/app/settings/account'] },
+    { textKey: 'menuOrganization', route: ['/app/settings/organization'] },
     { textKey: 'menuProfile', route: ['/app/settings/profile'] },
     { textKey: 'menuSettingsNotifications', route: ['/app/settings/notifications'] },
     { textKey: 'menuSecurity', route: ['/app/settings/security'] },
-    { textKey: 'menuOrganization', route: ['/app/settings/organization'] },
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dGluZ3MtbWVudS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9vcmdhbmlzbXMvc2V0dGluZ3MtaHViL3NldHRpbmdzLW1lbnUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJBLE1BQU0sQ0FBQyxNQUFNLDJCQUEyQixHQUF1QjtJQUM3RCxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLENBQUMsdUJBQXVCLENBQUMsRUFBRTtJQUM1RCxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLENBQUMsdUJBQXVCLENBQUMsRUFBRTtJQUM1RCxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLENBQUMsdUJBQXVCLENBQUMsRUFBRTtJQUM1RCxFQUFFLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxLQUFLLEVBQUUsQ0FBQyw2QkFBNkIsQ0FBQyxFQUFFO0lBQ2hGLEVBQUUsT0FBTyxFQUFFLGNBQWMsRUFBRSxLQUFLLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFFO0lBQzlELEVBQUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLEtBQUssRUFBRSxDQUFDLDRCQUE0QixDQUFDLEVBQUU7Q0FDdkUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogTGlua3MgY2Fuw7NuaWNvcyBkZWwgc3VibWVuw7ogXCJQcmVmZXJlbmNpYXNcIiBkZWwgc2lkZS1tZW51IGRlbCBmYWN0b3J5LlxuICpcbiAqIE1pc21hIGZ1ZW50ZSBkZSB2ZXJkYWQgcXVlIGxhcyBjYXJkcyBkZWwgSFVCIChgdmFsLXNldHRpbmdzLWh1YmApOiBUT0RBUyBsYXNcbiAqIGFwcHMgZGVsIGZhY3RvcnkgY29uc3VtZW4gZXN0YSBsaXN0YSBlbiBzdSBtZW7DuiBsYXRlcmFsIHBhcmEgcXVlIGVsIHN1Ym1lbsO6IGRlXG4gKiBwcmVmZXJlbmNpYXMgc2VhIElEw4lOVElDTyBlbnRyZSBhcHBzIChzaG93Y2FzZSwgYmluZ28sIOKApikgeSBjb25zaXN0ZW50ZSBjb24gZWxcbiAqIGh1Yi4gTG8gw7puaWNvIGFwcC1zcGVjaWZpYyBzb24gbGFzIGxhYmVscyAoaTE4biBuYW1lc3BhY2UgYE1lbnVgLCBxdWUgY2FkYSBhcHBcbiAqIHJlZ2lzdHJhKSDigJQgbGEgZXN0cnVjdHVyYS9ydXRhcyB2aWVuZW4gZGUgbGEgbGliLlxuICpcbiAqIE5vIGluY2x1eWUgYGFib3V0YCAoZXMgdW4gw610ZW0gdG9wLWxldmVsIGRlbCBtZW7Duiwgbm8gZGVsIHN1Ym1lbsO6KSwgbmkgYGxvZ291dGBcbiAqIChubyBlcyBsaW5rKSwgbmkgYHByZWZlcmVuY2VzYCAoZXMgZWwgaHViIG1pc21vKS4gU8OtIGluY2x1eWUgYGdlbmVyYWxgICg9IGxhXG4gKiB2aXN0YSBkZSBwcmVmZXJlbmNpYXMgVUkpLCBhY2NvdW50LCBwcm9maWxlLCBub3RpZmljYXRpb25zLCBzZWN1cml0eSB5XG4gKiBvcmdhbml6YXRpb24gKHNlY2Npw7NuIGNvcmUsIHZlciBzZXR0aW5ncy1zZWN0aW9ucy50cykuXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgU2V0dGluZ3NNZW51TGluayB7XG4gIC8qKiBpMThuIGtleSBkZSBsYSBsYWJlbCAobmFtZXNwYWNlIGBNZW51YCBkZSBsYSBhcHApLiAqL1xuICB0ZXh0S2V5OiBzdHJpbmc7XG4gIC8qKiBSdXRhIGRlIG5hdmVnYWNpw7NuIChiYWpvIGVsIHNoZWxsIGAvYXBwYCkuICovXG4gIHJvdXRlOiBzdHJpbmdbXTtcbn1cblxuZXhwb3J0IGNvbnN0IFZBTFRFQ0hfU0VUVElOR1NfTUVOVV9MSU5LUzogU2V0dGluZ3NNZW51TGlua1tdID0gW1xuICB7IHRleHRLZXk6ICdtZW51R2VuZXJhbCcsIHJvdXRlOiBbJy9hcHAvc2V0dGluZ3MvZ2VuZXJhbCddIH0sXG4gIHsgdGV4dEtleTogJ21lbnVBY2NvdW50Jywgcm91dGU6IFsnL2FwcC9zZXR0aW5ncy9hY2NvdW50J10gfSxcbiAgeyB0ZXh0S2V5OiAnbWVudVByb2ZpbGUnLCByb3V0ZTogWycvYXBwL3NldHRpbmdzL3Byb2ZpbGUnXSB9LFxuICB7IHRleHRLZXk6ICdtZW51U2V0dGluZ3NOb3RpZmljYXRpb25zJywgcm91dGU6IFsnL2FwcC9zZXR0aW5ncy9ub3RpZmljYXRpb25zJ10gfSxcbiAgeyB0ZXh0S2V5OiAnbWVudVNlY3VyaXR5Jywgcm91dGU6IFsnL2FwcC9zZXR0aW5ncy9zZWN1cml0eSddIH0sXG4gIHsgdGV4dEtleTogJ21lbnVPcmdhbml6YXRpb24nLCByb3V0ZTogWycvYXBwL3NldHRpbmdzL29yZ2FuaXphdGlvbiddIH0sXG5dO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dGluZ3MtbWVudS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9vcmdhbmlzbXMvc2V0dGluZ3MtaHViL3NldHRpbmdzLW1lbnUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJBLE1BQU0sQ0FBQyxNQUFNLDJCQUEyQixHQUF1QjtJQUM3RCxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLENBQUMsdUJBQXVCLENBQUMsRUFBRTtJQUM1RCxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLENBQUMsdUJBQXVCLENBQUMsRUFBRTtJQUM1RCxFQUFFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxLQUFLLEVBQUUsQ0FBQyw0QkFBNEIsQ0FBQyxFQUFFO0lBQ3RFLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxLQUFLLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQyxFQUFFO0lBQzVELEVBQUUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLEtBQUssRUFBRSxDQUFDLDZCQUE2QixDQUFDLEVBQUU7SUFDaEYsRUFBRSxPQUFPLEVBQUUsY0FBYyxFQUFFLEtBQUssRUFBRSxDQUFDLHdCQUF3QixDQUFDLEVBQUU7Q0FDL0QsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogTGlua3MgY2Fuw7NuaWNvcyBkZWwgc3VibWVuw7ogXCJQcmVmZXJlbmNpYXNcIiBkZWwgc2lkZS1tZW51IGRlbCBmYWN0b3J5LlxuICpcbiAqIE1pc21hIGZ1ZW50ZSBkZSB2ZXJkYWQgcXVlIGxhcyBjYXJkcyBkZWwgSFVCIChgdmFsLXNldHRpbmdzLWh1YmApOiBUT0RBUyBsYXNcbiAqIGFwcHMgZGVsIGZhY3RvcnkgY29uc3VtZW4gZXN0YSBsaXN0YSBlbiBzdSBtZW7DuiBsYXRlcmFsIHBhcmEgcXVlIGVsIHN1Ym1lbsO6IGRlXG4gKiBwcmVmZXJlbmNpYXMgc2VhIElEw4lOVElDTyBlbnRyZSBhcHBzIChzaG93Y2FzZSwgYmluZ28sIOKApikgeSBjb25zaXN0ZW50ZSBjb24gZWxcbiAqIGh1Yi4gTG8gw7puaWNvIGFwcC1zcGVjaWZpYyBzb24gbGFzIGxhYmVscyAoaTE4biBuYW1lc3BhY2UgYE1lbnVgLCBxdWUgY2FkYSBhcHBcbiAqIHJlZ2lzdHJhKSDigJQgbGEgZXN0cnVjdHVyYS9ydXRhcyB2aWVuZW4gZGUgbGEgbGliLlxuICpcbiAqIE5vIGluY2x1eWUgYGFib3V0YCAoZXMgdW4gw610ZW0gdG9wLWxldmVsIGRlbCBtZW7Duiwgbm8gZGVsIHN1Ym1lbsO6KSwgbmkgYGxvZ291dGBcbiAqIChubyBlcyBsaW5rKSwgbmkgYHByZWZlcmVuY2VzYCAoZXMgZWwgaHViIG1pc21vKS4gU8OtIGluY2x1eWUgYGdlbmVyYWxgICg9IGxhXG4gKiB2aXN0YSBkZSBwcmVmZXJlbmNpYXMgVUkpLCBhY2NvdW50LCBwcm9maWxlLCBub3RpZmljYXRpb25zLCBzZWN1cml0eSB5XG4gKiBvcmdhbml6YXRpb24gKHNlY2Npw7NuIGNvcmUsIHZlciBzZXR0aW5ncy1zZWN0aW9ucy50cykuXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgU2V0dGluZ3NNZW51TGluayB7XG4gIC8qKiBpMThuIGtleSBkZSBsYSBsYWJlbCAobmFtZXNwYWNlIGBNZW51YCBkZSBsYSBhcHApLiAqL1xuICB0ZXh0S2V5OiBzdHJpbmc7XG4gIC8qKiBSdXRhIGRlIG5hdmVnYWNpw7NuIChiYWpvIGVsIHNoZWxsIGAvYXBwYCkuICovXG4gIHJvdXRlOiBzdHJpbmdbXTtcbn1cblxuZXhwb3J0IGNvbnN0IFZBTFRFQ0hfU0VUVElOR1NfTUVOVV9MSU5LUzogU2V0dGluZ3NNZW51TGlua1tdID0gW1xuICB7IHRleHRLZXk6ICdtZW51R2VuZXJhbCcsIHJvdXRlOiBbJy9hcHAvc2V0dGluZ3MvZ2VuZXJhbCddIH0sXG4gIHsgdGV4dEtleTogJ21lbnVBY2NvdW50Jywgcm91dGU6IFsnL2FwcC9zZXR0aW5ncy9hY2NvdW50J10gfSxcbiAgeyB0ZXh0S2V5OiAnbWVudU9yZ2FuaXphdGlvbicsIHJvdXRlOiBbJy9hcHAvc2V0dGluZ3Mvb3JnYW5pemF0aW9uJ10gfSxcbiAgeyB0ZXh0S2V5OiAnbWVudVByb2ZpbGUnLCByb3V0ZTogWycvYXBwL3NldHRpbmdzL3Byb2ZpbGUnXSB9LFxuICB7IHRleHRLZXk6ICdtZW51U2V0dGluZ3NOb3RpZmljYXRpb25zJywgcm91dGU6IFsnL2FwcC9zZXR0aW5ncy9ub3RpZmljYXRpb25zJ10gfSxcbiAgeyB0ZXh0S2V5OiAnbWVudVNlY3VyaXR5Jywgcm91dGU6IFsnL2FwcC9zZXR0aW5ncy9zZWN1cml0eSddIH0sXG5dO1xuIl19

package/esm2022/lib/components/templates/docs-page/docs-page.component.mjs

@@ -194,7 +194,7 @@ export class DocsPageComponent {
         </aside>
       }
     </div>
-  `, isInline: true, styles: [".docs-page{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;margin:0 auto;padding:2rem 1.5rem}@media (min-width: 1200px){.docs-page{grid-template-columns:1fr 220px;padding:2rem}}.docs-page__content{min-width:0;max-width:900px}val-docs-breadcrumb{display:block;margin-bottom:1rem}.docs-page__header{margin-bottom:2rem}.docs-page__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.docs-page__title{margin:0;font-size:2rem;font-weight:700;color:var(--ion-text-color, #1a1a1a);line-height:1.2}@media (min-width: 768px){.docs-page__title{font-size:2.5rem}}.docs-page__badge{display:inline-flex;align-items:center;padding:.25rem .5rem;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;border-radius:4px;background:#0000000a;color:#888}.docs-page__badge--success{background:#0000000a;color:#888}.docs-page__badge--warning{background:var(--ion-color-warning-tint, #fff3e0);color:var(--ion-color-warning-shade, #e65100)}.docs-page__badge--danger{background:var(--ion-color-danger-tint, #ffebee);color:var(--ion-color-danger-shade, #c62828)}.docs-page__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.7;color:var(--ion-color-medium, #666)}.docs-page__sections>*:last-child{margin-bottom:0}.docs-page__feedback{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:center}.docs-page__toc{display:none}@media (min-width: 1200px){.docs-page__toc{display:block;position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}}.docs-page__sections h2{font-size:1.5rem;font-weight:600;margin:0 0 1rem;color:var(--ion-text-color, #1a1a1a);scroll-margin-top:2rem}.docs-page__sections h3{font-size:1.125rem;font-weight:600;margin:1.5rem 0 1rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections h4{font-size:1rem;font-weight:600;margin:1.25rem 0 .75rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections p{line-height:1.7;color:var(--ion-text-color, #1a1a1a);margin:0 0 1rem}.docs-page__sections ul,.docs-page__sections ol{padding-left:1.5rem;margin:0 0 1rem}.docs-page__sections li{margin-bottom:.5rem;line-height:1.6;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections a{color:var(--ion-color-primary, #3880ff);text-decoration:none}.docs-page__sections a:hover{text-decoration:underline}.docs-page__sections code:not([class*=language-]){background:#0000000f;padding:.125rem .375rem;border-radius:4px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:.875em}.docs-page__sections pre:not([class*=language-]){background:#0000000a;padding:1rem;border-radius:8px;overflow-x:auto;margin:0 0 1rem}.docs-page__sections pre:not([class*=language-]) code{background:none;padding:0}.docs-page__sections table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.875rem}.docs-page__sections th,.docs-page__sections td{padding:.75rem;text-align:left;border-bottom:1px solid rgba(0,0,0,.1)}.docs-page__sections th{font-weight:600;background:#00000005}.docs-page__sections blockquote{margin:0 0 1rem;padding:1rem 1.5rem;border-left:4px solid var(--ion-color-primary, #3880ff);background:#00000005;border-radius:0 8px 8px 0}.docs-page__sections blockquote p:last-child{margin-bottom:0}.docs-page__sections img{max-width:100%;height:auto;border-radius:8px}.docs-page__sections hr{border:none;border-top:1px solid rgba(0,0,0,.1);margin:2rem 0}.docs-page__sections strong{font-weight:600}.docs-page__sections section{margin-bottom:2rem}:host-context(.dark) .docs-page__badge,:host-context([color-scheme=\"dark\"]) .docs-page__badge{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--success,:host-context([color-scheme=\"dark\"]) .docs-page__badge--success{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--warning,:host-context([color-scheme=\"dark\"]) .docs-page__badge--warning{background:#e6510033;color:#ffb74d}:host-context(.dark) .docs-page__badge--danger,:host-context([color-scheme=\"dark\"]) .docs-page__badge--danger{background:#c6282833;color:#e57373}:host-context(.dark) .docs-page__sections code:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections code:not([class*=language-]){background:#ffffff1a}:host-context(.dark) .docs-page__sections pre:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections pre:not([class*=language-]){background:#ffffff0f}:host-context(.dark) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections th{background:#ffffff0a}:host-context(.dark) .docs-page__sections th,:host-context(.dark) .docs-page__sections td,:host-context([color-scheme=\"dark\"]) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections td{border-color:#ffffff1a}:host-context(.dark) .docs-page__sections blockquote,:host-context([color-scheme=\"dark\"]) .docs-page__sections blockquote{background:#ffffff0a}:host-context(.dark) .docs-page__sections hr,:host-context([color-scheme=\"dark\"]) .docs-page__sections hr{border-color:#ffffff1a}:host-context(.dark) .docs-page__feedback,:host-context([color-scheme=\"dark\"]) .docs-page__feedback{border-color:#ffffff1a}@media (max-width: 768px){.docs-page__feedback{margin-top:2rem;padding-top:1.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DocsBreadcrumbComponent, selector: "val-docs-breadcrumb", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsNavLinksComponent, selector: "val-docs-nav-links", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsTocComponent, selector: "val-docs-toc", inputs: ["props"], outputs: ["sectionChange"] }, { kind: "component", type: ContentReactionComponent, selector: "val-content-reaction", inputs: ["props"], outputs: ["reactionSubmit", "reactionChange"] }] }); }
+  `, isInline: true, styles: [".docs-page{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;margin:0 auto;padding:2rem 1.5rem}@media (min-width: 1200px){.docs-page{grid-template-columns:1fr 220px;padding:2rem}}.docs-page__content{min-width:0;max-width:900px}val-docs-breadcrumb{display:block;margin-bottom:1rem}.docs-page__header{margin-bottom:2rem}.docs-page__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.docs-page__title{margin:0;font-size:2rem;font-weight:700;color:var(--ion-text-color, #1a1a1a);line-height:1.2}@media (min-width: 768px){.docs-page__title{font-size:2.5rem}}.docs-page__badge{display:inline-flex;align-items:center;padding:.25rem .5rem;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;border-radius:4px;background:#0000000a;color:#888}.docs-page__badge--success{background:#0000000a;color:#888}.docs-page__badge--warning{background:var(--ion-color-warning-tint, #fff3e0);color:var(--ion-color-warning-shade, #e65100)}.docs-page__badge--danger{background:var(--ion-color-danger-tint, #ffebee);color:var(--ion-color-danger-shade, #c62828)}.docs-page__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.7;color:var(--ion-color-medium, #666)}.docs-page__sections>*:last-child{margin-bottom:0}.docs-page__feedback{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:center}.docs-page__toc{display:none}@media (min-width: 1200px){.docs-page__toc{display:block;position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}}.docs-page__sections h2{font-size:1.5rem;font-weight:600;margin:0 0 1rem;color:var(--ion-text-color, #1a1a1a);scroll-margin-top:2rem}.docs-page__sections h3{font-size:1.125rem;font-weight:600;margin:1.5rem 0 1rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections h4{font-size:1rem;font-weight:600;margin:1.25rem 0 .75rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections p{line-height:1.7;color:var(--ion-text-color, #1a1a1a);margin:0 0 1rem}.docs-page__sections ul,.docs-page__sections ol{padding-left:1.5rem;margin:0 0 1rem}.docs-page__sections li{margin-bottom:.5rem;line-height:1.6;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections a{color:var(--ion-color-primary, #3880ff);text-decoration:none}.docs-page__sections a:hover{text-decoration:underline}.docs-page__sections code:not([class*=language-]){background:#0000000f;padding:.125rem .375rem;border-radius:4px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:.875em}.docs-page__sections pre:not([class*=language-]){background:#0000000a;padding:1rem;border-radius:8px;overflow-x:auto;margin:0 0 1rem}.docs-page__sections pre:not([class*=language-]) code{background:none;padding:0}.docs-page__sections table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.875rem}.docs-page__sections th,.docs-page__sections td{padding:.75rem;text-align:left;border-bottom:1px solid rgba(0,0,0,.1)}.docs-page__sections th{font-weight:600;background:#00000005}.docs-page__sections blockquote{margin:0 0 1rem;padding:1rem 1.5rem;border-left:4px solid var(--ion-color-primary, #3880ff);background:#00000005;border-radius:0 8px 8px 0}.docs-page__sections blockquote p:last-child{margin-bottom:0}.docs-page__sections img{max-width:100%;height:auto;border-radius:8px}.docs-page__sections hr{border:none;border-top:1px solid rgba(0,0,0,.1);margin:2rem 0}.docs-page__sections strong{font-weight:600}.docs-page__sections section{margin-bottom:2rem}:host-context(.dark) .docs-page__badge,:host-context([color-scheme=\"dark\"]) .docs-page__badge{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--success,:host-context([color-scheme=\"dark\"]) .docs-page__badge--success{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--warning,:host-context([color-scheme=\"dark\"]) .docs-page__badge--warning{background:#e6510033;color:#ffb74d}:host-context(.dark) .docs-page__badge--danger,:host-context([color-scheme=\"dark\"]) .docs-page__badge--danger{background:#c6282833;color:#e57373}:host-context(.dark) .docs-page__sections code:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections code:not([class*=language-]){background:#ffffff1a}:host-context(.dark) .docs-page__sections pre:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections pre:not([class*=language-]){background:#ffffff0f}:host-context(.dark) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections th{background:#ffffff0a}:host-context(.dark) .docs-page__sections th,:host-context(.dark) .docs-page__sections td,:host-context([color-scheme=\"dark\"]) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections td{border-color:#ffffff1a}:host-context(.dark) .docs-page__sections blockquote,:host-context([color-scheme=\"dark\"]) .docs-page__sections blockquote{background:#ffffff0a}:host-context(.dark) .docs-page__sections hr,:host-context([color-scheme=\"dark\"]) .docs-page__sections hr{border-color:#ffffff1a}:host-context(.dark) .docs-page__feedback,:host-context([color-scheme=\"dark\"]) .docs-page__feedback{border-color:#ffffff1a}@media (max-width: 768px){.docs-page__feedback{margin-top:2rem;padding-top:1.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DocsBreadcrumbComponent, selector: "val-docs-breadcrumb", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsNavLinksComponent, selector: "val-docs-nav-links", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsTocComponent, selector: "val-docs-toc", inputs: ["props"], outputs: ["sectionChange"] }, { kind: "component", type: ContentReactionComponent, selector: "val-content-reaction", inputs: ["props", "_modalRef"], outputs: ["reactionSubmit", "reactionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsPageComponent, decorators: [{
             type: Component,

package/esm2022/lib/version.mjs

@@ -2,5 +2,5 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export const VERSION = '2.0.1014';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzIuMC4xMDE0JztcbiJdfQ==
+export const VERSION = '2.0.1016';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzIuMC4xMDE2JztcbiJdfQ==

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1014';
+const VERSION = '2.0.1016';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -43466,10 +43466,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 const VALTECH_SETTINGS_MENU_LINKS = [
     { textKey: 'menuGeneral', route: ['/app/settings/general'] },
     { textKey: 'menuAccount', route: ['/app/settings/account'] },
+    { textKey: 'menuOrganization', route: ['/app/settings/organization'] },
     { textKey: 'menuProfile', route: ['/app/settings/profile'] },
     { textKey: 'menuSettingsNotifications', route: ['/app/settings/notifications'] },
     { textKey: 'menuSecurity', route: ['/app/settings/security'] },
-    { textKey: 'menuOrganization', route: ['/app/settings/organization'] },
 ];
 
 addIcons({ shieldCheckmarkOutline, checkmarkCircleOutline });
@@ -46129,6 +46129,12 @@ class OrgInfoSheetComponent {
         this.body = '';
         /** Label del botón cerrar (resuelto por el consumer). Fallback al namespace propio. */
         this.closeLabel = '';
+        /**
+         * Muestra las 3 feature-cards de organizaciones (colaboración / cambio rápido /
+         * invitaciones). `false` → sheet article-style (solo título + subtítulo + cuerpo),
+         * reusable como explainer genérico (ej. integraciones / API keys). Default `true`.
+         */
+        this.showFeatures = true;
         /** Props del botón cerrar del footer (el consumer puede pasar custom). */
         this.closeProps = {
             text: 'Cerrar',
@@ -46158,7 +46164,7 @@ class OrgInfoSheetComponent {
         return this.i18n.t(key, DEFAULT_NAMESPACE$d);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrgInfoSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", showFeatures: "showFeatures", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
@@ -46173,29 +46179,31 @@ class OrgInfoSheetComponent {
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      <div class="info-features">
-        <div class="info-feature">
-          <ion-icon name="people-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+      @if (showFeatures) {
+        <div class="info-features">
+          <div class="info-feature">
+            <ion-icon name="people-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="mail-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="mail-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+            </div>
           </div>
         </div>
-      </div>
+      }
 
       @for (para of paragraphs(); track $index) {
         <val-text
@@ -46242,29 +46250,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      <div class="info-features">
-        <div class="info-feature">
-          <ion-icon name="people-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+      @if (showFeatures) {
+        <div class="info-features">
+          <div class="info-feature">
+            <ion-icon name="people-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
+            </div>
           </div>
-        </div>
-        <div class="info-feature">
-          <ion-icon name="mail-outline" class="info-feature__icon" />
-          <div>
-            <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-            <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          <div class="info-feature">
+            <ion-icon name="mail-outline" class="info-feature__icon" />
+            <div>
+              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
+              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+            </div>
           </div>
         </div>
-      </div>
+      }
 
       @for (para of paragraphs(); track $index) {
         <val-text
@@ -46290,6 +46300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], closeLabel: [{
                 type: Input
+            }], showFeatures: [{
+                type: Input
             }], closeProps: [{
                 type: Input
             }], _modalRef: [{
@@ -49823,7 +49835,11 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysSectionTitle: 'Integraciones (API Keys)',
         apiKeysSectionHint: 'También puedes operar tu organización vía API: crea una Client API Key org-scopeada para integraciones máquina-a-máquina (por ejemplo, dar de alta miembros en masa desde tu propio sistema).',
         apiKeysMoreInfo: 'Más información',
-        orgsMoreInfo: 'Más información',
+        apiKeysInfoTitle: 'Integraciones por API',
+        apiKeysInfoSubtitle: 'Opera tu organización máquina-a-máquina',
+        apiKeysInfoContent: 'Una API Key te permite operar tu organización desde tus propios sistemas, sin entrar a la app: dar de alta usuarios, asignar roles, leer datos y automatizar flujos.\n\nCada key es org-scopeada y lleva solo los permisos que le asignes — concede el mínimo necesario. Puedes revocarla en cualquier momento.\n\nEl secreto se muestra una sola vez al crearla: guárdalo en un lugar seguro. Si lo pierdes, genera una nueva key y revoca la anterior.',
+        apiKeysInfoClose: 'Entendido',
+        orgsMoreInfo: 'Aprender más sobre organizaciones',
         orgsInfoTitle: '¿Qué son las organizaciones?',
         orgsInfoSubtitle: 'Todo lo que necesitas saber',
         orgsInfoClose: 'Cerrar',
@@ -49902,7 +49918,11 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysSectionTitle: 'Integrations (API Keys)',
         apiKeysSectionHint: 'You can also operate your organization via API: create an org-scoped Client API Key for machine-to-machine integrations (for example, bulk-provisioning members from your own system).',
         apiKeysMoreInfo: 'More information',
-        orgsMoreInfo: 'More information',
+        apiKeysInfoTitle: 'API integrations',
+        apiKeysInfoSubtitle: 'Operate your organization machine-to-machine',
+        apiKeysInfoContent: 'An API Key lets you operate your organization from your own systems, without opening the app: provision users, assign roles, read data, and automate flows.\n\nEach key is org-scoped and carries only the permissions you assign — grant the minimum needed. You can revoke it at any time.\n\nThe secret is shown only once at creation: store it somewhere safe. If you lose it, create a new key and revoke the old one.',
+        apiKeysInfoClose: 'Got it',
+        orgsMoreInfo: 'Learn more about organizations',
         orgsInfoTitle: 'What are organizations?',
         orgsInfoSubtitle: 'Everything you need to know',
         orgsInfoClose: 'Close',
@@ -50291,6 +50311,31 @@ class OrganizationViewComponent {
             backdropDismiss: true,
         });
     }
+    // "Más información" de la sección Integraciones — abre un sheet EXPLICATIVO
+    // (article-style, sin las feature-cards de org), NO el modal de gestión de API
+    // keys. La gestión se abre con el botón "Gestionar" (onOpenApiKeys).
+    onApiKeysInfo() {
+        void this.modalService.open({
+            component: OrgInfoSheetComponent,
+            componentProps: {
+                showFeatures: false,
+                title: this.tt('apiKeysInfoTitle'),
+                subtitle: this.tt('apiKeysInfoSubtitle'),
+                body: this.tt('apiKeysInfoContent'),
+                closeLabel: this.tt('apiKeysInfoClose'),
+                closeProps: {
+                    text: this.tt('apiKeysInfoClose'),
+                    fill: 'outline',
+                    color: 'dark',
+                    size: 'default',
+                    expand: 'block',
+                    type: 'button',
+                },
+            },
+            breakpoints: { breakpoints: [0, 0.85], initialBreakpoint: 0.85, showHandle: true },
+            backdropDismiss: true,
+        });
+    }
     onViewPermissions() {
         this.nav.navigateByUrl(this.resolvedConfig().viewPermissionsRoute);
     }
@@ -50517,6 +50562,11 @@ class OrganizationViewComponent {
             content: pageDescription(),
           }"
         />
+        <!-- "Aprender más sobre organizaciones" — bajo el título+subtítulo
+             principal de la vista (abre el explainer org-info-sheet). -->
+        <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
+          {{ tt('orgsMoreInfo') }}
+        </button>
       </header>
 
       @if (resolvedConfig().showInfo) {
@@ -50536,12 +50586,6 @@ class OrganizationViewComponent {
             }
           </div>
 
-          <!-- "Más información" sobre organizaciones — disponible siempre (todo
-               user tiene org por defecto y no ve el empty-state de account). -->
-          <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
-            {{ tt('orgsMoreInfo') }}
-          </button>
-
           <div class="section-body">
             @if (loading()) {
               <val-skeleton-layout [props]="{ preset: 'detail', rows: 4 }" />
@@ -50694,7 +50738,7 @@ class OrganizationViewComponent {
           <div class="invite-cta__text">
             <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: tt('apiKeysSectionTitle') }" />
             <val-text [props]="{ size: 'medium', color: 'dark', bold: false, content: tt('apiKeysSectionHint') }" />
-            <button class="org-more-info-link" type="button" (click)="onOpenApiKeys()">
+            <button class="org-more-info-link" type="button" (click)="onApiKeysInfo()">
               {{ tt('apiKeysMoreInfo') }}
             </button>
           </div>
@@ -50821,6 +50865,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             content: pageDescription(),
           }"
         />
+        <!-- "Aprender más sobre organizaciones" — bajo el título+subtítulo
+             principal de la vista (abre el explainer org-info-sheet). -->
+        <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
+          {{ tt('orgsMoreInfo') }}
+        </button>
       </header>
 
       @if (resolvedConfig().showInfo) {
@@ -50840,12 +50889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
           </div>
 
-          <!-- "Más información" sobre organizaciones — disponible siempre (todo
-               user tiene org por defecto y no ve el empty-state de account). -->
-          <button class="org-more-info-link" type="button" (click)="onOrgInfo()">
-            {{ tt('orgsMoreInfo') }}
-          </button>
-
           <div class="section-body">
             @if (loading()) {
               <val-skeleton-layout [props]="{ preset: 'detail', rows: 4 }" />
@@ -50998,7 +51041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <div class="invite-cta__text">
             <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: tt('apiKeysSectionTitle') }" />
             <val-text [props]="{ size: 'medium', color: 'dark', bold: false, content: tt('apiKeysSectionHint') }" />
-            <button class="org-more-info-link" type="button" (click)="onOpenApiKeys()">
+            <button class="org-more-info-link" type="button" (click)="onApiKeysInfo()">
               {{ tt('apiKeysMoreInfo') }}
             </button>
           </div>
@@ -53589,6 +53632,7 @@ const CONTENT_REACTION_I18N = {
         positiveLabel: 'Sí, mucho',
         negativeLabel: 'No tanto',
         negativeFeedbackTitle: '¿Cuéntanos qué no te gustó?',
+        close: 'Cerrar',
     },
     en: {
         question: 'Was this content helpful?',
@@ -53601,6 +53645,7 @@ const CONTENT_REACTION_I18N = {
         positiveLabel: 'Yes, a lot',
         negativeLabel: 'Not really',
         negativeFeedbackTitle: "Tell us what you didn't like?",
+        close: 'Close',
     },
 };
 /**
@@ -53655,6 +53700,7 @@ class ContentReactionComponent {
             readonly: this.props.readonly ?? false,
             // Variante: 'emoji' cuando se declara explícitamente o cuando se pasan emojis custom.
             variant: this.props.variant ?? (this.props.emojis ? 'emoji' : 'buttons'),
+            showCloseButton: this.props.showCloseButton ?? false,
         }));
         this.activeReactionValues = computed(() => this.resolvedProps().emojis.length === 2 ? ['negative', 'positive'] : ['negative', 'neutral', 'positive']);
         this.showCommentField = computed(() => {
@@ -53667,6 +53713,7 @@ class ContentReactionComponent {
             return this.resolvedProps().showComment;
         });
         this.canSubmit = computed(() => this.state().selectedValue !== null && !this.state().isLoading);
+        addIcons({ closeOutline });
         // Auto-registro de defaults i18n (es/en) si el consumer no proveyó el
         // namespace. Garantiza que `t()` nunca caiga en key faltante. Ver
         // CONTENT_REACTION_I18N. Idempotente: solo la 1ª instancia registra.
@@ -53674,6 +53721,10 @@ class ContentReactionComponent {
             this.i18n.registerContent('ContentReaction', CONTENT_REACTION_I18N);
         }
     }
+    /** Cierra el modal/sheet contenedor (si el componente se abrió vía ModalService). */
+    close() {
+        void this._modalRef?.dismiss();
+    }
     ngOnInit() {
         this.loadPreviousReaction();
     }
@@ -53813,13 +53864,15 @@ class ContentReactionComponent {
         return this.i18n.t(key, 'ContentReaction') || translations[key] || key;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentReactionComponent, isStandalone: true, selector: "val-content-reaction", inputs: { props: "props" }, outputs: { reactionSubmit: "reactionSubmit", reactionChange: "reactionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentReactionComponent, isStandalone: true, selector: "val-content-reaction", inputs: { props: "props", _modalRef: "_modalRef" }, outputs: { reactionSubmit: "reactionSubmit", reactionChange: "reactionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Bot\u00F3n de cierre (solo en modo modal/sheet) -->\n  @if (resolvedProps().showCloseButton) {\n  <ion-button fill=\"clear\" color=\"dark\" class=\"close-button\" [attr.aria-label]=\"t('close')\" (click)=\"close()\">\n    <ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon>\n  </ion-button>\n  }\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{position:relative;padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.close-button{position:absolute;top:0;right:0;margin:0;--padding-start: 6px;--padding-end: 6px;--color: var(--ion-color-medium)}.close-button ion-icon{font-size:1.5rem}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentReactionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-content-reaction', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonSpinner, IonTextarea], template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'val-content-reaction', standalone: true, imports: [CommonModule, FormsModule, IonButton, IonIcon, IonSpinner, IonTextarea], template: "@if (isConfigured()) {\n<div class=\"content-reaction\" [class.disabled]=\"resolvedProps().disabled\" [class.readonly]=\"resolvedProps().readonly\">\n  <!-- Bot\u00F3n de cierre (solo en modo modal/sheet) -->\n  @if (resolvedProps().showCloseButton) {\n  <ion-button fill=\"clear\" color=\"dark\" class=\"close-button\" [attr.aria-label]=\"t('close')\" (click)=\"close()\">\n    <ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon>\n  </ion-button>\n  }\n  <!-- Loading inicial -->\n  @if (state().isLoading && !state().selectedValue) {\n  <div class=\"loading-container\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div>\n  } @else {\n  <!-- Pregunta -->\n  <p class=\"question\">\n    {{ state().selectedValue === 'negative' ? t('negativeFeedbackTitle') : resolvedProps().question }}\n  </p>\n\n  <!-- Botones de reacci\u00F3n \u2014 variante emoji (caras, estrellas, thumbs, \u2026) -->\n  @if (resolvedProps().variant === 'emoji') {\n  <div class=\"reaction-buttons reaction-buttons--emoji\">\n    @for (value of activeReactionValues(); track value; let i = $index) {\n    <ion-button\n      fill=\"clear\"\n      shape=\"round\"\n      [class.selected]=\"isSelected(value)\"\n      [attr.aria-label]=\"resolvedProps().emojiLabels[i]\"\n      [attr.aria-pressed]=\"isSelected(value)\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction(value)\"\n    >\n      <span class=\"emoji-btn\">{{ resolvedProps().emojis[i] }}</span>\n    </ion-button>\n    }\n  </div>\n  } @else {\n  <!-- Botones de reacci\u00F3n \u2014 variante texto (default) -->\n  <div class=\"reaction-buttons\">\n    <ion-button\n      [fill]=\"isSelected('positive') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('positive')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('positive')\"\n    >\n      {{ t('positiveLabel') }}\n    </ion-button>\n    <ion-button\n      [fill]=\"isSelected('negative') ? 'solid' : 'outline'\"\n      shape=\"round\"\n      color=\"dark\"\n      [attr.aria-pressed]=\"isSelected('negative')\"\n      [disabled]=\"resolvedProps().disabled || resolvedProps().readonly\"\n      (click)=\"selectReaction('negative')\"\n    >\n      {{ t('negativeLabel') }}\n    </ion-button>\n  </div>\n  }\n\n  <!-- Campo de comentario (solo si hay selecci\u00F3n) -->\n  @if (showCommentField()) {\n  <div class=\"comment-section\">\n    <ion-textarea\n      [value]=\"state().comment\"\n      [placeholder]=\"resolvedProps().commentPlaceholder\"\n      [maxlength]=\"resolvedProps().maxCommentLength\"\n      [disabled]=\"resolvedProps().disabled\"\n      [rows]=\"3\"\n      class=\"comment-textarea\"\n      (ionInput)=\"updateComment($event)\"\n    ></ion-textarea>\n    <span class=\"char-count\"> {{ state().comment.length }}/{{ resolvedProps().maxCommentLength }} </span>\n  </div>\n  }\n\n  <!-- Bot\u00F3n de env\u00EDo -->\n  @if (state().selectedValue && !state().isSubmitted) {\n  <ion-button expand=\"block\" shape=\"round\" [disabled]=\"!canSubmit()\" (click)=\"submitReaction()\" class=\"submit-button\">\n    @if (state().isLoading) {\n    <ion-spinner name=\"crescent\"></ion-spinner>\n    } @else { {{ state().hadPreviousReaction ? t('update') : t('submit') }} }\n  </ion-button>\n  }\n\n  <!-- Mensaje de confirmaci\u00F3n -->\n  @if (state().isSubmitted) {\n  <p class=\"submitted-message\">{{ t('thankYou') }}</p>\n  }\n\n  <!-- Error -->\n  @if (state().error) {\n  <p class=\"error-message\">{{ state().error }}</p>\n  } }\n</div>\n}\n", styles: [":host{display:block}.content-reaction{position:relative;padding:16px;text-align:center}.content-reaction.disabled{opacity:.6;pointer-events:none}.content-reaction.readonly{pointer-events:none}.close-button{position:absolute;top:0;right:0;margin:0;--padding-start: 6px;--padding-end: 6px;--color: var(--ion-color-medium)}.close-button ion-icon{font-size:1.5rem}.question{font-size:1.0625rem;font-weight:700;color:var(--ion-color-dark);margin:0 0 16px}.reaction-buttons{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.reaction-buttons--emoji{gap:8px}.reaction-buttons--emoji ion-button{--padding-start: 4px;--padding-end: 4px;transition:transform .15s ease}.reaction-buttons--emoji ion-button.selected{transform:scale(1.25)}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]){opacity:.55}.reaction-buttons--emoji ion-button:not(.selected):not([disabled]):hover{opacity:1}.emoji-btn{font-size:2rem;line-height:1;display:block}.comment-section{margin-top:16px;animation:slideIn .3s ease-out}.comment-section .comment-textarea{--background: transparent;--border-radius: 8px;--padding-start: 12px;--padding-end: 12px;width:100%}.comment-section .char-count{display:block;text-align:right;font-size:.75rem;color:var(--ion-color-medium);margin-top:4px}.submit-button{margin-top:16px}.submitted-message{margin-top:16px;color:var(--ion-color-success);font-weight:500;animation:fadeIn .3s ease-out}.error-message{margin-top:8px;color:var(--ion-color-danger);font-size:.875rem}.loading-container{display:flex;justify-content:center;padding:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
+            }], _modalRef: [{
+                type: Input
             }], reactionSubmit: [{
                 type: Output
             }], reactionChange: [{
@@ -53903,6 +53956,11 @@ addIcons({
 const DEFAULT_NAMESPACE = 'Settings.About';
 const DEFAULT_BRAND_NAME = 'Valtech';
 const DEFAULT_LOGO_SRC = 'assets/images/main-icon.png';
+// Por default el HERO usa la CSS var de marca del factory (`--main-logo-mini`),
+// que cada app define en su `theme/variables.scss` (theme-aware). Si la app no
+// la define, el `var(...)` cae al `logoSrc` (ver template). El consumer puede
+// pasar `brand.logoVar: ''` para forzar el `<img src=logoSrc>` clásico.
+const DEFAULT_LOGO_VAR = '--main-logo-mini';
 const DEFAULT_RATING_ENTITY_ID = 'experience';
 /**
  * `val-about-view` — vista About full-feature autocontenida (organism).
@@ -53951,6 +54009,7 @@ class AboutViewComponent {
                 brand: {
                     name: merged.brand?.name ?? DEFAULT_BRAND_NAME,
                     logoSrc: merged.brand?.logoSrc ?? DEFAULT_LOGO_SRC,
+                    logoVar: merged.brand?.logoVar ?? DEFAULT_LOGO_VAR,
                 },
                 version: merged.version ?? '',
                 socialLinks: merged.socialLinks ?? [],
@@ -53963,6 +54022,7 @@ class AboutViewComponent {
         });
         this.brandName = computed(() => this.resolvedConfig().brand.name);
         this.logoSrc = computed(() => this.resolvedConfig().brand.logoSrc);
+        this.logoVar = computed(() => this.resolvedConfig().brand.logoVar ?? '');
         this.version = computed(() => this.resolvedConfig().version);
         this.socialLinks = computed(() => this.resolvedConfig().socialLinks);
         this.showRating = computed(() => this.resolvedConfig().showRating);
@@ -54066,6 +54126,8 @@ class AboutViewComponent {
             skipInitialCheck: true,
             emojis: ['😕', '🙂', '😍'],
             emojiLabels: [this.tt('rateBad'), this.tt('rateMid'), this.tt('rateGood')],
+            // Sheet abierto vía ModalService: botón de cierre además del drag-handle.
+            showCloseButton: true,
         };
         await this.modalService.open({
             component: ContentReactionComponent,
@@ -54084,7 +54146,16 @@ class AboutViewComponent {
     <ion-grid class="about-grid">
       <!-- HERO: logo + name + version -->
       <div class="about-hero">
-        <img class="about-hero__logo" [src]="logoSrc()" [alt]="brandName()" />
+        @if (logoVar()) {
+          <div
+            class="about-hero__logo about-hero__logo--var"
+            role="img"
+            [attr.aria-label]="brandName()"
+            [style.background-image]="'var(' + logoVar() + ', url(' + logoSrc() + '))'"
+          ></div>
+        } @else {
+          <img class="about-hero__logo" [src]="logoSrc()" [alt]="brandName()" />
+        }
         <val-title
           [props]="{
             content: brandName(),
@@ -54189,7 +54260,7 @@ class AboutViewComponent {
         />
       </footer>
     </ion-grid>
-  `, isInline: true, styles: [":host{display:block}.about-grid{padding:16px 0;max-width:720px;margin:0 auto}.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 16px;text-align:center}.about-hero__logo{height:96px;width:auto;display:block}.version-row{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85;transition:opacity .15s ease}.version-row:hover{opacity:1}.version-copy-icon{font-size:14px;color:var(--ion-color-medium)}.about-section{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px}.about-actions{display:flex;flex-direction:column;gap:8px}.about-section--reviews val-action-card{display:block}.about-section--reviews val-action-card ::ng-deep .action-card{background:var(--ion-color-light, #f4f5f8);box-shadow:none}.about-section--reviews val-action-card ::ng-deep .action-card__description{color:var(--ion-color-dark);opacity:.7}.about-social{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}.about-social .social-btn{--border-radius: 50%;--background: var(--ion-color-light, #f4f5f8);--color: var(--ion-color-dark);--padding-start: 0;--padding-end: 0;width:48px;height:48px;margin:0;transition:transform .15s ease}.about-social .social-btn:hover{--background: var(--ion-color-primary-tint, #8a4ce5);--color: #fff;transform:translateY(-2px)}.about-social .social-btn ion-icon{font-size:22px}.about-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0;text-align:center}:host-context(body.dark) val-action-card ::ng-deep .action-card,:host-context(html.ion-palette-dark) val-action-card ::ng-deep .action-card,:host-context([data-theme=\"dark\"]) val-action-card ::ng-deep .action-card{background:#ffffff0a}:host-context(body.dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context(html.ion-palette-dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context([data-theme=\"dark\"]) .about-section--reviews val-action-card ::ng-deep .action-card:hover{background:#ffffff14}:host-context(body.dark) .about-social .social-btn,:host-context(html.ion-palette-dark) .about-social .social-btn,:host-context([data-theme=\"dark\"]) .about-social .social-btn{--background: rgba(255, 255, 255, .04)}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.about-grid{padding:16px 0;max-width:720px;margin:0 auto}.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 16px;text-align:center}.about-hero__logo{height:96px;width:auto;display:block}.about-hero__logo--var{width:96px;height:96px;background-position:center;background-repeat:no-repeat;background-size:contain}.version-row{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85;transition:opacity .15s ease}.version-row:hover{opacity:1}.version-copy-icon{font-size:14px;color:var(--ion-color-medium)}.about-section{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px}.about-actions{display:flex;flex-direction:column;gap:8px}.about-section--reviews val-action-card{display:block}.about-section--reviews val-action-card ::ng-deep .action-card{background:var(--ion-color-light, #f4f5f8);box-shadow:none}.about-section--reviews val-action-card ::ng-deep .action-card__description{color:var(--ion-color-dark);opacity:.7}.about-social{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}.about-social .social-btn{--border-radius: 50%;--background: var(--ion-color-light, #f4f5f8);--color: var(--ion-color-dark);--padding-start: 0;--padding-end: 0;width:48px;height:48px;margin:0;transition:transform .15s ease}.about-social .social-btn:hover{--background: var(--ion-color-primary-tint, #8a4ce5);--color: #fff;transform:translateY(-2px)}.about-social .social-btn ion-icon{font-size:22px}.about-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0;text-align:center}:host-context(body.dark) val-action-card ::ng-deep .action-card,:host-context(html.ion-palette-dark) val-action-card ::ng-deep .action-card,:host-context([data-theme=\"dark\"]) val-action-card ::ng-deep .action-card{background:#ffffff0a}:host-context(body.dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context(html.ion-palette-dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context([data-theme=\"dark\"]) .about-section--reviews val-action-card ::ng-deep .action-card:hover{background:#ffffff14}:host-context(body.dark) .about-social .social-btn,:host-context(html.ion-palette-dark) .about-social .social-btn,:host-context([data-theme=\"dark\"]) .about-social .social-btn{--background: rgba(255, 255, 255, .04)}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ActionCardComponent, selector: "val-action-card", inputs: ["props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AboutViewComponent, decorators: [{
             type: Component,
@@ -54197,7 +54268,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-grid class="about-grid">
       <!-- HERO: logo + name + version -->
       <div class="about-hero">
-        <img class="about-hero__logo" [src]="logoSrc()" [alt]="brandName()" />
+        @if (logoVar()) {
+          <div
+            class="about-hero__logo about-hero__logo--var"
+            role="img"
+            [attr.aria-label]="brandName()"
+            [style.background-image]="'var(' + logoVar() + ', url(' + logoSrc() + '))'"
+          ></div>
+        } @else {
+          <img class="about-hero__logo" [src]="logoSrc()" [alt]="brandName()" />
+        }
         <val-title
           [props]="{
             content: brandName(),
@@ -54302,7 +54382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         />
       </footer>
     </ion-grid>
-  `, styles: [":host{display:block}.about-grid{padding:16px 0;max-width:720px;margin:0 auto}.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 16px;text-align:center}.about-hero__logo{height:96px;width:auto;display:block}.version-row{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85;transition:opacity .15s ease}.version-row:hover{opacity:1}.version-copy-icon{font-size:14px;color:var(--ion-color-medium)}.about-section{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px}.about-actions{display:flex;flex-direction:column;gap:8px}.about-section--reviews val-action-card{display:block}.about-section--reviews val-action-card ::ng-deep .action-card{background:var(--ion-color-light, #f4f5f8);box-shadow:none}.about-section--reviews val-action-card ::ng-deep .action-card__description{color:var(--ion-color-dark);opacity:.7}.about-social{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}.about-social .social-btn{--border-radius: 50%;--background: var(--ion-color-light, #f4f5f8);--color: var(--ion-color-dark);--padding-start: 0;--padding-end: 0;width:48px;height:48px;margin:0;transition:transform .15s ease}.about-social .social-btn:hover{--background: var(--ion-color-primary-tint, #8a4ce5);--color: #fff;transform:translateY(-2px)}.about-social .social-btn ion-icon{font-size:22px}.about-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0;text-align:center}:host-context(body.dark) val-action-card ::ng-deep .action-card,:host-context(html.ion-palette-dark) val-action-card ::ng-deep .action-card,:host-context([data-theme=\"dark\"]) val-action-card ::ng-deep .action-card{background:#ffffff0a}:host-context(body.dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context(html.ion-palette-dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context([data-theme=\"dark\"]) .about-section--reviews val-action-card ::ng-deep .action-card:hover{background:#ffffff14}:host-context(body.dark) .about-social .social-btn,:host-context(html.ion-palette-dark) .about-social .social-btn,:host-context([data-theme=\"dark\"]) .about-social .social-btn{--background: rgba(255, 255, 255, .04)}\n"] }]
+  `, styles: [":host{display:block}.about-grid{padding:16px 0;max-width:720px;margin:0 auto}.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 16px;text-align:center}.about-hero__logo{height:96px;width:auto;display:block}.about-hero__logo--var{width:96px;height:96px;background-position:center;background-repeat:no-repeat;background-size:contain}.version-row{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.85;transition:opacity .15s ease}.version-row:hover{opacity:1}.version-copy-icon{font-size:14px;color:var(--ion-color-medium)}.about-section{padding:16px 0 8px;display:flex;flex-direction:column;gap:8px}.about-actions{display:flex;flex-direction:column;gap:8px}.about-section--reviews val-action-card{display:block}.about-section--reviews val-action-card ::ng-deep .action-card{background:var(--ion-color-light, #f4f5f8);box-shadow:none}.about-section--reviews val-action-card ::ng-deep .action-card__description{color:var(--ion-color-dark);opacity:.7}.about-social{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px}.about-social .social-btn{--border-radius: 50%;--background: var(--ion-color-light, #f4f5f8);--color: var(--ion-color-dark);--padding-start: 0;--padding-end: 0;width:48px;height:48px;margin:0;transition:transform .15s ease}.about-social .social-btn:hover{--background: var(--ion-color-primary-tint, #8a4ce5);--color: #fff;transform:translateY(-2px)}.about-social .social-btn ion-icon{font-size:22px}.about-footer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0;text-align:center}:host-context(body.dark) val-action-card ::ng-deep .action-card,:host-context(html.ion-palette-dark) val-action-card ::ng-deep .action-card,:host-context([data-theme=\"dark\"]) val-action-card ::ng-deep .action-card{background:#ffffff0a}:host-context(body.dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context(html.ion-palette-dark) .about-section--reviews val-action-card ::ng-deep .action-card:hover,:host-context([data-theme=\"dark\"]) .about-section--reviews val-action-card ::ng-deep .action-card:hover{background:#ffffff14}:host-context(body.dark) .about-social .social-btn,:host-context(html.ion-palette-dark) .about-social .social-btn,:host-context([data-theme=\"dark\"]) .about-social .social-btn{--background: rgba(255, 255, 255, .04)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -62770,7 +62850,7 @@ class DocsPageComponent {
         </aside>
       }
     </div>
-  `, isInline: true, styles: [".docs-page{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;margin:0 auto;padding:2rem 1.5rem}@media (min-width: 1200px){.docs-page{grid-template-columns:1fr 220px;padding:2rem}}.docs-page__content{min-width:0;max-width:900px}val-docs-breadcrumb{display:block;margin-bottom:1rem}.docs-page__header{margin-bottom:2rem}.docs-page__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.docs-page__title{margin:0;font-size:2rem;font-weight:700;color:var(--ion-text-color, #1a1a1a);line-height:1.2}@media (min-width: 768px){.docs-page__title{font-size:2.5rem}}.docs-page__badge{display:inline-flex;align-items:center;padding:.25rem .5rem;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;border-radius:4px;background:#0000000a;color:#888}.docs-page__badge--success{background:#0000000a;color:#888}.docs-page__badge--warning{background:var(--ion-color-warning-tint, #fff3e0);color:var(--ion-color-warning-shade, #e65100)}.docs-page__badge--danger{background:var(--ion-color-danger-tint, #ffebee);color:var(--ion-color-danger-shade, #c62828)}.docs-page__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.7;color:var(--ion-color-medium, #666)}.docs-page__sections>*:last-child{margin-bottom:0}.docs-page__feedback{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:center}.docs-page__toc{display:none}@media (min-width: 1200px){.docs-page__toc{display:block;position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}}.docs-page__sections h2{font-size:1.5rem;font-weight:600;margin:0 0 1rem;color:var(--ion-text-color, #1a1a1a);scroll-margin-top:2rem}.docs-page__sections h3{font-size:1.125rem;font-weight:600;margin:1.5rem 0 1rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections h4{font-size:1rem;font-weight:600;margin:1.25rem 0 .75rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections p{line-height:1.7;color:var(--ion-text-color, #1a1a1a);margin:0 0 1rem}.docs-page__sections ul,.docs-page__sections ol{padding-left:1.5rem;margin:0 0 1rem}.docs-page__sections li{margin-bottom:.5rem;line-height:1.6;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections a{color:var(--ion-color-primary, #3880ff);text-decoration:none}.docs-page__sections a:hover{text-decoration:underline}.docs-page__sections code:not([class*=language-]){background:#0000000f;padding:.125rem .375rem;border-radius:4px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:.875em}.docs-page__sections pre:not([class*=language-]){background:#0000000a;padding:1rem;border-radius:8px;overflow-x:auto;margin:0 0 1rem}.docs-page__sections pre:not([class*=language-]) code{background:none;padding:0}.docs-page__sections table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.875rem}.docs-page__sections th,.docs-page__sections td{padding:.75rem;text-align:left;border-bottom:1px solid rgba(0,0,0,.1)}.docs-page__sections th{font-weight:600;background:#00000005}.docs-page__sections blockquote{margin:0 0 1rem;padding:1rem 1.5rem;border-left:4px solid var(--ion-color-primary, #3880ff);background:#00000005;border-radius:0 8px 8px 0}.docs-page__sections blockquote p:last-child{margin-bottom:0}.docs-page__sections img{max-width:100%;height:auto;border-radius:8px}.docs-page__sections hr{border:none;border-top:1px solid rgba(0,0,0,.1);margin:2rem 0}.docs-page__sections strong{font-weight:600}.docs-page__sections section{margin-bottom:2rem}:host-context(.dark) .docs-page__badge,:host-context([color-scheme=\"dark\"]) .docs-page__badge{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--success,:host-context([color-scheme=\"dark\"]) .docs-page__badge--success{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--warning,:host-context([color-scheme=\"dark\"]) .docs-page__badge--warning{background:#e6510033;color:#ffb74d}:host-context(.dark) .docs-page__badge--danger,:host-context([color-scheme=\"dark\"]) .docs-page__badge--danger{background:#c6282833;color:#e57373}:host-context(.dark) .docs-page__sections code:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections code:not([class*=language-]){background:#ffffff1a}:host-context(.dark) .docs-page__sections pre:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections pre:not([class*=language-]){background:#ffffff0f}:host-context(.dark) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections th{background:#ffffff0a}:host-context(.dark) .docs-page__sections th,:host-context(.dark) .docs-page__sections td,:host-context([color-scheme=\"dark\"]) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections td{border-color:#ffffff1a}:host-context(.dark) .docs-page__sections blockquote,:host-context([color-scheme=\"dark\"]) .docs-page__sections blockquote{background:#ffffff0a}:host-context(.dark) .docs-page__sections hr,:host-context([color-scheme=\"dark\"]) .docs-page__sections hr{border-color:#ffffff1a}:host-context(.dark) .docs-page__feedback,:host-context([color-scheme=\"dark\"]) .docs-page__feedback{border-color:#ffffff1a}@media (max-width: 768px){.docs-page__feedback{margin-top:2rem;padding-top:1.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DocsBreadcrumbComponent, selector: "val-docs-breadcrumb", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsNavLinksComponent, selector: "val-docs-nav-links", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsTocComponent, selector: "val-docs-toc", inputs: ["props"], outputs: ["sectionChange"] }, { kind: "component", type: ContentReactionComponent, selector: "val-content-reaction", inputs: ["props"], outputs: ["reactionSubmit", "reactionChange"] }] }); }
+  `, isInline: true, styles: [".docs-page{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;margin:0 auto;padding:2rem 1.5rem}@media (min-width: 1200px){.docs-page{grid-template-columns:1fr 220px;padding:2rem}}.docs-page__content{min-width:0;max-width:900px}val-docs-breadcrumb{display:block;margin-bottom:1rem}.docs-page__header{margin-bottom:2rem}.docs-page__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.docs-page__title{margin:0;font-size:2rem;font-weight:700;color:var(--ion-text-color, #1a1a1a);line-height:1.2}@media (min-width: 768px){.docs-page__title{font-size:2.5rem}}.docs-page__badge{display:inline-flex;align-items:center;padding:.25rem .5rem;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;border-radius:4px;background:#0000000a;color:#888}.docs-page__badge--success{background:#0000000a;color:#888}.docs-page__badge--warning{background:var(--ion-color-warning-tint, #fff3e0);color:var(--ion-color-warning-shade, #e65100)}.docs-page__badge--danger{background:var(--ion-color-danger-tint, #ffebee);color:var(--ion-color-danger-shade, #c62828)}.docs-page__lead{margin:1rem 0 0;font-size:1.125rem;line-height:1.7;color:var(--ion-color-medium, #666)}.docs-page__sections>*:last-child{margin-bottom:0}.docs-page__feedback{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:center}.docs-page__toc{display:none}@media (min-width: 1200px){.docs-page__toc{display:block;position:sticky;top:2rem;height:fit-content;max-height:calc(100vh - 4rem);overflow-y:auto}}.docs-page__sections h2{font-size:1.5rem;font-weight:600;margin:0 0 1rem;color:var(--ion-text-color, #1a1a1a);scroll-margin-top:2rem}.docs-page__sections h3{font-size:1.125rem;font-weight:600;margin:1.5rem 0 1rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections h4{font-size:1rem;font-weight:600;margin:1.25rem 0 .75rem;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections p{line-height:1.7;color:var(--ion-text-color, #1a1a1a);margin:0 0 1rem}.docs-page__sections ul,.docs-page__sections ol{padding-left:1.5rem;margin:0 0 1rem}.docs-page__sections li{margin-bottom:.5rem;line-height:1.6;color:var(--ion-text-color, #1a1a1a)}.docs-page__sections a{color:var(--ion-color-primary, #3880ff);text-decoration:none}.docs-page__sections a:hover{text-decoration:underline}.docs-page__sections code:not([class*=language-]){background:#0000000f;padding:.125rem .375rem;border-radius:4px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:.875em}.docs-page__sections pre:not([class*=language-]){background:#0000000a;padding:1rem;border-radius:8px;overflow-x:auto;margin:0 0 1rem}.docs-page__sections pre:not([class*=language-]) code{background:none;padding:0}.docs-page__sections table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.875rem}.docs-page__sections th,.docs-page__sections td{padding:.75rem;text-align:left;border-bottom:1px solid rgba(0,0,0,.1)}.docs-page__sections th{font-weight:600;background:#00000005}.docs-page__sections blockquote{margin:0 0 1rem;padding:1rem 1.5rem;border-left:4px solid var(--ion-color-primary, #3880ff);background:#00000005;border-radius:0 8px 8px 0}.docs-page__sections blockquote p:last-child{margin-bottom:0}.docs-page__sections img{max-width:100%;height:auto;border-radius:8px}.docs-page__sections hr{border:none;border-top:1px solid rgba(0,0,0,.1);margin:2rem 0}.docs-page__sections strong{font-weight:600}.docs-page__sections section{margin-bottom:2rem}:host-context(.dark) .docs-page__badge,:host-context([color-scheme=\"dark\"]) .docs-page__badge{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--success,:host-context([color-scheme=\"dark\"]) .docs-page__badge--success{background:#ffffff0f;color:#999}:host-context(.dark) .docs-page__badge--warning,:host-context([color-scheme=\"dark\"]) .docs-page__badge--warning{background:#e6510033;color:#ffb74d}:host-context(.dark) .docs-page__badge--danger,:host-context([color-scheme=\"dark\"]) .docs-page__badge--danger{background:#c6282833;color:#e57373}:host-context(.dark) .docs-page__sections code:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections code:not([class*=language-]){background:#ffffff1a}:host-context(.dark) .docs-page__sections pre:not([class*=language-]),:host-context([color-scheme=\"dark\"]) .docs-page__sections pre:not([class*=language-]){background:#ffffff0f}:host-context(.dark) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections th{background:#ffffff0a}:host-context(.dark) .docs-page__sections th,:host-context(.dark) .docs-page__sections td,:host-context([color-scheme=\"dark\"]) .docs-page__sections th,:host-context([color-scheme=\"dark\"]) .docs-page__sections td{border-color:#ffffff1a}:host-context(.dark) .docs-page__sections blockquote,:host-context([color-scheme=\"dark\"]) .docs-page__sections blockquote{background:#ffffff0a}:host-context(.dark) .docs-page__sections hr,:host-context([color-scheme=\"dark\"]) .docs-page__sections hr{border-color:#ffffff1a}:host-context(.dark) .docs-page__feedback,:host-context([color-scheme=\"dark\"]) .docs-page__feedback{border-color:#ffffff1a}@media (max-width: 768px){.docs-page__feedback{margin-top:2rem;padding-top:1.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DocsBreadcrumbComponent, selector: "val-docs-breadcrumb", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsNavLinksComponent, selector: "val-docs-nav-links", inputs: ["props"], outputs: ["navigate"] }, { kind: "component", type: DocsTocComponent, selector: "val-docs-toc", inputs: ["props"], outputs: ["sectionChange"] }, { kind: "component", type: ContentReactionComponent, selector: "val-content-reaction", inputs: ["props", "_modalRef"], outputs: ["reactionSubmit", "reactionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsPageComponent, decorators: [{
             type: Component,