@xsmusices/ui 1.44.12 → 1.44.15

package/fesm2022/xsmusices-ui.mjs

@@ -17731,7 +17731,7 @@ class XSTableItemsEntityComponent {
         return !Array.isArray(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsEntityComponent, isStandalone: true, selector: "xs-table-items-entity", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let i = $any(item());\n@switch (header().type) {\n  @case ('artist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          rounded=\"lg\"\n          [objectFit]=\"'cover'\"\n          size=\"full\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n          }}\n        </p>\n        @if (i.country || itemForDisplay.country) {\n          <div class=\"flex items-center gap-1\">\n            <xs-image\n              [src]=\"\n                i.country?.code ||\n                  itemForDisplay.country?.code ||\n                  i.country ||\n                  itemForDisplay.country | countryFlag\n              \"\n              rounded=\"none\"\n              [objectFit]=\"'cover'\"\n              customClass=\"w-4 h-3\"\n            ></xs-image>\n            <p\n              class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n            >\n              {{\n                i.country?.name ||\n                  itemForDisplay.country?.name ||\n                  (i.country | countryName) ||\n                  (itemForDisplay.country | countryName)\n              }}\n            </p>\n          </div>\n        }\n        @if (!(i.country || itemForDisplay.country)) {\n          <p\n            class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n          >\n            {{ textsService.notClaimed }}\n          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('artistNameAdmin') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          size=\"full\"\n          rounded=\"lg\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-tight text-black dark:text-white\"\n        >\n          {{ itemForDisplay.name || i.name | truncateText: 40 }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('event') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'event'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('media') {\n    @if (\n      itemForDisplay && itemForDisplay.name !== 'Desconocido'\n    ) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'media'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 40\n            }}\n          </p>\n          @if (itemForDisplay || item()) {\n            <div class=\"flex gap-1 items-center\">\n              <p class=\"text-xs font-light text-gray-400\">\n                @if (\n                  getArtists(itemForDisplay || item()).length > 0\n                ) {\n                  @for (\n                    artist of getArtists(\n                      itemForDisplay || item()\n                    ) | sliceArray: 0 : 3;\n                    track $index\n                  ) {\n                    @if ($index !== 0) {\n                      <span> & </span>\n                    }\n                    {{ artist.name }}\n                  }\n                } @else {\n                  {{\n                    (itemForDisplay.artist || i.artist)?.name ||\n                      (itemForDisplay.user || i.user)?.name ||\n                      '---'\n                  }}\n                }\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  }\n  @case ('site') {\n    @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n      <p\n        class=\"text-base font-bold leading-none text-black dark:text-white\"\n      >\n        -\n      </p>\n    } @else {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'site'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 20\n            }}\n          </p>\n          <div class=\"flex items-center gap-1\">\n            @if (itemForDisplay.address?.country?.code) {\n              <xs-image\n                [src]=\"\n                  itemForDisplay.address?.country?.code\n                    | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n            }\n            <span class=\"text-xs font-light text-gray-400\">\n              {{\n                itemForDisplay.address?.region\n                  ? (itemForDisplay.address.region.name\n                    | fixRegion\n                    | truncateText: 20)\n                  : (itemForDisplay.address?.country?.code\n                    | countryName)\n              }}\n            </span>\n          </div>\n        </div>\n      </div>\n    }\n  }\n  @case ('siteItem') {\n    @if (i.site) {\n      @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          -\n        </p>\n      } @else {\n        <div class=\"flex items-center w-64 gap-3\">\n          <div class=\"w-10 h-10\">\n            <xs-image\n              [item]=\"i.site\"\n              [typeItem]=\"'site'\"\n              [imageType]=\"'small'\"\n              rounded=\"lg\"\n              customClass=\"object-cover object-center w-10 h-10\"\n            ></xs-image>\n          </div>\n          <div class=\"flex flex-col\">\n            <p\n              class=\"text-base font-bold leading-none text-black dark:text-white\"\n            >\n              {{ i.site.name | truncateText: 20 }}\n            </p>\n            <div\n              class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n            >\n              <xs-image\n                [src]=\"\n                  i.site.address?.country?.code | countryFlag\n                \"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span>\n                {{\n                  i.site.address?.region\n                    ? (i.site.address?.region.name\n                      | fixRegion\n                      | truncateText: 20)\n                    : (i.site.address?.town | truncateText: 20)\n                }}\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  }\n  @case ('organization') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'organization'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n        <div class=\"flex items-center gap-1\">\n          @if (\n            itemForDisplay.country?.code ||\n            (itemForDisplay.country &&\n              itemForDisplay.country.length &&\n              isNotArray(itemForDisplay.country))\n          ) {\n            <xs-image\n              [src]=\"\n                itemForDisplay.country?.code ||\n                  itemForDisplay.country | countryFlag\n              \"\n              rounded=\"none\"\n              customClass=\"w-4 h-3\"\n            ></xs-image>\n          }\n          <span class=\"text-xs font-light text-gray-400\">\n            {{\n              itemForDisplay.country?.name ||\n                (itemForDisplay.country &&\n                itemForDisplay.country.length &&\n                isNotArray(itemForDisplay.country)\n                  ? (itemForDisplay.country | countryName)\n                  : '')\n            }}\n          </span>\n        </div>\n      </div>\n    </div>\n  }\n  @case ('organizationObject') {\n    @if (i.organizations?.length > 0) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"i.organizations[0]\"\n            [typeItem]=\"'organization'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col justify-center gap-1\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{ i.organizations[0]?.name | truncateText: 40 }}\n          </p>\n          @if (i.organizations[0].country) {\n            <div class=\"flex items-center gap-1\">\n              <xs-image\n                [src]=\"\n                  i.organizations[0].country?.code ||\n                    i.organizations[0].country | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span class=\"text-xs font-light text-gray-400\">\n                {{\n                  i.organizations[0].country?.name ||\n                    (i.organizations[0].country | countryName)\n                }}\n              </span>\n            </div>\n          }\n        </div>\n        @if (i.organizations.length > 1) {\n          <p class=\"text-sm text-gray-500\">\n            +{{ i.organizations.length - 1 }}\n          </p>\n        }\n      </div>\n    }\n    @if (!i.organizations || i.organizations.length === 0) {\n      <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n    }\n  }\n  @case ('equipment') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"'equipment'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <p class=\"text-xs font-extralight\">\n          {{\n            i.manufacturer ??\n              (i.equipment && i.equipment.length\n                ? i.equipment[0]\n                : '')\n          }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('equipmentSetupArtist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"i.artist\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.artist.name | truncateText: 40 }}\n        </p>\n        <p\n          class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n        >\n          <xs-image\n            [src]=\"i.artist.country?.code | countryFlag\"\n            rounded=\"none\"\n            objectFit=\"cover\"\n            customClass=\"w-4 h-3\"\n          ></xs-image>\n          {{ i.artist.country?.name | truncateText: 20 }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('itemContactManagement') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"i.type\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <div class=\"flex items-center gap-1\">\n          <xs-image\n            [item]=\"i.country\"\n            [typeItem]=\"'flag'\"\n            [imageType]=\"'small'\"\n            rounded=\"none\"\n            customClass=\"w-4 h-4\"\n          ></xs-image>\n          <p class=\"text-xs font-extralight\">\n            {{ i.country?.name }}\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: CountryFlagPipe, name: "countryFlag" }, { kind: "pipe", type: CountryNamePipe, name: "countryName" }, { kind: "pipe", type: TruncateTextPipe, name: "truncateText" }, { kind: "pipe", type: FixRegionPipe, name: "fixRegion" }, { kind: "pipe", type: SliceArrayPipe, name: "sliceArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsEntityComponent, isStandalone: true, selector: "xs-table-items-entity", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let i = $any(item());\n@switch (header().type) {\n  @case ('artist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          rounded=\"lg\"\n          [objectFit]=\"'cover'\"\n          size=\"full\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n          }}\n        </p>\n        @if (i.country || itemForDisplay.country) {\n          <div class=\"flex items-center gap-1\">\n            <xs-image\n              [src]=\"\n                i.country?.code ||\n                  itemForDisplay.country?.code ||\n                  i.country ||\n                  itemForDisplay.country | countryFlag\n              \"\n              rounded=\"none\"\n              [objectFit]=\"'cover'\"\n              customClass=\"w-4 h-3\"\n            ></xs-image>\n            <p\n              class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n            >\n              {{\n                i.country?.name ||\n                  itemForDisplay.country?.name ||\n                  (i.country | countryName) ||\n                  (itemForDisplay.country | countryName)\n              }}\n            </p>\n          </div>\n        }\n        @if (!(i.country || itemForDisplay.country)) {\n          <p\n            class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n          >\n            {{ textsService.notClaimed }}\n          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('artistNameAdmin') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          size=\"full\"\n          rounded=\"lg\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-tight text-black dark:text-white\"\n        >\n          {{ itemForDisplay.name || i.name | truncateText: 40 }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('event') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'event'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('media') {\n    @if (\n      itemForDisplay && itemForDisplay.name !== 'Desconocido'\n    ) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'media'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 40\n            }}\n          </p>\n          @if (itemForDisplay || item()) {\n            <div class=\"flex gap-1 items-center\">\n              <p class=\"text-xs font-light text-gray-400\">\n                @if (\n                  getArtists(itemForDisplay || item()).length > 0\n                ) {\n                  @for (\n                    artist of getArtists(\n                      itemForDisplay || item()\n                    ) | sliceArray: 0 : 3;\n                    track $index\n                  ) {\n                    @if ($index !== 0) {\n                      <span> & </span>\n                    }\n                    {{ artist.name }}\n                  }\n                } @else {\n                  {{\n                    (itemForDisplay.artist || i.artist)?.name ||\n                      (itemForDisplay.user || i.user)?.name ||\n                      '---'\n                  }}\n                }\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  }\n  @case ('site') {\n    @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n      <p\n        class=\"text-base font-bold leading-none text-black dark:text-white\"\n      >\n        -\n      </p>\n    } @else {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'site'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 20\n            }}\n          </p>\n          <div class=\"flex items-center gap-1\">\n            @if (itemForDisplay.address?.country?.code) {\n              <xs-image\n                [src]=\"\n                  itemForDisplay.address?.country?.code\n                    | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n            }\n            <span class=\"text-xs font-light text-gray-400\">\n              {{\n                itemForDisplay.address?.region\n                  ? (itemForDisplay.address.region.name\n                    | fixRegion\n                    | truncateText: 20)\n                  : (itemForDisplay.address?.country?.code\n                    | countryName)\n              }}\n            </span>\n          </div>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n        </div>\n      </div>\n    }\n  }\n  @case ('siteItem') {\n    @if (i.site) {\n      @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          -\n        </p>\n      } @else {\n        <div class=\"flex items-center w-64 gap-3\">\n          <div class=\"w-10 h-10\">\n            <xs-image\n              [item]=\"i.site\"\n              [typeItem]=\"'site'\"\n              [imageType]=\"'small'\"\n              rounded=\"lg\"\n              customClass=\"object-cover object-center w-10 h-10\"\n            ></xs-image>\n          </div>\n          <div class=\"flex flex-col\">\n            <p\n              class=\"text-base font-bold leading-none text-black dark:text-white\"\n            >\n              {{ i.site.name | truncateText: 20 }}\n            </p>\n            <div\n              class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n            >\n              <xs-image\n                [src]=\"\n                  i.site.address?.country?.code | countryFlag\n                \"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span>\n                {{\n                  i.site.address?.region\n                    ? (i.site.address?.region.name\n                      | fixRegion\n                      | truncateText: 20)\n                    : (i.site.address?.town | truncateText: 20)\n                }}\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  }\n  @case ('organization') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'organization'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('organizationObject') {\n    @if (i.organizations?.length > 0) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"i.organizations[0]\"\n            [typeItem]=\"'organization'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col justify-center gap-1\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{ i.organizations[0]?.name | truncateText: 40 }}\n          </p>\n          @if (i.organizations[0].country) {\n            <div class=\"flex items-center gap-1\">\n              <xs-image\n                [src]=\"\n                  i.organizations[0].country?.code ||\n                    i.organizations[0].country | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span class=\"text-xs font-light text-gray-400\">\n                {{\n                  i.organizations[0].country?.name ||\n                    (i.organizations[0].country | countryName)\n                }}\n              </span>\n            </div>\n          }\n        </div>\n        @if (i.organizations.length > 1) {\n          <p class=\"text-sm text-gray-500\">\n            +{{ i.organizations.length - 1 }}\n          </p>\n        }\n      </div>\n    }\n    @if (!i.organizations || i.organizations.length === 0) {\n      <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n    }\n  }\n  @case ('equipment') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"'equipment'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <p class=\"text-xs font-extralight\">\n          {{\n            i.manufacturer ??\n              (i.equipment && i.equipment.length\n                ? i.equipment[0]\n                : '')\n          }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('equipmentSetupArtist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"i.artist\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.artist.name | truncateText: 40 }}\n        </p>\n        <p\n          class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n        >\n          <xs-image\n            [src]=\"i.artist.country?.code | countryFlag\"\n            rounded=\"none\"\n            objectFit=\"cover\"\n            customClass=\"w-4 h-3\"\n          ></xs-image>\n          {{ i.artist.country?.name | truncateText: 20 }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('itemContactManagement') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"i.type\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <div class=\"flex items-center gap-1\">\n          <xs-image\n            [item]=\"i.country\"\n            [typeItem]=\"'flag'\"\n            [imageType]=\"'small'\"\n            rounded=\"none\"\n            customClass=\"w-4 h-4\"\n          ></xs-image>\n          <p class=\"text-xs font-extralight\">\n            {{ i.country?.name }}\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: CountryFlagPipe, name: "countryFlag" }, { kind: "pipe", type: CountryNamePipe, name: "countryName" }, { kind: "pipe", type: TruncateTextPipe, name: "truncateText" }, { kind: "pipe", type: FixRegionPipe, name: "fixRegion" }, { kind: "pipe", type: SliceArrayPipe, name: "sliceArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsEntityComponent, decorators: [{
             type: Component,
@@ -17743,7 +17743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         TruncateTextPipe,
                         FixRegionPipe,
                         SliceArrayPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = $any(item());\n@switch (header().type) {\n  @case ('artist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          rounded=\"lg\"\n          [objectFit]=\"'cover'\"\n          size=\"full\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n          }}\n        </p>\n        @if (i.country || itemForDisplay.country) {\n          <div class=\"flex items-center gap-1\">\n            <xs-image\n              [src]=\"\n                i.country?.code ||\n                  itemForDisplay.country?.code ||\n                  i.country ||\n                  itemForDisplay.country | countryFlag\n              \"\n              rounded=\"none\"\n              [objectFit]=\"'cover'\"\n              customClass=\"w-4 h-3\"\n            ></xs-image>\n            <p\n              class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n            >\n              {{\n                i.country?.name ||\n                  itemForDisplay.country?.name ||\n                  (i.country | countryName) ||\n                  (itemForDisplay.country | countryName)\n              }}\n            </p>\n          </div>\n        }\n        @if (!(i.country || itemForDisplay.country)) {\n          <p\n            class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n          >\n            {{ textsService.notClaimed }}\n          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('artistNameAdmin') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          size=\"full\"\n          rounded=\"lg\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-tight text-black dark:text-white\"\n        >\n          {{ itemForDisplay.name || i.name | truncateText: 40 }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('event') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'event'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('media') {\n    @if (\n      itemForDisplay && itemForDisplay.name !== 'Desconocido'\n    ) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'media'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 40\n            }}\n          </p>\n          @if (itemForDisplay || item()) {\n            <div class=\"flex gap-1 items-center\">\n              <p class=\"text-xs font-light text-gray-400\">\n                @if (\n                  getArtists(itemForDisplay || item()).length > 0\n                ) {\n                  @for (\n                    artist of getArtists(\n                      itemForDisplay || item()\n                    ) | sliceArray: 0 : 3;\n                    track $index\n                  ) {\n                    @if ($index !== 0) {\n                      <span> & </span>\n                    }\n                    {{ artist.name }}\n                  }\n                } @else {\n                  {{\n                    (itemForDisplay.artist || i.artist)?.name ||\n                      (itemForDisplay.user || i.user)?.name ||\n                      '---'\n                  }}\n                }\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  }\n  @case ('site') {\n    @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n      <p\n        class=\"text-base font-bold leading-none text-black dark:text-white\"\n      >\n        -\n      </p>\n    } @else {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'site'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 20\n            }}\n          </p>\n          <div class=\"flex items-center gap-1\">\n            @if (itemForDisplay.address?.country?.code) {\n              <xs-image\n                [src]=\"\n                  itemForDisplay.address?.country?.code\n                    | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n            }\n            <span class=\"text-xs font-light text-gray-400\">\n              {{\n                itemForDisplay.address?.region\n                  ? (itemForDisplay.address.region.name\n                    | fixRegion\n                    | truncateText: 20)\n                  : (itemForDisplay.address?.country?.code\n                    | countryName)\n              }}\n            </span>\n          </div>\n        </div>\n      </div>\n    }\n  }\n  @case ('siteItem') {\n    @if (i.site) {\n      @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          -\n        </p>\n      } @else {\n        <div class=\"flex items-center w-64 gap-3\">\n          <div class=\"w-10 h-10\">\n            <xs-image\n              [item]=\"i.site\"\n              [typeItem]=\"'site'\"\n              [imageType]=\"'small'\"\n              rounded=\"lg\"\n              customClass=\"object-cover object-center w-10 h-10\"\n            ></xs-image>\n          </div>\n          <div class=\"flex flex-col\">\n            <p\n              class=\"text-base font-bold leading-none text-black dark:text-white\"\n            >\n              {{ i.site.name | truncateText: 20 }}\n            </p>\n            <div\n              class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n            >\n              <xs-image\n                [src]=\"\n                  i.site.address?.country?.code | countryFlag\n                \"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span>\n                {{\n                  i.site.address?.region\n                    ? (i.site.address?.region.name\n                      | fixRegion\n                      | truncateText: 20)\n                    : (i.site.address?.town | truncateText: 20)\n                }}\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  }\n  @case ('organization') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'organization'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n        <div class=\"flex items-center gap-1\">\n          @if (\n            itemForDisplay.country?.code ||\n            (itemForDisplay.country &&\n              itemForDisplay.country.length &&\n              isNotArray(itemForDisplay.country))\n          ) {\n            <xs-image\n              [src]=\"\n                itemForDisplay.country?.code ||\n                  itemForDisplay.country | countryFlag\n              \"\n              rounded=\"none\"\n              customClass=\"w-4 h-3\"\n            ></xs-image>\n          }\n          <span class=\"text-xs font-light text-gray-400\">\n            {{\n              itemForDisplay.country?.name ||\n                (itemForDisplay.country &&\n                itemForDisplay.country.length &&\n                isNotArray(itemForDisplay.country)\n                  ? (itemForDisplay.country | countryName)\n                  : '')\n            }}\n          </span>\n        </div>\n      </div>\n    </div>\n  }\n  @case ('organizationObject') {\n    @if (i.organizations?.length > 0) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"i.organizations[0]\"\n            [typeItem]=\"'organization'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col justify-center gap-1\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{ i.organizations[0]?.name | truncateText: 40 }}\n          </p>\n          @if (i.organizations[0].country) {\n            <div class=\"flex items-center gap-1\">\n              <xs-image\n                [src]=\"\n                  i.organizations[0].country?.code ||\n                    i.organizations[0].country | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span class=\"text-xs font-light text-gray-400\">\n                {{\n                  i.organizations[0].country?.name ||\n                    (i.organizations[0].country | countryName)\n                }}\n              </span>\n            </div>\n          }\n        </div>\n        @if (i.organizations.length > 1) {\n          <p class=\"text-sm text-gray-500\">\n            +{{ i.organizations.length - 1 }}\n          </p>\n        }\n      </div>\n    }\n    @if (!i.organizations || i.organizations.length === 0) {\n      <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n    }\n  }\n  @case ('equipment') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"'equipment'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <p class=\"text-xs font-extralight\">\n          {{\n            i.manufacturer ??\n              (i.equipment && i.equipment.length\n                ? i.equipment[0]\n                : '')\n          }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('equipmentSetupArtist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"i.artist\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.artist.name | truncateText: 40 }}\n        </p>\n        <p\n          class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n        >\n          <xs-image\n            [src]=\"i.artist.country?.code | countryFlag\"\n            rounded=\"none\"\n            objectFit=\"cover\"\n            customClass=\"w-4 h-3\"\n          ></xs-image>\n          {{ i.artist.country?.name | truncateText: 20 }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('itemContactManagement') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"i.type\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <div class=\"flex items-center gap-1\">\n          <xs-image\n            [item]=\"i.country\"\n            [typeItem]=\"'flag'\"\n            [imageType]=\"'small'\"\n            rounded=\"none\"\n            customClass=\"w-4 h-4\"\n          ></xs-image>\n          <p class=\"text-xs font-extralight\">\n            {{ i.country?.name }}\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = $any(item());\n@switch (header().type) {\n  @case ('artist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          rounded=\"lg\"\n          [objectFit]=\"'cover'\"\n          size=\"full\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n          }}\n        </p>\n        @if (i.country || itemForDisplay.country) {\n          <div class=\"flex items-center gap-1\">\n            <xs-image\n              [src]=\"\n                i.country?.code ||\n                  itemForDisplay.country?.code ||\n                  i.country ||\n                  itemForDisplay.country | countryFlag\n              \"\n              rounded=\"none\"\n              [objectFit]=\"'cover'\"\n              customClass=\"w-4 h-3\"\n            ></xs-image>\n            <p\n              class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n            >\n              {{\n                i.country?.name ||\n                  itemForDisplay.country?.name ||\n                  (i.country | countryName) ||\n                  (itemForDisplay.country | countryName)\n              }}\n            </p>\n          </div>\n        }\n        @if (!(i.country || itemForDisplay.country)) {\n          <p\n            class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n          >\n            {{ textsService.notClaimed }}\n          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('artistNameAdmin') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          [viewTransitionName]=\"itemForImage?._id || i._id\"\n          size=\"full\"\n          rounded=\"lg\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-tight text-black dark:text-white\"\n        >\n          {{ itemForDisplay.name || i.name | truncateText: 40 }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('event') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'event'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('media') {\n    @if (\n      itemForDisplay && itemForDisplay.name !== 'Desconocido'\n    ) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'media'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 40\n            }}\n          </p>\n          @if (itemForDisplay || item()) {\n            <div class=\"flex gap-1 items-center\">\n              <p class=\"text-xs font-light text-gray-400\">\n                @if (\n                  getArtists(itemForDisplay || item()).length > 0\n                ) {\n                  @for (\n                    artist of getArtists(\n                      itemForDisplay || item()\n                    ) | sliceArray: 0 : 3;\n                    track $index\n                  ) {\n                    @if ($index !== 0) {\n                      <span> & </span>\n                    }\n                    {{ artist.name }}\n                  }\n                } @else {\n                  {{\n                    (itemForDisplay.artist || i.artist)?.name ||\n                      (itemForDisplay.user || i.user)?.name ||\n                      '---'\n                  }}\n                }\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  }\n  @case ('site') {\n    @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n      <p\n        class=\"text-base font-bold leading-none text-black dark:text-white\"\n      >\n        -\n      </p>\n    } @else {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"itemForImage\"\n            [typeItem]=\"'site'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            size=\"full\"\n            objectFit=\"cover\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{\n              itemForDisplay.name ||\n                itemForDisplay.title ||\n                i.name | truncateText: 20\n            }}\n          </p>\n          <div class=\"flex items-center gap-1\">\n            @if (itemForDisplay.address?.country?.code) {\n              <xs-image\n                [src]=\"\n                  itemForDisplay.address?.country?.code\n                    | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n            }\n            <span class=\"text-xs font-light text-gray-400\">\n              {{\n                itemForDisplay.address?.region\n                  ? (itemForDisplay.address.region.name\n                    | fixRegion\n                    | truncateText: 20)\n                  : (itemForDisplay.address?.country?.code\n                    | countryName)\n              }}\n            </span>\n          </div>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n        </div>\n      </div>\n    }\n  }\n  @case ('siteItem') {\n    @if (i.site) {\n      @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          -\n        </p>\n      } @else {\n        <div class=\"flex items-center w-64 gap-3\">\n          <div class=\"w-10 h-10\">\n            <xs-image\n              [item]=\"i.site\"\n              [typeItem]=\"'site'\"\n              [imageType]=\"'small'\"\n              rounded=\"lg\"\n              customClass=\"object-cover object-center w-10 h-10\"\n            ></xs-image>\n          </div>\n          <div class=\"flex flex-col\">\n            <p\n              class=\"text-base font-bold leading-none text-black dark:text-white\"\n            >\n              {{ i.site.name | truncateText: 20 }}\n            </p>\n            <div\n              class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n            >\n              <xs-image\n                [src]=\"\n                  i.site.address?.country?.code | countryFlag\n                \"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span>\n                {{\n                  i.site.address?.region\n                    ? (i.site.address?.region.name\n                      | fixRegion\n                      | truncateText: 20)\n                    : (i.site.address?.town | truncateText: 20)\n                }}\n              </span>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  }\n  @case ('organization') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"itemForImage\"\n          [typeItem]=\"'organization'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex min-w-0 flex-col gap-1.5\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{\n            itemForDisplay.name || itemForDisplay.title || i.name\n              | truncateText: 40\n          }}\n        </p>\n        @let ownerId =\n          i.user?._id || itemForDisplay.user?._id;\n        @let ownerName =\n          i.user?.name || itemForDisplay.user?.name;\n        @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n          <span\n            class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n          >\n            {{ textsService.notClaimed }}\n          </span>\n        } @else if (ownerName) {\n          <p\n            class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            <span class=\"truncate\">{{\n              ownerName | truncateText: 25\n            }}</span>\n            <svg\n              [attr.aria-label]=\"\n                textsService.t('TABLE_ITEMS.VERIFIED')\n              \"\n              fill=\"rgb(0, 149, 246)\"\n              height=\"10\"\n              viewBox=\"0 0 40 40\"\n              width=\"10\"\n              class=\"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          </p>\n        }\n      </div>\n    </div>\n  }\n  @case ('organizationObject') {\n    @if (i.organizations?.length > 0) {\n      <div class=\"flex items-center gap-3\">\n        <div class=\"w-10 h-10\">\n          <xs-image\n            [item]=\"i.organizations[0]\"\n            [typeItem]=\"'organization'\"\n            [imageType]=\"'small'\"\n            rounded=\"lg\"\n            [generateAvatar]=\"true\"\n          ></xs-image>\n        </div>\n        <div class=\"flex flex-col justify-center gap-1\">\n          <p\n            class=\"text-base font-bold leading-none text-black dark:text-white\"\n          >\n            {{ i.organizations[0]?.name | truncateText: 40 }}\n          </p>\n          @if (i.organizations[0].country) {\n            <div class=\"flex items-center gap-1\">\n              <xs-image\n                [src]=\"\n                  i.organizations[0].country?.code ||\n                    i.organizations[0].country | countryFlag\n                \"\n                rounded=\"none\"\n                customClass=\"w-4 h-3\"\n              ></xs-image>\n              <span class=\"text-xs font-light text-gray-400\">\n                {{\n                  i.organizations[0].country?.name ||\n                    (i.organizations[0].country | countryName)\n                }}\n              </span>\n            </div>\n          }\n        </div>\n        @if (i.organizations.length > 1) {\n          <p class=\"text-sm text-gray-500\">\n            +{{ i.organizations.length - 1 }}\n          </p>\n        }\n      </div>\n    }\n    @if (!i.organizations || i.organizations.length === 0) {\n      <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n    }\n  }\n  @case ('equipment') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-10 h-10\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"'equipment'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          size=\"full\"\n          objectFit=\"cover\"\n          [generateAvatar]=\"true\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <p class=\"text-xs font-extralight\">\n          {{\n            i.manufacturer ??\n              (i.equipment && i.equipment.length\n                ? i.equipment[0]\n                : '')\n          }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('equipmentSetupArtist') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"i.artist\"\n          [typeItem]=\"'artist'\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.artist.name | truncateText: 40 }}\n        </p>\n        <p\n          class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n        >\n          <xs-image\n            [src]=\"i.artist.country?.code | countryFlag\"\n            rounded=\"none\"\n            objectFit=\"cover\"\n            customClass=\"w-4 h-3\"\n          ></xs-image>\n          {{ i.artist.country?.name | truncateText: 20 }}\n        </p>\n      </div>\n    </div>\n  }\n  @case ('itemContactManagement') {\n    <div class=\"flex items-center gap-3\">\n      <div class=\"w-8\">\n        <xs-image\n          [item]=\"item()\"\n          [typeItem]=\"i.type\"\n          [imageType]=\"'small'\"\n          rounded=\"lg\"\n          customClass=\"object-cover object-center w-8 h-8\"\n        ></xs-image>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <p\n          class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n        >\n          {{ i.name | truncateText: 40 }}\n        </p>\n        <div class=\"flex items-center gap-1\">\n          <xs-image\n            [item]=\"i.country\"\n            [typeItem]=\"'flag'\"\n            [imageType]=\"'small'\"\n            rounded=\"none\"\n            customClass=\"w-4 h-4\"\n          ></xs-image>\n          <p class=\"text-xs font-extralight\">\n            {{ i.country?.name }}\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n}\n" }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
 
 class XSTableItemsStateComponent {
@@ -17818,7 +17818,7 @@ class XSTableItemsVisitsComponent {
         return !Array.isArray(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsVisitsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsVisitsComponent, isStandalone: true, selector: "xs-table-items-visits", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n  @case ('visits') {\n    <p class=\"text-sm font-black\">\n      @if (v != null && isNotArray(v)) {\n        {{ v | number }}\n      } @else if (tv != null) {\n        {{ tv | number }}\n      }\n    </p>\n  }\n  @case ('visitsMonth') {\n    <p class=\"text-sm font-black\">\n      {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n    </p>\n  }\n  @case ('visitsTotal') {\n    @if (v || tv != null) {\n      <p class=\"text-sm font-black\">\n        {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n      </p>\n    }\n  }\n  @case ('visitsAll') {\n    <div class=\"flex flex-col\">\n      @if (v?.length > 0) {\n        <p class=\"\">\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">\n            {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n          </span>\n        </p>\n        <p>\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'total' | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">Total</span>\n        </p>\n      } @else {\n        <p class=\"text-sm font-extralight\">\n          {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n        </p>\n      }\n    </div>\n  }\n  @case ('visitsAllLast') {\n    @let iv = $any(i)[$any(i).type];\n    @if (iv) {\n      @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n        <div class=\"flex flex-col\">\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n          </p>\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">Total</span>\n          </p>\n        </div>\n      } @else {\n        <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n      }\n    }\n  }\n  @case ('visitsMonthLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n    </p>\n  }\n  @case ('visitsTotalLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n    </p>\n  }\n}\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: VisitsMonthTotalPipe, name: "visitsMonthTotal" }, { kind: "pipe", type: NumberToMonthPipe, name: "numberToMonth" }, { kind: "pipe", type: XSDateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsVisitsComponent, isStandalone: true, selector: "xs-table-items-visits", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n  @case ('visits') {\n    <p class=\"text-sm font-black\">\n      @if (v != null && isNotArray(v)) {\n        {{ v | number }}\n      } @else if (tv != null) {\n        {{ tv | number }}\n      }\n    </p>\n  }\n  @case ('followers') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i).totalFollowers ?? 0 | number }}\n    </p>\n  }\n  @case ('visitsMonth') {\n    <p class=\"text-sm font-black\">\n      {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n    </p>\n  }\n  @case ('visitsTotal') {\n    @if (v || tv != null) {\n      <p class=\"text-sm font-black\">\n        {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n      </p>\n    }\n  }\n  @case ('visitsAll') {\n    <div class=\"flex flex-col\">\n      @if (v?.length > 0) {\n        <p class=\"\">\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">\n            {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n          </span>\n        </p>\n        <p>\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'total' | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">Total</span>\n        </p>\n      } @else {\n        <p class=\"text-sm font-extralight\">\n          {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n        </p>\n      }\n    </div>\n  }\n  @case ('visitsAllLast') {\n    @let iv = $any(i)[$any(i).type];\n    @if (iv) {\n      @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n        <div class=\"flex flex-col\">\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n          </p>\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">Total</span>\n          </p>\n        </div>\n      } @else {\n        <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n      }\n    }\n  }\n  @case ('visitsMonthLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n    </p>\n  }\n  @case ('visitsTotalLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n    </p>\n  }\n}\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: VisitsMonthTotalPipe, name: "visitsMonthTotal" }, { kind: "pipe", type: NumberToMonthPipe, name: "numberToMonth" }, { kind: "pipe", type: XSDateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsVisitsComponent, decorators: [{
             type: Component,
@@ -17827,7 +17827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         VisitsMonthTotalPipe,
                         NumberToMonthPipe,
                         XSDateFormatPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n  @case ('visits') {\n    <p class=\"text-sm font-black\">\n      @if (v != null && isNotArray(v)) {\n        {{ v | number }}\n      } @else if (tv != null) {\n        {{ tv | number }}\n      }\n    </p>\n  }\n  @case ('visitsMonth') {\n    <p class=\"text-sm font-black\">\n      {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n    </p>\n  }\n  @case ('visitsTotal') {\n    @if (v || tv != null) {\n      <p class=\"text-sm font-black\">\n        {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n      </p>\n    }\n  }\n  @case ('visitsAll') {\n    <div class=\"flex flex-col\">\n      @if (v?.length > 0) {\n        <p class=\"\">\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">\n            {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n          </span>\n        </p>\n        <p>\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'total' | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">Total</span>\n        </p>\n      } @else {\n        <p class=\"text-sm font-extralight\">\n          {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n        </p>\n      }\n    </div>\n  }\n  @case ('visitsAllLast') {\n    @let iv = $any(i)[$any(i).type];\n    @if (iv) {\n      @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n        <div class=\"flex flex-col\">\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n          </p>\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">Total</span>\n          </p>\n        </div>\n      } @else {\n        <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n      }\n    }\n  }\n  @case ('visitsMonthLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n    </p>\n  }\n  @case ('visitsTotalLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n    </p>\n  }\n}\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n  @case ('visits') {\n    <p class=\"text-sm font-black\">\n      @if (v != null && isNotArray(v)) {\n        {{ v | number }}\n      } @else if (tv != null) {\n        {{ tv | number }}\n      }\n    </p>\n  }\n  @case ('followers') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i).totalFollowers ?? 0 | number }}\n    </p>\n  }\n  @case ('visitsMonth') {\n    <p class=\"text-sm font-black\">\n      {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n    </p>\n  }\n  @case ('visitsTotal') {\n    @if (v || tv != null) {\n      <p class=\"text-sm font-black\">\n        {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n      </p>\n    }\n  }\n  @case ('visitsAll') {\n    <div class=\"flex flex-col\">\n      @if (v?.length > 0) {\n        <p class=\"\">\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">\n            {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n          </span>\n        </p>\n        <p>\n          <span class=\"mr-0.5 text-sm font-semibold\">\n            {{ v | visitsMonthTotal: 'total' | number }}\n          </span>\n          <span class=\"text-xs font-extralight\">Total</span>\n        </p>\n      } @else {\n        <p class=\"text-sm font-extralight\">\n          {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n        </p>\n      }\n    </div>\n  }\n  @case ('visitsAllLast') {\n    @let iv = $any(i)[$any(i).type];\n    @if (iv) {\n      @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n        <div class=\"flex flex-col\">\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n          </p>\n          <p class=\"py-0 my-0\">\n            <span class=\"mr-0.5 text-sm font-semibold\">\n              {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n            </span>\n            <span class=\"text-xs font-extralight\">Total</span>\n          </p>\n        </div>\n      } @else {\n        <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n      }\n    }\n  }\n  @case ('visitsMonthLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n    </p>\n  }\n  @case ('visitsTotalLastVisits') {\n    <p class=\"text-sm font-black\">\n      {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n    </p>\n  }\n}\n}\n" }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }] } });
 
 var TABLE_ITEMS_CHAT$1 = {
@@ -18119,6 +18119,7 @@ class XSTableItemsComponent {
                 'githubRun',
             ],
             visits: [
+                'followers',
                 'visitsAll',
                 'visitsAllLast',
                 'visitsMonth',