@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-tree.mjs

@@ -0,0 +1,258 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, computed, inject, input, model, signal } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+function flattenTree(nodes, expandedIds, depth = 0, parentId = null) {
+	const result = [];
+	for (const node of nodes) {
+		const hasChildren = !!node.children && node.children.length > 0;
+		result.push({
+			node,
+			depth,
+			hasChildren,
+			parentId
+		});
+		if (hasChildren && expandedIds.has(node.id)) result.push(...flattenTree(node.children, expandedIds, depth + 1, node.id));
+	}
+	return result;
+}
+var Tree = class Tree {
+	elementRef = inject(ElementRef);
+	injector = inject(Injector);
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	selectedId = model(null, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+	expandedIds = model([], ...ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []);
+	expandLabel = input("Expand", ...ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []);
+	collapseLabel = input("Collapse", ...ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []);
+	focusedId = signal(null, ...ngDevMode ? [{ debugName: "focusedId" }] : /* istanbul ignore next */ []);
+	expandedSet = computed(() => new Set(this.expandedIds()), ...ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []);
+	flatNodes = computed(() => flattenTree(this.items(), this.expandedSet()), ...ngDevMode ? [{ debugName: "flatNodes" }] : /* istanbul ignore next */ []);
+	activeId = computed(() => {
+		const focused = this.focusedId();
+		const flat = this.flatNodes();
+		if (focused && flat.some((f) => f.node.id === focused)) return focused;
+		const selected = this.selectedId();
+		if (selected && flat.some((f) => f.node.id === selected)) return selected;
+		return flat[0]?.node.id ?? null;
+	}, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	isExpanded(id) {
+		return this.expandedSet().has(id);
+	}
+	toggle(id) {
+		const set = new Set(this.expandedIds());
+		if (set.has(id)) set.delete(id);
+		else set.add(id);
+		this.expandedIds.set([...set]);
+	}
+	select(node) {
+		this.selectedId.set(node.id);
+		this.focusedId.set(node.id);
+	}
+	onItemClick(flat) {
+		this.select(flat.node);
+		if (flat.hasChildren) this.toggle(flat.node.id);
+	}
+	onKeydown(event) {
+		const flat = this.flatNodes();
+		const index = flat.findIndex((f) => f.node.id === this.activeId());
+		if (index === -1) return;
+		const current = flat[index];
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.focusIndex(Math.min(index + 1, flat.length - 1));
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.focusIndex(Math.max(index - 1, 0));
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				if (current.hasChildren && !this.isExpanded(current.node.id)) this.toggle(current.node.id);
+				else if (current.hasChildren) this.focusIndex(index + 1);
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				if (current.hasChildren && this.isExpanded(current.node.id)) this.toggle(current.node.id);
+				else if (current.parentId) {
+					const parentIndex = flat.findIndex((f) => f.node.id === current.parentId);
+					if (parentIndex !== -1) this.focusIndex(parentIndex);
+				}
+				break;
+			case "Home":
+				event.preventDefault();
+				this.focusIndex(0);
+				break;
+			case "End":
+				event.preventDefault();
+				this.focusIndex(flat.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.select(current.node);
+				break;
+			default: return;
+		}
+	}
+	focusIndex(index) {
+		const target = this.flatNodes()[index];
+		if (!target) return;
+		this.focusedId.set(target.node.id);
+		afterNextRender(() => {
+			this.elementRef.nativeElement.querySelector(`[data-node-id="${cssEscape(target.node.id)}"]`)?.focus();
+		}, { injector: this.injector });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Tree,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Tree,
+		isStandalone: true,
+		selector: "gbt-tree",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedId: {
+				classPropertyName: "selectedId",
+				publicName: "selectedId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandedIds: {
+				classPropertyName: "expandedIds",
+				publicName: "expandedIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandLabel: {
+				classPropertyName: "expandLabel",
+				publicName: "expandLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseLabel: {
+				classPropertyName: "collapseLabel",
+				publicName: "collapseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			selectedId: "selectedIdChange",
+			expandedIds: "expandedIdsChange"
+		},
+		ngImport: i0,
+		template: "<ul\n  class=\"gbt-tree\"\n  role=\"tree\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (flat of flatNodes(); track flat.node.id) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <li\n      class=\"gbt-tree__item\"\n      role=\"treeitem\"\n      [attr.data-node-id]=\"flat.node.id\"\n      [attr.aria-level]=\"flat.depth + 1\"\n      [attr.aria-expanded]=\"flat.hasChildren ? isExpanded(flat.node.id) : null\"\n      [attr.aria-selected]=\"selectedId() === flat.node.id\"\n      [style.paddingLeft.px]=\"flat.depth * 20\"\n      [attr.tabindex]=\"activeId() === flat.node.id ? 0 : -1\"\n      (click)=\"onItemClick(flat)\"\n    >\n      @if (flat.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"gbt-tree__toggle\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"isExpanded(flat.node.id) ? collapseLabel() : expandLabel()\"\n          (click)=\"toggle(flat.node.id); $event.stopPropagation()\"\n        >\n          <gbt-icon\n            name=\"chevron-right\"\n            class=\"gbt-tree__chevron\"\n            [class.gbt-tree__chevron--expanded]=\"isExpanded(flat.node.id)\"\n            aria-hidden=\"true\"\n          />\n        </button>\n      } @else {\n        <span class=\"gbt-tree__spacer\"></span>\n      }\n      @if (flat.node.icon) {\n        <gbt-icon [name]=\"flat.node.icon\" class=\"gbt-tree__icon\" aria-hidden=\"true\" />\n      }\n      <span class=\"gbt-tree__label\">{{ flat.node.label }}</span>\n    </li>\n  }\n</ul>\n",
+		styles: [".gbt-tree{margin:0;padding:0;list-style:none}.gbt-tree__item{box-sizing:border-box;display:flex;align-items:center;gap:.375rem;height:32px;padding-right:.5rem;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:13px;cursor:pointer}.gbt-tree__item:hover{background:var(--bg-hover)}.gbt-tree__item:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-tree__item[aria-selected=true]{background:var(--color-info-bg);color:var(--color-info-bg-text);font-weight:600}.gbt-tree__toggle{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:20px;height:20px;background:none;border:none;color:var(--text-secondary);cursor:pointer}.gbt-tree__spacer{flex-shrink:0;width:20px}.gbt-tree__chevron{transition:transform .15s cubic-bezier(.4,0,.2,1)}.gbt-tree__chevron--expanded{transform:rotate(90deg)}.gbt-tree__icon{flex-shrink:0;color:var(--text-secondary)}.gbt-tree__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.gbt-tree__chevron{transition:none}}\n"],
+		dependencies: [{
+			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: Tree,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-tree",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ul\n  class=\"gbt-tree\"\n  role=\"tree\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (flat of flatNodes(); track flat.node.id) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <li\n      class=\"gbt-tree__item\"\n      role=\"treeitem\"\n      [attr.data-node-id]=\"flat.node.id\"\n      [attr.aria-level]=\"flat.depth + 1\"\n      [attr.aria-expanded]=\"flat.hasChildren ? isExpanded(flat.node.id) : null\"\n      [attr.aria-selected]=\"selectedId() === flat.node.id\"\n      [style.paddingLeft.px]=\"flat.depth * 20\"\n      [attr.tabindex]=\"activeId() === flat.node.id ? 0 : -1\"\n      (click)=\"onItemClick(flat)\"\n    >\n      @if (flat.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"gbt-tree__toggle\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"isExpanded(flat.node.id) ? collapseLabel() : expandLabel()\"\n          (click)=\"toggle(flat.node.id); $event.stopPropagation()\"\n        >\n          <gbt-icon\n            name=\"chevron-right\"\n            class=\"gbt-tree__chevron\"\n            [class.gbt-tree__chevron--expanded]=\"isExpanded(flat.node.id)\"\n            aria-hidden=\"true\"\n          />\n        </button>\n      } @else {\n        <span class=\"gbt-tree__spacer\"></span>\n      }\n      @if (flat.node.icon) {\n        <gbt-icon [name]=\"flat.node.icon\" class=\"gbt-tree__icon\" aria-hidden=\"true\" />\n      }\n      <span class=\"gbt-tree__label\">{{ flat.node.label }}</span>\n    </li>\n  }\n</ul>\n",
+			styles: [".gbt-tree{margin:0;padding:0;list-style:none}.gbt-tree__item{box-sizing:border-box;display:flex;align-items:center;gap:.375rem;height:32px;padding-right:.5rem;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:13px;cursor:pointer}.gbt-tree__item:hover{background:var(--bg-hover)}.gbt-tree__item:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-tree__item[aria-selected=true]{background:var(--color-info-bg);color:var(--color-info-bg-text);font-weight:600}.gbt-tree__toggle{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:20px;height:20px;background:none;border:none;color:var(--text-secondary);cursor:pointer}.gbt-tree__spacer{flex-shrink:0;width:20px}.gbt-tree__chevron{transition:transform .15s cubic-bezier(.4,0,.2,1)}.gbt-tree__chevron--expanded{transform:rotate(90deg)}.gbt-tree__icon{flex-shrink:0;color:var(--text-secondary)}.gbt-tree__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.gbt-tree__chevron{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		selectedId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedId",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedIdChange"]
+		}],
+		expandedIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandedIds",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedIdsChange"]
+		}],
+		expandLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandLabel",
+				required: false
+			}]
+		}],
+		collapseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseLabel",
+				required: false
+			}]
+		}]
+	}
+});
+function cssEscape(value) {
+	return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/"/g, "\\\"");
+}
+export { Tree };
+
+//# sourceMappingURL=masmarino-gabarit-tree.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-tree.mjs","names":[],"sources":["../../../projects/gabarit/tree/tree-flatten.ts","../../../projects/gabarit/tree/tree.ts","../../../projects/gabarit/tree/tree.html"],"sourcesContent":["export interface TreeNode {\n  id: string\n  label: string\n  icon?: string\n  children?: TreeNode[]\n}\n\nexport interface FlatTreeNode {\n  node: TreeNode\n  depth: number\n  hasChildren: boolean\n  parentId: string | null\n}\n\nexport function flattenTree(\n  nodes: TreeNode[],\n  expandedIds: ReadonlySet<string>,\n  depth = 0,\n  parentId: string | null = null,\n): FlatTreeNode[] {\n  const result: FlatTreeNode[] = []\n  for (const node of nodes) {\n    const hasChildren = !!node.children && node.children.length > 0\n    result.push({ node, depth, hasChildren, parentId })\n    if (hasChildren && expandedIds.has(node.id)) {\n      result.push(...flattenTree(node.children!, expandedIds, depth + 1, node.id))\n    }\n  }\n  return result\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Injector,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { FlatTreeNode, TreeNode, flattenTree } from './tree-flatten'\n\n@Component({\n  selector: 'gbt-tree',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './tree.html',\n  styleUrl: './tree.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Tree {\n  private readonly elementRef = inject(ElementRef)\n  private readonly injector = inject(Injector)\n\n  items = input.required<TreeNode[]>()\n  ariaLabel = input<string>('')\n  selectedId = model<string | null>(null)\n  expandedIds = model<string[]>([])\n  expandLabel = input<string>('Expand')\n  collapseLabel = input<string>('Collapse')\n\n  protected readonly focusedId = signal<string | null>(null)\n\n  private readonly expandedSet = computed(() => new Set(this.expandedIds()))\n  protected readonly flatNodes = computed(() => flattenTree(this.items(), this.expandedSet()))\n\n  protected readonly activeId = computed(() => {\n    const focused = this.focusedId()\n    const flat = this.flatNodes()\n    if (focused && flat.some((f) => f.node.id === focused)) {\n      return focused\n    }\n    const selected = this.selectedId()\n    if (selected && flat.some((f) => f.node.id === selected)) {\n      return selected\n    }\n    return flat[0]?.node.id ?? null\n  })\n\n  protected isExpanded(id: string): boolean {\n    return this.expandedSet().has(id)\n  }\n\n  protected toggle(id: string): void {\n    const set = new Set(this.expandedIds())\n    if (set.has(id)) {\n      set.delete(id)\n    } else {\n      set.add(id)\n    }\n    this.expandedIds.set([...set])\n  }\n\n  protected select(node: TreeNode): void {\n    this.selectedId.set(node.id)\n    this.focusedId.set(node.id)\n  }\n\n  protected onItemClick(flat: FlatTreeNode): void {\n    this.select(flat.node)\n    if (flat.hasChildren) {\n      this.toggle(flat.node.id)\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const flat = this.flatNodes()\n    const index = flat.findIndex((f) => f.node.id === this.activeId())\n    if (index === -1) {\n      return\n    }\n    const current = flat[index]\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        this.focusIndex(Math.min(index + 1, flat.length - 1))\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        this.focusIndex(Math.max(index - 1, 0))\n        break\n      case 'ArrowRight':\n        event.preventDefault()\n        if (current.hasChildren && !this.isExpanded(current.node.id)) {\n          this.toggle(current.node.id)\n        } else if (current.hasChildren) {\n          this.focusIndex(index + 1)\n        }\n        break\n      case 'ArrowLeft':\n        event.preventDefault()\n        if (current.hasChildren && this.isExpanded(current.node.id)) {\n          this.toggle(current.node.id)\n        } else if (current.parentId) {\n          const parentIndex = flat.findIndex((f) => f.node.id === current.parentId)\n          if (parentIndex !== -1) {\n            this.focusIndex(parentIndex)\n          }\n        }\n        break\n      case 'Home':\n        event.preventDefault()\n        this.focusIndex(0)\n        break\n      case 'End':\n        event.preventDefault()\n        this.focusIndex(flat.length - 1)\n        break\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        this.select(current.node)\n        break\n      default:\n        return\n    }\n  }\n\n  private focusIndex(index: number): void {\n    const target = this.flatNodes()[index]\n    if (!target) {\n      return\n    }\n    this.focusedId.set(target.node.id)\n    afterNextRender(\n      () => {\n        const host = this.elementRef.nativeElement as HTMLElement\n        host.querySelector<HTMLElement>(`[data-node-id=\"${cssEscape(target.node.id)}\"]`)?.focus()\n      },\n      { injector: this.injector },\n    )\n  }\n}\n\nfunction cssEscape(value: string): string {\n  return typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value.replace(/\"/g, '\\\\\"')\n}\n","<ul\n  class=\"gbt-tree\"\n  role=\"tree\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (flat of flatNodes(); track flat.node.id) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n    <li\n      class=\"gbt-tree__item\"\n      role=\"treeitem\"\n      [attr.data-node-id]=\"flat.node.id\"\n      [attr.aria-level]=\"flat.depth + 1\"\n      [attr.aria-expanded]=\"flat.hasChildren ? isExpanded(flat.node.id) : null\"\n      [attr.aria-selected]=\"selectedId() === flat.node.id\"\n      [style.paddingLeft.px]=\"flat.depth * 20\"\n      [attr.tabindex]=\"activeId() === flat.node.id ? 0 : -1\"\n      (click)=\"onItemClick(flat)\"\n    >\n      @if (flat.hasChildren) {\n        <button\n          type=\"button\"\n          class=\"gbt-tree__toggle\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"isExpanded(flat.node.id) ? collapseLabel() : expandLabel()\"\n          (click)=\"toggle(flat.node.id); $event.stopPropagation()\"\n        >\n          <gbt-icon\n            name=\"chevron-right\"\n            class=\"gbt-tree__chevron\"\n            [class.gbt-tree__chevron--expanded]=\"isExpanded(flat.node.id)\"\n            aria-hidden=\"true\"\n          />\n        </button>\n      } @else {\n        <span class=\"gbt-tree__spacer\"></span>\n      }\n      @if (flat.node.icon) {\n        <gbt-icon [name]=\"flat.node.icon\" class=\"gbt-tree__icon\" aria-hidden=\"true\" />\n      }\n      <span class=\"gbt-tree__label\">{{ flat.node.label }}</span>\n    </li>\n  }\n</ul>\n"],"mappings":";;;AAcA,SAAgB,YACd,OACA,aACA,QAAQ,GACR,WAA0B,MAAI;CAE9B,MAAM,SAAyB,CAAA;CAC/B,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,cAAc,CAAC,CAAC,KAAK,YAAY,KAAK,SAAS,SAAS;EAC9D,OAAO,KAAK;GAAE;GAAM;GAAO;GAAa;EAAQ,CAAE;EAClD,IAAI,eAAe,YAAY,IAAI,KAAK,EAAE,GACxC,OAAO,KAAK,GAAG,YAAY,KAAK,UAAW,aAAa,QAAQ,GAAG,KAAK,EAAE,CAAC;CAE/E;CACA,OAAO;AACT;ACNA,IAAa,OAAb,MAAa,KAAI;CACE,aAAa,OAAO,UAAU;CAC9B,WAAW,OAAO,QAAQ;CAE3C,QAAQ,MAAM,SAAsB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,YAAY,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,aAAa,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,cAAc,MAAgB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,cAAc,MAAc,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACrC,gBAAgB,MAAc,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,YAAY,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzC,cAAc,eAAe,IAAI,IAAI,KAAK,YAAW,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACvD,YAAY,eAAe,YAAY,KAAK,MAAK,GAAI,KAAK,YAAW,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzE,WAAW,eAAc;EAC1C,MAAM,UAAU,KAAK,UAAS;EAC9B,MAAM,OAAO,KAAK,UAAS;EAC3B,IAAI,WAAW,KAAK,MAAM,MAAM,EAAE,KAAK,OAAO,OAAO,GACnD,OAAO;EAET,MAAM,WAAW,KAAK,WAAU;EAChC,IAAI,YAAY,KAAK,MAAM,MAAM,EAAE,KAAK,OAAO,QAAQ,GACrD,OAAO;EAET,OAAO,KAAK,EAAE,EAAE,KAAK,MAAM;CAC7B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,WAAW,IAAU;EAC7B,OAAO,KAAK,YAAW,CAAE,CAAC,IAAI,EAAE;CAClC;CAEU,OAAO,IAAU;EACzB,MAAM,MAAM,IAAI,IAAI,KAAK,YAAW,CAAE;EACtC,IAAI,IAAI,IAAI,EAAE,GACZ,IAAI,OAAO,EAAE;OAEb,IAAI,IAAI,EAAE;EAEZ,KAAK,YAAY,IAAI,CAAC,GAAG,GAAG,CAAC;CAC/B;CAEU,OAAO,MAAc;EAC7B,KAAK,WAAW,IAAI,KAAK,EAAE;EAC3B,KAAK,UAAU,IAAI,KAAK,EAAE;CAC5B;CAEU,YAAY,MAAkB;EACtC,KAAK,OAAO,KAAK,IAAI;EACrB,IAAI,KAAK,aACP,KAAK,OAAO,KAAK,KAAK,EAAE;CAE5B;CAEU,UAAU,OAAoB;EACtC,MAAM,OAAO,KAAK,UAAS;EAC3B,MAAM,QAAQ,KAAK,WAAW,MAAM,EAAE,KAAK,OAAO,KAAK,SAAQ,CAAE;EACjE,IAAI,UAAU,IACZ;EAEF,MAAM,UAAU,KAAK;EACrB,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,WAAW,KAAK,IAAI,QAAQ,GAAG,KAAK,SAAS,CAAC,CAAC;IACpD;GACF,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,WAAW,KAAK,IAAI,QAAQ,GAAG,CAAC,CAAC;IACtC;GACF,KAAK;IACH,MAAM,eAAc;IACpB,IAAI,QAAQ,eAAe,CAAC,KAAK,WAAW,QAAQ,KAAK,EAAE,GACzD,KAAK,OAAO,QAAQ,KAAK,EAAE;SACtB,IAAI,QAAQ,aACjB,KAAK,WAAW,QAAQ,CAAC;IAE3B;GACF,KAAK;IACH,MAAM,eAAc;IACpB,IAAI,QAAQ,eAAe,KAAK,WAAW,QAAQ,KAAK,EAAE,GACxD,KAAK,OAAO,QAAQ,KAAK,EAAE;SACtB,IAAI,QAAQ,UAAU;KAC3B,MAAM,cAAc,KAAK,WAAW,MAAM,EAAE,KAAK,OAAO,QAAQ,QAAQ;KACxE,IAAI,gBAAgB,IAClB,KAAK,WAAW,WAAW;IAE/B;IACA;GACF,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,WAAW,CAAC;IACjB;GACF,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,WAAW,KAAK,SAAS,CAAC;IAC/B;GACF,KAAK;GACL,KAAK;IACH,MAAM,eAAc;IACpB,KAAK,OAAO,QAAQ,IAAI;IACxB;GACF,SACE;EACJ;CACF;CAEQ,WAAW,OAAa;EAC9B,MAAM,SAAS,KAAK,UAAS,CAAE,CAAC;EAChC,IAAI,CAAC,QACH;EAEF,KAAK,UAAU,IAAI,OAAO,KAAK,EAAE;EACjC,sBACO;GAEH,AADa,KAAK,WAAW,cACxB,cAA2B,kBAAkB,UAAU,OAAO,KAAK,EAAE,EAAC,GAAI,CAAC,EAAE,MAAK;EACzF,GACA,EAAE,UAAU,KAAK,SAAQ,CAAE;CAE/B;CAzHW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAI,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAJ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAI,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;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,YAAA;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,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,YAAA;GAAA,aAAA;EAAA;EAAA,UAAA;EAAA,UCvBjB;EA6CA,QAAA,CAAA,0lCAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MD3BY;GAAI,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKH,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAI,YAAA,CAAA;EARhB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,YACR;GAAI,SACP,CAAC,IAAI;GAAC,iBAGE,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,0lCAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8HjD,SAAS,UAAU,OAAa;CAC9B,OAAO,OAAO,QAAQ,eAAe,IAAI,SAAS,IAAI,OAAO,KAAK,IAAI,MAAM,QAAQ,MAAM,MAAK;AACjG"}

