@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-autocomplete.mjs","names":[],"sources":["../../../projects/gabarit/autocomplete/autocomplete.ts","../../../projects/gabarit/autocomplete/autocomplete.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport { NgTemplateOutlet } from '@angular/common'\nimport { Subscription, isObservable, type Observable } from 'rxjs'\nimport { floatingPanelAnchor } from '@masmarino/gabarit/floating-panel'\n\nexport type AutocompleteSearchFn<T> = (query: string) => Observable<T[]> | Promise<T[]>\n\nlet nextAutocompleteId = 0\n\n@Component({\n  selector: 'gbt-autocomplete',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  templateUrl: './autocomplete.html',\n  styleUrl: './autocomplete.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(window:scroll)': 'updatePanelPosition()',\n    '(window:resize)': 'updatePanelPosition()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => Autocomplete),\n      multi: true,\n    },\n  ],\n})\nexport class Autocomplete<T = unknown> implements ControlValueAccessor, OnDestroy {\n  private readonly elementRef = inject(ElementRef)\n\n  id = input<string>(`gbt-autocomplete-${++nextAutocompleteId}`)\n  label = input<string>('')\n  placeholder = input<string>('')\n  disabled = input(false, { transform: booleanAttribute })\n  required = input(false, { transform: booleanAttribute })\n  errorMessage = input<string | null>(null)\n  search = input.required<AutocompleteSearchFn<T>>()\n  displayFn = input<(item: T) => string>((item) => String(item))\n  itemTemplate = input<TemplateRef<unknown>>()\n  debounceMs = input<number>(300)\n  minLength = input<number>(1)\n  loadingMessage = input<string>('Searching…')\n  noResultsMessage = input<string>('No results')\n  searchErrorMessage = input<string>('Search failed')\n  resultsAnnouncement = input<(count: number) => string>(\n    (count) => `${count} result${count !== 1 ? 's' : ''}`,\n  )\n\n  itemSelected = output<T>()\n\n  protected readonly query = signal('')\n  protected readonly open = signal(false)\n  protected readonly results = signal<T[]>([])\n  protected readonly loading = signal(false)\n  protected readonly searchFailed = signal(false)\n  protected readonly activeIndex = signal(0)\n  protected readonly selectedItem = signal<T | null>(null)\n  protected readonly panelStyle = signal<{ top: string; left: string; width: string } | null>(null)\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  protected readonly hasNoResults = computed(\n    () => this.open() && !this.loading() && !this.searchFailed() && this.results().length === 0,\n  )\n\n  protected readonly activeOptionId = computed(() =>\n    this.open() && this.results().length > 0 ? `${this.id()}-option-${this.activeIndex()}` : null,\n  )\n\n  private onChange: (value: T | null) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  private requestSeq = 0\n  private debounceHandle?: ReturnType<typeof setTimeout>\n  private subscription?: Subscription\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled)\n  }\n\n  writeValue(value: T | null): void {\n    this.selectedItem.set(value)\n    this.query.set(value === null || value === undefined ? '' : this.displayFn()(value))\n  }\n\n  registerOnChange(fn: (value: T | null) => void): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn\n  }\n\n  protected onInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value\n    this.query.set(value)\n    this.activeIndex.set(0)\n    if (this.selectedItem() !== null) {\n      this.selectedItem.set(null)\n      this.onChange(null)\n    }\n    this.scheduleSearch(value)\n  }\n\n  protected onFocus(): void {\n    if (\n      this.query().trim().length >= this.minLength() &&\n      (this.results().length > 0 || this.searchFailed())\n    ) {\n      this.open.set(true)\n      this.updatePanelPosition()\n    }\n  }\n\n  protected onBlur(): void {\n    this.onTouched()\n    setTimeout(() => {\n      if (!this.elementRef.nativeElement.contains(document.activeElement)) {\n        this.open.set(false)\n      }\n    }, 200)\n  }\n\n  private scheduleSearch(value: string): void {\n    clearTimeout(this.debounceHandle)\n    if (value.trim().length < this.minLength()) {\n      this.requestSeq++\n      this.subscription?.unsubscribe()\n      this.open.set(false)\n      this.results.set([])\n      this.loading.set(false)\n      this.searchFailed.set(false)\n      return\n    }\n    this.debounceHandle = setTimeout(() => this.runSearch(value), this.debounceMs())\n  }\n\n  private runSearch(query: string): void {\n    const seq = ++this.requestSeq\n    this.subscription?.unsubscribe()\n    this.loading.set(true)\n    this.searchFailed.set(false)\n    this.open.set(true)\n    this.updatePanelPosition()\n\n    const applyResults = (items: T[]): void => {\n      if (seq !== this.requestSeq) return\n      this.results.set(items)\n      this.loading.set(false)\n      this.activeIndex.set(0)\n      this.updatePanelPosition()\n    }\n    const applyError = (): void => {\n      if (seq !== this.requestSeq) return\n      this.results.set([])\n      this.loading.set(false)\n      this.searchFailed.set(true)\n      this.updatePanelPosition()\n    }\n\n    const result = this.search()(query)\n    if (isObservable(result)) {\n      this.subscription = result.subscribe({ next: applyResults, error: applyError })\n    } else {\n      result.then(applyResults, applyError)\n    }\n  }\n\n  protected updatePanelPosition(): void {\n    const trigger = this.elementRef.nativeElement.querySelector(\n      '.gbt-autocomplete__input',\n    ) as HTMLElement | null\n    const anchor = floatingPanelAnchor(this.open(), trigger)\n    if (anchor) {\n      this.panelStyle.set({\n        top: `${anchor.bottom}px`,\n        left: `${anchor.left}px`,\n        width: `${anchor.rect.width}px`,\n      })\n    }\n  }\n\n  protected selectOption(item: T): void {\n    this.selectedItem.set(item)\n    this.query.set(this.displayFn()(item))\n    this.results.set([])\n    this.open.set(false)\n    this.onChange(item)\n    this.onTouched()\n    this.itemSelected.emit(item)\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.isDisabled()) {\n      return\n    }\n    if (event.key === 'Escape') {\n      if (this.open()) {\n        event.preventDefault()\n        event.stopPropagation()\n        this.open.set(false)\n      }\n      return\n    }\n    if (!this.open() || this.results().length === 0) {\n      return\n    }\n    const results = this.results()\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        this.activeIndex.update((i) => Math.min(i + 1, results.length - 1))\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        this.activeIndex.update((i) => Math.max(i - 1, 0))\n        break\n      case 'Enter': {\n        event.preventDefault()\n        const active = results[this.activeIndex()]\n        if (active) {\n          this.selectOption(active)\n        }\n        break\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    clearTimeout(this.debounceHandle)\n    this.subscription?.unsubscribe()\n  }\n}\n","<div class=\"gbt-autocomplete\" [class.gbt-autocomplete--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-autocomplete__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <input\n    [id]=\"id()\"\n    type=\"text\"\n    class=\"gbt-autocomplete__input\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"query()\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n\n  @if (open()) {\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n      @if (loading()) {\n        {{ loadingMessage() }}\n      } @else if (searchFailed()) {\n        {{ searchErrorMessage() }}\n      } @else {\n        {{ resultsAnnouncement()(results().length) }}\n      }\n    </div>\n  }\n\n  @if (open() && panelStyle(); as style) {\n    <div\n      class=\"gbt-autocomplete__panel\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      @if (loading()) {\n        <div class=\"gbt-autocomplete__state\" role=\"status\">\n          <span>{{ loadingMessage() }}</span>\n        </div>\n      } @else if (searchFailed()) {\n        <div class=\"gbt-autocomplete__state gbt-autocomplete__state--error\" role=\"alert\">\n          <span>{{ searchErrorMessage() }}</span>\n        </div>\n      } @else if (hasNoResults()) {\n        <div class=\"gbt-autocomplete__state\" role=\"status\">\n          <span>{{ noResultsMessage() }}</span>\n        </div>\n      } @else {\n        <ul\n          [id]=\"id() + '-listbox'\"\n          class=\"gbt-autocomplete__list\"\n          role=\"listbox\"\n          [attr.aria-label]=\"label() || placeholder()\"\n        >\n          @for (item of results(); track $index; let i = $index) {\n            <li role=\"presentation\">\n              <button\n                [id]=\"id() + '-option-' + i\"\n                type=\"button\"\n                role=\"option\"\n                tabindex=\"-1\"\n                class=\"gbt-autocomplete__option\"\n                [class.gbt-autocomplete__option--active]=\"i === activeIndex()\"\n                [attr.aria-selected]=\"i === activeIndex()\"\n                (click)=\"selectOption(item)\"\n                (mouseenter)=\"activeIndex.set(i)\"\n              >\n                @if (itemTemplate(); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                } @else {\n                  <span class=\"gbt-autocomplete__option-label\">{{ displayFn()(item) }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-autocomplete__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n"],"mappings":";;;;;;AAqBA,IAAI,qBAAqB;AAqBzB,IAAa,eAAb,MAAa,aAAY;CACN,aAAa,OAAO,UAAU;CAE/C,KAAK,MAAc,oBAAoB,EAAE,sBAAqB,GAAA,YAAA,CAAA,EAAA,WAAA,KAAA,CAAA,+BAAA,CAAA,CAAA;CAC9D,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,cAAc,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,eAAe,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,SAAS,MAAM,SAAmC,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClD,YAAY,OAA4B,SAAS,OAAO,IAAI,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC9D,eAAe,MAA6B,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,aAAa,MAAc,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,YAAY,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,iBAAiB,MAAc,cAAa,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,mBAAmB,MAAc,cAAa,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,qBAAqB,MAAc,iBAAgB,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CACnD,sBAAsB,OACnB,UAAU,GAAG,MAAK,SAAU,UAAU,IAAI,MAAM,MAClD,GAAA,YAAA,CAAA,EAAA,WAAA,sBAAA,CAAA,+BAAA,CAAA,CAAA;CAED,eAAe,OAAM;CAEF,QAAQ,OAAO,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,OAAO,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACpB,UAAU,OAAY,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,UAAU,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,eAAe,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,cAAc,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,eAAe,OAAiB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACrC,aAAa,OAA4D,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEhF,eAAe,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,aAAa,eAAe,KAAK,SAAQ,KAAM,KAAK,aAAY,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEnE,eAAe,eAC1B,KAAK,KAAI,KAAM,CAAC,KAAK,QAAO,KAAM,CAAC,KAAK,aAAY,KAAM,KAAK,QAAO,CAAE,CAAC,WAAW,GAC3F,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,iBAAiB,eAClC,KAAK,KAAI,KAAM,KAAK,QAAO,CAAE,CAAC,SAAS,IAAI,GAAG,KAAK,GAAE,EAAE,UAAW,KAAK,YAAW,MAAO,MAC1F,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEO,iBAA2C,CAAE;CAC7C,kBAA6B,CAAE;CAE/B,aAAa;CACb;CACA;CAER,iBAAiB,YAAmB;EAClC,KAAK,aAAa,IAAI,UAAU;CAClC;CAEA,WAAW,OAAe;EACxB,KAAK,aAAa,IAAI,KAAK;EAC3B,KAAK,MAAM,IAAI,UAAU,QAAQ,UAAU,SAAY,KAAK,KAAK,UAAS,CAAE,CAAC,KAAK,CAAC;CACrF;CAEA,iBAAiB,IAA6B;EAC5C,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEU,QAAQ,OAAY;EAC5B,MAAM,QAAS,MAAM,OAA4B;EACjD,KAAK,MAAM,IAAI,KAAK;EACpB,KAAK,YAAY,IAAI,CAAC;EACtB,IAAI,KAAK,aAAY,MAAO,MAAM;GAChC,KAAK,aAAa,IAAI,IAAI;GAC1B,KAAK,SAAS,IAAI;EACpB;EACA,KAAK,eAAe,KAAK;CAC3B;CAEU,UAAO;EACf,IACE,KAAK,MAAK,CAAE,CAAC,KAAI,CAAE,CAAC,UAAU,KAAK,UAAS,MAC3C,KAAK,QAAO,CAAE,CAAC,SAAS,KAAK,KAAK,aAAY,IAC/C;GACA,KAAK,KAAK,IAAI,IAAI;GAClB,KAAK,oBAAmB;EAC1B;CACF;CAEU,SAAM;EACd,KAAK,UAAS;EACd,iBAAgB;GACd,IAAI,CAAC,KAAK,WAAW,cAAc,SAAS,SAAS,aAAa,GAChE,KAAK,KAAK,IAAI,KAAK;EAEvB,GAAG,GAAG;CACR;CAEQ,eAAe,OAAa;EAClC,aAAa,KAAK,cAAc;EAChC,IAAI,MAAM,KAAI,CAAE,CAAC,SAAS,KAAK,UAAS,GAAI;GAC1C,KAAK;GACL,KAAK,cAAc,YAAW;GAC9B,KAAK,KAAK,IAAI,KAAK;GACnB,KAAK,QAAQ,IAAI,CAAA,CAAE;GACnB,KAAK,QAAQ,IAAI,KAAK;GACtB,KAAK,aAAa,IAAI,KAAK;GAC3B;EACF;EACA,KAAK,iBAAiB,iBAAiB,KAAK,UAAU,KAAK,GAAG,KAAK,WAAU,CAAE;CACjF;CAEQ,UAAU,OAAa;EAC7B,MAAM,MAAM,EAAE,KAAK;EACnB,KAAK,cAAc,YAAW;EAC9B,KAAK,QAAQ,IAAI,IAAI;EACrB,KAAK,aAAa,IAAI,KAAK;EAC3B,KAAK,KAAK,IAAI,IAAI;EAClB,KAAK,oBAAmB;EAExB,MAAM,gBAAgB,UAAoB;GACxC,IAAI,QAAQ,KAAK,YAAY;GAC7B,KAAK,QAAQ,IAAI,KAAK;GACtB,KAAK,QAAQ,IAAI,KAAK;GACtB,KAAK,YAAY,IAAI,CAAC;GACtB,KAAK,oBAAmB;EAC1B;EACA,MAAM,mBAAwB;GAC5B,IAAI,QAAQ,KAAK,YAAY;GAC7B,KAAK,QAAQ,IAAI,CAAA,CAAE;GACnB,KAAK,QAAQ,IAAI,KAAK;GACtB,KAAK,aAAa,IAAI,IAAI;GAC1B,KAAK,oBAAmB;EAC1B;EAEA,MAAM,SAAS,KAAK,OAAM,CAAE,CAAC,KAAK;EAClC,IAAI,aAAa,MAAM,GACrB,KAAK,eAAe,OAAO,UAAU;GAAE,MAAM;GAAc,OAAO;EAAU,CAAE;OAE9E,OAAO,KAAK,cAAc,UAAU;CAExC;CAEU,sBAAmB;EAC3B,MAAM,UAAU,KAAK,WAAW,cAAc,cAC5C,0BAA0B;EAE5B,MAAM,SAAS,oBAAoB,KAAK,KAAI,GAAI,OAAO;EACvD,IAAI,QACF,KAAK,WAAW,IAAI;GAClB,KAAK,GAAG,OAAO,OAAM;GACrB,MAAM,GAAG,OAAO,KAAI;GACpB,OAAO,GAAG,OAAO,KAAK,MAAK;EAC5B,CAAA;CAEL;CAEU,aAAa,MAAO;EAC5B,KAAK,aAAa,IAAI,IAAI;EAC1B,KAAK,MAAM,IAAI,KAAK,UAAS,CAAE,CAAC,IAAI,CAAC;EACrC,KAAK,QAAQ,IAAI,CAAA,CAAE;EACnB,KAAK,KAAK,IAAI,KAAK;EACnB,KAAK,SAAS,IAAI;EAClB,KAAK,UAAS;EACd,KAAK,aAAa,KAAK,IAAI;CAC7B;CAEU,UAAU,OAAoB;EACtC,IAAI,KAAK,WAAU,GACjB;EAEF,IAAI,MAAM,QAAQ,UAAU;GAC1B,IAAI,KAAK,KAAI,GAAI;IACf,MAAM,eAAc;IACpB,MAAM,gBAAe;IACrB,KAAK,KAAK,IAAI,KAAK;GACrB;GACA;EACF;EACA,IAAI,CAAC,KAAK,KAAI,KAAM,KAAK,QAAO,CAAE,CAAC,WAAW,GAC5C;EAEF,MAAM,UAAU,KAAK,QAAO;EAC5B,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,YAAY,QAAQ,MAAM,KAAK,IAAI,IAAI,GAAG,QAAQ,SAAS,CAAC,CAAC;IAClE;GACF,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,YAAY,QAAQ,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC;IACjD;GACF,KAAK,SAAS;IACZ,MAAM,eAAc;IACpB,MAAM,SAAS,QAAQ,KAAK,YAAW;IACvC,IAAI,QACF,KAAK,aAAa,MAAM;IAE1B;GACF;EACF;CACF;CAEA,cAAW;EACT,aAAa,KAAK,cAAc;EAChC,KAAK,cAAc,YAAW;CAChC;CA7MW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,IAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,qBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,cAAA,eAAA;EAAA,MAAA,EAAA,WAAA;GAAA,iBAAA;GAAA,iBAAA;EAAA,EAAA;EAAA,WARZ,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,YAAY;GAC1C,OAAO;EACR,CACF;EAAA,UAAA;EAAA,UCxCH;EAuGA,QAAA,CAAA,65EAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MD7EY;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAgBf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAnBxB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,SACP,CAAC,gBAAgB;GAAC,iBAGV,wBAAwB;GAAM,MACzC;IACJ,mBAAmB;IACnB,mBAAmB;GACpB;GAAA,WACU,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,YAAa;IAC1C,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,65EAAA;EAAA,CAAA"}

package/fesm2022/masmarino-gabarit-avatar-group.mjs

@@ -0,0 +1,199 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input, output, signal } from "@angular/core";
+import { Avatar } from "@masmarino/gabarit/avatar";
+import { Icon } from "@masmarino/gabarit/icon";
+var AvatarGroup = class AvatarGroup {
+	elementRef = inject(ElementRef);
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	max = input(5, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Users", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	moreLabel = input((count) => `${count} more`, ...ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []);
+	activeItem = input(null, ...ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	panelOpen = signal(false, ...ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []);
+	panelStyle = signal(null, ...ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []);
+	visibleItems = computed(() => this.items().slice(0, this.max()), ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+	overflowItems = computed(() => this.items().slice(this.max()), ...ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []);
+	overflowCount = computed(() => this.overflowItems().length, ...ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []);
+	isActive(item) {
+		return this.activeItem() === item;
+	}
+	selectItem(item) {
+		this.itemClick.emit(item);
+		this.panelOpen.set(false);
+	}
+	toggleOverflowPanel() {
+		this.panelOpen.update((value) => !value);
+		if (this.panelOpen()) this.updatePanelPosition();
+	}
+	updatePanelPosition() {
+		if (!this.panelOpen()) return;
+		const trigger = this.elementRef.nativeElement.querySelector(".gbt-avatar-group__more");
+		if (!trigger) return;
+		const rect = trigger.getBoundingClientRect();
+		this.panelStyle.set({
+			top: `${rect.bottom + 6}px`,
+			left: `${rect.left}px`
+		});
+	}
+	handleClickOutside(event) {
+		if (this.panelOpen() && !this.elementRef.nativeElement.contains(event.target)) this.panelOpen.set(false);
+	}
+	onKeydown(event) {
+		if (event.key === "Escape" && this.panelOpen()) {
+			event.preventDefault();
+			event.stopPropagation();
+			this.panelOpen.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AvatarGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AvatarGroup,
+		isStandalone: true,
+		selector: "gbt-avatar-group",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moreLabel: {
+				classPropertyName: "moreLabel",
+				publicName: "moreLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeItem: {
+				classPropertyName: "activeItem",
+				publicName: "activeItem",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		host: { listeners: {
+			"document:click": "handleClickOutside($event)",
+			"keydown": "onKeydown($event)",
+			"window:scroll": "updatePanelPosition()",
+			"window:resize": "updatePanelPosition()"
+		} },
+		ngImport: i0,
+		template: "<ul class=\"gbt-avatar-group__list\" [attr.aria-label]=\"ariaLabel()\">\n  @for (item of visibleItems(); track $index) {\n    <li class=\"gbt-avatar-group__item\">\n      <button\n        type=\"button\"\n        class=\"gbt-avatar-group__button\"\n        [class.gbt-avatar-group__button--active]=\"isActive(item)\"\n        [attr.aria-label]=\"item.name\"\n        [attr.aria-current]=\"isActive(item) ? 'true' : null\"\n        (click)=\"selectItem(item)\"\n      >\n        <gbt-avatar [name]=\"item.name\" [src]=\"item.src ?? null\" size=\"md\" />\n      </button>\n    </li>\n  }\n  @if (overflowCount() > 0) {\n    <li class=\"gbt-avatar-group__item\">\n      <button\n        type=\"button\"\n        class=\"gbt-avatar-group__more\"\n        aria-haspopup=\"menu\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-label]=\"moreLabel()(overflowCount())\"\n        (click)=\"toggleOverflowPanel()\"\n      >\n        +{{ overflowCount() }}\n      </button>\n    </li>\n  }\n</ul>\n\n@if (panelOpen() && panelStyle(); as style) {\n  <ul\n    class=\"gbt-avatar-group__panel\"\n    role=\"menu\"\n    [attr.aria-label]=\"moreLabel()(overflowCount())\"\n    [style.top]=\"style.top\"\n    [style.left]=\"style.left\"\n  >\n    @for (item of overflowItems(); track $index) {\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          class=\"gbt-avatar-group__panel-item\"\n          [attr.aria-current]=\"isActive(item) ? 'true' : null\"\n          (click)=\"selectItem(item)\"\n        >\n          <gbt-avatar [name]=\"item.name\" [src]=\"item.src ?? null\" size=\"sm\" />\n          <span class=\"gbt-avatar-group__panel-item-name\">{{ item.name }}</span>\n          @if (isActive(item)) {\n            <gbt-icon name=\"check\" class=\"gbt-avatar-group__panel-item-check\" aria-hidden=\"true\" />\n          }\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
+		styles: [":host{display:inline-flex}.gbt-avatar-group__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}.gbt-avatar-group__item{display:flex}.gbt-avatar-group__item:not(:first-child){margin-left:-8px}.gbt-avatar-group__button,.gbt-avatar-group__more{position:relative;box-sizing:border-box;display:inline-flex;padding:0;border:none;border-radius:50%;background:none;cursor:pointer;box-shadow:0 0 0 2px var(--bg-principal);transition:transform .12s cubic-bezier(.4,0,.2,1)}.gbt-avatar-group__button:hover,.gbt-avatar-group__button:focus-visible,.gbt-avatar-group__more:hover,.gbt-avatar-group__more:focus-visible{z-index:1;transform:translateY(-2px)}.gbt-avatar-group__button:focus-visible,.gbt-avatar-group__more:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-avatar-group__button--active{box-shadow:0 0 0 2px var(--bg-principal),0 0 0 4px var(--primary)}.gbt-avatar-group__more{align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-panel);color:var(--text-secondary);font-size:12px;font-weight:600}.gbt-avatar-group__panel{box-sizing:border-box;position:fixed;z-index:1000;margin:0;padding:6px;max-height:280px;overflow-y:auto;list-style:none;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-avatar-group-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-avatar-group__panel::-webkit-scrollbar{width:6px}.gbt-avatar-group__panel::-webkit-scrollbar-track{background:transparent}.gbt-avatar-group__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-avatar-group__panel-item{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;background:transparent;border:none;border-radius:var(--gbt-radius-tile, 4px);color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-avatar-group__panel-item:hover,.gbt-avatar-group__panel-item:focus-visible{background:var(--bg-hover)}.gbt-avatar-group__panel-item-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-avatar-group__panel-item-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-avatar-group-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-avatar-group__panel{animation:none}.gbt-avatar-group__button,.gbt-avatar-group__more{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Avatar,
+			selector: "gbt-avatar",
+			inputs: [
+				"name",
+				"src",
+				"size"
+			]
+		}, {
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AvatarGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-avatar-group",
+			standalone: true,
+			imports: [Avatar, Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(document:click)": "handleClickOutside($event)",
+				"(keydown)": "onKeydown($event)",
+				"(window:scroll)": "updatePanelPosition()",
+				"(window:resize)": "updatePanelPosition()"
+			},
+			template: "<ul class=\"gbt-avatar-group__list\" [attr.aria-label]=\"ariaLabel()\">\n  @for (item of visibleItems(); track $index) {\n    <li class=\"gbt-avatar-group__item\">\n      <button\n        type=\"button\"\n        class=\"gbt-avatar-group__button\"\n        [class.gbt-avatar-group__button--active]=\"isActive(item)\"\n        [attr.aria-label]=\"item.name\"\n        [attr.aria-current]=\"isActive(item) ? 'true' : null\"\n        (click)=\"selectItem(item)\"\n      >\n        <gbt-avatar [name]=\"item.name\" [src]=\"item.src ?? null\" size=\"md\" />\n      </button>\n    </li>\n  }\n  @if (overflowCount() > 0) {\n    <li class=\"gbt-avatar-group__item\">\n      <button\n        type=\"button\"\n        class=\"gbt-avatar-group__more\"\n        aria-haspopup=\"menu\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-label]=\"moreLabel()(overflowCount())\"\n        (click)=\"toggleOverflowPanel()\"\n      >\n        +{{ overflowCount() }}\n      </button>\n    </li>\n  }\n</ul>\n\n@if (panelOpen() && panelStyle(); as style) {\n  <ul\n    class=\"gbt-avatar-group__panel\"\n    role=\"menu\"\n    [attr.aria-label]=\"moreLabel()(overflowCount())\"\n    [style.top]=\"style.top\"\n    [style.left]=\"style.left\"\n  >\n    @for (item of overflowItems(); track $index) {\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          class=\"gbt-avatar-group__panel-item\"\n          [attr.aria-current]=\"isActive(item) ? 'true' : null\"\n          (click)=\"selectItem(item)\"\n        >\n          <gbt-avatar [name]=\"item.name\" [src]=\"item.src ?? null\" size=\"sm\" />\n          <span class=\"gbt-avatar-group__panel-item-name\">{{ item.name }}</span>\n          @if (isActive(item)) {\n            <gbt-icon name=\"check\" class=\"gbt-avatar-group__panel-item-check\" aria-hidden=\"true\" />\n          }\n        </button>\n      </li>\n    }\n  </ul>\n}\n",
+			styles: [":host{display:inline-flex}.gbt-avatar-group__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}.gbt-avatar-group__item{display:flex}.gbt-avatar-group__item:not(:first-child){margin-left:-8px}.gbt-avatar-group__button,.gbt-avatar-group__more{position:relative;box-sizing:border-box;display:inline-flex;padding:0;border:none;border-radius:50%;background:none;cursor:pointer;box-shadow:0 0 0 2px var(--bg-principal);transition:transform .12s cubic-bezier(.4,0,.2,1)}.gbt-avatar-group__button:hover,.gbt-avatar-group__button:focus-visible,.gbt-avatar-group__more:hover,.gbt-avatar-group__more:focus-visible{z-index:1;transform:translateY(-2px)}.gbt-avatar-group__button:focus-visible,.gbt-avatar-group__more:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-avatar-group__button--active{box-shadow:0 0 0 2px var(--bg-principal),0 0 0 4px var(--primary)}.gbt-avatar-group__more{align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-panel);color:var(--text-secondary);font-size:12px;font-weight:600}.gbt-avatar-group__panel{box-sizing:border-box;position:fixed;z-index:1000;margin:0;padding:6px;max-height:280px;overflow-y:auto;list-style:none;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-avatar-group-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-avatar-group__panel::-webkit-scrollbar{width:6px}.gbt-avatar-group__panel::-webkit-scrollbar-track{background:transparent}.gbt-avatar-group__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-avatar-group__panel-item{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;background:transparent;border:none;border-radius:var(--gbt-radius-tile, 4px);color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-avatar-group__panel-item:hover,.gbt-avatar-group__panel-item:focus-visible{background:var(--bg-hover)}.gbt-avatar-group__panel-item-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-avatar-group__panel-item-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-avatar-group-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-avatar-group__panel{animation:none}.gbt-avatar-group__button,.gbt-avatar-group__more{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		moreLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moreLabel",
+				required: false
+			}]
+		}],
+		activeItem: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeItem",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+export { AvatarGroup };
+
+//# sourceMappingURL=masmarino-gabarit-avatar-group.mjs.map

package/fesm2022/masmarino-gabarit-avatar-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-avatar-group.mjs","names":[],"sources":["../../../projects/gabarit/avatar-group/avatar-group.ts","../../../projects/gabarit/avatar-group/avatar-group.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core'\nimport { Avatar } from '@masmarino/gabarit/avatar'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport interface AvatarGroupItem {\n  name: string\n  src?: string\n}\n\n@Component({\n  selector: 'gbt-avatar-group',\n  standalone: true,\n  imports: [Avatar, Icon],\n  templateUrl: './avatar-group.html',\n  styleUrl: './avatar-group.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(document:click)': 'handleClickOutside($event)',\n    '(keydown)': 'onKeydown($event)',\n    '(window:scroll)': 'updatePanelPosition()',\n    '(window:resize)': 'updatePanelPosition()',\n  },\n})\nexport class AvatarGroup<T extends AvatarGroupItem = AvatarGroupItem> {\n  private readonly elementRef = inject(ElementRef)\n\n  items = input.required<T[]>()\n  max = input<number>(5)\n  ariaLabel = input<string>('Users')\n  moreLabel = input<(count: number) => string>((count) => `${count} more`)\n  activeItem = input<T | null>(null)\n\n  itemClick = output<T>()\n\n  protected readonly panelOpen = signal(false)\n  protected readonly panelStyle = signal<{ top: string; left: string } | null>(null)\n\n  protected readonly visibleItems = computed(() => this.items().slice(0, this.max()))\n  protected readonly overflowItems = computed(() => this.items().slice(this.max()))\n  protected readonly overflowCount = computed(() => this.overflowItems().length)\n\n  protected isActive(item: T): boolean {\n    return this.activeItem() === item\n  }\n\n  protected selectItem(item: T): void {\n    this.itemClick.emit(item)\n    this.panelOpen.set(false)\n  }\n\n  protected toggleOverflowPanel(): void {\n    this.panelOpen.update((value) => !value)\n    if (this.panelOpen()) {\n      this.updatePanelPosition()\n    }\n  }\n\n  protected updatePanelPosition(): void {\n    if (!this.panelOpen()) {\n      return\n    }\n    const trigger = this.elementRef.nativeElement.querySelector(\n      '.gbt-avatar-group__more',\n    ) as HTMLElement | null\n    if (!trigger) {\n      return\n    }\n    const rect = trigger.getBoundingClientRect()\n    this.panelStyle.set({\n      top: `${rect.bottom + 6}px`,\n      left: `${rect.left}px`,\n    })\n  }\n\n  protected handleClickOutside(event: MouseEvent): void {\n    if (this.panelOpen() && !this.elementRef.nativeElement.contains(event.target)) {\n      this.panelOpen.set(false)\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.panelOpen()) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.panelOpen.set(false)\n    }\n  }\n}\n","<ul class=\"gbt-avatar-group__list\" [attr.aria-label]=\"ariaLabel()\">\n  @for (item of visibleItems(); track $index) {\n    <li class=\"gbt-avatar-group__item\">\n      <button\n        type=\"button\"\n        class=\"gbt-avatar-group__button\"\n        [class.gbt-avatar-group__button--active]=\"isActive(item)\"\n        [attr.aria-label]=\"item.name\"\n        [attr.aria-current]=\"isActive(item) ? 'true' : null\"\n        (click)=\"selectItem(item)\"\n      >\n        <gbt-avatar [name]=\"item.name\" [src]=\"item.src ?? null\" size=\"md\" />\n      </button>\n    </li>\n  }\n  @if (overflowCount() > 0) {\n    <li class=\"gbt-avatar-group__item\">\n      <button\n        type=\"button\"\n        class=\"gbt-avatar-group__more\"\n        aria-haspopup=\"menu\"\n        [attr.aria-expanded]=\"panelOpen()\"\n        [attr.aria-label]=\"moreLabel()(overflowCount())\"\n        (click)=\"toggleOverflowPanel()\"\n      >\n        +{{ overflowCount() }}\n      </button>\n    </li>\n  }\n</ul>\n\n@if (panelOpen() && panelStyle(); as style) {\n  <ul\n    class=\"gbt-avatar-group__panel\"\n    role=\"menu\"\n    [attr.aria-label]=\"moreLabel()(overflowCount())\"\n    [style.top]=\"style.top\"\n    [style.left]=\"style.left\"\n  >\n    @for (item of overflowItems(); track $index) {\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          class=\"gbt-avatar-group__panel-item\"\n          [attr.aria-current]=\"isActive(item) ? 'true' : null\"\n          (click)=\"selectItem(item)\"\n        >\n          <gbt-avatar [name]=\"item.name\" [src]=\"item.src ?? null\" size=\"sm\" />\n          <span class=\"gbt-avatar-group__panel-item-name\">{{ item.name }}</span>\n          @if (isActive(item)) {\n            <gbt-icon name=\"check\" class=\"gbt-avatar-group__panel-item-check\" aria-hidden=\"true\" />\n          }\n        </button>\n      </li>\n    }\n  </ul>\n}\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-avatar.mjs

@@ -0,0 +1,107 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from "@angular/core";
+import { computeInitials } from "@masmarino/gabarit/format";
+var Avatar = class Avatar {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	imageFailed = linkedSignal({
+		...ngDevMode ? { debugName: "imageFailed" } : /* istanbul ignore next */ {},
+		source: this.src,
+		computation: () => false
+	});
+	showImage = computed(() => !!this.src() && !this.imageFailed(), ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
+	initials = computed(() => computeInitials(this.name()), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	onImageError() {
+		this.imageFailed.set(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Avatar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Avatar,
+		isStandalone: true,
+		selector: "gbt-avatar",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "attr.data-size": "size()" } },
+		ngImport: i0,
+		template: "@if (showImage()) {\n  <img class=\"gbt-avatar__image\" [src]=\"src()\" [alt]=\"name()\" (error)=\"onImageError()\" />\n} @else {\n  <span class=\"gbt-avatar__initials\" [attr.aria-label]=\"name()\">{{ initials() }}</span>\n}\n",
+		styles: [":host{box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:var(--primary);color:var(--text-on-primary);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none}:host[data-size=sm]{width:24px;height:24px;font-size:10px}:host[data-size=md]{width:32px;height:32px;font-size:13px}:host[data-size=lg]{width:48px;height:48px;font-size:18px}.gbt-avatar__image{width:100%;height:100%;object-fit:cover}.gbt-avatar__initials{display:inline-flex;align-items:center;justify-content:center}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Avatar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-avatar",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[attr.data-size]": "size()" },
+			template: "@if (showImage()) {\n  <img class=\"gbt-avatar__image\" [src]=\"src()\" [alt]=\"name()\" (error)=\"onImageError()\" />\n} @else {\n  <span class=\"gbt-avatar__initials\" [attr.aria-label]=\"name()\">{{ initials() }}</span>\n}\n",
+			styles: [":host{box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:var(--primary);color:var(--text-on-primary);font-weight:600;line-height:1;-webkit-user-select:none;user-select:none}:host[data-size=sm]{width:24px;height:24px;font-size:10px}:host[data-size=md]{width:32px;height:32px;font-size:13px}:host[data-size=lg]{width:48px;height:48px;font-size:18px}.gbt-avatar__image{width:100%;height:100%;object-fit:cover}.gbt-avatar__initials{display:inline-flex;align-items:center;justify-content:center}\n"]
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
+export { Avatar };
+
+//# sourceMappingURL=masmarino-gabarit-avatar.mjs.map

package/fesm2022/masmarino-gabarit-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-avatar.mjs","names":[],"sources":["../../../projects/gabarit/avatar/avatar.ts","../../../projects/gabarit/avatar/avatar.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core'\nimport { computeInitials } from '@masmarino/gabarit/format'\n\nexport { computeInitials }\n\nexport type AvatarSize = 'sm' | 'md' | 'lg'\n\n@Component({\n  selector: 'gbt-avatar',\n  standalone: true,\n  templateUrl: './avatar.html',\n  styleUrl: './avatar.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-size]': 'size()',\n  },\n})\nexport class Avatar {\n  name = input.required<string>()\n  src = input<string | null>(null)\n  size = input<AvatarSize>('md')\n\n  protected readonly imageFailed = linkedSignal<string | null, boolean>({\n    source: this.src,\n    computation: () => false,\n  })\n\n  protected readonly showImage = computed(() => !!this.src() && !this.imageFailed())\n  protected readonly initials = computed(() => computeInitials(this.name()))\n\n  protected onImageError(): void {\n    this.imageFailed.set(true)\n  }\n}\n","@if (showImage()) {\n  <img class=\"gbt-avatar__image\" [src]=\"src()\" [alt]=\"name()\" (error)=\"onImageError()\" />\n} @else {\n  <span class=\"gbt-avatar__initials\" [attr.aria-label]=\"name()\">{{ initials() }}</span>\n}\n"],"mappings":";;;AAiBA,IAAa,SAAb,MAAa,OAAM;CACjB,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,MAAM,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEX,cAAc,aAAY;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAC3C,QAAQ,KAAK;EACb,mBAAmB;CAAK,CAAA;CAGP,YAAY,eAAe,CAAC,CAAC,KAAK,IAAG,KAAM,CAAC,KAAK,YAAW,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC/D,WAAW,eAAe,gBAAgB,KAAK,KAAI,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEhE,eAAY;EACpB,KAAK,YAAY,IAAI,IAAI;CAC3B;CAfW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,SAAA,EAAA;EAAA,UAAA;EAAA,UCjBnB;EAKA,QAAA,CAAA,0kBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADYa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAVlB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,YACV;GAAI,iBAGC,wBAAwB;GAAM,MACzC,EACJ,oBAAoB,SACrB;GAAA,UAAA;GAAA,QAAA,CAAA,0kBAAA;EAAA,CAAA"}