@internetarchive/collection-browser 1.13.0-alpha2 → 1.14.0

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

@@ -0,0 +1,26 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+export interface ManageableItem {
+    identifier: string;
+    title?: string;
+    date?: 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;
+}

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

@@ -0,0 +1,147 @@
+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() {
+        return html `
+      <div class="manage-container">
+        <span class="manage-label">${this.label}</span>
+        <div class="manage-buttons">
+          <button class="cancel-btn" @click=${this.cancelClicked}>
+            ${msg('Cancel')}
+          </button>
+          <button class="remove-btn" @click=${this.removeClicked}>
+            ${msg('Remove selected items')}
+          </button>
+          <div class="selection-buttons">
+            ${when(this.showSelectAll, () => html ` <button
+                class="link-styled select-all-btn"
+                @click=${this.selectAllClicked}
+              >
+                ${msg('Select all')}
+              </button>`)}
+            ${when(this.showUnselectAll, () => html ` <button
+                class="link-styled unselect-all-btn"
+                @click=${this.unselectAllClicked}
+              >
+                ${msg('Unselect all')}
+              </button>`)}
+          </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() {
+        return css `
+      .manage-container {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        padding: 10px 0 20px;
+        flex-wrap: wrap;
+      }
+
+      .manage-label {
+        display: inline-block;
+        font-weight: bold;
+        font-size: 1.8rem;
+        padding-right: 10px;
+      }
+
+      .manage-buttons {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+      }
+
+      button {
+        display: inline-block;
+        font-size: 1.4rem;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      button.link-styled {
+        margin: 0;
+        padding: 6px;
+        border: 0;
+        appearance: none;
+        background: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+        text-decoration: none;
+      }
+      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 };
+//# sourceMappingURL=manage-bar.js.map

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

@@ -0,0 +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  date?: 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"]}

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,86 +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: '#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',
-    },
-};
+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: '#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',
+    },
+};
 //# sourceMappingURL=mediatype-config.js.map