@internetarchive/collection-browser 0.1.0 → 0.1.1

package/dist/src/assets/img/icons/mediatype/livemusic.d.ts

@@ -0,0 +1 @@
+export declare const livemusicIcon: import("lit-html").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/livemusic.js

@@ -0,0 +1,7 @@
+import { svg } from 'lit';
+export const livemusicIcon = svg `
+<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+  <path d="m136.125893 117.288073c14.41013-4.850562 27.83316-2.109766 39.480173 7.796632 10.335962 8.792594 14.330094 20.428621 14.288498 33.809481-.091795 25.476855-.015572 50.965113-.049872 76.441968-.003811 2.805419-.034301 5.648851-.457344 8.401051-3.376719 21.854139-21.133078 36.299386-43.127486 35.204588-20.210769-1.003564-37.307792-18.132586-37.799436-38.393946-.346818-14.513672-.060979-29.057755-.301084-43.586633 0-12.597776-.06479-25.191751.034301-37.789527.0343-3.656928.16007-7.401288.903253-10.963182 3.18997-15.36138 12.272049-25.963431 27.028997-30.920432zm69.082871-95.288073v20.8201628h-42.6892v27.2482979s2.61448.5740085 3.574902.8363038c23.797103 6.5155667 41.073252 15.8669636 55.262332 37.0824705 8.594246 12.852468 11.643202 31.380398 11.643202 46.760785v15.304359h-20.889162c0-5.538611.099091-10.750305-.038112-15.961998-.099091-3.896415-.167692-7.857454-.842274-11.689246-5.328051-30.262793-30.775402-49.8170956-57.026916-51.5315184-29.311903-1.9120945-57.1907972 18.1858064-64.1500399 46.8520184-1.6657464 6.843753-1.7799637 13.736569-1.7780383 20.63947l.0023262 1.88283c.0030489 1.883022.0050308 3.76653-.0231721 5.649734-.0228671 1.364696 0 2.72559 0 4.052272h-20.5918884c-5.5529117-51.542923 24.3078039-93.7420516 70.1221835-99.8660762v-27.3889489h-42.6205979v-20.6909159z" fill="gray" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 301)"/>
+</svg>
+`;
+//# sourceMappingURL=livemusic.js.map

package/dist/src/assets/img/icons/mediatype/livemusic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"livemusic.js","sourceRoot":"","sources":["../../../../../../src/assets/img/icons/mediatype/livemusic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;CAI/B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const livemusicIcon = svg`\n<svg viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"m136.125893 117.288073c14.41013-4.850562 27.83316-2.109766 39.480173 7.796632 10.335962 8.792594 14.330094 20.428621 14.288498 33.809481-.091795 25.476855-.015572 50.965113-.049872 76.441968-.003811 2.805419-.034301 5.648851-.457344 8.401051-3.376719 21.854139-21.133078 36.299386-43.127486 35.204588-20.210769-1.003564-37.307792-18.132586-37.799436-38.393946-.346818-14.513672-.060979-29.057755-.301084-43.586633 0-12.597776-.06479-25.191751.034301-37.789527.0343-3.656928.16007-7.401288.903253-10.963182 3.18997-15.36138 12.272049-25.963431 27.028997-30.920432zm69.082871-95.288073v20.8201628h-42.6892v27.2482979s2.61448.5740085 3.574902.8363038c23.797103 6.5155667 41.073252 15.8669636 55.262332 37.0824705 8.594246 12.852468 11.643202 31.380398 11.643202 46.760785v15.304359h-20.889162c0-5.538611.099091-10.750305-.038112-15.961998-.099091-3.896415-.167692-7.857454-.842274-11.689246-5.328051-30.262793-30.775402-49.8170956-57.026916-51.5315184-29.311903-1.9120945-57.1907972 18.1858064-64.1500399 46.8520184-1.6657464 6.843753-1.7799637 13.736569-1.7780383 20.63947l.0023262 1.88283c.0030489 1.883022.0050308 3.76653-.0231721 5.649734-.0228671 1.364696 0 2.72559 0 4.052272h-20.5918884c-5.5529117-51.542923 24.3078039-93.7420516 70.1221835-99.8660762v-27.3889489h-42.6205979v-20.6909159z\" fill=\"gray\" fill-rule=\"evenodd\" transform=\"matrix(1 0 0 -1 0 301)\"/>\n</svg>\n`;\n"]}

