@limetech/lime-elements 37.1.0-next.44 → 37.1.0-next.45

package/dist/collection/components/file-viewer/file-viewer.js

@@ -0,0 +1,387 @@
+import { h, } from '@stencil/core';
+import translate from '../../global/translations';
+import { detectExtension } from './extension-mapping';
+import { Fullscreen } from './fullscreen';
+/**
+ * This is a smart component that automatically detects
+ * the most common file types such as image, audio, video, and text,
+ * and properly displays them in the browser.
+ * The component is also capable to render the most common office files.
+ *
+ * :::note
+ * Image files will always be contained in their containers, which means
+ * they automatically increase or decrease in size to fill their containing box
+ * whilst preserving their aspect-ratio.
+ *
+ * Text and PDF files will also always respect the width and height of the
+ * container in which the `limel-file-viewer` is loaded.
+ * :::
+ *
+ * For some file types such as text and images, the component will display a
+ * download button and a button to open the file in a new browser tab.
+ * This will allow users to preview the file in a fullscreen mode with the
+ * browser and take advantage of for example native zooming and panning
+ * functionalities.
+ * @exampleComponent limel-example-file-viewer
+ * @exampleComponent limel-example-file-viewer-office
+ * @exampleComponent limel-example-file-viewer-filename
+ * @exampleComponent limel-example-file-viewer-inbuilt-actions
+ * @exampleComponent limel-example-file-viewer-custom-actions
+ * @exampleComponent limel-example-file-viewer-with-picker
+ * @private
+ */
+export class FileViewer {
+  constructor() {
+    this.renderPdf = () => {
+      return [
+        h("div", { class: "action-menu-for-pdf-files" }, this.renderActionMenu()),
+        h("object", { data: this.url, type: "application/pdf" }),
+      ];
+    };
+    this.renderImage = () => {
+      return [this.renderButtons(), h("img", { src: this.url, alt: this.alt })];
+    };
+    this.renderVideo = () => {
+      return (h("video", { controls: true }, h("source", { src: this.url })));
+    };
+    this.renderAudio = () => {
+      return (h("audio", { controls: true }, h("source", { src: this.url })));
+    };
+    this.renderText = () => {
+      return [
+        this.renderButtons(),
+        h("object", { data: this.url, type: "text/plain" }),
+      ];
+    };
+    this.renderOffice = () => {
+      return [
+        h("div", { class: "action-menu-for-office-files" }, this.renderActionMenu()),
+        h("iframe", { src: this.getOfficeViewerUrl() + this.url + '&embedded=true', frameborder: "0" }),
+      ];
+    };
+    this.isOfficeFileAccessibleViaURL = () => {
+      return (this.fileType === 'office' &&
+        !(this.url.startsWith('http://') || this.url.startsWith('https://')));
+    };
+    this.getOfficeViewerUrl = () => {
+      const officeViewers = {
+        'microsoft-office': 'https://view.officeapps.live.com/op/embed.aspx?src=',
+        'google-drive': 'https://docs.google.com/gview?url=',
+      };
+      return officeViewers[this.officeViewer];
+    };
+    this.renderNoFileSupportMessage = () => {
+      return (h("div", { class: "no-support" }, h("limel-icon", { class: "icon--warning", name: "brake_warning", size: "large", role: "presentation" }), h("p", null, this.getTranslation('message.unsupported-filetype')), this.renderDownloadButton()));
+    };
+    this.renderButtons = () => {
+      return (h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
+    };
+    this.renderToggleFullscreenButton = () => {
+      if (!this.allowFullscreen || !this.fullscreen.isSupported()) {
+        return;
+      }
+      const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';
+      // eslint-disable-next-line multiline-ternary
+      const label = this.isFullscreen
+        ? // eslint-disable-next-line multiline-ternary
+          this.getTranslation('exit-fullscreen')
+        : this.getTranslation('open-in-fullscreen');
+      return [
+        h("button", { class: "button--toggle-fullscreen", id: "tooltip-toggle-fullscreen", role: "button", onClick: this.handleToggleFullscreen }, h("limel-icon", { name: icon }), h("limel-tooltip", { label: label, elementId: "tooltip-toggle-fullscreen", openDirection: "left" })),
+      ];
+    };
+    this.renderDownloadButton = () => {
+      if (!this.allowDownload || this.isFullscreen) {
+        return;
+      }
+      return (h("a", { class: "button--download", id: "tooltip-download", role: "button", download: this.filename ? this.filename : '', href: this.url, target: "_blank" }, h("limel-icon", { name: "download_2" }), h("limel-tooltip", { label: this.getTranslation('download'), elementId: "tooltip-download", openDirection: "left" })));
+    };
+    this.renderOpenInNewTabButton = () => {
+      if (!this.allowOpenInNewTab || this.isFullscreen) {
+        return;
+      }
+      return (h("a", { class: "button--new-tab", id: "tooltip-new-tab", role: "button", href: this.url, target: "_blank", rel: "noopener noreferrer" }, h("limel-icon", { name: "external_link" }), h("limel-tooltip", { label: this.getTranslation('open-in-new-tab'), elementId: "tooltip-new-tab", openDirection: "left" })));
+    };
+    this.renderActionMenu = () => {
+      if (!this.actions || this.isFullscreen) {
+        return;
+      }
+      return (h("limel-menu", { class: "action-menu", items: this.actions, onSelect: this.emitOnAction, "open-direction": "left" }, h("button", { class: "button--action", id: "tooltip-more", role: "button", slot: "trigger" }, h("limel-icon", { name: "menu_2" }), h("limel-tooltip", { label: this.getTranslation('more-actions'), elementId: "tooltip-more", openDirection: "left" }))));
+    };
+    this.handleToggleFullscreen = () => {
+      if (this.fullscreen.isSupported()) {
+        this.fullscreen.toggle();
+        this.isFullscreen = !this.isFullscreen;
+      }
+    };
+    this.emitOnAction = (event) => {
+      event.stopPropagation();
+      this.action.emit(event.detail);
+    };
+    this.url = undefined;
+    this.filename = undefined;
+    this.alt = undefined;
+    this.allowFullscreen = false;
+    this.allowOpenInNewTab = false;
+    this.allowDownload = false;
+    this.language = 'en';
+    this.officeViewer = 'microsoft-office';
+    this.actions = undefined;
+    this.isFullscreen = false;
+    this.fileType = undefined;
+    this.fullscreen = new Fullscreen(this.HostElement);
+    this.fileType = detectExtension(this.filename, this.url);
+  }
+  render() {
+    if (!this.isOfficeFileAccessibleViaURL) {
+      return this.renderNoFileSupportMessage();
+    }
+    return this.renderFileViewer();
+  }
+  watchUrl(newUrl, oldUrl) {
+    if (newUrl === oldUrl) {
+      return;
+    }
+    this.fileType = detectExtension(this.filename, this.url);
+  }
+  renderFileViewer() {
+    const fileViewerFunctions = {
+      pdf: this.renderPdf,
+      image: this.renderImage,
+      video: this.renderVideo,
+      audio: this.renderAudio,
+      text: this.renderText,
+      office: this.renderOffice,
+    };
+    const fileViewerFunction = fileViewerFunctions[this.fileType] ||
+      this.renderNoFileSupportMessage;
+    return fileViewerFunction();
+  }
+  getTranslation(key) {
+    return translate.get(`file-viewer.${key}`, this.language);
+  }
+  static get is() { return "limel-file-viewer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["file-viewer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["file-viewer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link to the file"
+        },
+        "attribute": "url",
+        "reflect": true
+      },
+      "filename": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the file that must also contains its extension.\nThis overrides the filename that the `url` ends with.\nUseful when the `url` does not contain the filename.\nWhen specified, the `filename` will be used as filename of\nthe downloaded file."
+        },
+        "attribute": "filename",
+        "reflect": true
+      },
+      "alt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An optional alternative text, mainly for assistive technologies and screen readers.\nIt is used for only image files, as an `alt` attribute.\nShould optimally hold a description of the image,\nwhich is also displayed on the page if the image can't be loaded for some reason."
+        },
+        "attribute": "alt",
+        "reflect": true
+      },
+      "allowFullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Displays a button that allows the user to view the file\nin fullscreen mode.\nNot displayed for office files!"
+        },
+        "attribute": "allow-fullscreen",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "allowOpenInNewTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Displays a button that allows the user to open the file\nin a new browser tab.\nNot displayed for office files!"
+        },
+        "attribute": "allow-open-in-new-tab",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "allowDownload": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Displays a button that allows the user to download the file.\nNote that due to the browser's security policies,\nthe file should be hosted on the same domain\nfor the download button to work properly.\nNot displayed for office files!"
+        },
+        "attribute": "allow-download",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "language": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "Languages",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the localization for translations."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
+      },
+      "officeViewer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OfficeViewer",
+          "resolved": "\"google-drive\" | \"microsoft-office\"",
+          "references": {
+            "OfficeViewer": {
+              "location": "import",
+              "path": "./file-viewer.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the third-party viewer that should be used to render\nthe content of office files, such as word processing documents,\npresentations, or spreadsheets."
+        },
+        "attribute": "office-viewer",
+        "reflect": true,
+        "defaultValue": "'microsoft-office'"
+      },
+      "actions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ListItem[]",
+          "resolved": "ListItem[]",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An array of custom actions that can be displayed\nas an action menu on the file which is being displayed."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isFullscreen": {},
+      "fileType": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "action",
+        "name": "action",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a custom action is selected from the action menu."
+        },
+        "complexType": {
+          "original": "ListItem",
+          "resolved": "ListItem",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "HostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "url",
+        "methodName": "watchUrl"
+      }];
+  }
+}
+//# sourceMappingURL=file-viewer.js.map