package/fesm2022/masmarino-gabarit-user-chip.mjs

@@ -0,0 +1,106 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { Avatar } from "@masmarino/gabarit/avatar";
+var UserChip = class UserChip {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UserChip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UserChip,
+		isStandalone: true,
+		selector: "gbt-user-chip",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<span class=\"gbt-user-chip\" [attr.data-size]=\"size()\" [attr.title]=\"name()\">\n  <gbt-avatar [name]=\"name()\" [src]=\"src()\" [size]=\"size()\" aria-hidden=\"true\" />\n  <span class=\"gbt-user-chip__name\">{{ name() }}</span>\n</span>\n",
+		styles: [":host{display:inline-flex;max-width:100%;min-width:0;vertical-align:middle}.gbt-user-chip{display:inline-flex;align-items:center;gap:.5rem;min-width:0;max-width:100%;color:var(--text-primary);font-size:.8125rem;font-weight:600;line-height:1.5rem}.gbt-user-chip[data-size=md]{gap:.625rem;font-size:.875rem}.gbt-user-chip__name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Avatar,
+			selector: "gbt-avatar",
+			inputs: [
+				"name",
+				"src",
+				"size"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UserChip,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-user-chip",
+			standalone: true,
+			imports: [Avatar],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span class=\"gbt-user-chip\" [attr.data-size]=\"size()\" [attr.title]=\"name()\">\n  <gbt-avatar [name]=\"name()\" [src]=\"src()\" [size]=\"size()\" aria-hidden=\"true\" />\n  <span class=\"gbt-user-chip__name\">{{ name() }}</span>\n</span>\n",
+			styles: [":host{display:inline-flex;max-width:100%;min-width:0;vertical-align:middle}.gbt-user-chip{display:inline-flex;align-items:center;gap:.5rem;min-width:0;max-width:100%;color:var(--text-primary);font-size:.8125rem;font-weight:600;line-height:1.5rem}.gbt-user-chip[data-size=md]{gap:.625rem;font-size:.875rem}.gbt-user-chip__name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"]
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}]
+	}
+});
+export { UserChip };
+
+//# sourceMappingURL=masmarino-gabarit-user-chip.mjs.map