package/dist/src/assets/img/icons/mediatype/photos.d.ts

@@ -0,0 +1 @@
+export declare const photosIcon: import("lit-html").TemplateResult<2>;

package/dist/src/assets/img/icons/mediatype/photos.js

@@ -0,0 +1,7 @@
+import { svg } from 'lit';
+export const photosIcon = svg `
+<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+  <path d="m43.0952612 181.159979c2.1744514 0 21.7161099 3.336499 21.7161099 3.336499v21.030628l-44.8113711-6.289709c4.5382599-51.29161 9.6729948-105.5332879 14.6089046-156.237397 66.1329874 6.484496 144.5110704 16.1138469 211.0385514 22.4035567-.987813 6.4876377-1.581132 21.8160564-1.972471 28.3005524-4.939065-.5906421-15.599873 0-20.535783-.5906421v-9.0418506c-56.065498-5.3032118-112.326666-12.180422-168.3953197-17.6847035 0 0-7.7005244 74.2858081-11.6486211 114.7730661zm31.7867547-81.562016h205.1179841v158.402037h-205.1179841zm18.9514955 140.126691h167.8051566v-64.461671l-21.122791 35.963191-28.428821-67.408598-24.2819 28.891194-66.530637-54.634392h-27.4410076zm64.5550106-40.487257c0-11.394994-9.082832-20.436845-20.731453-20.436845-11.250971 0-20.923965 9.041851-20.923965 20.436845 0 11.203349 9.672994 20.439986 20.923965 20.439986 11.648621 0 20.731453-9.236637 20.731453-20.439986z" fill="gray" transform="matrix(1 0 0 -1 0 301)"/>
+</svg>
+`;
+//# sourceMappingURL=photos.js.map

package/dist/src/assets/img/icons/mediatype/photos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photos.js","sourceRoot":"","sources":["../../../../../../src/assets/img/icons/mediatype/photos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;CAI5B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const photosIcon = svg`\n<svg viewBox=\"0 0 300 300\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"m43.0952612 181.159979c2.1744514 0 21.7161099 3.336499 21.7161099 3.336499v21.030628l-44.8113711-6.289709c4.5382599-51.29161 9.6729948-105.5332879 14.6089046-156.237397 66.1329874 6.484496 144.5110704 16.1138469 211.0385514 22.4035567-.987813 6.4876377-1.581132 21.8160564-1.972471 28.3005524-4.939065-.5906421-15.599873 0-20.535783-.5906421v-9.0418506c-56.065498-5.3032118-112.326666-12.180422-168.3953197-17.6847035 0 0-7.7005244 74.2858081-11.6486211 114.7730661zm31.7867547-81.562016h205.1179841v158.402037h-205.1179841zm18.9514955 140.126691h167.8051566v-64.461671l-21.122791 35.963191-28.428821-67.408598-24.2819 28.891194-66.530637-54.634392h-27.4410076zm64.5550106-40.487257c0-11.394994-9.082832-20.436845-20.731453-20.436845-11.250971 0-20.923965 9.041851-20.923965 20.436845 0 11.203349 9.672994 20.439986 20.923965 20.439986 11.648621 0 20.731453-9.236637 20.731453-20.439986z\" fill=\"gray\" transform=\"matrix(1 0 0 -1 0 301)\"/>\n</svg>\n`;\n"]}

package/dist/src/helpers.d.ts

