valtech-components 2.0.816 → 2.0.817

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.
@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
53
53
  * Current version of valtech-components.
54
54
  * This is automatically updated during the publish process.
55
55
  */
56
- const VERSION = '2.0.816';
56
+ const VERSION = '2.0.817';
57
57
 
58
58
  /**
59
59
  * Servicio para gestionar presets de componentes.
@@ -10826,17 +10826,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
10826
10826
  /**
10827
10827
  * val-pill
10828
10828
  *
10829
- * A pill/card component with customizable background and content.
10830
- * Supports presets for reusable configurations.
10829
+ * Has two modes:
10831
10830
  *
10832
- * @example With preset (recommended):
10833
- * <val-pill preset="info" [props]="{ content: {...} }"></val-pill>
10831
+ * 1. **Card mode** (legacy) — pass `content` (`ActionHeaderMetadata`). Renders a
10832
+ * large fun-card with a title + action. Backwards compatible.
10834
10833
  *
10835
- * @example Static (backwards compatible):
10836
- * <val-pill [props]="{ background: '#fff', bordered: true, content: {...} }"></val-pill>
10834
+ * 2. **Text-pill / badge mode** — pass `label`. Renders a compact rounded pill
10835
+ * with configurable `color`, `weight`, `size`, optional `icon`, and an
10836
+ * optional click action (`clickable` → emits `pillClick`).
10837
+ *
10838
+ * @example Text-pill (badge):
10839
+ * <val-pill [props]="{ label: 'v1.2.0', color: 'dark', weight: 'bold' }" />
10840
+ *
10841
+ * @example Clickable text-pill:
10842
+ * <val-pill
10843
+ * [props]="{ label: 'Beta', color: 'primary', clickable: true }"
10844
+ * (pillClick)="onClick($event)"
10845
+ * />
10846
+ *
10847
+ * @example Card mode (legacy):
10848
+ * <val-pill [props]="{ background: '#fff', bordered: true, content: {...} }" />
10837
10849
  *
10838
10850
  * @input preset: string - Name of preset to apply
10839
10851
  * @input props: PillMetadata - Configuration for the pill
10852
+ * @output pillClick: PillClickEvent - Emits when a clickable text-pill is activated
10840
10853
  */
