{"version":3,"file":"index.js","sources":["../../../../src/packages/media/imaging/components/imaging-thumbnail.element.ts","../../../../src/packages/media/imaging/components/media-image.element.ts"],"sourcesContent":["import { UmbImagingCropMode } from '../types.js';\r\nimport { UmbImagingRepository } from '../imaging.repository.js';\r\nimport { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';\r\nimport { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';\r\nimport { UmbTextStyles } from '@umbraco-cms/backoffice/style';\r\n\r\n@customElement('umb-imaging-thumbnail')\r\nexport class UmbImagingThumbnailElement extends UmbLitElement {\r\n\t/**\r\n\t * The unique identifier for the media item.\r\n\t * @description This is also known as the media key and is used to fetch the resource.\r\n\t */\r\n\t@property()\r\n\tunique = '';\r\n\r\n\t/**\r\n\t * The width of the thumbnail in pixels.\r\n\t * @default 300\r\n\t */\r\n\t@property({ type: Number })\r\n\twidth = 300;\r\n\r\n\t/**\r\n\t * The height of the thumbnail in pixels.\r\n\t * @default 300\r\n\t */\r\n\t@property({ type: Number })\r\n\theight = 300;\r\n\r\n\t/**\r\n\t * The mode of the thumbnail.\r\n\t * @description The mode determines how the image is cropped.\r\n\t * @enum {UmbImagingCropMode}\r\n\t */\r\n\t@property()\r\n\tmode: UmbImagingCropMode = UmbImagingCropMode.MIN;\r\n\r\n\t/**\r\n\t * The alt text for the thumbnail.\r\n\t */\r\n\t@property()\r\n\talt = '';\r\n\r\n\t/**\r\n\t * The fallback icon for the thumbnail.\r\n\t */\r\n\t@property()\r\n\ticon = 'icon-picture';\r\n\r\n\t/**\r\n\t * The `loading` state of the thumbnail.\r\n\t * @enum {'lazy' | 'eager'}\r\n\t * @default 'lazy'\r\n\t */\r\n\t@property()\r\n\tloading: (typeof HTMLImageElement)['prototype']['loading'] = 'lazy';\r\n\r\n\t@state()\r\n\tprivate _isLoading = true;\r\n\r\n\t@state()\r\n\tprivate _thumbnailUrl = '';\r\n\r\n\t#imagingRepository = new UmbImagingRepository(this);\r\n\r\n\t#intersectionObserver?: IntersectionObserver;\r\n\r\n\toverride render() {\r\n\t\treturn html` ${this.#renderThumbnail()} ${when(this._isLoading, () => this.#renderLoading())} `;\r\n\t}\r\n\r\n\toverride connectedCallback() {\r\n\t\tsuper.connectedCallback();\r\n\r\n\t\tif (this.loading === 'lazy') {\r\n\t\t\tthis.#intersectionObserver = new IntersectionObserver((entries) => {\r\n\t\t\t\tif (entries[0].isIntersecting) {\r\n\t\t\t\t\tthis.#generateThumbnailUrl();\r\n\t\t\t\t\tthis.#intersectionObserver?.disconnect();\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\tthis.#intersectionObserver.observe(this);\r\n\t\t} else {\r\n\t\t\tthis.#generateThumbnailUrl();\r\n\t\t}\r\n\t}\r\n\r\n\toverride disconnectedCallback() {\r\n\t\tsuper.disconnectedCallback();\r\n\t\tthis.#intersectionObserver?.disconnect();\r\n\t}\r\n\r\n\t#renderLoading() {\r\n\t\treturn html`<div id=\"loader\"><uui-loader></uui-loader></div>`;\r\n\t}\r\n\r\n\t#renderThumbnail() {\r\n\t\tif (this._isLoading) return nothing;\r\n\r\n\t\treturn when(\r\n\t\t\tthis._thumbnailUrl,\r\n\t\t\t() =>\r\n\t\t\t\thtml`<img\r\n\t\t\t\t\tid=\"figure\"\r\n\t\t\t\t\tsrc=\"${this._thumbnailUrl}\"\r\n\t\t\t\t\talt=\"${this.alt}\"\r\n\t\t\t\t\tloading=\"${this.loading}\"\r\n\t\t\t\t\tdraggable=\"false\" />`,\r\n\t\t\t() => html`<umb-icon id=\"icon\" name=\"${this.icon}\"></umb-icon>`,\r\n\t\t);\r\n\t}\r\n\r\n\tasync #generateThumbnailUrl() {\r\n\t\tconst { data } = await this.#imagingRepository.requestThumbnailUrls(\r\n\t\t\t[this.unique],\r\n\t\t\tthis.height,\r\n\t\t\tthis.width,\r\n\t\t\tthis.mode,\r\n\t\t);\r\n\r\n\t\tthis._thumbnailUrl = data?.[0]?.url ?? '';\r\n\t\tthis._isLoading = false;\r\n\t}\r\n\r\n\tstatic override styles = [\r\n\t\tUmbTextStyles,\r\n\t\tcss`\r\n\t\t\t:host {\r\n\t\t\t\tdisplay: block;\r\n\t\t\t\tposition: relative;\r\n\t\t\t\toverflow: hidden;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t}\r\n\r\n\t\t\t#loader {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t}\r\n\r\n\t\t\t#figure {\r\n\t\t\t\tdisplay: block;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\tobject-fit: cover;\r\n\r\n\t\t\t\tbackground-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" fill-opacity=\".1\"><path d=\"M50 0h50v50H50zM0 50h50v50H0z\"/></svg>');\r\n\t\t\t\tbackground-size: 10px 10px;\r\n\t\t\t\tbackground-repeat: repeat;\r\n\t\t\t}\r\n\r\n\t\t\t#icon {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\tfont-size: var(--uui-size-8);\r\n\t\t\t}\r\n\t\t`,\r\n\t];\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'umb-imaging-thumbnail': UmbImagingThumbnailElement;\r\n\t}\r\n}\r\n","import { UmbMediaUrlRepository } from '../../media/repository/index.js';\r\nimport { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';\r\nimport { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';\r\nimport { UmbTextStyles } from '@umbraco-cms/backoffice/style';\r\n\r\n@customElement('umb-media-image')\r\nexport class UmbMediaImageElement extends UmbLitElement {\r\n\t/**\r\n\t * The unique identifier for the media item.\r\n\t * @description This is also known as the media key and is used to fetch the resource.\r\n\t */\r\n\t@property()\r\n\tunique?: string;\r\n\r\n\t/**\r\n\t * The alt text for the thumbnail.\r\n\t */\r\n\t@property()\r\n\talt?: string;\r\n\r\n\t/**\r\n\t * The fallback icon for the thumbnail.\r\n\t */\r\n\t@property()\r\n\ticon = 'icon-picture';\r\n\r\n\t/**\r\n\t * The `loading` state of the thumbnail.\r\n\t * @enum {'lazy' | 'eager'}\r\n\t * @default 'lazy'\r\n\t */\r\n\t@property()\r\n\tloading: (typeof HTMLImageElement)['prototype']['loading'] = 'lazy';\r\n\r\n\t@state()\r\n\tprivate _isLoading = true;\r\n\r\n\t@state()\r\n\tprivate _imageUrl = '';\r\n\r\n\t#mediaRepository = new UmbMediaUrlRepository(this);\r\n\r\n\t#intersectionObserver?: IntersectionObserver;\r\n\r\n\toverride connectedCallback() {\r\n\t\tsuper.connectedCallback();\r\n\r\n\t\tif (this.loading === 'lazy') {\r\n\t\t\tthis.#intersectionObserver = new IntersectionObserver((entries) => {\r\n\t\t\t\tif (entries[0].isIntersecting) {\r\n\t\t\t\t\tthis.#generateThumbnailUrl();\r\n\t\t\t\t\tthis.#intersectionObserver?.disconnect();\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\tthis.#intersectionObserver.observe(this);\r\n\t\t} else {\r\n\t\t\tthis.#generateThumbnailUrl();\r\n\t\t}\r\n\t}\r\n\r\n\toverride disconnectedCallback() {\r\n\t\tsuper.disconnectedCallback();\r\n\t\tthis.#intersectionObserver?.disconnect();\r\n\t}\r\n\r\n\tasync #generateThumbnailUrl() {\r\n\t\tif (!this.unique) throw new Error('Unique is missing');\r\n\t\tconst { data } = await this.#mediaRepository.requestItems([this.unique]);\r\n\r\n\t\tthis._imageUrl = data?.[0]?.url ?? '';\r\n\t\tthis._isLoading = false;\r\n\t}\r\n\r\n\toverride render() {\r\n\t\treturn html` ${this.#renderThumbnail()} ${when(this._isLoading, () => this.#renderLoading())} `;\r\n\t}\r\n\r\n\t#renderLoading() {\r\n\t\treturn html`<div id=\"loader\"><uui-loader></uui-loader></div>`;\r\n\t}\r\n\r\n\t#renderThumbnail() {\r\n\t\tif (this._isLoading) return nothing;\r\n\r\n\t\treturn when(\r\n\t\t\tthis._imageUrl,\r\n\t\t\t() =>\r\n\t\t\t\thtml`<img\r\n\t\t\t\t\tpart=\"img\"\r\n\t\t\t\t\tsrc=\"${this._imageUrl}\"\r\n\t\t\t\t\talt=\"${this.alt ?? ''}\"\r\n\t\t\t\t\tloading=\"${this.loading}\"\r\n\t\t\t\t\tdraggable=\"false\" />`,\r\n\t\t\t() => html`<umb-icon id=\"icon\" name=\"${this.icon}\"></umb-icon>`,\r\n\t\t);\r\n\t}\r\n\r\n\tstatic override styles = [\r\n\t\tUmbTextStyles,\r\n\t\tcss`\r\n\t\t\t:host {\r\n\t\t\t\tdisplay: contents;\r\n\t\t\t}\r\n\r\n\t\t\t#loader {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t}\r\n\r\n\t\t\t#icon {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\tfont-size: var(--uui-size-8);\r\n\t\t\t}\r\n\t\t`,\r\n\t];\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'umb-media-image': UmbMediaImageElement;\r\n\t}\r\n}\r\n"],"names":["_imagingRepository","_intersectionObserver","_UmbImagingThumbnailElement_instances","renderLoading_fn","renderThumbnail_fn","generateThumbnailUrl_fn","UmbImagingThumbnailElement","UmbLitElement","__privateAdd","UmbImagingCropMode","UmbImagingRepository","html","__privateMethod","when","__privateSet","entries","__privateGet","nothing","data","UmbTextStyles","css","__decorateClass","property","state","customElement","_mediaRepository","_UmbMediaImageElement_instances","UmbMediaImageElement","UmbMediaUrlRepository"],"mappings":"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"}