@@ -0,0 +1 @@
+export declare const nFormatter: (num: any, digits: number) => string;

package/dist/src/helpers.js

@@ -0,0 +1,20 @@
+export const nFormatter = (num, digits) => {
+    const lookup = [
+        { value: 1, symbol: '' },
+        { value: 1e3, symbol: 'K' },
+        { value: 1e6, symbol: 'M' },
+        { value: 1e9, symbol: 'B' },
+        { value: 1e12, symbol: 'T' },
+        { value: 1e15, symbol: 'P' },
+        { value: 1e18, symbol: 'E' },
+    ];
+    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+    const item = lookup
+        .slice()
+        .reverse()
+        .find(i => num >= i.value);
+    return item
+        ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol
+        : '0';
+};
+//# sourceMappingURL=helpers.js.map

package/dist/src/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,MAAc,EAAE,EAAE;IACrD,MAAM,MAAM,GAAG;QACb,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;QACxB,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;QAC3B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;QAC3B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE;QAC5B,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE;QAC5B,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE;KAC7B,CAAC;IACF,MAAM,EAAE,GAAG,0BAA0B,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM;SAChB,KAAK,EAAE;SACP,OAAO,EAAE;SACT,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,IAAI;QACT,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM;QACpE,CAAC,CAAC,GAAG,CAAC;AACV,CAAC,CAAC","sourcesContent":["export const nFormatter = (num: any, digits: number) => {\n  const lookup = [\n    { value: 1, symbol: '' },\n    { value: 1e3, symbol: 'K' },\n    { value: 1e6, symbol: 'M' },\n    { value: 1e9, symbol: 'B' },\n    { value: 1e12, symbol: 'T' },\n    { value: 1e15, symbol: 'P' },\n    { value: 1e18, symbol: 'E' },\n  ];\n  const rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n  const item = lookup\n    .slice()\n    .reverse()\n    .find(i => num >= i.value);\n  return item\n    ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol\n    : '0';\n};\n"]}

package/dist/src/mediatype/mediatype-color.d.ts

@@ -0,0 +1,3 @@
+export declare const mediatypeColor: {
+    [key: string]: string;
+};

package/dist/src/mediatype/mediatype-color.js

@@ -0,0 +1,15 @@
+export const mediatypeColor = {
+    account: '#000000',
+    audio: '#8fdaef',
+    data: '#333333',
+    etree: '#3871c1',
+    film: '#bf1b2c',
+    image: '#62c4a9',
+    movies: '#bf1b2c',
+    software: '#80cc28',
+    texts: '#f9a72b',
+    tv: '#f25d54',
+    video: '#bf1b2c',
+    web: '#fddd10',
+};
+//# sourceMappingURL=mediatype-color.js.map

package/dist/src/mediatype/mediatype-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-color.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAA8B;IACvD,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,SAAS;IAChB,EAAE,EAAE,SAAS;IACb,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;CACf,CAAC","sourcesContent":["export const mediatypeColor: { [key: string]: string } = {\n  account: '#000000',\n  audio: '#8fdaef',\n  data: '#333333',\n  etree: '#3871c1',\n  film: '#bf1b2c',\n  image: '#62c4a9',\n  movies: '#bf1b2c',\n  software: '#80cc28',\n  texts: '#f9a72b',\n  tv: '#f25d54',\n  video: '#bf1b2c',\n  web: '#fddd10',\n};\n"]}

package/dist/src/mediatype/mediatype-display.d.ts

@@ -0,0 +1,3 @@
+export declare const mediatypeData: {
+    [key: string]: any;
+};

package/dist/src/mediatype/mediatype-display.js

