@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-segmented.mjs","names":[],"sources":["../../../projects/ui/segmented/src/segmented.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { vdUniqueId } from '@vadem/ui/field';\n\nexport type VdSegmentedSize = 'sm' | 'md';\n\n/**\n * Single choice among a few options, shown as a segmented control. Each segment is a native\n * radio sharing one `name`, so arrow keys, Tab, RTL and form semantics come from the platform.\n * Spec: specs/segmented.md\n */\n@Component({\n  selector: 'vd-segmented',\n  template: `<ng-content />`,\n  host: {\n    class: 'vd-segmented',\n    role: 'radiogroup',\n    '[attr.data-size]': 'size()',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'isDisabled() || null',\n    '(focusout)': 'onFocusOut($event)',\n  },\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => VdSegmented), multi: true },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdSegmented implements ControlValueAccessor {\n  /** Selected segment value (two-way). */\n  readonly value = model<string | null>(null);\n  readonly size = input<VdSegmentedSize>('md');\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  /** Shared radio `name`. */\n  readonly name = vdUniqueId('vd-segmented');\n\n  private readonly formDisabled = signal(false);\n  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  private onChange: (value: string | null) => void = () => undefined;\n  private onTouched: () => void = () => undefined;\n\n  select(value: string): void {\n    if (this.isDisabled() || value === this.value()) return;\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) this.onTouched();\n  }\n\n  writeValue(value: string | null): void {\n    this.value.set(value ?? null);\n  }\n\n  registerOnChange(fn: (value: string | null) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean): void {\n    this.formDisabled.set(disabled);\n  }\n}\n\n/** One option of `vd-segmented`. Icon-only segments need `aria-label`. */\n@Component({\n  selector: 'vd-segment',\n  template: `\n    <input\n      type=\"radio\"\n      class=\"vd-segment__input\"\n      [name]=\"group.name\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : labelId\"\n      (change)=\"group.select(value())\"\n    />\n    <span class=\"vd-segment__label\" [id]=\"labelId\"><ng-content /></span>\n  `,\n  host: {\n    class: 'vd-segment',\n    '[attr.data-checked]': 'checked() ? \"\" : null',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.data-icon-only]': 'ariaLabel() ? \"\" : null',\n    // The name belongs to the radio, not the wrapper.\n    '[attr.aria-label]': 'null',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdSegment {\n  readonly value = input.required<string>();\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n  protected readonly group = inject(VdSegmented);\n  /** The radio isn't inside a <label>; the visible text names it. */\n  protected readonly labelId = vdUniqueId('vd-segment-label');\n  protected readonly checked = computed(() => this.group.value() === this.value());\n  protected readonly isDisabled = computed(() => this.disabled() || this.group.isDisabled());\n}\n"],"mappings":";;;;AAuCA,IAAa,cAAb,MAAa,YAAW;CAEb,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,OAAO,MAAuB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAGrD,OAAO,WAAW,cAAc;CAExB,eAAe,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,aAAa,eAAe,KAAK,SAAQ,KAAM,KAAK,aAAY,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEpE,iBAAiD;CACjD,kBAA8B;CAEtC,OAAO,OAAa;EAClB,IAAI,KAAK,WAAU,KAAM,UAAU,KAAK,MAAK,GAAI;EACjD,KAAK,MAAM,IAAI,KAAK;EACpB,KAAK,SAAS,KAAK;CACrB;CAEU,WAAW,OAAiB;EAEpC,IAAI,CADS,MAAM,cACT,SAAS,MAAM,aAA4B,GAAG,KAAK,UAAS;CACxE;CAEA,WAAW,OAAoB;EAC7B,KAAK,MAAM,IAAI,SAAS,IAAI;CAC9B;CAEA,iBAAiB,IAAkC;EACjD,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,UAAiB;EAChC,KAAK,aAAa,IAAI,QAAQ;CAChC;CAxCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,aAAA;GAAA,WAAA,EAAA,YAAA,qBAAA;GAAA,YAAA;IAAA,kBAAA;IAAA,sBAAA;IAAA,sBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,WANX,CACT;GAAE,SAAS;GAAmB,aAAa,iBAAiB,WAAW;GAAG,OAAO;EAAI,CACtF;EAAA,UAAA;EAAA,UAXS;EAAgB,UAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAef,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAjBvB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,MAAM;IACJ,OAAO;IACP,MAAM;IACN,oBAAoB;IACpB,wBAAwB;IACxB,wBAAwB;IACxB,cAAc;GACf;GACD,WAAW,CACT;IAAE,SAAS;IAAmB,aAAa,iBAAgB,WAAY;IAAG,OAAO;GAAI,CACtF;GACD,iBAAiB,wBAAwB;GACzC,eAAe,kBAAkB;EAClC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwED,IAAa,YAAb,MAAa,UAAS;CACX,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,YAAY,MAA0B,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAE5D,QAAQ,OAAO,WAAW;CAE1B,UAAU,WAAW,kBAAkB;CACvC,UAAU,eAAe,KAAK,MAAM,MAAK,MAAO,KAAK,MAAK,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC7D,aAAa,eAAe,KAAK,SAAQ,KAAM,KAAK,MAAM,WAAU,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAT/E,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,sBAAA;IAAA,uBAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAzBV;;;;;;;;;;;;;;EAaT,UAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAYU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EA3BrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;GAcV,MAAM;IACJ,OAAO;IACP,uBAAuB;IACvB,wBAAwB;IACxB,yBAAyB;IAEzB,qBAAqB;GACtB;GACD,iBAAiB,wBAAwB;GACzC,eAAe,kBAAkB;EAClC,CAAA"}