package/dist/collection/components/file-viewer/file-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-viewer.js","sourceRoot":"","sources":["../../../src/components/file-viewer/file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { Languages, ListItem } from '@limetech/lime-elements';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n * @exampleComponent limel-example-file-viewer\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n * @private\n */\n\n@Component({\n    tag: 'limel-file-viewer',\n    shadow: true,\n    styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n    /**\n     * Link to the file\n     */\n    @Prop({ reflect: true })\n    public url: string;\n\n    /**\n     * The name of the file that must also contains its extension.\n     * This overrides the filename that the `url` ends with.\n     * Useful when the `url` does not contain the filename.\n     * When specified, the `filename` will be used as filename of\n     * the downloaded file.\n     */\n    @Prop({ reflect: true })\n    public filename?: string;\n\n    /**\n     * An optional alternative text, mainly for assistive technologies and screen readers.\n     * It is used for only image files, as an `alt` attribute.\n     * Should optimally hold a description of the image,\n     * which is also displayed on the page if the image can't be loaded for some reason.\n     */\n    @Prop({ reflect: true })\n    public alt?: string;\n\n    /**\n     * Displays a button that allows the user to view the file\n     * in fullscreen mode.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowFullscreen?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to open the file\n     * in a new browser tab.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowOpenInNewTab?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to download the file.\n     * Note that due to the browser's security policies,\n     * the file should be hosted on the same domain\n     * for the download button to work properly.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowDownload?: boolean = false;\n\n    /**\n     * Defines the localization for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Defines the third-party viewer that should be used to render\n     * the content of office files, such as word processing documents,\n     * presentations, or spreadsheets.\n     */\n    @Prop({ reflect: true })\n    public officeViewer: OfficeViewer = 'microsoft-office';\n\n    /**\n     * An array of custom actions that can be displayed\n     * as an action menu on the file which is being displayed.\n     */\n    @Prop()\n    public actions: ListItem[];\n\n    /**\n     * Emitted when a custom action is selected from the action menu.\n     */\n    @Event()\n    public action: EventEmitter<ListItem>;\n\n    @Element()\n    public HostElement: HTMLLimelFileViewerElement;\n\n    private fullscreen: Fullscreen;\n\n    @State()\n    private isFullscreen: boolean = false;\n\n    @State()\n    public fileType: FileType;\n\n    constructor() {\n        this.fullscreen = new Fullscreen(this.HostElement);\n        this.fileType = detectExtension(this.filename, this.url);\n    }\n\n    public render() {\n        if (!this.isOfficeFileAccessibleViaURL) {\n            return this.renderNoFileSupportMessage();\n        }\n\n        return this.renderFileViewer();\n    }\n\n    @Watch('url')\n    protected watchUrl(newUrl: string, oldUrl: string) {\n        if (newUrl === oldUrl) {\n            return;\n        }\n\n        this.fileType = detectExtension(this.filename, this.url);\n    }\n\n    private renderFileViewer() {\n        const fileViewerFunctions = {\n            pdf: this.renderPdf,\n            image: this.renderImage,\n            video: this.renderVideo,\n            audio: this.renderAudio,\n            text: this.renderText,\n            office: this.renderOffice,\n        };\n        const fileViewerFunction =\n            fileViewerFunctions[this.fileType] ||\n            this.renderNoFileSupportMessage;\n\n        return fileViewerFunction();\n    }\n\n    private renderPdf = () => {\n        return [\n            <div class=\"action-menu-for-pdf-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <object data={this.url} type=\"application/pdf\" />,\n        ];\n    };\n\n    private renderImage = () => {\n        return [this.renderButtons(), <img src={this.url} alt={this.alt} />];\n    };\n\n    private renderVideo = () => {\n        return (\n            <video controls>\n                <source src={this.url} />\n            </video>\n        );\n    };\n\n    private renderAudio = () => {\n        return (\n            <audio controls>\n                <source src={this.url} />\n            </audio>\n        );\n    };\n\n    private renderText = () => {\n        return [\n            this.renderButtons(),\n            <object data={this.url} type=\"text/plain\" />,\n        ];\n    };\n\n    private renderOffice = () => {\n        return [\n            <div class=\"action-menu-for-office-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe\n                src={this.getOfficeViewerUrl() + this.url + '&embedded=true'}\n                frameborder=\"0\"\n            />,\n        ];\n    };\n\n    private isOfficeFileAccessibleViaURL = () => {\n        return (\n            this.fileType === 'office' &&\n            !(this.url.startsWith('http://') || this.url.startsWith('https://'))\n        );\n    };\n\n    private getOfficeViewerUrl = () => {\n        const officeViewers = {\n            'microsoft-office':\n                'https://view.officeapps.live.com/op/embed.aspx?src=',\n            'google-drive': 'https://docs.google.com/gview?url=',\n        };\n\n        return officeViewers[this.officeViewer];\n    };\n\n    private renderNoFileSupportMessage = () => {\n        return (\n            <div class=\"no-support\">\n                <limel-icon\n                    class=\"icon--warning\"\n                    name=\"brake_warning\"\n                    size=\"large\"\n                    role=\"presentation\"\n                />\n                <p>{this.getTranslation('message.unsupported-filetype')}</p>\n                {this.renderDownloadButton()}\n            </div>\n        );\n    };\n\n    private renderButtons = () => {\n        return (\n            <div class=\"buttons\">\n                {this.renderActionMenu()}\n                {this.renderToggleFullscreenButton()}\n                {this.renderDownloadButton()}\n                {this.renderOpenInNewTabButton()}\n            </div>\n        );\n    };\n\n    private renderToggleFullscreenButton = () => {\n        if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n            return;\n        }\n\n        const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n        // eslint-disable-next-line multiline-ternary\n        const label = this.isFullscreen\n            ? // eslint-disable-next-line multiline-ternary\n              this.getTranslation('exit-fullscreen')\n            : this.getTranslation('open-in-fullscreen');\n\n        return [\n            <button\n                class=\"button--toggle-fullscreen\"\n                id=\"tooltip-toggle-fullscreen\"\n                role=\"button\"\n                onClick={this.handleToggleFullscreen}\n            >\n                <limel-icon name={icon} />\n                <limel-tooltip\n                    label={label}\n                    elementId=\"tooltip-toggle-fullscreen\"\n                    openDirection=\"left\"\n                />\n            </button>,\n        ];\n    };\n\n    private renderDownloadButton = () => {\n        if (!this.allowDownload || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--download\"\n                id=\"tooltip-download\"\n                role=\"button\"\n                download={this.filename ? this.filename : ''}\n                href={this.url}\n                target=\"_blank\"\n            >\n                <limel-icon name=\"download_2\" />\n                <limel-tooltip\n                    label={this.getTranslation('download')}\n                    elementId=\"tooltip-download\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderOpenInNewTabButton = () => {\n        if (!this.allowOpenInNewTab || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--new-tab\"\n                id=\"tooltip-new-tab\"\n                role=\"button\"\n                href={this.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <limel-icon name=\"external_link\" />\n                <limel-tooltip\n                    label={this.getTranslation('open-in-new-tab')}\n                    elementId=\"tooltip-new-tab\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderActionMenu = () => {\n        if (!this.actions || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"action-menu\"\n                items={this.actions}\n                onSelect={this.emitOnAction}\n                open-direction=\"left\"\n            >\n                <button\n                    class=\"button--action\"\n                    id=\"tooltip-more\"\n                    role=\"button\"\n                    slot=\"trigger\"\n                >\n                    <limel-icon name=\"menu_2\" />\n                    <limel-tooltip\n                        label={this.getTranslation('more-actions')}\n                        elementId=\"tooltip-more\"\n                        openDirection=\"left\"\n                    />\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private handleToggleFullscreen = () => {\n        if (this.fullscreen.isSupported()) {\n            this.fullscreen.toggle();\n            this.isFullscreen = !this.isFullscreen;\n        }\n    };\n\n    private emitOnAction = (event: CustomEvent<ListItem>) => {\n        event.stopPropagation();\n        this.action.emit(event.detail);\n    };\n\n    private getTranslation(key: string) {\n        return translate.get(`file-viewer.${key}`, this.language);\n    }\n}\n"]}

package/dist/collection/components/file-viewer/file-viewer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=file-viewer.types.js.map

package/dist/collection/components/file-viewer/file-viewer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-viewer.types.js","sourceRoot":"","sources":["../../../src/components/file-viewer/file-viewer.types.ts"],"names":[],"mappings":"","sourcesContent":["export type FileType =\n    | 'pdf'\n    | 'image'\n    | 'video'\n    | 'audio'\n    | 'text'\n    | 'office'\n    | 'unknown';\n\nexport type OfficeViewer = 'microsoft-office' | 'google-drive';\n"]}

package/dist/collection/components/file-viewer/fullscreen.js

@@ -0,0 +1,43 @@
+export class Fullscreen {
+  constructor(element) {
+    this.requestFullscreen = () => {
+      if (this.enter) {
+        this.enter();
+      }
+    };
+    this.exitFullscreen = () => {
+      if (this.exit) {
+        this.exit.bind(window.document)();
+      }
+    };
+    this.toggle = () => {
+      const doc = window.document;
+      const isFullscreen = doc.fullscreenElement ||
+        doc.mozFullScreenElement ||
+        doc.webkitFullscreenElement ||
+        doc.msFullscreenElement;
+      if (isFullscreen) {
+        this.exitFullscreen();
+      }
+      else {
+        this.requestFullscreen();
+      }
+    };
+    this.enter =
+      element.requestFullscreen ||
+        element.msRequestFullscreen ||
+        element.mozRequestFullScreen ||
+        element.webkitRequestFullscreen;
+    this.enter = this.enter.bind(element);
+    const doc = window.document;
+    this.exit =
+      doc.exitFullscreen ||
+        doc.msExitFullscreen ||
+        doc.mozCancelFullScreen ||
+        doc.webkitExitFullscreen;
+  }
+  isSupported() {
+    return !!this.requestFullscreen;
+  }
+}
+//# sourceMappingURL=fullscreen.js.map

package/dist/collection/components/file-viewer/fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.js","sourceRoot":"","sources":["../../../src/components/file-viewer/fullscreen.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,UAAU;EAInB,YAAY,OAAY;IAejB,sBAAiB,GAAG,GAAG,EAAE;MAC5B,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,CAAC,KAAK,EAAE,CAAC;OAChB;IACL,CAAC,CAAC;IAEK,mBAAc,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;OACrC;IACL,CAAC,CAAC;IAEK,WAAM,GAAG,GAAG,EAAE;MACjB,MAAM,GAAG,GAAQ,MAAM,CAAC,QAAQ,CAAC;MACjC,MAAM,YAAY,GACd,GAAG,CAAC,iBAAiB;QACrB,GAAG,CAAC,oBAAoB;QACxB,GAAG,CAAC,uBAAuB;QAC3B,GAAG,CAAC,mBAAmB,CAAC;MAE5B,IAAI,YAAY,EAAE;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;OACzB;WAAM;QACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC5B;IACL,CAAC,CAAC;IAvCE,IAAI,CAAC,KAAK;MACN,OAAO,CAAC,iBAAiB;QACzB,OAAO,CAAC,mBAAmB;QAC3B,OAAO,CAAC,oBAAoB;QAC5B,OAAO,CAAC,uBAAuB,CAAC;IACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,GAAG,GAAQ,MAAM,CAAC,QAAQ,CAAC;IACjC,IAAI,CAAC,IAAI;MACL,GAAG,CAAC,cAAc;QAClB,GAAG,CAAC,gBAAgB;QACpB,GAAG,CAAC,mBAAmB;QACvB,GAAG,CAAC,oBAAoB,CAAC;EACjC,CAAC;EA6BM,WAAW;IACd,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;EACpC,CAAC;CACJ","sourcesContent":["export class Fullscreen {\n    private enter: () => void;\n    private exit: () => void;\n\n    constructor(element: any) {\n        this.enter =\n            element.requestFullscreen ||\n            element.msRequestFullscreen ||\n            element.mozRequestFullScreen ||\n            element.webkitRequestFullscreen;\n        this.enter = this.enter.bind(element);\n        const doc: any = window.document;\n        this.exit =\n            doc.exitFullscreen ||\n            doc.msExitFullscreen ||\n            doc.mozCancelFullScreen ||\n            doc.webkitExitFullscreen;\n    }\n\n    public requestFullscreen = () => {\n        if (this.enter) {\n            this.enter();\n        }\n    };\n\n    public exitFullscreen = () => {\n        if (this.exit) {\n            this.exit.bind(window.document)();\n        }\n    };\n\n    public toggle = () => {\n        const doc: any = window.document;\n        const isFullscreen =\n            doc.fullscreenElement ||\n            doc.mozFullScreenElement ||\n            doc.webkitFullscreenElement ||\n            doc.msFullscreenElement;\n\n        if (isFullscreen) {\n            this.exitFullscreen();\n        } else {\n            this.requestFullscreen();\n        }\n    };\n\n    public isSupported(): boolean {\n        return !!this.requestFullscreen;\n    }\n}\n"]}

package/dist/collection/components/icon-button/icon-button.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-clickable';
+import { createRandomString } from '../../util/random-string';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
@@ -34,10 +35,16 @@ export class IconButton {
   }
   render() {
     const buttonAttributes = {};
+    const tooltipId = createRandomString();
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    return (h("button", Object.assign({ disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true })));
+    return (h("button", Object.assign({ disabled: this.disabled, id: tooltipId }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true }), this.renderTooltip(tooltipId)));
+  }
+  renderTooltip(tooltipId) {
+    if (this.label) {
+      return h("limel-tooltip", { elementId: tooltipId, label: this.label });
+    }
   }
   static get is() { return "limel-icon-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AAEvC;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEvC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,SAAS,IACT,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI;MAC3C,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CACzB,CACZ,CAAC;EACN,CAAC;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        const tooltipId = createRandomString();\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"]}

