valtech-components 4.0.107 → 4.0.109
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/molecules/section-header/section-header.component.mjs +33 -29
- package/esm2022/lib/components/molecules/section-header/types.mjs +1 -1
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +32 -29
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/molecules/section-header/section-header.component.d.ts +13 -16
- package/lib/components/molecules/section-header/types.d.ts +43 -19
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,64 +1,68 @@
|
|
|
1
1
|
import { Component, EventEmitter, Output, computed, input } from '@angular/core';
|
|
2
|
+
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
/**
|
|
4
|
-
* val-section-header
|
|
5
|
+
* val-section-header — standard section eyebrow for all factory apps.
|
|
5
6
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* Two-row layout:
|
|
8
|
+
* ```
|
|
9
|
+
* ┌────────────────────────────────────────────────┐
|
|
10
|
+
* │ TITLE (bold 18px) [action btn] │ ← row 1, space-between
|
|
11
|
+
* │ info link / subtitle (muted 13px) │ ← row 2, optional
|
|
12
|
+
* └────────────────────────────────────────────────┘
|
|
13
|
+
* ```
|
|
10
14
|
*
|
|
11
|
-
*
|
|
12
|
-
* override the CTA color (e.g. `--bingo-magenta` in bingo).
|
|
15
|
+
* CSS var `--val-section-header-cta-color` tints the `infoLink` text color.
|
|
13
16
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* <val-section-header
|
|
17
|
-
* [props]="{ title: 'Premios', subtitle: 'Regalos sorteados por ronda.', cta: { label: '¿Qué son?' } }"
|
|
18
|
-
* (ctaClick)="openInfoModal()" />
|
|
19
|
-
* ```
|
|
17
|
+
* Both `action` (button) and `infoLink` (text link) emit `(actionClick)` with
|
|
18
|
+
* their respective `token`.
|
|
20
19
|
*/
|
|
21
20
|
export class SectionHeaderComponent {
|
|
22
21
|
constructor() {
|
|
23
22
|
this.props = input({});
|
|
24
|
-
|
|
25
|
-
this.ctaClick = new EventEmitter();
|
|
23
|
+
this.actionClick = new EventEmitter();
|
|
26
24
|
this.config = computed(() => ({
|
|
27
25
|
title: '',
|
|
28
26
|
...this.props(),
|
|
29
27
|
}));
|
|
30
28
|
}
|
|
31
29
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
|
|
33
31
|
<div class="sh-row">
|
|
34
32
|
<span class="sh-title">{{ config().title }}</span>
|
|
35
|
-
@if (config().
|
|
36
|
-
<button
|
|
37
|
-
{{ cta.label }}
|
|
38
|
-
</button>
|
|
33
|
+
@if (config().action; as act) {
|
|
34
|
+
<val-button [props]="act" (onClick)="actionClick.emit($event)" />
|
|
39
35
|
}
|
|
40
36
|
</div>
|
|
37
|
+
@if (config().infoLink; as link) {
|
|
38
|
+
<button type="button" class="sh-info-link" (click)="actionClick.emit(link.token ?? 'info')">
|
|
39
|
+
{{ link.label }}
|
|
40
|
+
</button>
|
|
41
|
+
}
|
|
41
42
|
@if (config().subtitle) {
|
|
42
43
|
<p class="sh-subtitle">{{ config().subtitle }}</p>
|
|
43
44
|
}
|
|
44
|
-
`, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-
|
|
45
|
+
`, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-info-link{display:inline-block;margin:4px 0 0;padding:0;background:none;border:none;cursor:pointer;font-size:.8125rem;font-family:inherit;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));line-height:1.4;text-align:start}.sh-subtitle{display:block;margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
|
|
45
46
|
}
|
|
46
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
47
48
|
type: Component,
|
|
48
|
-
args: [{ selector: 'val-section-header', standalone: true, imports: [], template: `
|
|
49
|
+
args: [{ selector: 'val-section-header', standalone: true, imports: [ButtonComponent], template: `
|
|
49
50
|
<div class="sh-row">
|
|
50
51
|
<span class="sh-title">{{ config().title }}</span>
|
|
51
|
-
@if (config().
|
|
52
|
-
<button
|
|
53
|
-
{{ cta.label }}
|
|
54
|
-
</button>
|
|
52
|
+
@if (config().action; as act) {
|
|
53
|
+
<val-button [props]="act" (onClick)="actionClick.emit($event)" />
|
|
55
54
|
}
|
|
56
55
|
</div>
|
|
56
|
+
@if (config().infoLink; as link) {
|
|
57
|
+
<button type="button" class="sh-info-link" (click)="actionClick.emit(link.token ?? 'info')">
|
|
58
|
+
{{ link.label }}
|
|
59
|
+
</button>
|
|
60
|
+
}
|
|
57
61
|
@if (config().subtitle) {
|
|
58
62
|
<p class="sh-subtitle">{{ config().subtitle }}</p>
|
|
59
63
|
}
|
|
60
|
-
`, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-
|
|
61
|
-
}], propDecorators: {
|
|
64
|
+
`, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-info-link{display:inline-block;margin:4px 0 0;padding:0;background:none;border:none;cursor:pointer;font-size:.8125rem;font-family:inherit;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));line-height:1.4;text-align:start}.sh-subtitle{display:block;margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }]
|
|
65
|
+
}], propDecorators: { actionClick: [{
|
|
62
66
|
type: Output
|
|
63
67
|
}] } });
|
|
64
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VjdGlvbi1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9zZWN0aW9uLWhlYWRlci9zZWN0aW9uLWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOztBQUd0RTs7Ozs7Ozs7Ozs7Ozs7O0dBZUc7QUF1QkgsTUFBTSxPQUFPLHNCQUFzQjtJQXRCbkM7UUF1QlcsVUFBSyxHQUFHLEtBQUssQ0FBaUMsRUFBRSxDQUFDLENBQUM7UUFFakQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRTFDLFdBQU0sR0FBRyxRQUFRLENBQXdCLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDdkQsS0FBSyxFQUFFLEVBQUU7WUFDVCxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUU7U0FDaEIsQ0FBQyxDQUFDLENBQUM7S0FDTDsrR0FUWSxzQkFBc0I7bUdBQXRCLHNCQUFzQiwyUEFsQnZCOzs7Ozs7Ozs7Ozs7Ozs7R0FlVCxxdEJBaEJTLGVBQWU7OzRGQW1CZCxzQkFBc0I7a0JBdEJsQyxTQUFTOytCQUNFLG9CQUFvQixjQUNsQixJQUFJLFdBQ1AsQ0FBQyxlQUFlLENBQUMsWUFDaEI7Ozs7Ozs7Ozs7Ozs7OztHQWVUOzhCQU1TLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgT3V0cHV0LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IFNlY3Rpb25IZWFkZXJNZXRhZGF0YSB9IGZyb20gJy4vdHlwZXMnO1xuXG4vKipcbiAqIHZhbC1zZWN0aW9uLWhlYWRlciDigJQgc3RhbmRhcmQgc2VjdGlvbiBleWVicm93IGZvciBhbGwgZmFjdG9yeSBhcHBzLlxuICpcbiAqIFR3by1yb3cgbGF5b3V0OlxuICogYGBgXG4gKiDilIzilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJBcbiAqIOKUgiAgVElUTEUgKGJvbGQgMThweCkgICAgICAgICAgICAgIFthY3Rpb24gYnRuXSAg4pSCICDihpAgcm93IDEsIHNwYWNlLWJldHdlZW5cbiAqIOKUgiAgaW5mbyBsaW5rIC8gc3VidGl0bGUgKG11dGVkIDEzcHgpICAgICAgICAgICAg4pSCICDihpAgcm93IDIsIG9wdGlvbmFsXG4gKiDilJTilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJhcbiAqIGBgYFxuICpcbiAqIENTUyB2YXIgYC0tdmFsLXNlY3Rpb24taGVhZGVyLWN0YS1jb2xvcmAgdGludHMgdGhlIGBpbmZvTGlua2AgdGV4dCBjb2xvci5cbiAqXG4gKiBCb3RoIGBhY3Rpb25gIChidXR0b24pIGFuZCBgaW5mb0xpbmtgICh0ZXh0IGxpbmspIGVtaXQgYChhY3Rpb25DbGljaylgIHdpdGhcbiAqIHRoZWlyIHJlc3BlY3RpdmUgYHRva2VuYC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmFsLXNlY3Rpb24taGVhZGVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0J1dHRvbkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInNoLXJvd1wiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJzaC10aXRsZVwiPnt7IGNvbmZpZygpLnRpdGxlIH19PC9zcGFuPlxuICAgICAgQGlmIChjb25maWcoKS5hY3Rpb247IGFzIGFjdCkge1xuICAgICAgICA8dmFsLWJ1dHRvbiBbcHJvcHNdPVwiYWN0XCIgKG9uQ2xpY2spPVwiYWN0aW9uQ2xpY2suZW1pdCgkZXZlbnQpXCIgLz5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgICBAaWYgKGNvbmZpZygpLmluZm9MaW5rOyBhcyBsaW5rKSB7XG4gICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cInNoLWluZm8tbGlua1wiIChjbGljayk9XCJhY3Rpb25DbGljay5lbWl0KGxpbmsudG9rZW4gPz8gJ2luZm8nKVwiPlxuICAgICAgICB7eyBsaW5rLmxhYmVsIH19XG4gICAgICA8L2J1dHRvbj5cbiAgICB9XG4gICAgQGlmIChjb25maWcoKS5zdWJ0aXRsZSkge1xuICAgICAgPHAgY2xhc3M9XCJzaC1zdWJ0aXRsZVwiPnt7IGNvbmZpZygpLnN1YnRpdGxlIH19PC9wPlxuICAgIH1cbiAgYCxcbiAgc3R5bGVVcmw6ICcuL3NlY3Rpb24taGVhZGVyLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgU2VjdGlvbkhlYWRlckNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IHByb3BzID0gaW5wdXQ8UGFydGlhbDxTZWN0aW9uSGVhZGVyTWV0YWRhdGE+Pih7fSk7XG5cbiAgQE91dHB1dCgpIGFjdGlvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgcmVhZG9ubHkgY29uZmlnID0gY29tcHV0ZWQ8U2VjdGlvbkhlYWRlck1ldGFkYXRhPigoKSA9PiAoe1xuICAgIHRpdGxlOiAnJyxcbiAgICAuLi50aGlzLnByb3BzKCksXG4gIH0pKTtcbn1cbiJdfQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL3NlY3Rpb24taGVhZGVyL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCdXR0b25NZXRhZGF0YSB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuLyoqXG4gKiBDb25maWd1cmF0aW9uIGZvciBgdmFsLXNlY3Rpb24taGVhZGVyYC5cbiAqXG4gKiBMYXlvdXQgKHR3byByb3dzKTpcbiAqIGBgYFxuICog4pSM4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSQXG4gKiDilIIgIHRpdGxlIChib2xkLCAxOHB4KSAgICAgICAgW2FjdGlvbiBidXR0b25dICDilIIgIOKGkCByb3cgMSwgc3BhY2UtYmV0d2VlblxuICog4pSCICBpbmZvIGxpbmsgLyBzdWJ0aXRsZSAobXV0ZWQpICAgICAgICAgICAgICAg4pSCICDihpAgcm93IDIsIG9wdGlvbmFsXG4gKiDilJTilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJhcbiAqIGBgYFxuICpcbiAqIEJvdGggYGFjdGlvbmAgYW5kIGBpbmZvTGlua2AgZW1pdCBgKGFjdGlvbkNsaWNrKWAgd2l0aCB0aGVpciBgdG9rZW5gLlxuICpcbiAqIEBleGFtcGxlIFRpdGxlICsgcHJpbWFyeSBhY3Rpb24gYnV0dG9uXG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyXG4gKiAgIFtwcm9wc109XCJ7IHRpdGxlOiAnVGFsb25hcmlvcycsIGFjdGlvbjogY3JlYXRlQnV0dG9uUHJvcHMoKSB9XCJcbiAqICAgKGFjdGlvbkNsaWNrKT1cIm9wZW5DcmVhdGUoKVwiIC8+XG4gKiBgYGBcbiAqXG4gKiBAZXhhbXBsZSBUaXRsZSArIHJvdy0xIGluZm8gbGluayAobm8gcHJpbWFyeSBhY3Rpb24pXG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyXG4gKiAgIFtwcm9wc109XCJ7IHRpdGxlOiAnUHJlbWlvcycsIGluZm9MaW5rOiB7IGxhYmVsOiAnwr9RdcOpIHNvbj8nLCB0b2tlbjogJ2luZm8nIH0gfVwiXG4gKiAgIChhY3Rpb25DbGljayk9XCJvcGVuSW5mbygpXCIgLz5cbiAqIGBgYFxuICpcbiAqIEBleGFtcGxlIEZ1bGwg4oCUIHRpdGxlICsgYWN0aW9uICsgcm93LTIgaW5mbyBsaW5rXG4gKiBgYGBodG1sXG4gKiA8dmFsLXNlY3Rpb24taGVhZGVyXG4gKiAgIFtwcm9wc109XCJ7XG4gKiAgICAgdGl0bGU6ICdWZW5kZWRvcmVzIHkgdGFsb25hcmlvcycsXG4gKiAgICAgYWN0aW9uOiBjcmVhdGVCdXR0b25Qcm9wcygpLFxuICogICAgIGluZm9MaW5rOiB7IGxhYmVsOiAnwr9RdcOpIHNvbiBsb3MgdGFsb25hcmlvcz8nLCB0b2tlbjogJ2luZm8nIH1cbiAqICAgfVwiXG4gKiAgIChhY3Rpb25DbGljayk9XCJvbkFjdGlvbigkZXZlbnQpXCIgLz5cbiAqIGBgYFxuICovXG5leHBvcnQgaW50ZXJmYWNlIFNlY3Rpb25IZWFkZXJNZXRhZGF0YSB7XG4gIC8qKiBNYWluIHNlY3Rpb24gdGl0bGUg4oCUIGJvbGQsIH4xOHB4LiAqL1xuICB0aXRsZTogc3RyaW5nO1xuICAvKipcbiAgICogUHJpbWFyeSBhY3Rpb24gYnV0dG9uIHJlbmRlcmVkIG9uIHRoZSBSSUdIVCBvZiByb3cgMSAoc3BhY2UtYmV0d2VlbikuXG4gICAqIEVtaXRzIGAoYWN0aW9uQ2xpY2spYCB3aXRoIHRoZSBidXR0b24ncyBgdG9rZW5gLlxuICAgKi9cbiAgYWN0aW9uPzogQnV0dG9uTWV0YWRhdGE7XG4gIC8qKlxuICAgKiBDbGlja2FibGUgaW5mbyAvIGhlbHAgbGluayByZW5kZXJlZCBhdCB0aGUgU1RBUlQgb2Ygcm93IDIgKGJlbG93IHRpdGxlKS5cbiAgICogRW1pdHMgYChhY3Rpb25DbGljaylgIHdpdGggaXRzIGB0b2tlbmAgKGRlZmF1bHRzIHRvIGAnaW5mbydgKS5cbiAgICogVXNlIGZvciBcIsK/UXXDqSBlcyBlc3RvP1wiLXN0eWxlIGxpbmtzLlxuICAgKi9cbiAgaW5mb0xpbms/OiB7XG4gICAgbGFiZWw6IHN0cmluZztcbiAgICB0b2tlbj86IHN0cmluZztcbiAgfTtcbiAgLyoqXG4gICAqIFN0YXRpYyBtdXRlZCB0ZXh0IGluIHJvdyAyIChzaG93biBiZWxvdyBgaW5mb0xpbmtgIGlmIGJvdGggYXJlIHNldCkuXG4gICAqIFVzZSBmb3IgYnJpZWYgZGVzY3JpcHRpdmUgY29weSB0aGF0IGRvZXMgbm90IG5lZWQgdG8gYmUgY2xpY2thYmxlLlxuICAgKi9cbiAgc3VidGl0bGU/OiBzdHJpbmc7XG59XG4iXX0=
|
package/esm2022/lib/version.mjs
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Current version of valtech-components.
|
|
3
3
|
* This is automatically updated during the publish process.
|
|
4
4
|
*/
|
|
5
|
-
export const VERSION = '4.0.
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
5
|
+
export const VERSION = '4.0.109';
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC4xMDknO1xuIl19
|
|
@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
|
|
|
56
56
|
* Current version of valtech-components.
|
|
57
57
|
* This is automatically updated during the publish process.
|
|
58
58
|
*/
|
|
59
|
-
const VERSION = '4.0.
|
|
59
|
+
const VERSION = '4.0.109';
|
|
60
60
|
|
|
61
61
|
// Control de estado de refresco (singleton a nivel de módulo)
|
|
62
62
|
let isRefreshing = false;
|
|
@@ -28953,64 +28953,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
28953
28953
|
}] } });
|
|
28954
28954
|
|
|
28955
28955
|
/**
|
|
28956
|
-
* val-section-header
|
|
28956
|
+
* val-section-header — standard section eyebrow for all factory apps.
|
|
28957
28957
|
*
|
|
28958
|
-
*
|
|
28959
|
-
*
|
|
28960
|
-
*
|
|
28961
|
-
*
|
|
28958
|
+
* Two-row layout:
|
|
28959
|
+
* ```
|
|
28960
|
+
* ┌────────────────────────────────────────────────┐
|
|
28961
|
+
* │ TITLE (bold 18px) [action btn] │ ← row 1, space-between
|
|
28962
|
+
* │ info link / subtitle (muted 13px) │ ← row 2, optional
|
|
28963
|
+
* └────────────────────────────────────────────────┘
|
|
28964
|
+
* ```
|
|
28962
28965
|
*
|
|
28963
|
-
*
|
|
28964
|
-
* override the CTA color (e.g. `--bingo-magenta` in bingo).
|
|
28966
|
+
* CSS var `--val-section-header-cta-color` tints the `infoLink` text color.
|
|
28965
28967
|
*
|
|
28966
|
-
*
|
|
28967
|
-
*
|
|
28968
|
-
* <val-section-header
|
|
28969
|
-
* [props]="{ title: 'Premios', subtitle: 'Regalos sorteados por ronda.', cta: { label: '¿Qué son?' } }"
|
|
28970
|
-
* (ctaClick)="openInfoModal()" />
|
|
28971
|
-
* ```
|
|
28968
|
+
* Both `action` (button) and `infoLink` (text link) emit `(actionClick)` with
|
|
28969
|
+
* their respective `token`.
|
|
28972
28970
|
*/
|
|
28973
28971
|
class SectionHeaderComponent {
|
|
28974
28972
|
constructor() {
|
|
28975
28973
|
this.props = input({});
|
|
28976
|
-
|
|
28977
|
-
this.ctaClick = new EventEmitter();
|
|
28974
|
+
this.actionClick = new EventEmitter();
|
|
28978
28975
|
this.config = computed(() => ({
|
|
28979
28976
|
title: '',
|
|
28980
28977
|
...this.props(),
|
|
28981
28978
|
}));
|
|
28982
28979
|
}
|
|
28983
28980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
28981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SectionHeaderComponent, isStandalone: true, selector: "val-section-header", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
|
|
28985
28982
|
<div class="sh-row">
|
|
28986
28983
|
<span class="sh-title">{{ config().title }}</span>
|
|
28987
|
-
@if (config().
|
|
28988
|
-
<button
|
|
28989
|
-
{{ cta.label }}
|
|
28990
|
-
</button>
|
|
28984
|
+
@if (config().action; as act) {
|
|
28985
|
+
<val-button [props]="act" (onClick)="actionClick.emit($event)" />
|
|
28991
28986
|
}
|
|
28992
28987
|
</div>
|
|
28988
|
+
@if (config().infoLink; as link) {
|
|
28989
|
+
<button type="button" class="sh-info-link" (click)="actionClick.emit(link.token ?? 'info')">
|
|
28990
|
+
{{ link.label }}
|
|
28991
|
+
</button>
|
|
28992
|
+
}
|
|
28993
28993
|
@if (config().subtitle) {
|
|
28994
28994
|
<p class="sh-subtitle">{{ config().subtitle }}</p>
|
|
28995
28995
|
}
|
|
28996
|
-
`, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-
|
|
28996
|
+
`, isInline: true, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-info-link{display:inline-block;margin:4px 0 0;padding:0;background:none;border:none;cursor:pointer;font-size:.8125rem;font-family:inherit;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));line-height:1.4;text-align:start}.sh-subtitle{display:block;margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
|
|
28997
28997
|
}
|
|
28998
28998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
28999
28999
|
type: Component,
|
|
29000
|
-
args: [{ selector: 'val-section-header', standalone: true, imports: [], template: `
|
|
29000
|
+
args: [{ selector: 'val-section-header', standalone: true, imports: [ButtonComponent], template: `
|
|
29001
29001
|
<div class="sh-row">
|
|
29002
29002
|
<span class="sh-title">{{ config().title }}</span>
|
|
29003
|
-
@if (config().
|
|
29004
|
-
<button
|
|
29005
|
-
{{ cta.label }}
|
|
29006
|
-
</button>
|
|
29003
|
+
@if (config().action; as act) {
|
|
29004
|
+
<val-button [props]="act" (onClick)="actionClick.emit($event)" />
|
|
29007
29005
|
}
|
|
29008
29006
|
</div>
|
|
29007
|
+
@if (config().infoLink; as link) {
|
|
29008
|
+
<button type="button" class="sh-info-link" (click)="actionClick.emit(link.token ?? 'info')">
|
|
29009
|
+
{{ link.label }}
|
|
29010
|
+
</button>
|
|
29011
|
+
}
|
|
29009
29012
|
@if (config().subtitle) {
|
|
29010
29013
|
<p class="sh-subtitle">{{ config().subtitle }}</p>
|
|
29011
29014
|
}
|
|
29012
|
-
`, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-
|
|
29013
|
-
}], propDecorators: {
|
|
29015
|
+
`, styles: [":host{display:block}.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sh-title{font-size:1.125rem;font-weight:800;color:var(--val-ink, var(--ion-color-dark, #2f2a36));letter-spacing:-.01em;line-height:1.25;margin:0}.sh-info-link{display:inline-block;margin:4px 0 0;padding:0;background:none;border:none;cursor:pointer;font-size:.8125rem;font-family:inherit;font-weight:600;color:var(--val-section-header-cta-color, var(--ion-color-primary, #3880ff));line-height:1.4;text-align:start}.sh-subtitle{display:block;margin:4px 0 0;font-size:.8125rem;color:var(--val-ink-soft, var(--ion-color-medium, #92949c));line-height:1.4}\n"] }]
|
|
29016
|
+
}], propDecorators: { actionClick: [{
|
|
29014
29017
|
type: Output
|
|
29015
29018
|
}] } });
|
|
29016
29019
|
|