10841
10854
  class PillComponent {
10842
10855
  constructor() {
@@ -10846,6 +10859,10 @@ class PillComponent {
10846
10859
  * Pill configuration object. Values here override preset values.
10847
10860
  */
10848
10861
  this.props = {};
10862
+ /**
10863
+ * Emits when a clickable text-pill is activated (click / Enter / Space).
10864
+ */
10865
+ this.pillClick = new EventEmitter();
10849
10866
  /**
10850
10867
  * Resolved props after merging preset + explicit props.
10851
10868
  */
@@ -10864,48 +10881,140 @@ class PillComponent {
10864
10881
  * Explicit props take precedence over preset values.
10865
10882
  */
10866
10883
  resolveProps() {
10867
- const presetProps = this.preset
10868
- ? this.presets.get('pill', this.preset)
10869
- : {};
10884
+ const presetProps = this.preset ? this.presets.get('pill', this.preset) : {};
10870
10885
  this.resolvedProps = {
10871
10886
  ...presetProps,
10872
10887
  ...this.props,
10873
10888
  };
10874
10889
  }
10890
+ /** Text-pill mode is active when a `label` is provided. */
10891
+ get isTextPill() {
10892
+ return !!this.resolvedProps.label;
10893
+ }
10894
+ /** Color variant for the text-pill, with a sensible default. */
10895
+ get pillColor() {
10896
+ return this.resolvedProps.color || 'medium';
10897
+ }
10898
+ /** Font weight for the text-pill, with a sensible default. */
10899
+ get pillWeight() {
10900
+ return this.resolvedProps.weight || 'medium';
10901
+ }
10902
+ /** Size for the text-pill, with a sensible default. */
10903
+ get pillSize() {
10904
+ return this.resolvedProps.size || 'small';
10905
+ }
10906
+ /** Handles activation of a clickable text-pill. */
10907
+ onPillClick(event) {
10908
+ if (!this.resolvedProps.clickable) {
10909
+ return;
10910
+ }
10911
+ // For the Space key, prevent the page from scrolling.
10912
+ event?.preventDefault();
10913
+ this.pillClick.emit({
10914
+ token: this.resolvedProps.token,
10915
+ label: this.resolvedProps.label,
10916
+ });
10917
+ }
10875
10918
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10876
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
10877
- <div
10878
- [id]="resolvedProps.token"
10879
- class="fun-card"
10880
- [class.bordered]="resolvedProps.bordered"
10881
- [class.hoverable]="resolvedProps.hoverable"
10882
- [ngStyle]="{
10883
- background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
10884
- }"
10885
- >
10886
- <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
10887
- </div>
10888
- `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }] }); }
10919
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { preset: "preset", props: "props" }, outputs: { pillClick: "pillClick" }, usesOnChanges: true, ngImport: i0, template: `
10920
+ @if (isTextPill) {
10921
+ <!-- Text-pill / badge mode -->
10922
+ <span
10923
+ class="val-pill"
10924
+ [class.val-pill--clickable]="resolvedProps.clickable"
10925
+ [class.val-pill--solid]="resolvedProps.solid"
10926
+ [class.val-pill--small]="pillSize === 'small'"
10927
+ [class.val-pill--medium]="pillSize === 'medium'"
10928
+ [class.val-pill--large]="pillSize === 'large'"
10929
+ [class.val-pill--w-normal]="pillWeight === 'normal'"
10930
+ [class.val-pill--w-medium]="pillWeight === 'medium'"
10931
+ [class.val-pill--w-bold]="pillWeight === 'bold'"
10932
+ [style.--val-pill-color]="'var(--ion-color-' + pillColor + ')'"
10933
+ [style.--val-pill-color-rgb]="'var(--ion-color-' + pillColor + '-rgb)'"
10934
+ [style.--val-pill-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
10935
+ [attr.role]="resolvedProps.clickable ? 'button' : null"
10936
+ [attr.tabindex]="resolvedProps.clickable ? 0 : null"
10937
+ [attr.aria-label]="resolvedProps.clickable ? resolvedProps.ariaLabel || resolvedProps.label : null"
10938
+ (click)="onPillClick()"
10939
+ (keydown.enter)="onPillClick()"
10940
+ (keydown.space)="onPillClick($event)"
10941
+ >
10942
+ @if (resolvedProps.icon) {
10943
+ <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" />
10944
+ }
10945
+ <span class="val-pill__label">{{ resolvedProps.label }}</span>
10946
+ </span>
10947
+ } @else {
10948
+ <!-- Card mode (legacy fun-card) -->
10949
+ <div
10950
+ [id]="resolvedProps.token"
10951
+ class="fun-card"
10952
+ [class.bordered]="resolvedProps.bordered"
10953
+ [class.hoverable]="resolvedProps.hoverable"
10954
+ [ngStyle]="{
10955
+ background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
10956
+ }"
10957
+ >
10958
+ @if (resolvedProps.content) {
10959
+ <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
10960
+ }
10961
+ </div>
10962
+ }
10963
+ `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}.val-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
10889
10964
  }
10890
10965
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PillComponent, decorators: [{
10891
10966
  type: Component,
10892
- args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, ActionHeaderComponent], template: `
10893
- <div
10894
- [id]="resolvedProps.token"
10895
- class="fun-card"
10896
- [class.bordered]="resolvedProps.bordered"
10897
- [class.hoverable]="resolvedProps.hoverable"
10898
- [ngStyle]="{
10899
- background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
10900
- }"
10901
- >
10902
- <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
10903
- </div>
10904
- `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}\n"] }]
10967
+ args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, ActionHeaderComponent, IonIcon], template: `
10968
+ @if (isTextPill) {
10969
+ <!-- Text-pill / badge mode -->
10970
+ <span
10971
+ class="val-pill"
10972
+ [class.val-pill--clickable]="resolvedProps.clickable"
10973
+ [class.val-pill--solid]="resolvedProps.solid"
10974
+ [class.val-pill--small]="pillSize === 'small'"
10975
+ [class.val-pill--medium]="pillSize === 'medium'"
10976
+ [class.val-pill--large]="pillSize === 'large'"
10977
+ [class.val-pill--w-normal]="pillWeight === 'normal'"
10978
+ [class.val-pill--w-medium]="pillWeight === 'medium'"
10979
+ [class.val-pill--w-bold]="pillWeight === 'bold'"
10980
+ [style.--val-pill-color]="'var(--ion-color-' + pillColor + ')'"
10981
+ [style.--val-pill-color-rgb]="'var(--ion-color-' + pillColor + '-rgb)'"
10982
+ [style.--val-pill-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
10983
+ [attr.role]="resolvedProps.clickable ? 'button' : null"
10984
+ [attr.tabindex]="resolvedProps.clickable ? 0 : null"
10985
+ [attr.aria-label]="resolvedProps.clickable ? resolvedProps.ariaLabel || resolvedProps.label : null"
10986
+ (click)="onPillClick()"
10987
+ (keydown.enter)="onPillClick()"
10988
+ (keydown.space)="onPillClick($event)"
10989
+ >
10990
+ @if (resolvedProps.icon) {
10991
+ <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" />
10992
+ }
10993
+ <span class="val-pill__label">{{ resolvedProps.label }}</span>
10994
+ </span>
10995
+ } @else {
10996
+ <!-- Card mode (legacy fun-card) -->
10997
+ <div
10998
+ [id]="resolvedProps.token"
10999
+ class="fun-card"
11000
+ [class.bordered]="resolvedProps.bordered"
11001
+ [class.hoverable]="resolvedProps.hoverable"
11002
+ [ngStyle]="{
11003
+ background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
11004
+ }"
11005
+ >
11006
+ @if (resolvedProps.content) {
11007
+ <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
11008
+ }
11009
+ </div>
11010
+ }
11011
+ `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}.val-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}\n"] }]
10905
11012
  }], propDecorators: { preset: [{
10906
11013
  type: Input
10907
11014
  }], props: [{
10908
11015
  type: Input
11016
+ }], pillClick: [{
11017
+ type: Output
10909
11018
  }] } });
10910
11019
 
10911
11020
  class CommandDisplayComponent {
@@ -24027,7 +24136,11 @@ class OAuthService {
24027
24136
  observer.error(storedData.error);
24028
24137
  }
24029
24138
  else if (storedData.tokens) {
24030
- console.log('[OAuthService] Retrieved tokens from localStorage fallback');
24139
+ console.log('[OAuthService] Retrieved tokens from localStorage fallback', {
24140
+ keys: Object.keys(storedData.tokens),
24141
+ hasFirebaseToken: !!storedData.tokens.firebaseToken,
24142
+ firebaseTokenLength: storedData.tokens.firebaseToken?.length ?? 0,
24143
+ });
24031
24144
  observer.next(storedData.tokens);
24032
24145
  observer.complete();
24033
24146
  }