package/dist/collection/translations/da.js

@@ -10,5 +10,11 @@ export default {
   'date-picker.year.heading': 'År',
   'chip-set.clear-all': 'Ryd alle',
   'file.drag-and-drop-tips': 'Træk og slip filen her, eller klik for at gennemse.',
+  'file-viewer.message.unsupported-filetype': 'Denne fil kan ikke vises!',
+  'file-viewer.download': 'Hent',
+  'file-viewer.exit-fullscreen': 'Afslut fuldskærm',
+  'file-viewer.open-in-fullscreen': 'Åbn i fuld skærm',
+  'file-viewer.open-in-new-tab': 'Åbn i en ny fane',
+  'file-viewer.more-actions': 'Mere…',
 };
 //# sourceMappingURL=da.js.map

package/dist/collection/translations/da.js.map

@@ -1 +1 @@
-{"version":3,"file":"da.js","sourceRoot":"","sources":["../../src/translations/da.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,QAAQ;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,UAAU;EAC7B,iBAAiB,EAAE,UAAU;EAC7B,mBAAmB,EAAE,MAAM;EAC3B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,SAAS;EACxC,0BAA0B,EAAE,IAAI;EAChC,oBAAoB,EAAE,UAAU;EAChC,yBAAyB,EACrB,qDAAqD;CAC5D,CAAC","sourcesContent":["export default {\n    'callout.note': 'Bemærk',\n    'callout.important': 'Vigtig',\n    'callout.tip': 'Tip',\n    'callout.caution': 'Advarsel',\n    'callout.warning': 'Advarsel',\n    'date-picker.today': 'Idag',\n    'date-picker.month.heading': 'Måned',\n    'date-picker.quarter.heading': 'Kvartal',\n    'date-picker.year.heading': 'År',\n    'chip-set.clear-all': 'Ryd alle',\n    'file.drag-and-drop-tips':\n        'Træk og slip filen her, eller klik for at gennemse.',\n};\n"]}
+{"version":3,"file":"da.js","sourceRoot":"","sources":["../../src/translations/da.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,QAAQ;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,UAAU;EAC7B,iBAAiB,EAAE,UAAU;EAC7B,mBAAmB,EAAE,MAAM;EAC3B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,SAAS;EACxC,0BAA0B,EAAE,IAAI;EAChC,oBAAoB,EAAE,UAAU;EAChC,yBAAyB,EACrB,qDAAqD;EACzD,0CAA0C,EAAE,2BAA2B;EACvE,sBAAsB,EAAE,MAAM;EAC9B,6BAA6B,EAAE,kBAAkB;EACjD,gCAAgC,EAAE,kBAAkB;EACpD,6BAA6B,EAAE,kBAAkB;EACjD,0BAA0B,EAAE,OAAO;CACtC,CAAC","sourcesContent":["export default {\n    'callout.note': 'Bemærk',\n    'callout.important': 'Vigtig',\n    'callout.tip': 'Tip',\n    'callout.caution': 'Advarsel',\n    'callout.warning': 'Advarsel',\n    'date-picker.today': 'Idag',\n    'date-picker.month.heading': 'Måned',\n    'date-picker.quarter.heading': 'Kvartal',\n    'date-picker.year.heading': 'År',\n    'chip-set.clear-all': 'Ryd alle',\n    'file.drag-and-drop-tips':\n        'Træk og slip filen her, eller klik for at gennemse.',\n    'file-viewer.message.unsupported-filetype': 'Denne fil kan ikke vises!',\n    'file-viewer.download': 'Hent',\n    'file-viewer.exit-fullscreen': 'Afslut fuldskærm',\n    'file-viewer.open-in-fullscreen': 'Åbn i fuld skærm',\n    'file-viewer.open-in-new-tab': 'Åbn i en ny fane',\n    'file-viewer.more-actions': 'Mere…',\n};\n"]}

package/dist/collection/translations/en.js

@@ -12,5 +12,11 @@ export default {
   'chip-set.remove-chip': 'Remove chip',
   'snackbar.dismiss': 'Dismiss',
   'file.drag-and-drop-tips': 'Drag and drop your file here, or click to browse.',
+  'file-viewer.message.unsupported-filetype': 'Cannot display this file!',
+  'file-viewer.download': 'Download',
+  'file-viewer.exit-fullscreen': 'Exit fullscreen',
+  'file-viewer.open-in-fullscreen': 'Open in fullscreen',
+  'file-viewer.open-in-new-tab': 'Open in a new tab',
+  'file-viewer.more-actions': 'More…',
 };
 //# sourceMappingURL=en.js.map

package/dist/collection/translations/en.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.js","sourceRoot":"","sources":["../../src/translations/en.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,MAAM;EACtB,mBAAmB,EAAE,WAAW;EAChC,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,SAAS;EAC5B,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAE,OAAO;EAC5B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,SAAS;EACxC,0BAA0B,EAAE,MAAM;EAClC,oBAAoB,EAAE,WAAW;EACjC,sBAAsB,EAAE,aAAa;EACrC,kBAAkB,EAAE,SAAS;EAC7B,yBAAyB,EACrB,mDAAmD;CAC1D,CAAC","sourcesContent":["export default {\n    'callout.note': 'Note',\n    'callout.important': 'Important',\n    'callout.tip': 'Tip',\n    'callout.caution': 'Caution',\n    'callout.warning': 'Warning',\n    'date-picker.today': 'Today',\n    'date-picker.month.heading': 'Month',\n    'date-picker.quarter.heading': 'Quarter',\n    'date-picker.year.heading': 'Year',\n    'chip-set.clear-all': 'Clear all',\n    'chip-set.remove-chip': 'Remove chip',\n    'snackbar.dismiss': 'Dismiss',\n    'file.drag-and-drop-tips':\n        'Drag and drop your file here, or click to browse.',\n};\n"]}
+{"version":3,"file":"en.js","sourceRoot":"","sources":["../../src/translations/en.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,MAAM;EACtB,mBAAmB,EAAE,WAAW;EAChC,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,SAAS;EAC5B,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAE,OAAO;EAC5B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,SAAS;EACxC,0BAA0B,EAAE,MAAM;EAClC,oBAAoB,EAAE,WAAW;EACjC,sBAAsB,EAAE,aAAa;EACrC,kBAAkB,EAAE,SAAS;EAC7B,yBAAyB,EACrB,mDAAmD;EACvD,0CAA0C,EAAE,2BAA2B;EACvE,sBAAsB,EAAE,UAAU;EAClC,6BAA6B,EAAE,iBAAiB;EAChD,gCAAgC,EAAE,oBAAoB;EACtD,6BAA6B,EAAE,mBAAmB;EAClD,0BAA0B,EAAE,OAAO;CACtC,CAAC","sourcesContent":["export default {\n    'callout.note': 'Note',\n    'callout.important': 'Important',\n    'callout.tip': 'Tip',\n    'callout.caution': 'Caution',\n    'callout.warning': 'Warning',\n    'date-picker.today': 'Today',\n    'date-picker.month.heading': 'Month',\n    'date-picker.quarter.heading': 'Quarter',\n    'date-picker.year.heading': 'Year',\n    'chip-set.clear-all': 'Clear all',\n    'chip-set.remove-chip': 'Remove chip',\n    'snackbar.dismiss': 'Dismiss',\n    'file.drag-and-drop-tips':\n        'Drag and drop your file here, or click to browse.',\n    'file-viewer.message.unsupported-filetype': 'Cannot display this file!',\n    'file-viewer.download': 'Download',\n    'file-viewer.exit-fullscreen': 'Exit fullscreen',\n    'file-viewer.open-in-fullscreen': 'Open in fullscreen',\n    'file-viewer.open-in-new-tab': 'Open in a new tab',\n    'file-viewer.more-actions': 'More…',\n};\n"]}

package/dist/collection/translations/fi.js

@@ -10,5 +10,11 @@ export default {
   'date-picker.year.heading': 'Vuosi',
   'chip-set.clear-all': 'Tyhjennä kaikki',
   'file.drag-and-drop-tips': 'Vedä ja pudota tiedostosi tähän, tai napsauta selataksesi.',
+  'file-viewer.message.unsupported-filetype': 'Tätä tiedostoa ei voi näyttää!',
+  'file-viewer.download': 'Ladata',
+  'file-viewer.exit-fullscreen': 'Poistu koko näytöstä',
+  'file-viewer.open-in-fullscreen': 'Avaa koko näytössä',
+  'file-viewer.open-in-new-tab': 'Avaa uudella välilehdellä',
+  'file-viewer.more-actions': 'Lisää…',
 };
 //# sourceMappingURL=fi.js.map

package/dist/collection/translations/fi.js.map

@@ -1 +1 @@
-{"version":3,"file":"fi.js","sourceRoot":"","sources":["../../src/translations/fi.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,QAAQ;EACxB,mBAAmB,EAAE,SAAS;EAC9B,aAAa,EAAE,QAAQ;EACvB,iBAAiB,EAAE,UAAU;EAC7B,iBAAiB,EAAE,UAAU;EAC7B,mBAAmB,EAAE,QAAQ;EAC7B,2BAA2B,EAAE,UAAU;EACvC,6BAA6B,EAAE,gBAAgB;EAC/C,0BAA0B,EAAE,OAAO;EACnC,oBAAoB,EAAE,iBAAiB;EACvC,yBAAyB,EACrB,4DAA4D;CACnE,CAAC","sourcesContent":["export default {\n    'callout.note': 'Huomio',\n    'callout.important': 'Tärkeää',\n    'callout.tip': 'Vinkki',\n    'callout.caution': 'Varoitus',\n    'callout.warning': 'Varoitus',\n    'date-picker.today': 'Tänään',\n    'date-picker.month.heading': 'Kuukausi',\n    'date-picker.quarter.heading': 'Vuosineljännes',\n    'date-picker.year.heading': 'Vuosi',\n    'chip-set.clear-all': 'Tyhjennä kaikki',\n    'file.drag-and-drop-tips':\n        'Vedä ja pudota tiedostosi tähän, tai napsauta selataksesi.',\n};\n"]}
+{"version":3,"file":"fi.js","sourceRoot":"","sources":["../../src/translations/fi.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,QAAQ;EACxB,mBAAmB,EAAE,SAAS;EAC9B,aAAa,EAAE,QAAQ;EACvB,iBAAiB,EAAE,UAAU;EAC7B,iBAAiB,EAAE,UAAU;EAC7B,mBAAmB,EAAE,QAAQ;EAC7B,2BAA2B,EAAE,UAAU;EACvC,6BAA6B,EAAE,gBAAgB;EAC/C,0BAA0B,EAAE,OAAO;EACnC,oBAAoB,EAAE,iBAAiB;EACvC,yBAAyB,EACrB,4DAA4D;EAChE,0CAA0C,EACtC,gCAAgC;EACpC,sBAAsB,EAAE,QAAQ;EAChC,6BAA6B,EAAE,sBAAsB;EACrD,gCAAgC,EAAE,oBAAoB;EACtD,6BAA6B,EAAE,2BAA2B;EAC1D,0BAA0B,EAAE,QAAQ;CACvC,CAAC","sourcesContent":["export default {\n    'callout.note': 'Huomio',\n    'callout.important': 'Tärkeää',\n    'callout.tip': 'Vinkki',\n    'callout.caution': 'Varoitus',\n    'callout.warning': 'Varoitus',\n    'date-picker.today': 'Tänään',\n    'date-picker.month.heading': 'Kuukausi',\n    'date-picker.quarter.heading': 'Vuosineljännes',\n    'date-picker.year.heading': 'Vuosi',\n    'chip-set.clear-all': 'Tyhjennä kaikki',\n    'file.drag-and-drop-tips':\n        'Vedä ja pudota tiedostosi tähän, tai napsauta selataksesi.',\n    'file-viewer.message.unsupported-filetype':\n        'Tätä tiedostoa ei voi näyttää!',\n    'file-viewer.download': 'Ladata',\n    'file-viewer.exit-fullscreen': 'Poistu koko näytöstä',\n    'file-viewer.open-in-fullscreen': 'Avaa koko näytössä',\n    'file-viewer.open-in-new-tab': 'Avaa uudella välilehdellä',\n    'file-viewer.more-actions': 'Lisää…',\n};\n"]}

package/dist/collection/translations/nl.js

@@ -10,5 +10,11 @@ export default {
   'date-picker.year.heading': 'Jaar',
   'chip-set.clear-all': 'Alles wissen',
   'file.drag-and-drop-tips': 'Sleep uw bestand en zet het hier neer of klik om te bladeren.',
+  'file-viewer.message.unsupported-filetype': 'Kan dit bestand niet weergeven!',
+  'file-viewer.download': 'Downloaden',
+  'file-viewer.exit-fullscreen': 'Verlaat volledig scherm',
+  'file-viewer.open-in-fullscreen': 'Open in volledig scherm',
+  'file-viewer.open-in-new-tab': 'Openen op een nieuw tabblad',
+  'file-viewer.more-actions': 'Meer…',
 };
 //# sourceMappingURL=nl.js.map

package/dist/collection/translations/nl.js.map

@@ -1 +1 @@
-{"version":3,"file":"nl.js","sourceRoot":"","sources":["../../src/translations/nl.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,WAAW;EAC3B,mBAAmB,EAAE,YAAY;EACjC,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,cAAc;EACjC,iBAAiB,EAAE,cAAc;EACjC,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,UAAU;EACzC,0BAA0B,EAAE,MAAM;EAClC,oBAAoB,EAAE,cAAc;EACpC,yBAAyB,EACrB,+DAA+D;CACtE,CAAC","sourcesContent":["export default {\n    'callout.note': 'Opmerking',\n    'callout.important': 'Belangrijk',\n    'callout.tip': 'Tip',\n    'callout.caution': 'Waarschuwing',\n    'callout.warning': 'Waarschuwing',\n    'date-picker.today': 'Vandaag',\n    'date-picker.month.heading': 'Maand',\n    'date-picker.quarter.heading': 'Kwartaal',\n    'date-picker.year.heading': 'Jaar',\n    'chip-set.clear-all': 'Alles wissen',\n    'file.drag-and-drop-tips':\n        'Sleep uw bestand en zet het hier neer of klik om te bladeren.',\n};\n"]}
+{"version":3,"file":"nl.js","sourceRoot":"","sources":["../../src/translations/nl.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,cAAc,EAAE,WAAW;EAC3B,mBAAmB,EAAE,YAAY;EACjC,aAAa,EAAE,KAAK;EACpB,iBAAiB,EAAE,cAAc;EACjC,iBAAiB,EAAE,cAAc;EACjC,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,OAAO;EACpC,6BAA6B,EAAE,UAAU;EACzC,0BAA0B,EAAE,MAAM;EAClC,oBAAoB,EAAE,cAAc;EACpC,yBAAyB,EACrB,+DAA+D;EACnE,0CAA0C,EACtC,iCAAiC;EACrC,sBAAsB,EAAE,YAAY;EACpC,6BAA6B,EAAE,yBAAyB;EACxD,gCAAgC,EAAE,yBAAyB;EAC3D,6BAA6B,EAAE,6BAA6B;EAC5D,0BAA0B,EAAE,OAAO;CACtC,CAAC","sourcesContent":["export default {\n    'callout.note': 'Opmerking',\n    'callout.important': 'Belangrijk',\n    'callout.tip': 'Tip',\n    'callout.caution': 'Waarschuwing',\n    'callout.warning': 'Waarschuwing',\n    'date-picker.today': 'Vandaag',\n    'date-picker.month.heading': 'Maand',\n    'date-picker.quarter.heading': 'Kwartaal',\n    'date-picker.year.heading': 'Jaar',\n    'chip-set.clear-all': 'Alles wissen',\n    'file.drag-and-drop-tips':\n        'Sleep uw bestand en zet het hier neer of klik om te bladeren.',\n    'file-viewer.message.unsupported-filetype':\n        'Kan dit bestand niet weergeven!',\n    'file-viewer.download': 'Downloaden',\n    'file-viewer.exit-fullscreen': 'Verlaat volledig scherm',\n    'file-viewer.open-in-fullscreen': 'Open in volledig scherm',\n    'file-viewer.open-in-new-tab': 'Openen op een nieuw tabblad',\n    'file-viewer.more-actions': 'Meer…',\n};\n"]}

package/dist/collection/translations/no.js

@@ -10,5 +10,11 @@ export default {
   'date-picker.year.heading': 'År',
   'chip-set.clear-all': 'Fjern alle',
   'file.drag-and-drop-tips': 'Dra og slipp filen her, eller klikk for å bla gjennom.',
+  'file-viewer.message.unsupported-filetype': 'Kan ikke vise denne filen!',
+  'file-viewer.download': 'Nedlasting',
+  'file-viewer.exit-fullscreen': 'Gå ut av fullskjerm',
+  'file-viewer.open-in-fullscreen': 'Åpne i fullskjerm',
+  'file-viewer.open-in-new-tab': 'Åpne i en ny fane',
+  'file-viewer.more-actions': 'Mer…',
 };
 //# sourceMappingURL=no.js.map