@internetarchive/collection-browser 2.1.4-alpha.3 → 2.1.4-alpha1

package/dist/src/manage/manage-bar.d.ts

@@ -1,26 +1,30 @@
-import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
-export interface ManageableItem {
-    identifier: string;
-    title?: string;
-    dateStr?: string;
-}
-export declare class ManageBar extends LitElement {
-    /**
-     * The label displayed in front of the management buttons
-     */
-    label: string;
-    /**
-     * Whether to show the "Select All" button (default false)
-     */
-    showSelectAll: boolean;
-    /**
-     * Whether to show the "Unselect All" button (default false)
-     */
-    showUnselectAll: boolean;
-    render(): TemplateResult;
-    private cancelClicked;
-    private removeClicked;
-    private selectAllClicked;
-    private unselectAllClicked;
-    static get styles(): CSSResultGroup;
-}
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+export interface ManageableItem {
+    identifier: string;
+    title?: string;
+    dateStr?: string;
+}
+export declare class ManageBar extends LitElement {
+    /**
+     * The label displayed in front of the management buttons
+     */
+    label: string;
+    /**
+     * Whether to show the "Select All" button (default false)
+     */
+    showSelectAll: boolean;
+    /**
+     * Whether to show the "Unselect All" button (default false)
+     */
+    showUnselectAll: boolean;
+    /**
+     * Whether to active delete button for selectable items
+     */
+    enableRemoveButton: boolean;
+    render(): TemplateResult;
+    private cancelClicked;
+    private removeClicked;
+    private selectAllClicked;
+    private unselectAllClicked;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/manage/manage-bar.js

@@ -1,33 +1,42 @@
-import { __decorate } from "tslib";
-import { msg } from '@lit/localize';
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-let ManageBar = class ManageBar extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The label displayed in front of the management buttons
-         */
-        this.label = msg('Select items to un-favorite');
-        /**
-         * Whether to show the "Select All" button (default false)
-         */
-        this.showSelectAll = false;
-        /**
-         * Whether to show the "Unselect All" button (default false)
-         */
-        this.showUnselectAll = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { msg } from '@lit/localize';
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import iaButtonStyle from '../styles/ia-button';
+let ManageBar = class ManageBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The label displayed in front of the management buttons
+         */
+        this.label = msg('Select items to remove');
+        /**
+         * Whether to show the "Select All" button (default false)
+         */
+        this.showSelectAll = false;
+        /**
+         * Whether to show the "Unselect All" button (default false)
+         */
+        this.showUnselectAll = false;
+        /**
+         * Whether to active delete button for selectable items
+         */
+        this.enableRemoveButton = false;
+    }
+    render() {
         return html `
       <div class="manage-container">
         <span class="manage-label">${this.label}</span>
         <div class="manage-buttons">
-          <button class="cancel-btn" @click=${this.cancelClicked}>
+          <button class="ia-button dark" @click=${this.cancelClicked}>
             ${msg('Cancel')}
           </button>
-          <button class="remove-btn" @click=${this.removeClicked}>
+          <button
+            class="ia-button danger"
+            ?disabled=${!this.enableRemoveButton}
+            @click=${this.removeClicked}
+          >
             ${msg('Remove selected items')}
           </button>
           <div class="selection-buttons">
@@ -46,27 +55,28 @@ let ManageBar = class ManageBar extends LitElement {
           </div>
         </div>
       </div>
-    `;
-    }
-    cancelClicked() {
-        this.dispatchEvent(new CustomEvent('cancel'));
-    }
-    removeClicked() {
-        this.dispatchEvent(new CustomEvent('removeItems'));
-    }
-    selectAllClicked() {
-        this.dispatchEvent(new CustomEvent('selectAll'));
-    }
-    unselectAllClicked() {
-        this.dispatchEvent(new CustomEvent('unselectAll'));
-    }
-    static get styles() {
+    `;
+    }
+    cancelClicked() {
+        this.dispatchEvent(new CustomEvent('cancel'));
+    }
+    removeClicked() {
+        this.dispatchEvent(new CustomEvent('removeItems'));
+    }
+    selectAllClicked() {
+        this.dispatchEvent(new CustomEvent('selectAll'));
+    }
+    unselectAllClicked() {
+        this.dispatchEvent(new CustomEvent('unselectAll'));
+    }
+    static get styles() {
         return css `
+      ${iaButtonStyle}
       .manage-container {
         display: flex;
         align-items: center;
         column-gap: 5px;
-        padding: 10px 0 20px;
+        padding: 20px 0 20px;
         flex-wrap: wrap;
       }
 
@@ -83,11 +93,14 @@ let ManageBar = class ManageBar extends LitElement {
         column-gap: 5px;
       }
 
+      .ia-button,
       button {
-        display: inline-block;
+        padding: 6px 12px;
         font-size: 1.4rem;
-        cursor: pointer;
-        white-space: nowrap;
+      }
+
+      .ia-button.danger:disabled {
+        opacity: 0.5;
       }
 
       button.link-styled {
@@ -98,50 +111,28 @@ let ManageBar = class ManageBar extends LitElement {
         background: none;
         color: var(--ia-theme-link-color, #4b64ff);
         text-decoration: none;
+        cursor: pointer;
       }
       button.link-styled:hover {
         text-decoration: underline;
       }
-
-      button:not(.link-styled) {
-        margin: 0;
-        padding: 6px 12px;
-        border-radius: 4px;
-        color: white;
-      }
-
-      /* Button styles derived from legacy version */
-      .cancel-btn {
-        background: #777777;
-        border: 1px solid #666666;
-      }
-      .cancel-btn:hover {
-        background: #6b6b6b;
-        border: 1px solid #505050;
-      }
-
-      .remove-btn {
-        background: #d9534f;
-        border: 1px solid #d43f3a;
-      }
-      .remove-btn:hover {
-        background: #d2322d;
-        border: 1px solid #ac2925;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], ManageBar.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean })
-], ManageBar.prototype, "showSelectAll", void 0);
-__decorate([
-    property({ type: Boolean })
-], ManageBar.prototype, "showUnselectAll", void 0);
-ManageBar = __decorate([
-    customElement('manage-bar')
-], ManageBar);
-export { ManageBar };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ManageBar.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageBar.prototype, "showSelectAll", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageBar.prototype, "showUnselectAll", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageBar.prototype, "enableRemoveButton", void 0);
+ManageBar = __decorate([
+    customElement('manage-bar')
+], ManageBar);
+export { ManageBar };
 //# sourceMappingURL=manage-bar.js.map

package/dist/src/manage/manage-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"manage-bar.js","sourceRoot":"","sources":["../../../src/manage/manage-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAS9C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACyB,UAAK,GAAG,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAEvE;;WAEG;QAC0B,kBAAa,GAAG,KAAK,CAAC;QAEnD;;WAEG;QAC0B,oBAAe,GAAG,KAAK,CAAC;IA4HvD,CAAC;IA1HC,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,KAAK;;8CAED,IAAI,CAAC,aAAa;cAClD,GAAG,CAAC,QAAQ,CAAC;;8CAEmB,IAAI,CAAC,aAAa;cAClD,GAAG,CAAC,uBAAuB,CAAC;;;cAG5B,IAAI,CACJ,IAAI,CAAC,aAAa,EAClB,GAAG,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,gBAAgB;;kBAE5B,GAAG,CAAC,YAAY,CAAC;wBACX,CACX;cACC,IAAI,CACJ,IAAI,CAAC,eAAe,EACpB,GAAG,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,kBAAkB;;kBAE9B,GAAG,CAAC,cAAc,CAAC;wBACb,CACX;;;;KAIR,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmET,CAAC;IACJ,CAAC;CACF,CAAA;AAtI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAA4C;AAK1C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAuB;AAKtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAyB;AAd1C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA0IrB;SA1IY,SAAS","sourcesContent":["import { msg } from '@lit/localize';\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nexport interface ManageableItem {\n  identifier: string;\n  title?: string;\n  dateStr?: string;\n}\n\n@customElement('manage-bar')\nexport class ManageBar extends LitElement {\n  /**\n   * The label displayed in front of the management buttons\n   */\n  @property({ type: String }) label = msg('Select items to un-favorite');\n\n  /**\n   * Whether to show the \"Select All\" button (default false)\n   */\n  @property({ type: Boolean }) showSelectAll = false;\n\n  /**\n   * Whether to show the \"Unselect All\" button (default false)\n   */\n  @property({ type: Boolean }) showUnselectAll = false;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"manage-container\">\n        <span class=\"manage-label\">${this.label}</span>\n        <div class=\"manage-buttons\">\n          <button class=\"cancel-btn\" @click=${this.cancelClicked}>\n            ${msg('Cancel')}\n          </button>\n          <button class=\"remove-btn\" @click=${this.removeClicked}>\n            ${msg('Remove selected items')}\n          </button>\n          <div class=\"selection-buttons\">\n            ${when(\n              this.showSelectAll,\n              () => html` <button\n                class=\"link-styled select-all-btn\"\n                @click=${this.selectAllClicked}\n              >\n                ${msg('Select all')}\n              </button>`\n            )}\n            ${when(\n              this.showUnselectAll,\n              () => html` <button\n                class=\"link-styled unselect-all-btn\"\n                @click=${this.unselectAllClicked}\n              >\n                ${msg('Unselect all')}\n              </button>`\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private cancelClicked(): void {\n    this.dispatchEvent(new CustomEvent('cancel'));\n  }\n\n  private removeClicked(): void {\n    this.dispatchEvent(new CustomEvent('removeItems'));\n  }\n\n  private selectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('selectAll'));\n  }\n\n  private unselectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('unselectAll'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .manage-container {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        padding: 10px 0 20px;\n        flex-wrap: wrap;\n      }\n\n      .manage-label {\n        display: inline-block;\n        font-weight: bold;\n        font-size: 1.8rem;\n        padding-right: 10px;\n      }\n\n      .manage-buttons {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n      }\n\n      button {\n        display: inline-block;\n        font-size: 1.4rem;\n        cursor: pointer;\n        white-space: nowrap;\n      }\n\n      button.link-styled {\n        margin: 0;\n        padding: 6px;\n        border: 0;\n        appearance: none;\n        background: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n        text-decoration: none;\n      }\n      button.link-styled:hover {\n        text-decoration: underline;\n      }\n\n      button:not(.link-styled) {\n        margin: 0;\n        padding: 6px 12px;\n        border-radius: 4px;\n        color: white;\n      }\n\n      /* Button styles derived from legacy version */\n      .cancel-btn {\n        background: #777777;\n        border: 1px solid #666666;\n      }\n      .cancel-btn:hover {\n        background: #6b6b6b;\n        border: 1px solid #505050;\n      }\n\n      .remove-btn {\n        background: #d9534f;\n        border: 1px solid #d43f3a;\n      }\n      .remove-btn:hover {\n        background: #d2322d;\n        border: 1px solid #ac2925;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"manage-bar.js","sourceRoot":"","sources":["../../../src/manage/manage-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAShD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACyB,UAAK,GAAG,GAAG,CAAC,wBAAwB,CAAC,CAAC;QAElE;;WAEG;QAC0B,kBAAa,GAAG,KAAK,CAAC;QAEnD;;WAEG;QAC0B,oBAAe,GAAG,KAAK,CAAC;QAErD;;WAEG;QAC0B,uBAAkB,GAAG,KAAK,CAAC;IA2G1D,CAAC;IAzGC,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,KAAK;;kDAEG,IAAI,CAAC,aAAa;cACtD,GAAG,CAAC,QAAQ,CAAC;;;;wBAIH,CAAC,IAAI,CAAC,kBAAkB;qBAC3B,IAAI,CAAC,aAAa;;cAEzB,GAAG,CAAC,uBAAuB,CAAC;;;cAG5B,IAAI,CACJ,IAAI,CAAC,aAAa,EAClB,GAAG,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,gBAAgB;;kBAE5B,GAAG,CAAC,YAAY,CAAC;wBACX,CACX;cACC,IAAI,CACJ,IAAI,CAAC,eAAe,EACpB,GAAG,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,kBAAkB;;kBAE9B,GAAG,CAAC,cAAc,CAAC;wBACb,CACX;;;;KAIR,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;IACnD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;QACN,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ChB,CAAC;IACJ,CAAC;CACF,CAAA;AA1H6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAuC;AAKrC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAuB;AAKtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAyB;AAKxB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA4B;AAnB7C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA8HrB;SA9HY,SAAS","sourcesContent":["import { msg } from '@lit/localize';\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport iaButtonStyle from '../styles/ia-button';\n\nexport interface ManageableItem {\n  identifier: string;\n  title?: string;\n  dateStr?: string;\n}\n\n@customElement('manage-bar')\nexport class ManageBar extends LitElement {\n  /**\n   * The label displayed in front of the management buttons\n   */\n  @property({ type: String }) label = msg('Select items to remove');\n\n  /**\n   * Whether to show the \"Select All\" button (default false)\n   */\n  @property({ type: Boolean }) showSelectAll = false;\n\n  /**\n   * Whether to show the \"Unselect All\" button (default false)\n   */\n  @property({ type: Boolean }) showUnselectAll = false;\n\n  /**\n   * Whether to active delete button for selectable items\n   */\n  @property({ type: Boolean }) enableRemoveButton = false;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"manage-container\">\n        <span class=\"manage-label\">${this.label}</span>\n        <div class=\"manage-buttons\">\n          <button class=\"ia-button dark\" @click=${this.cancelClicked}>\n            ${msg('Cancel')}\n          </button>\n          <button\n            class=\"ia-button danger\"\n            ?disabled=${!this.enableRemoveButton}\n            @click=${this.removeClicked}\n          >\n            ${msg('Remove selected items')}\n          </button>\n          <div class=\"selection-buttons\">\n            ${when(\n              this.showSelectAll,\n              () => html` <button\n                class=\"link-styled select-all-btn\"\n                @click=${this.selectAllClicked}\n              >\n                ${msg('Select all')}\n              </button>`\n            )}\n            ${when(\n              this.showUnselectAll,\n              () => html` <button\n                class=\"link-styled unselect-all-btn\"\n                @click=${this.unselectAllClicked}\n              >\n                ${msg('Unselect all')}\n              </button>`\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private cancelClicked(): void {\n    this.dispatchEvent(new CustomEvent('cancel'));\n  }\n\n  private removeClicked(): void {\n    this.dispatchEvent(new CustomEvent('removeItems'));\n  }\n\n  private selectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('selectAll'));\n  }\n\n  private unselectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('unselectAll'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      ${iaButtonStyle}\n      .manage-container {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        padding: 20px 0 20px;\n        flex-wrap: wrap;\n      }\n\n      .manage-label {\n        display: inline-block;\n        font-weight: bold;\n        font-size: 1.8rem;\n        padding-right: 10px;\n      }\n\n      .manage-buttons {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n      }\n\n      .ia-button,\n      button {\n        padding: 6px 12px;\n        font-size: 1.4rem;\n      }\n\n      .ia-button.danger:disabled {\n        opacity: 0.5;\n      }\n\n      button.link-styled {\n        margin: 0;\n        padding: 6px;\n        border: 0;\n        appearance: none;\n        background: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n        text-decoration: none;\n        cursor: pointer;\n      }\n      button.link-styled:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

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

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

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

@@ -1,92 +1,92 @@
-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 { searchIcon } from '../assets/img/icons/mediatype/search';
-export const mediatypeConfig = {
-    account: {
-        color: '#000000',
-        icon: accountIcon,
-        text: 'Account',
-    },
-    audio: {
-        color: '#00adef',
-        icon: audioIcon,
-        text: 'Audio',
-    },
-    collection: {
-        color: '#4666ff',
-        icon: collectionIcon,
-        text: 'Collection',
-    },
-    data: {
-        color: '#333333',
-        icon: dataIcon,
-        text: 'Data',
-    },
-    etree: {
-        color: '#00adef',
-        icon: etreeIcon,
-        text: 'E-tree',
-    },
-    film: {
-        color: '#bf1b2c',
-        icon: filmIcon,
-        text: 'Film',
-    },
-    image: {
-        color: '#aa99c9',
-        icon: imagesIcon,
-        text: 'Image',
-    },
-    movies: {
-        color: '#f1644b',
-        icon: filmIcon,
-        text: 'Movie',
-    },
-    radio: {
-        color: '#8fdaef',
-        icon: radioIcon,
-        text: 'Radio',
-    },
-    software: {
-        color: '#9ecc4f',
-        icon: softwareIcon,
-        text: 'Software',
-    },
-    texts: {
-        color: '#faab3c',
-        icon: textsIcon,
-        text: 'Text',
-    },
-    tv: {
-        color: '#f1644b',
-        icon: tvIcon,
-        text: 'TV',
-    },
-    video: {
-        color: '#f1644b',
-        icon: videoIcon,
-        text: 'Video',
-    },
-    web: {
-        color: '#ffcd27',
-        icon: webIcon,
-        text: 'Web',
-    },
-    search: {
-        color: '#000000',
-        icon: searchIcon,
-        text: 'Search',
-    },
-};
+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 { searchIcon } from '../assets/img/icons/mediatype/search';
+export const mediatypeConfig = {
+    account: {
+        color: '#000000',
+        icon: accountIcon,
+        text: 'Account',
+    },
+    audio: {
+        color: '#00adef',
+        icon: audioIcon,
+        text: 'Audio',
+    },
+    collection: {
+        color: '#4666ff',
+        icon: collectionIcon,
+        text: 'Collection',
+    },
+    data: {
+        color: '#333333',
+        icon: dataIcon,
+        text: 'Data',
+    },
+    etree: {
+        color: '#00adef',
+        icon: etreeIcon,
+        text: 'E-tree',
+    },
+    film: {
+        color: '#bf1b2c',
+        icon: filmIcon,
+        text: 'Film',
+    },
+    image: {
+        color: '#aa99c9',
+        icon: imagesIcon,
+        text: 'Image',
+    },
+    movies: {
+        color: '#f1644b',
+        icon: filmIcon,
+        text: 'Movie',
+    },
+    radio: {
+        color: '#8fdaef',
+        icon: radioIcon,
+        text: 'Radio',
+    },
+    software: {
+        color: '#9ecc4f',
+        icon: softwareIcon,
+        text: 'Software',
+    },
+    texts: {
+        color: '#faab3c',
+        icon: textsIcon,
+        text: 'Text',
+    },
+    tv: {
+        color: '#f1644b',
+        icon: tvIcon,
+        text: 'TV',
+    },
+    video: {
+        color: '#f1644b',
+        icon: videoIcon,
+        text: 'Video',
+    },
+    web: {
+        color: '#ffcd27',
+        icon: webIcon,
+        text: 'Web',
+    },
+    search: {
+        color: '#000000',
+        icon: searchIcon,
+        text: 'Search',
+    },
+};
 //# sourceMappingURL=mediatype-config.js.map