@internetarchive/ia-item-navigator 1.0.3 → 1.0.4

package/dist/src/menu-slider/styles/menu-slider.js

@@ -0,0 +1,118 @@
+import { css } from 'lit';
+const menuButtonWidth = css `42px`;
+const sliderWidth = css `var(--menuWidth, 320px)`;
+const transitionTiming = css `var(--animationTiming, 200ms)`;
+export default css `
+  .main {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  .animate {
+    transition: transform ${transitionTiming} ease-out;
+  }
+
+  .menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: ${sliderWidth};
+    padding: 0.5rem 0.5rem 0 0;
+    box-sizing: border-box;
+    font-size: 1.4rem;
+    color: var(--primaryTextColor);
+    background: var(--menuSliderBg);
+    transform: translateX(calc(${sliderWidth} * -1));
+  }
+
+  .menu > button.close {
+    right: 0.7rem;
+  }
+
+  button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header {
+    margin: 0 0 0.5rem 0;
+  }
+
+  header * {
+    margin: 0;
+    display: inline-block;
+  }
+  header button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header.with-secondary-action .details {
+    width: 80%;
+  }
+
+  header .details {
+    font-weight: bold;
+    width: 88%;
+  }
+
+  header .custom-action > *,
+  button.close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    --iconWidth: var(--menuSliderHeaderIconWidth);
+    --iconHeight: var(--menuSliderHeaderIconHeight);
+  }
+
+  header .custom-action,
+  button.close {
+    position: absolute;
+  }
+  button.close {
+    right: 0.5rem;
+  }
+
+  button.close * {
+    float: right;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: ${menuButtonWidth};
+    z-index: 1;
+    transform: translateX(calc(${sliderWidth} * -1));
+    transition: transform ${transitionTiming} ease-out;
+    background: var(--activeButtonBg);
+    border-right: 0.2rem solid;
+    border-color: var(--subpanelRightBorderColor);
+    padding: 0.5rem 0 0 0.5rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .open {
+    transform: translateX(0);
+  }
+
+  .menu-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    background: var(--menuSliderBg);
+  }
+  .menu-list li {
+    margin-bottom: 0.2rem;
+  }
+
+  .content > section {
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+`;
+//# sourceMappingURL=menu-slider.js.map

package/dist/src/menu-slider/styles/menu-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n  .main {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .animate {\n    transition: transform ${transitionTiming} ease-out;\n  }\n\n  .menu {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${sliderWidth};\n    padding: 0.5rem 0.5rem 0 0;\n    box-sizing: border-box;\n    font-size: 1.4rem;\n    color: var(--primaryTextColor);\n    background: var(--menuSliderBg);\n    transform: translateX(calc(${sliderWidth} * -1));\n  }\n\n  .menu > button.close {\n    right: 0.7rem;\n  }\n\n  button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header {\n    margin: 0 0 0.5rem 0;\n  }\n\n  header * {\n    margin: 0;\n    display: inline-block;\n  }\n  header button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header.with-secondary-action .details {\n    width: 80%;\n  }\n\n  header .details {\n    font-weight: bold;\n    width: 88%;\n  }\n\n  header .custom-action > *,\n  button.close {\n    padding: 0;\n    background-color: transparent;\n    border: 0;\n    --iconWidth: var(--menuSliderHeaderIconWidth);\n    --iconHeight: var(--menuSliderHeaderIconHeight);\n  }\n\n  header .custom-action,\n  button.close {\n    position: absolute;\n  }\n  button.close {\n    right: 0.5rem;\n  }\n\n  button.close * {\n    float: right;\n  }\n\n  .content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: ${menuButtonWidth};\n    z-index: 1;\n    transform: translateX(calc(${sliderWidth} * -1));\n    transition: transform ${transitionTiming} ease-out;\n    background: var(--activeButtonBg);\n    border-right: 0.2rem solid;\n    border-color: var(--subpanelRightBorderColor);\n    padding: 0.5rem 0 0 0.5rem;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .open {\n    transform: translateX(0);\n  }\n\n  .menu-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    background: var(--menuSliderBg);\n  }\n  .menu-list li {\n    margin-bottom: 0.2rem;\n  }\n\n  .content > section {\n    overflow: auto;\n    overscroll-behavior: contain;\n  }\n`;\n"]}

package/dist/src/no-theater-available.d.ts

@@ -1,9 +1,9 @@
-import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
-export declare class IANoTheaterAvailable extends LitElement {
-    identifier?: string;
-    emitLoaded(): void;
-    updated(changed: PropertyValues): void;
-    get downloadUrl(): string;
-    render(): TemplateResult;
-    static get styles(): CSSResult;
-}
+import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
+export declare class IANoTheaterAvailable extends LitElement {
+    identifier?: string;
+    emitLoaded(): void;
+    updated(changed: PropertyValues): void;
+    get downloadUrl(): string;
+    render(): TemplateResult;
+    static get styles(): CSSResult;
+}

package/dist/src/no-theater-available.js

@@ -1,25 +1,25 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.identifier = '';
-    }
-    emitLoaded() {
-        this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
-            detail: { loaded: true },
-        }));
-    }
-    updated(changed) {
-        if (changed.has('identifier')) {
-            this.emitLoaded();
-        }
-    }
-    get downloadUrl() {
-        return `/download/${this.identifier}`;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { LitElement, html, css, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.identifier = '';
+    }
+    emitLoaded() {
+        this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
+            detail: { loaded: true },
+        }));
+    }
+    updated(changed) {
+        if (changed.has('identifier')) {
+            this.emitLoaded();
+        }
+    }
+    get downloadUrl() {
+        return `/download/${this.identifier}`;
+    }
+    render() {
         return html `
       <section>
         <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
@@ -31,9 +31,9 @@ let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
         </p>
         <a href=${this.downloadUrl}>Show all files</a>
       </section>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       :host {
         color: var(--primaryTextColor, #fff);
@@ -68,14 +68,14 @@ let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
         user-select: none;
         text-decoration: none;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], IANoTheaterAvailable.prototype, "identifier", void 0);
-IANoTheaterAvailable = __decorate([
-    customElement('ia-no-theater-available')
-], IANoTheaterAvailable);
-export { IANoTheaterAvailable };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], IANoTheaterAvailable.prototype, "identifier", void 0);
+IANoTheaterAvailable = __decorate([
+    customElement('ia-no-theater-available')
+], IANoTheaterAvailable);
+export { IANoTheaterAvailable };
 //# sourceMappingURL=no-theater-available.js.map

package/dist/test/ia-item-navigator.test.d.ts

@@ -1 +1 @@
-import '../src/item-navigator';
+import '../src/item-navigator';