@pod-os/elements 0.28.1-rc.c7785f2.0 → 0.28.1-rc.d8b7ee4.0
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/dist/cjs/ion-icon_32.cjs.entry.js.map +1 -1
- package/dist/collection/components/pos-image/pos-image.js +1 -1
- package/dist/collection/components/pos-image/pos-image.js.map +1 -1
- package/dist/components/pos-image2.js.map +1 -1
- package/dist/elements/p-ec00abb8.entry.js.map +1 -1
- package/dist/esm/ion-icon_32.entry.js.map +1 -1
- package/dist/types/components/pos-image/pos-image.d.ts +1 -1
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { h, Host } from "@stencil/core";
|
|
|
3
3
|
import session from "../../store/session";
|
|
4
4
|
/**
|
|
5
5
|
* Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.
|
|
6
|
-
* Falls back to classic
|
|
6
|
+
* Falls back to classic `<img src="...">` on network errors like CORS.
|
|
7
7
|
* Renders a normal link if even this fails.
|
|
8
8
|
*/
|
|
9
9
|
export class PosImage {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pos-image.js","sourceRoot":"","sources":["../../../../src/components/pos-image/pos-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/**\n * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic
|
|
1
|
+
{"version":3,"file":"pos-image.js","sourceRoot":"","sources":["../../../../src/components/pos-image/pos-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/**\n * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic `<img src=\"...\">` on network errors like CORS.\n * Renders a normal link if even this fails.\n */\n@Component({\n tag: 'pos-image',\n styleUrl: 'pos-image.css',\n shadow: true,\n})\nexport class PosImage {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n /**\n * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n */\n @Prop() blurredBackground: boolean = false;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private networkError: Error;\n\n @State()\n private imageError: Event;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /**\n * Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n this.imageError = null;\n this.networkError = null;\n this.brokenFile = null;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.networkError = err;\n } finally {\n this.loading = false;\n }\n }\n\n onImageError(err: Event) {\n this.networkError = null;\n this.imageError = err;\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.networkError) {\n // probably a CORS error\n return <img alt={this.alt} src={this.src} onError={err => this.onImageError(err)} />;\n }\n if (this.brokenFile) {\n // fetching worked, but HTTP response was not ok\n return <BrokenFile file={this.brokenFile} />;\n }\n if (this.imageError) {\n // if even the loading via classic <img src=\"...\"> failed, render a link\n return (\n <div class=\"error\">\n <a href={this.src}>{this.src}</a>\n </div>\n );\n }\n\n return (\n <Host\n style={{\n backgroundImage: this.blurredBackground ? `url('${this.dataUri}')` : null,\n }}\n >\n <img src={this.dataUri} alt={this.alt} />\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pos-image2.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,y5BAAy5B,CAAC;AAC96B,uBAAe,WAAW;;MCcb,QAAQ;IALrB;;;;;;;;;QAaU,sBAAiB,GAAY,KAAK,CAAC;QAiBnC,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KA4DH;IAnEC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;SACzB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,YAAY,CAAC,GAAU;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,YAAY,EAAE;;YAErB,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,CAAC;SACtF;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,QACE,WAAK,KAAK,EAAC,OAAO,IAChB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC7B,EACN;SACH;QAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,iBAAiB,GAAG,QAAQ,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI;aAC1E,IAED,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACpC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-image/pos-image.css?tag=pos-image&encapsulation=shadow","src/components/pos-image/pos-image.tsx"],"sourcesContent":[":host {\n /**\n * @prop --width: Width of the image\n * @prop --height: Height of the image\n * @prop --border-radius: Border radius of the image\n * @prop --max-width: Maximum width of the image\n * @prop --max-height: Maximum height of the image\n * @prop --object-fit: CSS object-fit of the image\n */\n display: flex;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: inherit;\n}\n\nimg,\nion-skeleton-text,\ndiv.error {\n border-radius: var(--border-radius);\n width: var(--width);\n height: var(--height);\n max-width: var(--max-width);\n max-height: var(--max-height);\n object-fit: var(--object-fit);\n}\n\nimg {\n backdrop-filter: var(--blur-xl);\n}\n\n.error {\n display: flex;\n opacity: 0.8;\n background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n flex-direction: column;\n border: 1px solid red;\n color: black;\n align-items: center;\n justify-content: center;\n word-break: break-all;\n padding: 1rem;\n box-sizing: border-box;\n}\n\n.error ion-icon {\n color: #282828;\n --ionicon-stroke-width: calc(var(--width) / 5);\n font-size: calc(var(--width) / 2);\n}\n\na.error {\n text-decoration: none;\n width: var(--width);\n height: var(--height);\n}\n\n.code {\n font-weight: bold;\n font-size: calc(var(--width) / 8);\n}\n\n.text {\n font-size: calc(var(--width) / 20);\n}\n","import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/**\n * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic
|
|
1
|
+
{"file":"pos-image2.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,y5BAAy5B,CAAC;AAC96B,uBAAe,WAAW;;MCcb,QAAQ;IALrB;;;;;;;;;QAaU,sBAAiB,GAAY,KAAK,CAAC;QAiBnC,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KA4DH;IAnEC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;SACzB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,YAAY,CAAC,GAAU;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;KACvB;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,YAAY,EAAE;;YAErB,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,CAAC;SACtF;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,QACE,WAAK,KAAK,EAAC,OAAO,IAChB,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,IAAG,IAAI,CAAC,GAAG,CAAK,CAC7B,EACN;SACH;QAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,iBAAiB,GAAG,QAAQ,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI;aAC1E,IAED,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACpC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-image/pos-image.css?tag=pos-image&encapsulation=shadow","src/components/pos-image/pos-image.tsx"],"sourcesContent":[":host {\n /**\n * @prop --width: Width of the image\n * @prop --height: Height of the image\n * @prop --border-radius: Border radius of the image\n * @prop --max-width: Maximum width of the image\n * @prop --max-height: Maximum height of the image\n * @prop --object-fit: CSS object-fit of the image\n */\n display: flex;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: inherit;\n}\n\nimg,\nion-skeleton-text,\ndiv.error {\n border-radius: var(--border-radius);\n width: var(--width);\n height: var(--height);\n max-width: var(--max-width);\n max-height: var(--max-height);\n object-fit: var(--object-fit);\n}\n\nimg {\n backdrop-filter: var(--blur-xl);\n}\n\n.error {\n display: flex;\n opacity: 0.8;\n background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n flex-direction: column;\n border: 1px solid red;\n color: black;\n align-items: center;\n justify-content: center;\n word-break: break-all;\n padding: 1rem;\n box-sizing: border-box;\n}\n\n.error ion-icon {\n color: #282828;\n --ionicon-stroke-width: calc(var(--width) / 5);\n font-size: calc(var(--width) / 2);\n}\n\na.error {\n text-decoration: none;\n width: var(--width);\n height: var(--height);\n}\n\n.code {\n font-weight: bold;\n font-size: calc(var(--width) / 8);\n}\n\n.text {\n font-size: calc(var(--width) / 20);\n}\n","import { BrokenFile as BrokenFileData, PodOS } from '@pod-os/core';\nimport { BrokenFile } from '../broken-file/BrokenFile';\nimport { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\n\n/**\n * Tries fetch an image with the solid authentication, and can visualize http errors like 403 or 404 if this fails.\n * Falls back to classic `<img src=\"...\">` on network errors like CORS.\n * Renders a normal link if even this fails.\n */\n@Component({\n tag: 'pos-image',\n styleUrl: 'pos-image.css',\n shadow: true,\n})\nexport class PosImage {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n /**\n * Use a blurred version of the image as its own background, if the image is scaled down to fit into the container.\n */\n @Prop() blurredBackground: boolean = false;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private networkError: Error;\n\n @State()\n private imageError: Event;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /**\n * Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n this.imageError = null;\n this.networkError = null;\n this.brokenFile = null;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.networkError = err;\n } finally {\n this.loading = false;\n }\n }\n\n onImageError(err: Event) {\n this.networkError = null;\n this.imageError = err;\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.networkError) {\n // probably a CORS error\n return <img alt={this.alt} src={this.src} onError={err => this.onImageError(err)} />;\n }\n if (this.brokenFile) {\n // fetching worked, but HTTP response was not ok\n return <BrokenFile file={this.brokenFile} />;\n }\n if (this.imageError) {\n // if even the loading via classic <img src=\"...\"> failed, render a link\n return (\n <div class=\"error\">\n <a href={this.src}>{this.src}</a>\n </div>\n );\n }\n\n return (\n <Host\n style={{\n backgroundImage: this.blurredBackground ? `url('${this.dataUri}')` : null,\n }}\n >\n <img src={this.dataUri} alt={this.alt} />\n </Host>\n );\n }\n}\n"],"version":3}
|