package/fesm2022/masmarino-gabarit-user-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-user-chip.mjs","names":[],"sources":["../../../projects/gabarit/user-chip/user-chip.ts","../../../projects/gabarit/user-chip/user-chip.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core'\nimport { Avatar } from '@masmarino/gabarit/avatar'\n\nexport type UserChipSize = 'sm' | 'md'\n\n@Component({\n  selector: 'gbt-user-chip',\n  standalone: true,\n  imports: [Avatar],\n  templateUrl: './user-chip.html',\n  styleUrl: './user-chip.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class UserChip {\n  name = input.required<string>()\n  size = input<UserChipSize>('sm')\n  src = input<string | null>(null)\n}\n","<span class=\"gbt-user-chip\" [attr.data-size]=\"size()\" [attr.title]=\"name()\">\n  <gbt-avatar [name]=\"name()\" [src]=\"src()\" [size]=\"size()\" aria-hidden=\"true\" />\n  <span class=\"gbt-user-chip__name\">{{ name() }}</span>\n</span>\n"],"mappings":";;;AAaA,IAAa,WAAb,MAAa,SAAQ;CACnB,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,OAAO,MAAoB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,MAAM,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAHrB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCbrB;EAIA,QAAA,CAAA,gZAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDIY;GAAM,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKL,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EARpB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP,CAAC,MAAM;GAAC,iBAGA,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,gZAAA;EAAA,CAAA"}