@@ -0,0 +1,86 @@
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+export const mediatypeData = {
+    account: {
+        color: '#000000',
+        icon: accountIcon,
+        text: 'Account',
+    },
+    audio: {
+        color: '#8fdaef',
+        icon: audioIcon,
+        text: 'Audio',
+    },
+    collection: {
+        color: '#000000',
+        icon: collectionIcon,
+        text: 'Collection',
+    },
+    data: {
+        color: '#333333',
+        icon: dataIcon,
+        text: 'Data',
+    },
+    etree: {
+        color: '#3871c1',
+        icon: etreeIcon,
+        text: 'E-tree',
+    },
+    film: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Film',
+    },
+    image: {
+        color: '#62c4a9',
+        icon: imagesIcon,
+        text: 'Image',
+    },
+    movies: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Movie',
+    },
+    radio: {
+        color: '#8fdaef',
+        icon: radioIcon,
+        text: 'Radio',
+    },
+    software: {
+        color: '#80cc28',
+        icon: softwareIcon,
+        text: 'Software',
+    },
+    texts: {
+        color: '#f9a72b',
+        icon: textsIcon,
+        text: 'Text',
+    },
+    tv: {
+        color: '#f25d54',
+        icon: tvIcon,
+        text: 'TV',
+    },
+    video: {
+        color: '#bf1b2c',
+        icon: videoIcon,
+        text: 'Video',
+    },
+    web: {
+        color: '#fddd10',
+        icon: webIcon,
+        text: 'Web',
+    },
+};
+//# sourceMappingURL=mediatype-display.js.map

