@xsmusices/ui 1.41.0 → 1.42.0

package/fesm2022/xsmusices-ui-xs-item-compact.xsstory-LhApuPL7.mjs

@@ -0,0 +1,270 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { XS_DEFAULT_ADMIN_USER_ID, getCountryItem, XSImageComponent, XSButtonComponent, PipesModule, CountryFlagPipe, DateLocaleFormatPipe } from './xsmusices-ui.mjs';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { m as mockArtists, a as mockEvents, b as mockSites, c as mockMedia, d as mockUsers } from './xsmusices-ui-index-DRXscULI.mjs';
+
+class XSItemCompactComponent {
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+    subtypeForced = input(null, ...(ngDevMode ? [{ debugName: "subtypeForced" }] : []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    edit = input(false, ...(ngDevMode ? [{ debugName: "edit" }] : []));
+    year = input(false, ...(ngDevMode ? [{ debugName: "year" }] : []));
+    styles = input(false, ...(ngDevMode ? [{ debugName: "styles" }] : []));
+    link = input(true, ...(ngDevMode ? [{ debugName: "link" }] : []));
+    user = input(...(ngDevMode ? [undefined, { debugName: "user" }] : []));
+    count = input(...(ngDevMode ? [undefined, { debugName: "count" }] : []));
+    forTop = input(false, ...(ngDevMode ? [{ debugName: "forTop" }] : []));
+    position = input(null, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    buttonRightIcon = input(...(ngDevMode ? [undefined, { debugName: "buttonRightIcon" }] : []));
+    isDraggable = input(false, ...(ngDevMode ? [{ debugName: "isDraggable" }] : []));
+    language = input('es', ...(ngDevMode ? [{ debugName: "language" }] : []));
+    onClickButtonRight = output();
+    onClickDrag = output();
+    defaultAdminUserId = inject(XS_DEFAULT_ADMIN_USER_ID);
+    get routerLink() {
+        if (!this.link()) {
+            return null;
+        }
+        if (!this.item() || !this.type()) {
+            return null;
+        }
+        const typeOk = this.type() === 'media' ? 'music' : this.type() + 's';
+        const baseAccountPath = `/account/manage/${typeOk}/`;
+        let baseTypePath = `/${this.type()}s`;
+        if (this.type() === 'site' || this.type() === 'media') {
+            const itemType = this.item().type;
+            const typeValue = typeof itemType === 'string'
+                ? itemType
+                : itemType?.['name']
+                    ?.toString()
+                    ?.toLowerCase();
+            baseTypePath = typeValue
+                ? `/${typeValue}s`
+                : `/${this.subtypeForced()}s`;
+        }
+        else if (this.type() === 'organization') {
+            const itemTypes = this.item().types;
+            baseTypePath =
+                itemTypes && itemTypes.length > 0
+                    ? `/${itemTypes[0]}s`
+                    : `/${this.subtypeForced()}s`;
+        }
+        else if (this.type() === 'equipment') {
+            baseTypePath = '/gear';
+        }
+        if (!this.edit()) {
+            if (this.type() === 'equipment') {
+                return [baseTypePath];
+            }
+            return [baseTypePath, this.item().slug];
+        }
+        if (this.item().state === 'active') {
+            return [baseAccountPath, this.item().slug];
+        }
+        if (this.type() === 'playlist') {
+            return this.edit()
+                ? [`/account/${this.type()}s/`, this.item().slug]
+                : [baseTypePath, this.item().slug];
+        }
+        return null;
+    }
+    getItemUserName() {
+        const user = this.item().user;
+        if (!user)
+            return '';
+        if (typeof user === 'string')
+            return user;
+        return (user['name'] || '');
+    }
+    get typeForImage() {
+        if (this.type() === 'organization') {
+            return 'organization';
+        }
+        else if (this.type() === 'playlist') {
+            return 'media';
+        }
+        else {
+            return this.type();
+        }
+    }
+    get country() {
+        return getCountryItem(this.item(), this.type());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemCompactComponent, isStandalone: true, selector: "xs-item-compact", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, subtypeForced: { classPropertyName: "subtypeForced", publicName: "subtypeForced", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, forTop: { classPropertyName: "forTop", publicName: "forTop", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, buttonRightIcon: { classPropertyName: "buttonRightIcon", publicName: "buttonRightIcon", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickButtonRight: "onClickButtonRight", onClickDrag: "onClickDrag" }, host: { attributes: { "xs-item-compact-host": "" } }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-start gap-2 pb-2 transition-all duration-500 bg-black border-b cursor-pointer border-zinc-900\"\n  [routerLink]=\"link() ? routerLink : null\"\n  [ngClass]=\"{ 'hover:opacity-70': link() }\"\n>\n  <div\n    class=\"flex-shrink-0 overflow-hidden rounded-xl w-14 h-14\"\n  >\n    <xs-image\n      [item]=\"\n        type() !== 'playlist'\n          ? item()\n          : item().cover\n            ? { _id: item().cover, image: true, name: item().name }\n            : { image: false, name: item().name }\n      \"\n      [typeItem]=\"typeForImage\"\n      imageType=\"small\"\n      [alt]=\"item().name\"\n      customClass=\"object-cover w-full h-full cursor-pointer hover:filter-grayscale hover:scale-105 hover:duration-1000\"\n      size=\"full\"\n      rounded=\"lg\"\n      loading=\"lazy\"\n    ></xs-image>\n  </div>\n\n  <div\n    class=\"flex flex-col items-start justify-start w-full min-w-0\"\n  >\n    <h3 class=\"w-full text-[18px] font-semibold text-white pr-2\">\n      <span class=\"flex items-center min-w-0 gap-1\">\n        <span class=\"block max-w-full pr-2 truncate\">\n          {{ item().name }}\n        </span>\n        @if (\n          item().user &&\n          (typeof item().user === 'string'\n            ? item().user !== defaultAdminUserId\n            : true) &&\n          type() !== 'playlist'\n        ) {\n          <svg\n            aria-label=\"Verified\"\n            fill=\"rgb(0, 149, 246)\"\n            height=\"13\"\n            viewBox=\"0 0 40 40\"\n            width=\"13\"\n            class=\"flex-shrink-0\"\n          >\n            <path\n              d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n              fill-rule=\"evenodd\"\n            ></path>\n          </svg>\n        }\n      </span>\n    </h3>\n\n    @if (country && type() !== 'site' && type() !== 'event') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5\"\n      >\n        <img\n          [src]=\"country.code | countryFlag\"\n          [alt]=\"country.name\"\n          class=\"w-3 h-3\"\n        />\n        <p class=\"pr-2 text-xs text-gray-400\">\n          {{ language() !== 'es' ? country.nameEn : country.name }}\n        </p>\n      </div>\n    }\n\n    @if (country && (type() === 'site' || type() === 'event')) {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 w-full min-w-0\"\n      >\n        <img\n          [src]=\"country.code | countryFlag\"\n          [alt]=\"country.name\"\n          class=\"flex-shrink-0 w-3 h-3\"\n        />\n        <p\n          class=\"w-full pr-2 overflow-hidden text-xs text-gray-400 truncate whitespace-nowrap\"\n        >\n          {{\n            type() === 'event'\n              ? $any(item().site).address.region.name\n              : $any(item().address).region.name\n          }},\n          {{ language() !== 'es' ? country.nameEn : country.name }}\n        </p>\n      </div>\n    }\n\n    @if (type() === 'media') {\n      <div\n        class=\"flex items-center text-gray-350 mb-0.5 pr-2\"\n      >\n        @for (artist of item().artists?.slice(0, 3); track $index; let last = $last) {\n          <span\n            class=\"text-xs\"\n          >\n            {{ $any(artist).name }}@if (!last) {<span>,&nbsp;</span>}\n          </span>\n        }\n\n        @if (\n          type() === 'media' && ($any(item().organizations)?.length ?? 0) > 0\n        ) {\n          <span class=\"text-xs\">\n            &nbsp;x&nbsp;{{ $any(item().organizations?.[0])?.name ?? '' }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (type() === 'playlist' && item().user) {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ getItemUserName() }}\n        </p>\n      </div>\n    }\n\n    <div class=\"flex pr-2 text-gray-400\">\n      @if (item().year) {\n        <span class=\"text-xs\">\n          {{ item().year }}&nbsp;|&nbsp;\n        </span>\n      }\n\n      @if (item().date) {\n        <span class=\"text-xs\">\n          {{ item().date! | dateLocaleFormat: language()!\n          }}@if (item().styles && $any(item().styles).length > 0) {<span>&nbsp;|&nbsp;</span>}\n        </span>\n      }\n\n      @if (item().styles) {\n        @for (\n          style of $any(item().styles).slice(\n            0,\n            type() == 'event' ? 1 : 3\n          );\n          track $index;\n          let last = $last\n        ) {\n          <span class=\"text-xs\">\n            {{ style.name }}@if (!last) {<span>,&nbsp;</span>}\n          </span>\n        }\n      }\n    </div>\n\n    @if (type() === 'equipment') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ item().manufacturer }}\n        </p>\n      </div>\n    }\n    @if (type() === 'equipment') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ $any(item().type).name }}\n        </p>\n      </div>\n    }\n  </div>\n\n  @if (forTop() && position() !== null) {\n    <span\n      id=\"item-compact-position\"\n      class=\"pr-2 ml-auto text-2xl font-bold text-white\"\n    >\n      {{ position() }}\u00BA\n    </span>\n  }\n\n  @if (buttonRightIcon()) {\n    <xs-button\n      id=\"item-compact-button-right\"\n      [icon]=\"{ name: buttonRightIcon() || 'circle-question' }\"\n      layout=\"iconOnly\"\n      variant=\"custom\"\n      customClass=\"pr-4 ml-auto text-white\"\n      (onClick)=\"onClickButtonRight.emit(); $event.stopPropagation()\"\n    />\n  }\n\n  @if (isDraggable()) {\n    <xs-button\n      id=\"item-compact-button-draggable\"\n      icon=\"grip-lines\"\n      layout=\"iconOnly\"\n      variant=\"custom\"\n      customClass=\"pr-4 ml-auto text-white\"\n      cdkDragHandle\n    />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: XSImageComponent, selector: "xs-image", inputs: ["config", "viewTransitionName", "src", "alt", "width", "height", "size", "rounded", "objectFit", "clickable", "item", "typeItem", "imageType", "fallbackSrc", "loading", "priority", "customClass", "generateAvatar"], outputs: ["onClick", "onLoad", "onError"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }, { kind: "pipe", type: DateLocaleFormatPipe, name: "dateLocaleFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemCompactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xs-item-compact', host: { 'xs-item-compact-host': '' }, imports: [
+                        CommonModule,
+                        RouterModule,
+                        FontAwesomeModule,
+                        XSImageComponent,
+                        XSButtonComponent,
+                        PipesModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex items-center justify-start gap-2 pb-2 transition-all duration-500 bg-black border-b cursor-pointer border-zinc-900\"\n  [routerLink]=\"link() ? routerLink : null\"\n  [ngClass]=\"{ 'hover:opacity-70': link() }\"\n>\n  <div\n    class=\"flex-shrink-0 overflow-hidden rounded-xl w-14 h-14\"\n  >\n    <xs-image\n      [item]=\"\n        type() !== 'playlist'\n          ? item()\n          : item().cover\n            ? { _id: item().cover, image: true, name: item().name }\n            : { image: false, name: item().name }\n      \"\n      [typeItem]=\"typeForImage\"\n      imageType=\"small\"\n      [alt]=\"item().name\"\n      customClass=\"object-cover w-full h-full cursor-pointer hover:filter-grayscale hover:scale-105 hover:duration-1000\"\n      size=\"full\"\n      rounded=\"lg\"\n      loading=\"lazy\"\n    ></xs-image>\n  </div>\n\n  <div\n    class=\"flex flex-col items-start justify-start w-full min-w-0\"\n  >\n    <h3 class=\"w-full text-[18px] font-semibold text-white pr-2\">\n      <span class=\"flex items-center min-w-0 gap-1\">\n        <span class=\"block max-w-full pr-2 truncate\">\n          {{ item().name }}\n        </span>\n        @if (\n          item().user &&\n          (typeof item().user === 'string'\n            ? item().user !== defaultAdminUserId\n            : true) &&\n          type() !== 'playlist'\n        ) {\n          <svg\n            aria-label=\"Verified\"\n            fill=\"rgb(0, 149, 246)\"\n            height=\"13\"\n            viewBox=\"0 0 40 40\"\n            width=\"13\"\n            class=\"flex-shrink-0\"\n          >\n            <path\n              d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n              fill-rule=\"evenodd\"\n            ></path>\n          </svg>\n        }\n      </span>\n    </h3>\n\n    @if (country && type() !== 'site' && type() !== 'event') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5\"\n      >\n        <img\n          [src]=\"country.code | countryFlag\"\n          [alt]=\"country.name\"\n          class=\"w-3 h-3\"\n        />\n        <p class=\"pr-2 text-xs text-gray-400\">\n          {{ language() !== 'es' ? country.nameEn : country.name }}\n        </p>\n      </div>\n    }\n\n    @if (country && (type() === 'site' || type() === 'event')) {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 w-full min-w-0\"\n      >\n        <img\n          [src]=\"country.code | countryFlag\"\n          [alt]=\"country.name\"\n          class=\"flex-shrink-0 w-3 h-3\"\n        />\n        <p\n          class=\"w-full pr-2 overflow-hidden text-xs text-gray-400 truncate whitespace-nowrap\"\n        >\n          {{\n            type() === 'event'\n              ? $any(item().site).address.region.name\n              : $any(item().address).region.name\n          }},\n          {{ language() !== 'es' ? country.nameEn : country.name }}\n        </p>\n      </div>\n    }\n\n    @if (type() === 'media') {\n      <div\n        class=\"flex items-center text-gray-350 mb-0.5 pr-2\"\n      >\n        @for (artist of item().artists?.slice(0, 3); track $index; let last = $last) {\n          <span\n            class=\"text-xs\"\n          >\n            {{ $any(artist).name }}@if (!last) {<span>,&nbsp;</span>}\n          </span>\n        }\n\n        @if (\n          type() === 'media' && ($any(item().organizations)?.length ?? 0) > 0\n        ) {\n          <span class=\"text-xs\">\n            &nbsp;x&nbsp;{{ $any(item().organizations?.[0])?.name ?? '' }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (type() === 'playlist' && item().user) {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ getItemUserName() }}\n        </p>\n      </div>\n    }\n\n    <div class=\"flex pr-2 text-gray-400\">\n      @if (item().year) {\n        <span class=\"text-xs\">\n          {{ item().year }}&nbsp;|&nbsp;\n        </span>\n      }\n\n      @if (item().date) {\n        <span class=\"text-xs\">\n          {{ item().date! | dateLocaleFormat: language()!\n          }}@if (item().styles && $any(item().styles).length > 0) {<span>&nbsp;|&nbsp;</span>}\n        </span>\n      }\n\n      @if (item().styles) {\n        @for (\n          style of $any(item().styles).slice(\n            0,\n            type() == 'event' ? 1 : 3\n          );\n          track $index;\n          let last = $last\n        ) {\n          <span class=\"text-xs\">\n            {{ style.name }}@if (!last) {<span>,&nbsp;</span>}\n          </span>\n        }\n      }\n    </div>\n\n    @if (type() === 'equipment') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ item().manufacturer }}\n        </p>\n      </div>\n    }\n    @if (type() === 'equipment') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ $any(item().type).name }}\n        </p>\n      </div>\n    }\n  </div>\n\n  @if (forTop() && position() !== null) {\n    <span\n      id=\"item-compact-position\"\n      class=\"pr-2 ml-auto text-2xl font-bold text-white\"\n    >\n      {{ position() }}\u00BA\n    </span>\n  }\n\n  @if (buttonRightIcon()) {\n    <xs-button\n      id=\"item-compact-button-right\"\n      [icon]=\"{ name: buttonRightIcon() || 'circle-question' }\"\n      layout=\"iconOnly\"\n      variant=\"custom\"\n      customClass=\"pr-4 ml-auto text-white\"\n      (onClick)=\"onClickButtonRight.emit(); $event.stopPropagation()\"\n    />\n  }\n\n  @if (isDraggable()) {\n    <xs-button\n      id=\"item-compact-button-draggable\"\n      icon=\"grip-lines\"\n      layout=\"iconOnly\"\n      variant=\"custom\"\n      customClass=\"pr-4 ml-auto text-white\"\n      cdkDragHandle\n    />\n  }\n</div>\n" }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], subtypeForced: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtypeForced", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], forTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "forTop", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], buttonRightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRightIcon", required: false }] }], isDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDraggable", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], onClickButtonRight: [{ type: i0.Output, args: ["onClickButtonRight"] }], onClickDrag: [{ type: i0.Output, args: ["onClickDrag"] }] } });
+
+const story = {
+    id: 'item-compact',
+    name: 'Item Compact',
+    type: 'component',
+    subtype: 'UI',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2026-01-04T22:00:00.000Z',
+    created: '2026-01-02T00:44:32.446Z',
+    description: 'Componente compacto para mostrar items de diferentes tipos (artistas, eventos, medios, usuarios, etc.) con imagen, nombre, metadatos contextuales y acciones. Incluye soporte para modos de edición, drag & drop, y diferentes layouts según el tipo de contenido. Diseñado para listas densas donde se necesita máxima información en mínimo espacio.',
+    component: XSItemCompactComponent,
+    selector: 'xs-item-compact',
+    inputs: [
+        {
+            key: 'type',
+            label: 'Type',
+            type: 'select',
+            options: [
+                'artist',
+                'organization',
+                'event',
+                'site',
+                'equipment',
+                'playlist',
+                'media',
+                'user',
+            ],
+            default: 'artist',
+        },
+        {
+            key: 'item',
+            label: 'Item',
+            type: 'json',
+            default: mockArtists[0], // Fatima Hajji - complete artist data
+        },
+        {
+            key: 'edit',
+            label: 'Edit',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'year',
+            label: 'Year',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'styles',
+            label: 'Styles',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'link',
+            label: 'Link',
+            type: 'boolean',
+            default: true,
+        },
+    ],
+    examples: [
+        {
+            name: 'Artist Item',
+            description: 'Item compact para artista con datos reales',
+            inputs: {
+                type: 'artist',
+                item: mockArtists[0], // Fatima Hajji
+            },
+        },
+        {
+            name: 'Organization Item',
+            description: 'Item compact para organización',
+            inputs: {
+                type: 'organization',
+                item: mockArtists[0], // Using artist mock for organization example
+            },
+        },
+        {
+            name: 'Event Item',
+            description: 'Item compact para evento con datos reales',
+            inputs: {
+                type: 'event',
+                item: mockEvents[0], // Hale-Bopp Vol.4
+            },
+        },
+        {
+            name: 'Site Item',
+            description: 'Item compact para sitio con datos reales',
+            inputs: {
+                type: 'site',
+                item: mockSites[0], // Smut Athens
+            },
+        },
+        {
+            name: 'Equipment Item',
+            description: 'Item compact para equipo',
+            inputs: {
+                type: 'equipment',
+                item: {
+                    name: 'Pioneer DJ Mixer',
+                    type: { name: 'DJ Mixer' },
+                    manufacturer: 'Pioneer',
+                    info: 'Mezclador profesional para DJ',
+                    slug: 'pioneer-dj-mixer',
+                },
+            },
+        },
+        {
+            name: 'Playlist Item',
+            description: 'Item compact para playlist',
+            inputs: {
+                type: 'playlist',
+                item: {
+                    name: 'My Techno Mix',
+                    slug: 'my-techno-mix',
+                    tracks: [
+                        { _id: 'track1', name: 'Track 1' },
+                        { _id: 'track2', name: 'Track 2' },
+                    ],
+                    private: false,
+                    updated: '2026-01-04T10:00:00.000Z',
+                },
+            },
+        },
+        {
+            name: 'Media Item',
+            description: 'Item compact para media con datos reales',
+            inputs: {
+                type: 'media',
+                item: mockMedia[0], // Opening Vinyl Set
+            },
+        },
+        {
+            name: 'User Item',
+            description: 'Item compact para usuario con datos reales',
+            inputs: {
+                type: 'user',
+                item: mockUsers[0], // JoseXS
+            },
+        },
+    ],
+    multilanguage: false,
+    notes: [
+        {
+            text: 'Este componente fue creado automáticamente. Es necesario completar la documentación, inputs y examples.',
+            type: 'warning',
+        },
+    ],
+    coverage: {
+        statements: 98,
+        branches: 82,
+        functions: 100,
+        lines: 98,
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-item-compact.xsstory-LhApuPL7.mjs.map

package/fesm2022/xsmusices-ui-xs-item-compact.xsstory-LhApuPL7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-item-compact.xsstory-LhApuPL7.mjs","sources":["../../../projects/xs-ui/src/lib/components/ui/items/compact/xs-item-compact.component.ts","../../../projects/xs-ui/src/lib/components/ui/items/compact/xs-item-compact.component.html","../../../projects/xs-ui/src/lib/components/ui/items/compact/xs-item-compact.xsstory.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  inject,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { XSImageComponent } from '../../../base/image';\nimport { XSButtonComponent } from '../../../base/button';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { UserI } from '../../../../interfaces';\nimport { XSItemData } from '../../../../interfaces/xs-item.interface';\nimport {\n  XSGenericItemType,\n  XSGenericSubItemType,\n} from '../../../../types';\nimport { XS_DEFAULT_ADMIN_USER_ID } from '../../../../tokens';\nimport { PipesModule } from '../../../../pipes';\nimport { getCountryItem } from '../../../../utils/xs-generic.utils';\n\n@Component({\n  selector: 'xs-item-compact',\n  templateUrl: 'xs-item-compact.component.html',\n  host: { 'xs-item-compact-host': '' },\n  imports: [\n    CommonModule,\n    RouterModule,\n    FontAwesomeModule,\n    XSImageComponent,\n    XSButtonComponent,\n    PipesModule,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class XSItemCompactComponent {\n  type = input.required<XSGenericItemType>();\n  subtypeForced = input<XSGenericSubItemType | null>(null);\n  item = input.required<XSItemData>();\n  edit = input(false);\n  year = input(false);\n  styles = input(false);\n  link = input(true);\n  user = input<UserI>();\n  count = input<{ name: string; value: unknown }>();\n  forTop = input(false);\n  position = input<number | null>(null);\n  buttonRightIcon = input<string>();\n  isDraggable = input(false);\n  language = input<'en' | 'es' | null>('es');\n  readonly onClickButtonRight = output<void>();\n  readonly onClickDrag = output<void>();\n\n  defaultAdminUserId = inject(XS_DEFAULT_ADMIN_USER_ID);\n\n  get routerLink(): string[] | null {\n    if (!this.link()) {\n      return null;\n    }\n\n    if (!this.item() || !this.type()) {\n      return null;\n    }\n\n    const typeOk =\n      this.type() === 'media' ? 'music' : this.type() + 's';\n    const baseAccountPath = `/account/manage/${typeOk}/`;\n    let baseTypePath = `/${this.type()}s`;\n    if (this.type() === 'site' || this.type() === 'media') {\n      const itemType = this.item().type;\n      const typeValue =\n        typeof itemType === 'string'\n          ? itemType\n          : (itemType as Record<string, unknown>)?.['name']\n              ?.toString()\n              ?.toLowerCase();\n      baseTypePath = typeValue\n        ? `/${typeValue}s`\n        : `/${this.subtypeForced()}s`;\n    } else if (this.type() === 'organization') {\n      const itemTypes = this.item().types;\n      baseTypePath =\n        itemTypes && itemTypes.length > 0\n          ? `/${itemTypes[0]}s`\n          : `/${this.subtypeForced()}s`;\n    } else if (this.type() === 'equipment') {\n      baseTypePath = '/gear';\n    }\n\n    if (!this.edit()) {\n      if (this.type() === 'equipment') {\n        return [baseTypePath];\n      }\n      return [baseTypePath, this.item().slug!];\n    }\n\n    if (this.item().state === 'active') {\n      return [baseAccountPath, this.item().slug!];\n    }\n\n    if (this.type() === 'playlist') {\n      return this.edit()\n        ? [`/account/${this.type()}s/`, this.item().slug!]\n        : [baseTypePath, this.item().slug!];\n    }\n\n    return null;\n  }\n\n  getItemUserName(): string {\n    const user = this.item().user;\n    if (!user) return '';\n    if (typeof user === 'string') return user;\n    return (\n      ((user as Record<string, unknown>)['name'] as string) || ''\n    );\n  }\n\n  get typeForImage() {\n    if (this.type() === 'organization') {\n      return 'organization';\n    } else if (this.type() === 'playlist') {\n      return 'media';\n    } else {\n      return this.type();\n    }\n  }\n\n  get country() {\n    return getCountryItem(this.item(), this.type());\n  }\n}\n","<div\n  class=\"flex items-center justify-start gap-2 pb-2 transition-all duration-500 bg-black border-b cursor-pointer border-zinc-900\"\n  [routerLink]=\"link() ? routerLink : null\"\n  [ngClass]=\"{ 'hover:opacity-70': link() }\"\n>\n  <div\n    class=\"flex-shrink-0 overflow-hidden rounded-xl w-14 h-14\"\n  >\n    <xs-image\n      [item]=\"\n        type() !== 'playlist'\n          ? item()\n          : item().cover\n            ? { _id: item().cover, image: true, name: item().name }\n            : { image: false, name: item().name }\n      \"\n      [typeItem]=\"typeForImage\"\n      imageType=\"small\"\n      [alt]=\"item().name\"\n      customClass=\"object-cover w-full h-full cursor-pointer hover:filter-grayscale hover:scale-105 hover:duration-1000\"\n      size=\"full\"\n      rounded=\"lg\"\n      loading=\"lazy\"\n    ></xs-image>\n  </div>\n\n  <div\n    class=\"flex flex-col items-start justify-start w-full min-w-0\"\n  >\n    <h3 class=\"w-full text-[18px] font-semibold text-white pr-2\">\n      <span class=\"flex items-center min-w-0 gap-1\">\n        <span class=\"block max-w-full pr-2 truncate\">\n          {{ item().name }}\n        </span>\n        @if (\n          item().user &&\n          (typeof item().user === 'string'\n            ? item().user !== defaultAdminUserId\n            : true) &&\n          type() !== 'playlist'\n        ) {\n          <svg\n            aria-label=\"Verified\"\n            fill=\"rgb(0, 149, 246)\"\n            height=\"13\"\n            viewBox=\"0 0 40 40\"\n            width=\"13\"\n            class=\"flex-shrink-0\"\n          >\n            <path\n              d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n              fill-rule=\"evenodd\"\n            ></path>\n          </svg>\n        }\n      </span>\n    </h3>\n\n    @if (country && type() !== 'site' && type() !== 'event') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5\"\n      >\n        <img\n          [src]=\"country.code | countryFlag\"\n          [alt]=\"country.name\"\n          class=\"w-3 h-3\"\n        />\n        <p class=\"pr-2 text-xs text-gray-400\">\n          {{ language() !== 'es' ? country.nameEn : country.name }}\n        </p>\n      </div>\n    }\n\n    @if (country && (type() === 'site' || type() === 'event')) {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 w-full min-w-0\"\n      >\n        <img\n          [src]=\"country.code | countryFlag\"\n          [alt]=\"country.name\"\n          class=\"flex-shrink-0 w-3 h-3\"\n        />\n        <p\n          class=\"w-full pr-2 overflow-hidden text-xs text-gray-400 truncate whitespace-nowrap\"\n        >\n          {{\n            type() === 'event'\n              ? $any(item().site).address.region.name\n              : $any(item().address).region.name\n          }},\n          {{ language() !== 'es' ? country.nameEn : country.name }}\n        </p>\n      </div>\n    }\n\n    @if (type() === 'media') {\n      <div\n        class=\"flex items-center text-gray-350 mb-0.5 pr-2\"\n      >\n        @for (artist of item().artists?.slice(0, 3); track $index; let last = $last) {\n          <span\n            class=\"text-xs\"\n          >\n            {{ $any(artist).name }}@if (!last) {<span>,&nbsp;</span>}\n          </span>\n        }\n\n        @if (\n          type() === 'media' && ($any(item().organizations)?.length ?? 0) > 0\n        ) {\n          <span class=\"text-xs\">\n            &nbsp;x&nbsp;{{ $any(item().organizations?.[0])?.name ?? '' }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (type() === 'playlist' && item().user) {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ getItemUserName() }}\n        </p>\n      </div>\n    }\n\n    <div class=\"flex pr-2 text-gray-400\">\n      @if (item().year) {\n        <span class=\"text-xs\">\n          {{ item().year }}&nbsp;|&nbsp;\n        </span>\n      }\n\n      @if (item().date) {\n        <span class=\"text-xs\">\n          {{ item().date! | dateLocaleFormat: language()!\n          }}@if (item().styles && $any(item().styles).length > 0) {<span>&nbsp;|&nbsp;</span>}\n        </span>\n      }\n\n      @if (item().styles) {\n        @for (\n          style of $any(item().styles).slice(\n            0,\n            type() == 'event' ? 1 : 3\n          );\n          track $index;\n          let last = $last\n        ) {\n          <span class=\"text-xs\">\n            {{ style.name }}@if (!last) {<span>,&nbsp;</span>}\n          </span>\n        }\n      }\n    </div>\n\n    @if (type() === 'equipment') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ item().manufacturer }}\n        </p>\n      </div>\n    }\n    @if (type() === 'equipment') {\n      <div\n        class=\"flex items-center gap-1 mb-0.5 pr-2\"\n      >\n        <p class=\"text-xs text-gray-400\">\n          {{ $any(item().type).name }}\n        </p>\n      </div>\n    }\n  </div>\n\n  @if (forTop() && position() !== null) {\n    <span\n      id=\"item-compact-position\"\n      class=\"pr-2 ml-auto text-2xl font-bold text-white\"\n    >\n      {{ position() }}º\n    </span>\n  }\n\n  @if (buttonRightIcon()) {\n    <xs-button\n      id=\"item-compact-button-right\"\n      [icon]=\"{ name: buttonRightIcon() || 'circle-question' }\"\n      layout=\"iconOnly\"\n      variant=\"custom\"\n      customClass=\"pr-4 ml-auto text-white\"\n      (onClick)=\"onClickButtonRight.emit(); $event.stopPropagation()\"\n    />\n  }\n\n  @if (isDraggable()) {\n    <xs-button\n      id=\"item-compact-button-draggable\"\n      icon=\"grip-lines\"\n      layout=\"iconOnly\"\n      variant=\"custom\"\n      customClass=\"pr-4 ml-auto text-white\"\n      cdkDragHandle\n    />\n  }\n</div>\n","import { StoryMeta } from '../../../../story.types';\nimport { XSItemCompactComponent } from './xs-item-compact.component';\nimport {\n  mockArtists,\n  mockEvents,\n  mockSites,\n  mockMedia,\n  mockUsers,\n} from '../../../../mocks';\n\nexport const story: StoryMeta = {\n  id: 'item-compact',\n  name: 'Item Compact',\n  type: 'component',\n  subtype: 'UI',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2026-01-04T22:00:00.000Z',\n  created: '2026-01-02T00:44:32.446Z',\n  description:\n    'Componente compacto para mostrar items de diferentes tipos (artistas, eventos, medios, usuarios, etc.) con imagen, nombre, metadatos contextuales y acciones. Incluye soporte para modos de edición, drag & drop, y diferentes layouts según el tipo de contenido. Diseñado para listas densas donde se necesita máxima información en mínimo espacio.',\n  component: XSItemCompactComponent,\n  selector: 'xs-item-compact',\n  inputs: [\n    {\n      key: 'type',\n      label: 'Type',\n      type: 'select',\n      options: [\n        'artist',\n        'organization',\n        'event',\n        'site',\n        'equipment',\n        'playlist',\n        'media',\n        'user',\n      ],\n      default: 'artist',\n    },\n    {\n      key: 'item',\n      label: 'Item',\n      type: 'json',\n      default: mockArtists[0], // Fatima Hajji - complete artist data\n    },\n    {\n      key: 'edit',\n      label: 'Edit',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'year',\n      label: 'Year',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'styles',\n      label: 'Styles',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'link',\n      label: 'Link',\n      type: 'boolean',\n      default: true,\n    },\n  ],\n  examples: [\n    {\n      name: 'Artist Item',\n      description: 'Item compact para artista con datos reales',\n      inputs: {\n        type: 'artist',\n        item: mockArtists[0], // Fatima Hajji\n      },\n    },\n    {\n      name: 'Organization Item',\n      description: 'Item compact para organización',\n      inputs: {\n        type: 'organization',\n        item: mockArtists[0], // Using artist mock for organization example\n      },\n    },\n    {\n      name: 'Event Item',\n      description: 'Item compact para evento con datos reales',\n      inputs: {\n        type: 'event',\n        item: mockEvents[0], // Hale-Bopp Vol.4\n      },\n    },\n    {\n      name: 'Site Item',\n      description: 'Item compact para sitio con datos reales',\n      inputs: {\n        type: 'site',\n        item: mockSites[0], // Smut Athens\n      },\n    },\n    {\n      name: 'Equipment Item',\n      description: 'Item compact para equipo',\n      inputs: {\n        type: 'equipment',\n        item: {\n          name: 'Pioneer DJ Mixer',\n          type: { name: 'DJ Mixer' },\n          manufacturer: 'Pioneer',\n          info: 'Mezclador profesional para DJ',\n          slug: 'pioneer-dj-mixer',\n        },\n      },\n    },\n    {\n      name: 'Playlist Item',\n      description: 'Item compact para playlist',\n      inputs: {\n        type: 'playlist',\n        item: {\n          name: 'My Techno Mix',\n          slug: 'my-techno-mix',\n          tracks: [\n            { _id: 'track1', name: 'Track 1' },\n            { _id: 'track2', name: 'Track 2' },\n          ],\n          private: false,\n          updated: '2026-01-04T10:00:00.000Z',\n        },\n      },\n    },\n    {\n      name: 'Media Item',\n      description: 'Item compact para media con datos reales',\n      inputs: {\n        type: 'media',\n        item: mockMedia[0], // Opening Vinyl Set\n      },\n    },\n    {\n      name: 'User Item',\n      description: 'Item compact para usuario con datos reales',\n      inputs: {\n        type: 'user',\n        item: mockUsers[0], // JoseXS\n      },\n    },\n  ],\n  multilanguage: false,\n  notes: [\n    {\n      text: 'Este componente fue creado automáticamente. Es necesario completar la documentación, inputs y examples.',\n      type: 'warning',\n    },\n  ],\n  coverage: {\n    statements: 98,\n    branches: 82,\n    functions: 100,\n    lines: 98,\n  },\n};\n"],"names":["i3.CountryFlagPipe","i4.DateLocaleFormatPipe"],"mappings":"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AAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpCnC,ihMAgNA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrLI,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,UAAA,EAAA,aAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,iBAAiB,wUACjB,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAC,oBAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAIF,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,QAErB,EAAE,sBAAsB,EAAE,EAAE,EAAE,EAAA,OAAA,EAC3B;wBACP,YAAY;wBACZ,YAAY;wBACZ,iBAAiB;wBACjB,gBAAgB;wBAChB,iBAAiB;wBACjB,WAAW;qBACZ,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ihMAAA,EAAA;;;AExB1C,MAAM,KAAK,GAAc;AAC9B,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC;AAClC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,WAAW,EACT,wVAAwV;AAC1V,IAAA,SAAS,EAAE,sBAAsB;AACjC,IAAA,QAAQ,EAAE,iBAAiB;AAC3B,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE;gBACP,QAAQ;gBACR,cAAc;gBACd,OAAO;gBACP,MAAM;gBACN,WAAW;gBACX,UAAU;gBACV,OAAO;gBACP,MAAM;AACP,aAAA;AACD,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AACxB,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA;AACE,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA;AACE,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,WAAW,EAAE,4CAA4C;AACzD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;AACrB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,mBAAmB;AACzB,YAAA,WAAW,EAAE,gCAAgC;AAC7C,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,cAAc;AACpB,gBAAA,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;AACrB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,YAAY;AAClB,YAAA,WAAW,EAAE,2CAA2C;AACxD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;AACpB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,WAAW,EAAE,0CAA0C;AACvD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACnB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,gBAAgB;AACtB,YAAA,WAAW,EAAE,0BAA0B;AACvC,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,WAAW;AACjB,gBAAA,IAAI,EAAE;AACJ,oBAAA,IAAI,EAAE,kBAAkB;AACxB,oBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;AAC1B,oBAAA,YAAY,EAAE,SAAS;AACvB,oBAAA,IAAI,EAAE,+BAA+B;AACrC,oBAAA,IAAI,EAAE,kBAAkB;AACzB,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,WAAW,EAAE,4BAA4B;AACzC,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,IAAI,EAAE;AACJ,oBAAA,IAAI,EAAE,eAAe;AACrB,oBAAA,IAAI,EAAE,eAAe;AACrB,oBAAA,MAAM,EAAE;AACN,wBAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;AAClC,wBAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;AACnC,qBAAA;AACD,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,OAAO,EAAE,0BAA0B;AACpC,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,YAAY;AAClB,YAAA,WAAW,EAAE,0CAA0C;AACvD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACnB,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,WAAW,EAAE,4CAA4C;AACzD,YAAA,MAAM,EAAE;AACN,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACnB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,KAAK,EAAE;AACL,QAAA;AACE,YAAA,IAAI,EAAE,yGAAyG;AAC/G,YAAA,IAAI,EAAE,SAAS;AAChB,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,UAAU,EAAE,EAAE;AACd,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,SAAS,EAAE,GAAG;AACd,QAAA,KAAK,EAAE,EAAE;AACV,KAAA;;;;;"}

package/fesm2022/xsmusices-ui-xs-item-type.xsstory-DUeCnW0R.mjs

@@ -0,0 +1,252 @@
+import { XSItemTypeComponent } from './xsmusices-ui.mjs';
+import { m as mockArtists, a as mockEvents, b as mockSites, c as mockMedia, d as mockUsers, e as mockOrganizations, f as mockEquipment, g as mockTrackings } from './xsmusices-ui-index-DRXscULI.mjs';
+
+const story = {
+    id: 'item-type',
+    name: 'Item Type',
+    type: 'component',
+    subtype: 'UI',
+    status: 'active',
+    usage: ['admin', 'app', 'monitor'],
+    updated: '2026-01-26T23:04:09.996Z',
+    created: '2026-01-11T12:51:28.669Z',
+    description: 'Componente completamente refactorizado con arquitectura modular. Cada tipo de item tiene su propio componente especializado: artist, user, lastLogin, lastVisit, y tracking. El componente principal delega a componentes específicos para mejor mantenibilidad. Componente de 2 líneas para mostrar items de tipo con imagen, nombre y segunda línea contextual.',
+    component: XSItemTypeComponent,
+    selector: 'xs-item-type',
+    inputs: [
+        {
+            key: 'item',
+            label: 'Item',
+            type: 'json',
+            default: {},
+        },
+        {
+            key: 'itemType',
+            label: 'Item Type',
+            type: 'select',
+            options: [
+                'artist',
+                'event',
+                'site',
+                'playlist',
+                'organization',
+                'user',
+                'userStats',
+                'lastLogin',
+                'equipment',
+                'lastVisit',
+            ],
+            default: 'artist',
+        },
+        {
+            key: 'isLink',
+            label: 'Is Link',
+            type: 'boolean',
+            default: true,
+        },
+        {
+            key: 'showChevron',
+            label: 'Show Chevron',
+            type: 'boolean',
+            default: false,
+        },
+        {
+            key: 'size',
+            label: 'Size',
+            type: 'select',
+            options: ['normal', 'small'],
+            default: 'normal',
+        },
+    ],
+    examples: [
+        {
+            name: 'Artista',
+            description: 'Artista española mostrada con nombre y país',
+            inputs: {
+                item: mockArtists[0], // Fatima Hajji
+                itemType: 'artist',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Evento',
+            description: 'Evento mostrado con formato "Nombre @ Lugar - Fecha" e información de ubicación',
+            inputs: {
+                item: mockEvents[0], // Hale-Bopp Vol.4
+                itemType: 'event',
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Club con Región',
+            description: 'Club mostrado con región y país',
+            inputs: {
+                item: mockSites[0], // Smut Athens
+                itemType: 'site',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Media con Artistas',
+            description: 'Media mostrado con título "Nombre - Lugar" y segunda línea con artistas sin @',
+            inputs: {
+                item: mockMedia[0], // Opening Vinyl Set
+                itemType: 'media',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Usuario',
+            description: 'Usuario mostrado con nombre y país',
+            inputs: {
+                item: mockUsers[0], // JoseXS
+                itemType: 'user',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Usuario con Estadísticas',
+            description: 'Usuario mostrado con nombre y estadísticas (value y unit) a la derecha',
+            inputs: {
+                item: { ...mockUsers[0], value: 880, unit: 'likes' },
+                itemType: 'userStats',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Artista con Seguidores',
+            description: 'Artista mostrado con número de seguidores',
+            inputs: {
+                item: {
+                    ...mockArtists[0],
+                    value: 15420,
+                    unit: 'seguidores',
+                },
+                itemType: 'artist',
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Evento con Asistentes',
+            description: 'Evento mostrado con número de asistentes confirmados',
+            inputs: {
+                item: {
+                    ...mockEvents[0],
+                    value: 250,
+                    unit: 'asistentes',
+                },
+                itemType: 'event',
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Playlist con Reproducciones',
+            description: 'Playlist mostrada con número de reproducciones',
+            inputs: {
+                item: {
+                    id: 'playlist-1',
+                    name: 'Éxitos del 2026',
+                    description: 'Los mejores hits del año',
+                    trackCount: 25,
+                    duration: '2h 15m',
+                },
+                itemType: 'playlist',
+                value: 125000,
+                unit: 'reproducciones',
+                showChevron: true,
+            },
+        },
+        {
+            name: 'Item Simple',
+            description: 'Item simple con título y valor',
+            inputs: {
+                item: {
+                    title: 'Reproducciones',
+                    value: 1250,
+                    label: 'esta semana',
+                },
+                itemType: 'userStats',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Organización',
+            description: 'Organización mostrada con nombre y país',
+            inputs: {
+                item: mockOrganizations[0], // XSMusic Productions
+                itemType: 'organization',
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Equipo',
+            description: 'Equipo mostrado con nombre y país',
+            inputs: {
+                item: mockEquipment[0], // Pioneer DJ XDJ-1000
+                itemType: 'equipment',
+                showCountry: true,
+                showChevron: false,
+            },
+        },
+        {
+            name: 'Last Login',
+            description: 'Usuario con información de último login integrada (sin slots)',
+            inputs: {
+                item: mockUsers[0],
+                itemType: 'lastLogin',
+                showCountry: false,
+                showChevron: false,
+                size: 'small',
+            },
+            template: `
+        <xs-item-type [item]="item" [itemType]="'lastLogin'" [showChevron]="false"></xs-item-type>
+      `,
+        },
+        {
+            name: 'Tracking',
+            description: 'Seguimiento de acción del sistema con información de usuario',
+            inputs: {
+                item: mockTrackings[1],
+                itemType: 'tracking',
+                showChevron: true,
+                size: 'small',
+            },
+            template: `
+        <xs-item-type [item]="item" [itemType]="'tracking'" [showChevron]="true"></xs-item-type>
+      `,
+        },
+        {
+            name: 'Last Visit',
+            description: 'Última visita a un item con información del dispositivo y usuario',
+            inputs: {
+                item: {
+                    type: 'artist',
+                    name: 'Fatima Hajji',
+                    artist: mockArtists[0], // Fatima Hajji
+                    deviceBrand: 'Android',
+                    appType: 'mobile',
+                    deviceCountry: 'es',
+                    user: mockUsers[0], // JoseXS
+                    created: '2026-01-09T17:30:00.000Z',
+                },
+                itemType: 'lastVisit',
+                showChevron: false,
+                size: 'small',
+            },
+            template: `
+        <xs-item-type [item]="item" [itemType]="'lastVisit'" [showChevron]="false"></xs-item-type>
+      `,
+        },
+    ],
+    multilanguage: false,
+    notes: [],
+    coverage: {
+        "statements": 13,
+        "branches": 0,
+        "functions": 0,
+        "lines": 13
+    },
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-item-type.xsstory-DUeCnW0R.mjs.map

package/fesm2022/xsmusices-ui-xs-item-type.xsstory-DUeCnW0R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-item-type.xsstory-DUeCnW0R.mjs","sources":["../../../projects/xs-ui/src/lib/components/ui/items/type/xs-item-type.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../../story.types';\nimport { XSItemTypeComponent } from './xs-item-type.component';\nimport {\n  mockArtists,\n  mockEvents,\n  mockSites,\n  mockMedia,\n  mockUsers,\n  mockOrganizations,\n  mockEquipment,\n  mockTrackings,\n} from '../../../../mocks';\n\nexport const story: StoryMeta = {\n  id: 'item-type',\n  name: 'Item Type',\n  type: 'component',\n  subtype: 'UI',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  updated: '2026-01-26T23:04:09.996Z',\n  created: '2026-01-11T12:51:28.669Z',\n  description:\n    'Componente completamente refactorizado con arquitectura modular. Cada tipo de item tiene su propio componente especializado: artist, user, lastLogin, lastVisit, y tracking. El componente principal delega a componentes específicos para mejor mantenibilidad. Componente de 2 líneas para mostrar items de tipo con imagen, nombre y segunda línea contextual.',\n  component: XSItemTypeComponent,\n  selector: 'xs-item-type',\n  inputs: [\n    {\n      key: 'item',\n      label: 'Item',\n      type: 'json',\n      default: {},\n    },\n    {\n      key: 'itemType',\n      label: 'Item Type',\n      type: 'select',\n      options: [\n        'artist',\n        'event',\n        'site',\n        'playlist',\n        'organization',\n        'user',\n        'userStats',\n        'lastLogin',\n        'equipment',\n        'lastVisit',\n      ],\n      default: 'artist',\n    },\n    {\n      key: 'isLink',\n      label: 'Is Link',\n      type: 'boolean',\n      default: true,\n    },\n    {\n      key: 'showChevron',\n      label: 'Show Chevron',\n      type: 'boolean',\n      default: false,\n    },\n    {\n      key: 'size',\n      label: 'Size',\n      type: 'select',\n      options: ['normal', 'small'],\n      default: 'normal',\n    },\n  ],\n  examples: [\n    {\n      name: 'Artista',\n      description: 'Artista española mostrada con nombre y país',\n      inputs: {\n        item: mockArtists[0], // Fatima Hajji\n        itemType: 'artist',\n\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Evento',\n      description:\n        'Evento mostrado con formato \"Nombre @ Lugar - Fecha\" e información de ubicación',\n      inputs: {\n        item: mockEvents[0], // Hale-Bopp Vol.4\n        itemType: 'event',\n        showChevron: true,\n      },\n    },\n    {\n      name: 'Club con Región',\n      description: 'Club mostrado con región y país',\n      inputs: {\n        item: mockSites[0], // Smut Athens\n        itemType: 'site',\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Media con Artistas',\n      description:\n        'Media mostrado con título \"Nombre - Lugar\" y segunda línea con artistas sin @',\n      inputs: {\n        item: mockMedia[0], // Opening Vinyl Set\n        itemType: 'media',\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Usuario',\n      description: 'Usuario mostrado con nombre y país',\n      inputs: {\n        item: mockUsers[0], // JoseXS\n        itemType: 'user',\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Usuario con Estadísticas',\n      description:\n        'Usuario mostrado con nombre y estadísticas (value y unit) a la derecha',\n      inputs: {\n        item: { ...mockUsers[0], value: 880, unit: 'likes' },\n        itemType: 'userStats',\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Artista con Seguidores',\n      description: 'Artista mostrado con número de seguidores',\n      inputs: {\n        item: {\n          ...mockArtists[0],\n          value: 15420,\n          unit: 'seguidores',\n        },\n        itemType: 'artist',\n        showChevron: true,\n      },\n    },\n    {\n      name: 'Evento con Asistentes',\n      description:\n        'Evento mostrado con número de asistentes confirmados',\n      inputs: {\n        item: {\n          ...mockEvents[0],\n          value: 250,\n          unit: 'asistentes',\n        },\n        itemType: 'event',\n        showChevron: true,\n      },\n    },\n    {\n      name: 'Playlist con Reproducciones',\n      description:\n        'Playlist mostrada con número de reproducciones',\n      inputs: {\n        item: {\n          id: 'playlist-1',\n          name: 'Éxitos del 2026',\n          description: 'Los mejores hits del año',\n          trackCount: 25,\n          duration: '2h 15m',\n        },\n        itemType: 'playlist',\n        value: 125000,\n        unit: 'reproducciones',\n        showChevron: true,\n      },\n    },\n    {\n      name: 'Item Simple',\n      description: 'Item simple con título y valor',\n      inputs: {\n        item: {\n          title: 'Reproducciones',\n          value: 1250,\n          label: 'esta semana',\n        },\n        itemType: 'userStats',\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Organización',\n      description: 'Organización mostrada con nombre y país',\n      inputs: {\n        item: mockOrganizations[0], // XSMusic Productions\n        itemType: 'organization',\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Equipo',\n      description: 'Equipo mostrado con nombre y país',\n      inputs: {\n        item: mockEquipment[0], // Pioneer DJ XDJ-1000\n        itemType: 'equipment',\n        showCountry: true,\n        showChevron: false,\n      },\n    },\n    {\n      name: 'Last Login',\n      description:\n        'Usuario con información de último login integrada (sin slots)',\n      inputs: {\n        item: mockUsers[0],\n        itemType: 'lastLogin',\n        showCountry: false,\n        showChevron: false,\n        size: 'small',\n      },\n      template: `\n        <xs-item-type [item]=\"item\" [itemType]=\"'lastLogin'\" [showChevron]=\"false\"></xs-item-type>\n      `,\n    },\n    {\n      name: 'Tracking',\n      description:\n        'Seguimiento de acción del sistema con información de usuario',\n      inputs: {\n        item: mockTrackings[1],\n        itemType: 'tracking',\n        showChevron: true,\n        size: 'small',\n      },\n      template: `\n        <xs-item-type [item]=\"item\" [itemType]=\"'tracking'\" [showChevron]=\"true\"></xs-item-type>\n      `,\n    },\n    {\n      name: 'Last Visit',\n      description:\n        'Última visita a un item con información del dispositivo y usuario',\n      inputs: {\n        item: {\n          type: 'artist',\n          name: 'Fatima Hajji',\n          artist: mockArtists[0], // Fatima Hajji\n          deviceBrand: 'Android',\n          appType: 'mobile',\n          deviceCountry: 'es',\n          user: mockUsers[0], // JoseXS\n          created: '2026-01-09T17:30:00.000Z',\n        },\n        itemType: 'lastVisit',\n        showChevron: false,\n        size: 'small',\n      },\n      template: `\n        <xs-item-type [item]=\"item\" [itemType]=\"'lastVisit'\" [showChevron]=\"false\"></xs-item-type>\n      `,\n    },\n  ],\n  multilanguage: false,\n  notes: [],\n  coverage: {\n  \"statements\": 13,\n  \"branches\": 0,\n  \"functions\": 0,\n  \"lines\": 13\n},\n};\n"],"names":[],"mappings":"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"}