@limetech/lime-elements 38.24.1 → 38.24.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/limel-file-viewer.cjs.entry.js +1 -1
- package/dist/cjs/limel-file-viewer.cjs.entry.js.map +1 -1
- package/dist/collection/components/file-viewer/file-viewer.js +1 -1
- package/dist/collection/components/file-viewer/file-viewer.js.map +1 -1
- package/dist/esm/limel-file-viewer.entry.js +1 -1
- package/dist/esm/limel-file-viewer.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-92809b13.entry.js → p-d349e355.entry.js} +2 -2
- package/dist/lime-elements/{p-92809b13.entry.js.map → p-d349e355.entry.js.map} +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [38.24.2](https://github.com/Lundalogik/lime-elements/compare/v38.24.1...v38.24.2) (2025-09-26)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **file-viewer:** correct minor syntax issue ([a887c55](https://github.com/Lundalogik/lime-elements/commit/a887c55f1ace80de9542e7999553a2b6da589fa4))
|
|
8
|
+
|
|
1
9
|
## [38.24.1](https://github.com/Lundalogik/lime-elements/compare/v38.24.0...v38.24.1) (2025-09-25)
|
|
2
10
|
|
|
3
11
|
|
|
@@ -171,7 +171,7 @@ const FileViewer = class {
|
|
|
171
171
|
return officeViewers[this.officeViewer];
|
|
172
172
|
};
|
|
173
173
|
this.renderNoFileSupportMessage = () => {
|
|
174
|
-
return (index.h("div", { class: "no-support", role: "alert" }, index.h("h1", null, "\u26A0\uFE0F"), index.h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), index.h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')),
|
|
174
|
+
return (index.h("div", { class: "no-support", role: "alert" }, index.h("h1", null, "\u26A0\uFE0F"), index.h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), index.h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')), this.renderDownloadButton()));
|
|
175
175
|
};
|
|
176
176
|
this.renderButtons = () => {
|
|
177
177
|
return (index.h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-file-viewer.entry.cjs.js","mappings":"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","names":["h","translate"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["/**\n *\n * @param fileName\n * @param url\n */\nexport function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","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","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-file-viewer.entry.cjs.js","mappings":"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","names":["h","translate"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["/**\n *\n * @param fileName\n * @param url\n */\nexport function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","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","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"version":3}
|
|
@@ -80,7 +80,7 @@ export class FileViewer {
|
|
|
80
80
|
return officeViewers[this.officeViewer];
|
|
81
81
|
};
|
|
82
82
|
this.renderNoFileSupportMessage = () => {
|
|
83
|
-
return (h("div", { class: "no-support", role: "alert" }, h("h1", null, "\u26A0\uFE0F"), h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')),
|
|
83
|
+
return (h("div", { class: "no-support", role: "alert" }, h("h1", null, "\u26A0\uFE0F"), h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')), this.renderDownloadButton()));
|
|
84
84
|
};
|
|
85
85
|
this.renderButtons = () => {
|
|
86
86
|
return (h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
|
|
@@ -1 +1 @@
|
|
|
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 } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"]}
|
|
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 } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"]}
|
|
@@ -167,7 +167,7 @@ const FileViewer = class {
|
|
|
167
167
|
return officeViewers[this.officeViewer];
|
|
168
168
|
};
|
|
169
169
|
this.renderNoFileSupportMessage = () => {
|
|
170
|
-
return (h("div", { class: "no-support", role: "alert" }, h("h1", null, "\u26A0\uFE0F"), h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')),
|
|
170
|
+
return (h("div", { class: "no-support", role: "alert" }, h("h1", null, "\u26A0\uFE0F"), h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')), this.renderDownloadButton()));
|
|
171
171
|
};
|
|
172
172
|
this.renderButtons = () => {
|
|
173
173
|
return (h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-file-viewer.entry.js","mappings":"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","names":[],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["/**\n *\n * @param fileName\n * @param url\n */\nexport function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","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","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-file-viewer.entry.js","mappings":"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","names":[],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["/**\n *\n * @param fileName\n * @param url\n */\nexport function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","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","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-5ac43dbd",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-92809b13",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-bc5bbdf6",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ed04acfc",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-483ba5da",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-aeba4aa4",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-6466167d",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-72f3eb92",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-d7d68f71",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-596af3ae",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-fd954ab9",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-2e22d9a1",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-63f2f6b8",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-a7aa383b",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-ee0ed7ba",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-25247fea",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-0592207d",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-b5a96409",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-026417fa",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-dc94994c",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-e8520341",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-cc7f4c81",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-034d0498",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-5ac43dbd",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-bc5bbdf6",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ed04acfc",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-483ba5da",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-aeba4aa4",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-6466167d",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-72f3eb92",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-d7d68f71",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-596af3ae",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-fd954ab9",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-2e22d9a1",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-63f2f6b8",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-a7aa383b",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-ee0ed7ba",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-25247fea",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-0592207d",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-b5a96409",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-026417fa",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-dc94994c",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-e8520341",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-cc7f4c81",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-034d0498",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as o}from"./p-288f0842.js";import{t as s}from"./p-4c88e5d3.js";function r(t,e){const i=t||e;if(!i){return"unknown"}const o=i.split(".").pop().toLowerCase();const s={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return s[o]||"unknown"}class n{constructor(t){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const t=window.document;const e=t.fullscreenElement||t.mozFullScreenElement||t.webkitFullscreenElement||t.msFullscreenElement;if(e){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=t.requestFullscreen||t.msRequestFullscreen||t.mozRequestFullScreen||t.webkitRequestFullscreen;this.enter=this.enter.bind(t);const e=window.document;this.exit=e.exitFullscreen||e.msExitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const l='@charset "UTF-8";:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;gap:0.5rem;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support h1,.no-support p{margin:0}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover,[class^=button--]:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const a=class{constructor(o){t(this,o);this.action=e(this,"action",7);this.renderPdf=()=>[i("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),i("iframe",{src:this.sanitizeUrl(this.fileUrl),loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),i("img",{src:this.sanitizeUrl(this.fileUrl),alt:this.alt,loading:"lazy"})];this.renderVideo=()=>i("video",{controls:true},i("source",{src:this.sanitizeUrl(this.fileUrl)}));this.renderAudio=()=>i("audio",{controls:true},i("source",{src:this.sanitizeUrl(this.fileUrl)}));this.renderText=()=>{const t=[this.renderNoFileSupportMessage()];return[this.renderButtons(),i("object",{data:this.sanitizeUrl(this.fileUrl),type:"text/plain"},t)]};this.renderOffice=()=>[i("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),i("iframe",{src:this.getOfficeViewerUrl()+encodeURIComponent(this.sanitizeUrl(this.fileUrl))+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const t={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return t[this.officeViewer]};this.renderNoFileSupportMessage=()=>i("div",{class:"no-support",role:"alert"},i("h1",null,"⚠️"),i("p",null,this.getTranslation("file-viewer.message.unsupported-filetype")),i("p",{style:{textAlign:"center",margin:"0 auto"}},this.getTranslation("file-viewer.message.try-other-options")),
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as i,g as o}from"./p-288f0842.js";import{t as s}from"./p-4c88e5d3.js";function r(t,e){const i=t||e;if(!i){return"unknown"}const o=i.split(".").pop().toLowerCase();const s={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return s[o]||"unknown"}class n{constructor(t){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const t=window.document;const e=t.fullscreenElement||t.mozFullScreenElement||t.webkitFullscreenElement||t.msFullscreenElement;if(e){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=t.requestFullscreen||t.msRequestFullscreen||t.mozRequestFullScreen||t.webkitRequestFullscreen;this.enter=this.enter.bind(t);const e=window.document;this.exit=e.exitFullscreen||e.msExitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const l='@charset "UTF-8";:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;gap:0.5rem;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support h1,.no-support p{margin:0}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover,[class^=button--]:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const a=class{constructor(o){t(this,o);this.action=e(this,"action",7);this.renderPdf=()=>[i("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),i("iframe",{src:this.sanitizeUrl(this.fileUrl),loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),i("img",{src:this.sanitizeUrl(this.fileUrl),alt:this.alt,loading:"lazy"})];this.renderVideo=()=>i("video",{controls:true},i("source",{src:this.sanitizeUrl(this.fileUrl)}));this.renderAudio=()=>i("audio",{controls:true},i("source",{src:this.sanitizeUrl(this.fileUrl)}));this.renderText=()=>{const t=[this.renderNoFileSupportMessage()];return[this.renderButtons(),i("object",{data:this.sanitizeUrl(this.fileUrl),type:"text/plain"},t)]};this.renderOffice=()=>[i("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),i("iframe",{src:this.getOfficeViewerUrl()+encodeURIComponent(this.sanitizeUrl(this.fileUrl))+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const t={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return t[this.officeViewer]};this.renderNoFileSupportMessage=()=>i("div",{class:"no-support",role:"alert"},i("h1",null,"⚠️"),i("p",null,this.getTranslation("file-viewer.message.unsupported-filetype")),i("p",{style:{textAlign:"center",margin:"0 auto"}},this.getTranslation("file-viewer.message.try-other-options")),this.renderDownloadButton());this.renderButtons=()=>i("div",{class:"buttons"},this.renderActionMenu(),this.renderToggleFullscreenButton(),this.renderDownloadButton(),this.renderOpenInNewTabButton());this.renderToggleFullscreenButton=()=>{if(!this.allowFullscreen||!this.fullscreen.isSupported()){return}const t=this.isFullscreen?"multiply":"fit_to_width";const e=this.isFullscreen?this.getTranslation("file-viewer.exit-fullscreen"):this.getTranslation("file-viewer.open-in-fullscreen");return[i("button",{class:"button--toggle-fullscreen",id:"tooltip-toggle-fullscreen",role:"button",onClick:this.handleToggleFullscreen},i("limel-icon",{name:t}),i("limel-tooltip",{label:e,elementId:"tooltip-toggle-fullscreen",openDirection:"left"}))]};this.renderDownloadButton=()=>{var t;if(!this.allowDownload||this.isFullscreen){return}return i("a",{class:"button--download",id:"tooltip-download",role:"button",download:(t=this.filename)!==null&&t!==void 0?t:"",href:this.sanitizeUrl(this.fileUrl),target:"_blank"},i("limel-icon",{name:"download_2"}),i("limel-tooltip",{label:this.getTranslation("file-viewer.download"),elementId:"tooltip-download",openDirection:"left"}))};this.renderOpenInNewTabButton=()=>{if(!this.allowOpenInNewTab||this.isFullscreen){return}return i("a",{class:"button--new-tab",id:"tooltip-new-tab",role:"button",href:this.sanitizeUrl(this.fileUrl),target:"_blank",rel:"noopener noreferrer"},i("limel-icon",{name:"external_link"}),i("limel-tooltip",{label:this.getTranslation("file-viewer.open-in-new-tab"),elementId:"tooltip-new-tab",openDirection:"left"}))};this.renderActionMenu=()=>{if(!this.actions||this.isFullscreen){return}return i("limel-menu",{class:"action-menu",items:this.actions,onSelect:this.emitOnAction,"open-direction":"left"},i("button",{class:"button--action",id:"tooltip-more",role:"button",slot:"trigger"},i("limel-icon",{name:"menu_2"}),i("limel-tooltip",{label:this.getTranslation("file-viewer.more-actions"),elementId:"tooltip-more",openDirection:"left"})))};this.createURL=async t=>{if(["pdf"].includes(t)){const t=await fetch(this.url);const e=await t.blob();this.fileUrl=URL.createObjectURL(e)}else{this.fileUrl=this.url}this.loading=false};this.handleToggleFullscreen=()=>{if(this.fullscreen.isSupported()){this.fullscreen.toggle();this.isFullscreen=!this.isFullscreen}};this.emitOnAction=t=>{t.stopPropagation();this.action.emit(t.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.loading=true;this.fileUrl="";this.fullscreen=new n(this.HostElement)}async componentWillLoad(){this.fileType=r(this.filename,this.url);await this.createURL(this.fileType)}render(){if(!this.isOfficeFileAccessibleViaURL){return this.renderNoFileSupportMessage()}if(this.loading){return i("limel-spinner",{size:"x-small",limeBranded:false})}return this.renderFileViewer()}async watchUrl(t,e){if(t===e){return}this.loading=true;this.fileType=r(this.filename,this.fileUrl);await this.createURL(this.fileType)}renderFileViewer(){const t={pdf:this.renderPdf,image:this.renderImage,video:this.renderVideo,audio:this.renderAudio,text:this.renderText,office:this.renderOffice};const e=t[this.fileType]||this.renderNoFileSupportMessage;return e()}sanitizeUrl(t){try{const e=new URL(t,window.location.href);const i=["http:","https:","blob:"];return i.includes(e.protocol)?e.href:""}catch(t){return""}}getTranslation(t){return s.get(t,this.language)}get HostElement(){return o(this)}static get watchers(){return{url:["watchUrl"]}}};a.style=l;export{a as limel_file_viewer};
|
|
2
|
+
//# sourceMappingURL=p-d349e355.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["detectExtension","fileName","url","pathLike","extension","split","pop","toLowerCase","extensionsToTypes","pdf","jpg","jpeg","heic","bmp","png","gif","svg","svgz","ep","eps","avi","flv","h264","mov","mp4","mwv","mkv","mp3","wav","wma","ogg","txt","json","html","xml","doc","docx","odt","dot","dotx","docm","dotm","pot","ppt","pptx","odp","potx","potm","pps","ppsx","ppsm","pptm","ppam","pages","xls","xlsx","xlsm","xlsb","ods","csv","numbers","Fullscreen","constructor","element","this","requestFullscreen","enter","exitFullscreen","exit","bind","window","document","toggle","isFullscreen","fullscreenElement","mozFullScreenElement","webkitFullscreenElement","msFullscreenElement","msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msExitFullscreen","mozCancelFullScreen","webkitExitFullscreen","isSupported","fileViewerCss","FileViewer","hostRef","renderPdf","h","class","renderActionMenu","src","sanitizeUrl","fileUrl","loading","renderImage","renderButtons","alt","renderVideo","controls","renderAudio","renderText","fallbackContent","renderNoFileSupportMessage","data","type","renderOffice","getOfficeViewerUrl","encodeURIComponent","isOfficeFileAccessibleViaURL","fileType","startsWith","officeViewers","officeViewer","role","getTranslation","style","textAlign","margin","renderDownloadButton","renderToggleFullscreenButton","renderOpenInNewTabButton","allowFullscreen","fullscreen","icon","label","id","onClick","handleToggleFullscreen","name","elementId","openDirection","allowDownload","download","_a","filename","href","target","allowOpenInNewTab","rel","actions","items","onSelect","emitOnAction","slot","createURL","async","includes","response","fetch","blob","URL","createObjectURL","event","stopPropagation","action","emit","detail","HostElement","render","size","limeBranded","renderFileViewer","newUrl","oldUrl","fileViewerFunctions","image","video","audio","text","office","fileViewerFunction","u","location","allowed","protocol","key","translate","get","language"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["/**\n *\n * @param fileName\n * @param url\n */\nexport function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","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","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"mappings":"sGAKgBA,EAAgBC,EAAUC,GACtC,MAAMC,EAAWF,GAAYC,EAC7B,IAAKC,EAAU,CACX,MAAO,S,CAGX,MAAMC,EAAYD,EAASE,MAAM,KAAKC,MAAMC,cAC5C,MAAMC,EAAoB,CACtBC,IAAK,MACLC,IAAK,QACLC,KAAM,QACNC,KAAM,QACNC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,KAAM,QACNC,GAAI,QACJC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,KAAM,QACNC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,QACLC,IAAK,OACLC,KAAM,OACNC,KAAM,OACNC,IAAK,OAELC,IAAK,SACLC,KAAM,SACNC,IAAK,SACLC,IAAK,SACLC,KAAM,SACNC,KAAM,SACNC,KAAM,SAENC,IAAK,SACLC,IAAK,SACLC,KAAM,SACNC,IAAK,SACLC,KAAM,SACNC,KAAM,SACNC,IAAK,SACLC,KAAM,SACNC,KAAM,SACNC,KAAM,SACNC,KAAM,SACNC,MAAO,SAEPC,IAAK,SACLC,KAAM,SACNC,KAAM,SACNC,KAAM,SACNC,IAAK,SACLC,IAAK,SACLC,QAAS,UAGb,OAAOpD,EAAkBJ,IAAc,SAC3C,C,MCvEayD,EAITC,YAAYC,GAeLC,KAAAC,kBAAoB,KACvB,GAAID,KAAKE,MAAO,CACZF,KAAKE,O,GAINF,KAAAG,eAAiB,KACpB,GAAIH,KAAKI,KAAM,CACXJ,KAAKI,KAAKC,KAAKC,OAAOC,SAAtBP,E,GAIDA,KAAAQ,OAAS,KACZ,MAAMrC,EAAWmC,OAAOC,SACxB,MAAME,EACFtC,EAAIuC,mBACJvC,EAAIwC,sBACJxC,EAAIyC,yBACJzC,EAAI0C,oBAER,GAAIJ,EAAc,CACdT,KAAKG,gB,KACF,CACHH,KAAKC,mB,GArCTD,KAAKE,MACDH,EAAQE,mBACRF,EAAQe,qBACRf,EAAQgB,sBACRhB,EAAQiB,wBACZhB,KAAKE,MAAQF,KAAKE,MAAMG,KAAKN,GAC7B,MAAM5B,EAAWmC,OAAOC,SACxBP,KAAKI,KACDjC,EAAIgC,gBACJhC,EAAI8C,kBACJ9C,EAAI+C,qBACJ/C,EAAIgD,oB,CA8BLC,cACH,QAASpB,KAAKC,iB,EC/CtB,MAAMoB,EAAgB,glG,MCsDTC,EAAU,MAmGnBxB,YAAAyB,G,yCAgDQvB,KAAAwB,UAAY,IACT,CACHC,EAAA,OAAKC,MAAM,6BACN1B,KAAK2B,oBAEVF,EAAA,UAAQG,IAAK5B,KAAK6B,YAAY7B,KAAK8B,SAAUC,QAAQ,UAIrD/B,KAAAgC,YAAc,IACX,CACHhC,KAAKiC,gBACLR,EAAA,OACIG,IAAK5B,KAAK6B,YAAY7B,KAAK8B,SAC3BI,IAAKlC,KAAKkC,IACVH,QAAQ,UAKZ/B,KAAAmC,YAAc,IAEdV,EAAA,SAAOW,SAAQ,MACXX,EAAA,UAAQG,IAAK5B,KAAK6B,YAAY7B,KAAK8B,YAKvC9B,KAAAqC,YAAc,IAEdZ,EAAA,SAAOW,SAAQ,MACXX,EAAA,UAAQG,IAAK5B,KAAK6B,YAAY7B,KAAK8B,YAKvC9B,KAAAsC,WAAa,KACjB,MAAMC,EAAkB,CAACvC,KAAKwC,8BAE9B,MAAO,CACHxC,KAAKiC,gBACLR,EAAA,UAAQgB,KAAMzC,KAAK6B,YAAY7B,KAAK8B,SAAUY,KAAK,cAC9CH,GAER,EAGGvC,KAAA2C,aAAe,IACZ,CACHlB,EAAA,OAAKC,MAAM,gCACN1B,KAAK2B,oBAEVF,EAAA,UACIG,IACI5B,KAAK4C,qBACLC,mBAAmB7C,KAAK6B,YAAY7B,KAAK8B,UACzC,iBAEJC,QAAQ,UAKZ/B,KAAA8C,6BAA+B,IAE/B9C,KAAK+C,WAAa,YAEd/C,KAAK8B,QAAQkB,WAAW,YACxBhD,KAAK8B,QAAQkB,WAAW,aAK5BhD,KAAA4C,mBAAqB,KACzB,MAAMK,EAAgB,CAClB,mBACI,sDACJ,eAAgB,sCAGpB,OAAOA,EAAcjD,KAAKkD,aAAa,EAGnClD,KAAAwC,2BAA6B,IAE7Bf,EAAA,OAAKC,MAAM,aAAayB,KAAK,SACzB1B,EAAA,gBACAA,EAAA,SACKzB,KAAKoD,eACF,6CAGR3B,EAAA,KAAG4B,MAAO,CAAEC,UAAW,SAAUC,OAAQ,WACpCvD,KAAKoD,eACF,0CAEJ,IACFpD,KAAKwD,wBAKXxD,KAAAiC,cAAgB,IAEhBR,EAAA,OAAKC,MAAM,WACN1B,KAAK2B,mBACL3B,KAAKyD,+BACLzD,KAAKwD,uBACLxD,KAAK0D,4BAKV1D,KAAAyD,6BAA+B,KACnC,IAAKzD,KAAK2D,kBAAoB3D,KAAK4D,WAAWxC,cAAe,CACzD,M,CAGJ,MAAMyC,EAAO7D,KAAKS,aAAe,WAAa,eAE9C,MAAMqD,EAAQ9D,KAAKS,aACbT,KAAKoD,eAAe,+BACpBpD,KAAKoD,eAAe,kCAE1B,MAAO,CACH3B,EAAA,UACIC,MAAM,4BACNqC,GAAG,4BACHZ,KAAK,SACLa,QAAShE,KAAKiE,wBAEdxC,EAAA,cAAYyC,KAAML,IAClBpC,EAAA,iBACIqC,MAAOA,EACPK,UAAU,4BACVC,cAAc,UAGzB,EAGGpE,KAAAwD,qBAAuB,K,MAC3B,IAAKxD,KAAKqE,eAAiBrE,KAAKS,aAAc,CAC1C,M,CAGJ,OACIgB,EAAA,KACIC,MAAM,mBACNqC,GAAG,mBACHZ,KAAK,SACLmB,UAAUC,EAAAvE,KAAKwE,YAAQ,MAAAD,SAAA,EAAAA,EAAI,GAC3BE,KAAMzE,KAAK6B,YAAY7B,KAAK8B,SAC5B4C,OAAO,UAEPjD,EAAA,cAAYyC,KAAK,eACjBzC,EAAA,iBACIqC,MAAO9D,KAAKoD,eAAe,wBAC3Be,UAAU,mBACVC,cAAc,SAElB,EAIJpE,KAAA0D,yBAA2B,KAC/B,IAAK1D,KAAK2E,mBAAqB3E,KAAKS,aAAc,CAC9C,M,CAGJ,OACIgB,EAAA,KACIC,MAAM,kBACNqC,GAAG,kBACHZ,KAAK,SACLsB,KAAMzE,KAAK6B,YAAY7B,KAAK8B,SAC5B4C,OAAO,SACPE,IAAI,uBAEJnD,EAAA,cAAYyC,KAAK,kBACjBzC,EAAA,iBACIqC,MAAO9D,KAAKoD,eAAe,+BAC3Be,UAAU,kBACVC,cAAc,SAElB,EAIJpE,KAAA2B,iBAAmB,KACvB,IAAK3B,KAAK6E,SAAW7E,KAAKS,aAAc,CACpC,M,CAGJ,OACIgB,EAAA,cACIC,MAAM,cACNoD,MAAO9E,KAAK6E,QACZE,SAAU/E,KAAKgF,aAAY,iBACZ,QAEfvD,EAAA,UACIC,MAAM,iBACNqC,GAAG,eACHZ,KAAK,SACL8B,KAAK,WAELxD,EAAA,cAAYyC,KAAK,WACjBzC,EAAA,iBACIqC,MAAO9D,KAAKoD,eAAe,4BAC3Be,UAAU,eACVC,cAAc,UAGb,EAIbpE,KAAAkF,UAAYC,MAAOpC,IACvB,GAAI,CAAC,OAAOqC,SAASrC,GAAW,CAC5B,MAAMsC,QAAiBC,MAAMtF,KAAK9D,KAClC,MAAMqJ,QAAaF,EAASE,OAE5BvF,KAAK8B,QAAU0D,IAAIC,gBAAgBF,E,KAChC,CACHvF,KAAK8B,QAAU9B,KAAK9D,G,CAGxB8D,KAAK+B,QAAU,KAAK,EAGhB/B,KAAAiE,uBAAyB,KAC7B,GAAIjE,KAAK4D,WAAWxC,cAAe,CAC/BpB,KAAK4D,WAAWpD,SAChBR,KAAKS,cAAgBT,KAAKS,Y,GAI1BT,KAAAgF,aAAgBU,IACpBA,EAAMC,kBACN3F,KAAK4F,OAAOC,KAAKH,EAAMI,OAAO,E,mFAnWC,M,uBAQE,M,mBAUJ,M,cAMJ,K,kBAQO,mB,yCAqBJ,M,qCASL,K,aAGD,GAGtB9F,KAAK4D,WAAa,IAAI/D,EAAWG,KAAK+F,Y,CAGnCZ,0BACHnF,KAAK+C,SAAW/G,EAAgBgE,KAAKwE,SAAUxE,KAAK9D,WAC9C8D,KAAKkF,UAAUlF,KAAK+C,S,CAGvBiD,SACH,IAAKhG,KAAK8C,6BAA8B,CACpC,OAAO9C,KAAKwC,4B,CAGhB,GAAIxC,KAAK+B,QAAS,CACd,OAAON,EAAA,iBAAewE,KAAK,UAAUC,YAAa,O,CAGtD,OAAOlG,KAAKmG,kB,CAINhB,eAAeiB,EAAgBC,GACrC,GAAID,IAAWC,EAAQ,CACnB,M,CAGJrG,KAAK+B,QAAU,KACf/B,KAAK+C,SAAW/G,EAAgBgE,KAAKwE,SAAUxE,KAAK8B,eAC9C9B,KAAKkF,UAAUlF,KAAK+C,S,CAGtBoD,mBACJ,MAAMG,EAAsB,CACxB7J,IAAKuD,KAAKwB,UACV+E,MAAOvG,KAAKgC,YACZwE,MAAOxG,KAAKmC,YACZsE,MAAOzG,KAAKqC,YACZqE,KAAM1G,KAAKsC,WACXqE,OAAQ3G,KAAK2C,cAEjB,MAAMiE,EACFN,EAAoBtG,KAAK+C,WACzB/C,KAAKwC,2BAET,OAAOoE,G,CAsPH/E,YAAY3F,GAChB,IACI,MAAM2K,EAAI,IAAIrB,IAAItJ,EAAKoE,OAAOwG,SAASrC,MACvC,MAAMsC,EAAU,CAAC,QAAS,SAAU,SACpC,OAAOA,EAAQ3B,SAASyB,EAAEG,UAAYH,EAAEpC,KAAO,E,CACjD,MAAAF,GACE,MAAO,E,EAIPnB,eAAe6D,GACnB,OAAOC,EAAUC,IAAIF,EAAKjH,KAAKoH,S"}
|
|
1
|
+
{"version":3,"names":["detectExtension","fileName","url","pathLike","extension","split","pop","toLowerCase","extensionsToTypes","pdf","jpg","jpeg","heic","bmp","png","gif","svg","svgz","ep","eps","avi","flv","h264","mov","mp4","mwv","mkv","mp3","wav","wma","ogg","txt","json","html","xml","doc","docx","odt","dot","dotx","docm","dotm","pot","ppt","pptx","odp","potx","potm","pps","ppsx","ppsm","pptm","ppam","pages","xls","xlsx","xlsm","xlsb","ods","csv","numbers","Fullscreen","constructor","element","this","requestFullscreen","enter","exitFullscreen","exit","bind","window","document","toggle","isFullscreen","fullscreenElement","mozFullScreenElement","webkitFullscreenElement","msFullscreenElement","msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msExitFullscreen","mozCancelFullScreen","webkitExitFullscreen","isSupported","fileViewerCss","FileViewer","hostRef","renderPdf","h","class","renderActionMenu","src","sanitizeUrl","fileUrl","loading","renderImage","renderButtons","alt","renderVideo","controls","renderAudio","renderText","fallbackContent","renderNoFileSupportMessage","data","type","renderOffice","getOfficeViewerUrl","encodeURIComponent","isOfficeFileAccessibleViaURL","fileType","startsWith","officeViewers","officeViewer","role","getTranslation","style","textAlign","margin","renderDownloadButton","renderToggleFullscreenButton","renderOpenInNewTabButton","allowFullscreen","fullscreen","icon","label","id","onClick","handleToggleFullscreen","name","elementId","openDirection","allowDownload","download","_a","filename","href","target","allowOpenInNewTab","rel","actions","items","onSelect","emitOnAction","slot","createURL","async","includes","response","fetch","blob","URL","createObjectURL","event","stopPropagation","action","emit","detail","HostElement","render","size","limeBranded","renderFileViewer","newUrl","oldUrl","fileViewerFunctions","image","video","audio","text","office","fileViewerFunction","u","location","allowed","protocol","key","translate","get","language"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["/**\n *\n * @param fileName\n * @param url\n */\nexport function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","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","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\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 *\n * @exampleComponent limel-example-file-viewer-basic\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 *\n * @beta\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 private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\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 <iframe src={this.sanitizeUrl(this.fileUrl)} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img\n src={this.sanitizeUrl(this.fileUrl)}\n alt={this.alt}\n loading=\"lazy\"\n />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.sanitizeUrl(this.fileUrl)} />\n </audio>\n );\n };\n\n private renderText = () => {\n const fallbackContent = [this.renderNoFileSupportMessage()];\n\n return [\n this.renderButtons(),\n <object data={this.sanitizeUrl(this.fileUrl)} type=\"text/plain\">\n {fallbackContent}\n </object>,\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={\n this.getOfficeViewerUrl() +\n encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +\n '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\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\" role=\"alert\">\n <h1>⚠️</h1>\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype'\n )}\n </p>\n <p style={{ textAlign: 'center', margin: '0 auto' }}>\n {this.getTranslation(\n 'file-viewer.message.try-other-options'\n )}\n </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\n const label = this.isFullscreen\n ? this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.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 ?? ''}\n href={this.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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.sanitizeUrl(this.fileUrl)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.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('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\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: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private sanitizeUrl(url: string): string {\n try {\n const u = new URL(url, window.location.href);\n const allowed = ['http:', 'https:', 'blob:'];\n return allowed.includes(u.protocol) ? u.href : '';\n } catch {\n return '';\n }\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"mappings":"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"}
|