package/dist/src/mediatype/mediatype-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-display.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAA2B;IACnD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,SAAS;KAChB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,UAAU,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;KACnB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,QAAQ;KACf;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,UAAU;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAI;KACX;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,KAAK;KACZ;CACF,CAAC","sourcesContent":["import { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nexport const mediatypeData: { [key: string]: any } = {\n  account: {\n    color: '#000000',\n    icon: accountIcon,\n    text: 'Account',\n  },\n  audio: {\n    color: '#8fdaef',\n    icon: audioIcon,\n    text: 'Audio',\n  },\n  collection: {\n    color: '#000000',\n    icon: collectionIcon,\n    text: 'Collection',\n  },\n  data: {\n    color: '#333333',\n    icon: dataIcon,\n    text: 'Data',\n  },\n  etree: {\n    color: '#3871c1',\n    icon: etreeIcon,\n    text: 'E-tree',\n  },\n  film: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Film',\n  },\n  image: {\n    color: '#62c4a9',\n    icon: imagesIcon,\n    text: 'Image',\n  },\n  movies: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Movie',\n  },\n  radio: {\n    color: '#8fdaef',\n    icon: radioIcon,\n    text: 'Radio',\n  },\n  software: {\n    color: '#80cc28',\n    icon: softwareIcon,\n    text: 'Software',\n  },\n  texts: {\n    color: '#f9a72b',\n    icon: textsIcon,\n    text: 'Text',\n  },\n  tv: {\n    color: '#f25d54',\n    icon: tvIcon,\n    text: 'TV',\n  },\n  video: {\n    color: '#bf1b2c',\n    icon: videoIcon,\n    text: 'Video',\n  },\n  web: {\n    color: '#fddd10',\n    icon: webIcon,\n    text: 'Web',\n  },\n};\n"]}

package/dist/src/mediatype/mediatype-icon.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class MediatypeIcon extends LitElement {
+    mediatype: string | undefined;
+    collections: string[] | undefined;
+    showText: boolean;
+    private readonly mediatypeIcons;
+    private get displayMediaType();
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/mediatype/mediatype-icon.js

@@ -0,0 +1,105 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+import { mediatypeColor } from './mediatype-color';
+import { mediatypeText } from './mediatype-text';
+let MediatypeIcon = class MediatypeIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showText = false;
+        this.mediatypeIcons = {
+            account: accountIcon,
+            audio: audioIcon,
+            collection: collectionIcon,
+            data: dataIcon,
+            etree: etreeIcon,
+            film: filmIcon,
+            image: imagesIcon,
+            movies: filmIcon,
+            radio: radioIcon,
+            software: softwareIcon,
+            texts: textsIcon,
+            tv: tvIcon,
+            video: videoIcon,
+            web: webIcon,
+        };
+    }
+    get displayMediaType() {
+        var _a, _b;
+        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+        const radioIdentifier = ['radio', 'radioprogram'];
+        if (this.mediatype === 'movies' &&
+            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
+            return 'tv';
+        }
+        if (this.mediatype === 'audio' &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
+            return 'radio';
+        }
+        return this.mediatype;
+    }
+    render() {
+        if (!this.mediatype) {
+            return html ``;
+        }
+        const displayMediatype = this.displayMediaType || '';
+        const fillColor = mediatypeColor[displayMediatype];
+        return html `
+      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}" style="--iconFillColor=${fillColor}">
+        ${this.mediatypeIcons[displayMediatype]}
+        <p class="status-text">${mediatypeText[displayMediatype]}</p>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconFillColor, '#000000');
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MediatypeIcon.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Array })
+], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "showText", void 0);
+MediatypeIcon = __decorate([
+    customElement('mediatype-icon')
+], MediatypeIcon);
+export { MediatypeIcon };
+//# sourceMappingURL=mediatype-icon.js.map

package/dist/src/mediatype/mediatype-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nimport { mediatypeColor } from './mediatype-color';\nimport { mediatypeText } from './mediatype-text';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private readonly mediatypeIcons: { [key: string]: any } = {\n    account: accountIcon,\n    audio: audioIcon,\n    collection: collectionIcon,\n    data: dataIcon,\n    etree: etreeIcon,\n    film: filmIcon,\n    image: imagesIcon,\n    movies: filmIcon,\n    radio: radioIcon,\n    software: softwareIcon,\n    texts: textsIcon,\n    tv: tvIcon,\n    video: videoIcon,\n    web: webIcon,\n  };\n\n  private get displayMediaType() {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype;\n  }\n\n  render() {\n    if (!this.mediatype) {\n      return html``;\n    }\n\n    const displayMediatype = this.displayMediaType || '';\n    const fillColor = mediatypeColor[displayMediatype];\n\n    return html`\n      <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\" style=\"--iconFillColor=${fillColor}\">\n        ${this.mediatypeIcons[displayMediatype]}\n        <p class=\"status-text\">${mediatypeText[displayMediatype]}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}

package/dist/src/mediatype/mediatype-text.d.ts

@@ -0,0 +1,3 @@
+export declare const mediatypeText: {
+    [key: string]: any;
+};

package/dist/src/mediatype/mediatype-text.js

@@ -0,0 +1,17 @@
+export const mediatypeText = {
+    account: 'Account',
+    audio: 'Audio',
+    collection: 'Collection',
+    data: 'Data',
+    etree: 'E-tree',
+    film: 'Film',
+    image: 'Image',
+    movies: 'Movie',
+    radio: 'Radio',
+    software: 'Software',
+    texts: 'Text',
+    tv: 'TV',
+    video: 'Video',
+    web: 'Web',
+};
+//# sourceMappingURL=mediatype-text.js.map

package/dist/src/mediatype/mediatype-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-text.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-text.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAA2B;IACnD,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACX,CAAC","sourcesContent":["export const mediatypeText: { [key: string]: any } = {\n  account: 'Account',\n  audio: 'Audio',\n  collection: 'Collection',\n  data: 'Data',\n  etree: 'E-tree',\n  film: 'Film',\n  image: 'Image',\n  movies: 'Movie',\n  radio: 'Radio',\n  software: 'Software',\n  texts: 'Text',\n  tv: 'TV',\n  video: 'Video',\n  web: 'Web',\n};\n"]}

package/dist/src/mediatype/mediatypeConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const mediatypeConfig: {
+    [key: string]: any;
+};

package/dist/src/mediatype/mediatypeConfig.js

@@ -0,0 +1,86 @@
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+export const mediatypeConfig = {
+    account: {
+        color: '#000000',
+        icon: accountIcon,
+        text: 'Account',
+    },
+    audio: {
+        color: '#8fdaef',
+        icon: audioIcon,
+        text: 'Audio',
+    },
+    collection: {
+        color: '#000000',
+        icon: collectionIcon,
+        text: 'Collection',
+    },
+    data: {
+        color: '#333333',
+        icon: dataIcon,
+        text: 'Data',
+    },
+    etree: {
+        color: '#3871c1',
+        icon: etreeIcon,
+        text: 'E-tree',
+    },
+    film: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Film',
+    },
+    image: {
+        color: '#62c4a9',
+        icon: imagesIcon,
+        text: 'Image',
+    },
+    movies: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Movie',
+    },
+    radio: {
+        color: '#8fdaef',
+        icon: radioIcon,
+        text: 'Radio',
+    },
+    software: {
+        color: '#80cc28',
+        icon: softwareIcon,
+        text: 'Software',
+    },
+    texts: {
+        color: '#f9a72b',
+        icon: textsIcon,
+        text: 'Text',
+    },
+    tv: {
+        color: '#f25d54',
+        icon: tvIcon,
+        text: 'TV',
+    },
+    video: {
+        color: '#bf1b2c',
+        icon: videoIcon,
+        text: 'Video',
+    },
+    web: {
+        color: '#fddd10',
+        icon: webIcon,
+        text: 'Web',
+    },
+};
+//# sourceMappingURL=mediatypeConfig.js.map

package/dist/src/mediatype/mediatypeConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatypeConfig.js","sourceRoot":"","sources":["../../../src/mediatype/mediatypeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,SAAS;KAChB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,UAAU,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;KACnB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,QAAQ;KACf;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,UAAU;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAI;KACX;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,KAAK;KACZ;CACF,CAAC","sourcesContent":["import { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nexport const mediatypeConfig: { [key: string]: any } = {\n  account: {\n    color: '#000000',\n    icon: accountIcon,\n    text: 'Account',\n  },\n  audio: {\n    color: '#8fdaef',\n    icon: audioIcon,\n    text: 'Audio',\n  },\n  collection: {\n    color: '#000000',\n    icon: collectionIcon,\n    text: 'Collection',\n  },\n  data: {\n    color: '#333333',\n    icon: dataIcon,\n    text: 'Data',\n  },\n  etree: {\n    color: '#3871c1',\n    icon: etreeIcon,\n    text: 'E-tree',\n  },\n  film: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Film',\n  },\n  image: {\n    color: '#62c4a9',\n    icon: imagesIcon,\n    text: 'Image',\n  },\n  movies: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Movie',\n  },\n  radio: {\n    color: '#8fdaef',\n    icon: radioIcon,\n    text: 'Radio',\n  },\n  software: {\n    color: '#80cc28',\n    icon: softwareIcon,\n    text: 'Software',\n  },\n  texts: {\n    color: '#f9a72b',\n    icon: textsIcon,\n    text: 'Text',\n  },\n  tv: {\n    color: '#f25d54',\n    icon: tvIcon,\n    text: 'TV',\n  },\n  video: {\n    color: '#bf1b2c',\n    icon: videoIcon,\n    text: 'Video',\n  },\n  web: {\n    color: '#fddd10',\n    icon: webIcon,\n    text: 'Web',\n  },\n};\n"]}

package/dist/src/mediatype-icon.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class MediatypeIcon extends LitElement {
+    mediatype: string | undefined;
+    collections: string[] | undefined;
+    showText: boolean;
+    private get displayMediatype();
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/mediatype-icon.js

@@ -0,0 +1,78 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { mediatypeConfig } from './mediatype/mediatype-config';
+let MediatypeIcon = class MediatypeIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showText = false;
+    }
+    get displayMediatype() {
+        var _a, _b;
+        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+        const radioIdentifier = ['radio', 'radioprogram'];
+        if (this.mediatype === 'movies' &&
+            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
+            return 'tv';
+        }
+        if (this.mediatype === 'audio' &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
+            return 'radio';
+        }
+        return this.mediatype || '';
+    }
+    render() {
+        const config = mediatypeConfig[this.displayMediatype];
+        if (!config) {
+            return html ``;
+        }
+        return html `
+      <div
+        id="icon"
+        class="${this.showText ? 'show-text' : 'hide-text'}"
+        style="--iconFillColor: ${config.color}"
+      >
+        ${config.icon}
+        <p class="status-text">${config.text}</p>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: var(--iconTextAlign, center);
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MediatypeIcon.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Array })
+], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "showText", void 0);
+MediatypeIcon = __decorate([
+    customElement('mediatype-icon')
+], MediatypeIcon);
+export { MediatypeIcon };
+//# sourceMappingURL=mediatype-icon.js.map

package/dist/src/mediatype-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAG/D,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IA+DhD,CAAC;IA7DC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB;SApEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from './mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));\n      }\n    `;\n  }\n}\n"]}

package/dist/src/sort-filter-bar/img/grid.d.ts

@@ -0,0 +1 @@
+export declare const gridIcon: import("lit-html").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/grid.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export const gridIcon = svg `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z"/></svg>
+`;
+//# sourceMappingURL=grid.js.map

package/dist/src/sort-filter-bar/img/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;CAE1B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const gridIcon = svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z\"/></svg>\n`;\n"]}

package/dist/src/tiles/grid/item-tile.js

@@ -39,7 +39,7 @@ let ItemTile = class ItemTile extends LitElement {
               <mediatype-icon
                 .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
                 .collection=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.collections}
-                ?showText=${true}
+                style="--iconHeight:25px; --iconWidth:25px;"
               >
               </mediatype-icon>
             </div>

package/dist/src/tiles/grid/item-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;uBAG7C,IAAI,CAAC,KAAK;mCACE,IAAI,CAAC,iBAAiB;;;;;;gDAMT,WAAW;;;;;;;;;;;6BAW9B,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;4BACzB,IAAI;;;;;gBAKhB,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AA1L6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAH5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2LpB;SA3LY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${this.model?.title}</h1>\n          <div id=\"item-image-container\">\n            <item-image\n              .model=${this.model}\n              .baseNavigationUrl=${this.baseNavigationUrl}\n            >\n            </item-image>\n          </div>\n          <div class=\"item-creator\">\n            <div class=\"truncated\">\n              <span><strong>By:&nbsp;</strong>${itemCreator}</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"hr\"></div>\n\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                .collection=${this.model?.collections}\n                ?showText=${true}\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem 0.5rem 0 0.5rem;\n      }\n\n      #item-title {\n        color: #2c2c2c;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        color: #2c2c2c;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hr {\n        border: 0.5px solid #ccc;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;uBAG7C,IAAI,CAAC,KAAK;mCACE,IAAI,CAAC,iBAAiB;;;;;;gDAMT,WAAW;;;;;;;;;;;6BAW9B,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;;;gBAMrC,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AA1L6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAH5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2LpB;SA3LY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${this.model?.title}</h1>\n          <div id=\"item-image-container\">\n            <item-image\n              .model=${this.model}\n              .baseNavigationUrl=${this.baseNavigationUrl}\n            >\n            </item-image>\n          </div>\n          <div class=\"item-creator\">\n            <div class=\"truncated\">\n              <span><strong>By:&nbsp;</strong>${itemCreator}</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"hr\"></div>\n\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                .collection=${this.model?.collections}\n                style=\"--iconHeight:25px; --iconWidth:25px;\"\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem 0.5rem 0 0.5rem;\n      }\n\n      #item-title {\n        color: #2c2c2c;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        color: #2c2c2c;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hr {\n        border: 0.5px solid #ccc;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n    `;\n  }\n}\n"]}