npm - @getflip/swirl-components - Versions diffs - 0.3.0 → 0.4.0 - Mend

@getflip/swirl-components 0.3.0 → 0.4.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.

Files changed (284) hide show

package/dist/cjs/flip-dialog.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
-const flipDialogCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:0.15s dialog-backdrop-fade-in;animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:none;animation:none}}.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:0.15s dialog-scale-in;animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:none;animation:none}}.dialog--closing{-webkit-animation:0.15s dialog-fade-out;animation:0.15s dialog-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{-webkit-animation:none;animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.dialog__content{margin-bottom:var(--s-space-24);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@-webkit-keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
+const flipDialogCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:0.15s dialog-backdrop-fade-in;animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:none;animation:none}}.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:0.15s dialog-scale-in;animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:none;animation:none}}.dialog--closing{-webkit-animation:0.15s dialog-fade-out;animation:0.15s dialog-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{-webkit-animation:none;animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.dialog__content{margin-bottom:var(--s-space-24);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@-webkit-keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
 const FlipDialog = class {
   constructor(hostRef) {

package/dist/cjs/flip-dialog.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-dialog.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,~~0wEAA0wE~~;;~~MCuBnxE~~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","names":["A11yDialog","classnames","h","Host"],"sources":["./src/components/flip-dialog/flip-dialog.css?tag=flip-dialog&encapsulation=shadow","./src/components/flip-dialog/flip-dialog.tsx"],"sourcesContent":[":host {\n --flip-ghost-button-background-default: var(--s-surface-overlay-default);\n --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);\n --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);\n\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.dialog {\n position: fixed;\n z-index: var(--s-z-40);\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n}\n\n.dialog:not(.dialog--closing) {\n & .dialog__backdrop {\n animation: 0.15s dialog-backdrop-fade-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .dialog__body {\n animation: 0.15s dialog-scale-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.dialog--closing {\n animation: 0.15s dialog-fade-out;\n animation-fill-mode: forwards;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n}\n\n.dialog__backdrop {\n position: fixed;\n background-color: rgba(0, 0, 0, 0.2);\n inset: 0;\n}\n\n.dialog__body {\n z-index: var(--s-z-40);\n overflow-x: hidden;\n overflow-y: auto;\n width: 18.5rem;\n max-height: 90vh;\n padding-top: var(--s-space-24);\n padding-right: var(--s-space-8);\n padding-bottom: var(--s-space-8);\n padding-left: var(--s-space-8);\n border-radius: var(--s-border-radius-xl);\n background-color: var(--s-surface-overlay-default);\n text-align: center;\n box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);\n}\n\n.dialog__heading {\n margin: 0;\n margin-bottom: var(--s-space-8);\n font-size: var(--s-font-size-lg);\n font-weight: var(--s-font-weight-semibold);\n line-height: var(--s-line-height-lg);\n}\n\n.dialog__content {\n margin-bottom: var(--s-space-24);\n line-height: var(--s-line-height-base);\n\n & ::slotted() {\n margin: 0;\n }\n}\n\n@keyframes dialog-scale-in {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes dialog-backdrop-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes dialog-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport classnames from \"classnames\";\n\nexport type FlipDialogIntent = \"primary\" \| \"critical\";\n\n/\n @slot slot - The dialog content\n /\n@Component({\n shadow: true,\n styleUrl: \"flip-dialog.css\",\n tag: \"flip-dialog\",\n})\nexport class FlipDialog {\n @Prop() hideLabel?: boolean;\n @Prop() intent?: FlipDialogIntent = \"primary\";\n @Prop() label!: string;\n @Prop() primaryActionLabel?: string;\n @Prop() secondaryActionLabel?: string;\n\n @Event() primaryAction: EventEmitter<MouseEvent>;\n @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n @State() closing = false;\n\n private controlsContainerEl: HTMLElement;\n private dialog: A11yDialog;\n private dialogEl: HTMLDivElement;\n\n componentDidLoad() {\n this.dialog = new A11yDialog(this.dialogEl);\n\n this.dialog.on(\"show\", () => {\n this.controlsContainerEl\n .querySelector<HTMLButtonElement>(\"flip-button button\")\n ?.focus();\n });\n }\n\n disconnectedCallback() {\n this.dialog?.destroy();\n }\n\n /\n Open the dialog.\n /\n @Method()\n async open() {\n this.dialog.show();\n }\n\n /\n Close the dialog.\n */\n @Method()\n async close() {\n if (this.closing) {\n return;\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.dialog.hide();\n this.closing = false;\n }, 150);\n }\n\n onKeyDown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\") {\n this.close();\n }\n };\n\n private onBackdropClick = () => {\n this.close();\n };\n\n private onPrimaryAction = (event: MouseEvent) => {\n this.primaryAction.emit(event);\n this.close();\n };\n\n private onSecondaryAction = (event: MouseEvent) => {\n this.secondaryAction.emit(event);\n this.close();\n };\n\n render() {\n const className = classnames(\"dialog\", { \"dialog--closing\": this.closing });\n\n return (\n <Host>\n <div\n aria-describedby=\"content\"\n aria-hidden=\"true\"\n aria-labelledby={this.hideLabel ? undefined : \"label\"}\n aria-label={this.hideLabel ? this.label : undefined}\n aria-modal=\"true\"\n class={className}\n onKeyDown={this.onKeyDown}\n ref={(el) => (this.dialogEl = el)}\n role=\"alertdialog\"\n >\n <div class=\"dialog__backdrop\" onClick={this.onBackdropClick}></div>\n <div class=\"dialog__body\" role=\"document\">\n {!this.hideLabel && (\n <h2 class=\"dialog__heading\" id=\"label\">\n {this.label}\n </h2>\n )}\n <div class=\"dialog__content\" id=\"content\">\n <slot></slot>\n </div>\n <flip-button-group\n class=\"dialog__controls\"\n ref={(el) => (this.controlsContainerEl = el)}\n stretch\n wrap\n >\n {this.secondaryActionLabel && (\n <flip-button\n label={this.secondaryActionLabel}\n onClick={this.onSecondaryAction}\n ></flip-button>\n )}\n {this.primaryActionLabel && (\n <flip-button\n intent={this.intent}\n label={this.primaryActionLabel}\n onClick={this.onPrimaryAction}\n variant={this.intent === \"critical\" ? \"ghost\" : \"flat\"}\n ></flip-button>\n )}\n </flip-button-group>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-dialog.entry.cjs.js","mappings":"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","names":["A11yDialog","classnames","h","Host"],"sources":["./src/components/flip-dialog/flip-dialog.css?tag=flip-dialog&encapsulation=shadow","./src/components/flip-dialog/flip-dialog.tsx"],"sourcesContent":[":host {\n --flip-ghost-button-background-default: var(--s-surface-overlay-default);\n --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);\n --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);\n\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.dialog {\n position: fixed;\n z-index: var(--s-z-40);\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n}\n\n.dialog:not(.dialog--closing) {\n & .dialog__backdrop {\n animation: 0.15s dialog-backdrop-fade-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .dialog__body {\n animation: 0.15s dialog-scale-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.dialog--closing {\n animation: 0.15s dialog-fade-out;\n animation-fill-mode: forwards;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n}\n\n.dialog__backdrop {\n position: fixed;\n background-color: rgba(0, 0, 0, 0.2);\n inset: 0;\n}\n\n.dialog__body {\n z-index: var(--s-z-40);\n overflow-x: hidden;\n overflow-y: auto;\n width: 18.5rem;\n max-height: 90vh;\n padding-top: var(--s-space-24);\n padding-right: var(--s-space-8);\n padding-bottom: var(--s-space-8);\n padding-left: var(--s-space-8);\n border-radius: var(--s-border-radius-l);\n background-color: var(--s-surface-overlay-default);\n text-align: center;\n box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);\n}\n\n.dialog__heading {\n margin: 0;\n margin-bottom: var(--s-space-8);\n font-size: var(--s-font-size-lg);\n font-weight: var(--s-font-weight-semibold);\n line-height: var(--s-line-height-lg);\n}\n\n.dialog__content {\n margin-bottom: var(--s-space-24);\n line-height: var(--s-line-height-base);\n\n & ::slotted() {\n margin: 0;\n }\n}\n\n@keyframes dialog-scale-in {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes dialog-backdrop-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes dialog-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport classnames from \"classnames\";\n\nexport type FlipDialogIntent = \"primary\" \| \"critical\";\n\n/\n @slot slot - The dialog content\n /\n@Component({\n shadow: true,\n styleUrl: \"flip-dialog.css\",\n tag: \"flip-dialog\",\n})\nexport class FlipDialog {\n @Prop() hideLabel?: boolean;\n @Prop() intent?: FlipDialogIntent = \"primary\";\n @Prop() label!: string;\n @Prop() primaryActionLabel?: string;\n @Prop() secondaryActionLabel?: string;\n\n @Event() primaryAction: EventEmitter<MouseEvent>;\n @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n @State() closing = false;\n\n private controlsContainerEl: HTMLElement;\n private dialog: A11yDialog;\n private dialogEl: HTMLDivElement;\n\n componentDidLoad() {\n this.dialog = new A11yDialog(this.dialogEl);\n\n this.dialog.on(\"show\", () => {\n this.controlsContainerEl\n .querySelector<HTMLButtonElement>(\"flip-button button\")\n ?.focus();\n });\n }\n\n disconnectedCallback() {\n this.dialog?.destroy();\n }\n\n /\n Open the dialog.\n /\n @Method()\n async open() {\n this.dialog.show();\n }\n\n /\n Close the dialog.\n */\n @Method()\n async close() {\n if (this.closing) {\n return;\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.dialog.hide();\n this.closing = false;\n }, 150);\n }\n\n onKeyDown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\") {\n this.close();\n }\n };\n\n private onBackdropClick = () => {\n this.close();\n };\n\n private onPrimaryAction = (event: MouseEvent) => {\n this.primaryAction.emit(event);\n this.close();\n };\n\n private onSecondaryAction = (event: MouseEvent) => {\n this.secondaryAction.emit(event);\n this.close();\n };\n\n render() {\n const className = classnames(\"dialog\", { \"dialog--closing\": this.closing });\n\n return (\n <Host>\n <div\n aria-describedby=\"content\"\n aria-hidden=\"true\"\n aria-labelledby={this.hideLabel ? undefined : \"label\"}\n aria-label={this.hideLabel ? this.label : undefined}\n aria-modal=\"true\"\n class={className}\n onKeyDown={this.onKeyDown}\n ref={(el) => (this.dialogEl = el)}\n role=\"alertdialog\"\n >\n <div class=\"dialog__backdrop\" onClick={this.onBackdropClick}></div>\n <div class=\"dialog__body\" role=\"document\">\n {!this.hideLabel && (\n <h2 class=\"dialog__heading\" id=\"label\">\n {this.label}\n </h2>\n )}\n <div class=\"dialog__content\" id=\"content\">\n <slot></slot>\n </div>\n <flip-button-group\n class=\"dialog__controls\"\n ref={(el) => (this.controlsContainerEl = el)}\n stretch\n wrap\n >\n {this.secondaryActionLabel && (\n <flip-button\n label={this.secondaryActionLabel}\n onClick={this.onSecondaryAction}\n ></flip-button>\n )}\n {this.primaryActionLabel && (\n <flip-button\n intent={this.intent}\n label={this.primaryActionLabel}\n onClick={this.onPrimaryAction}\n variant={this.intent === \"critical\" ? \"ghost\" : \"flat\"}\n ></flip-button>\n )}\n </flip-button-group>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-file-uploader.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
-const flipFileUploaderCss = ".sc-flip-file-uploader-h{display:block;width:100%}.sc-flip-file-uploader-h *.sc-flip-file-uploader{box-sizing:border-box}.file-uploader.sc-flip-file-uploader{width:100%}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader{position:relative;display:flex;width:100%;height:10rem;margin-top:var(--s-space-16);justify-content:center;align-items:center;border:var(--s-border-width-default) dashed var(--s-border-strong);border-radius:var(--s-border-radius-s);flex-direction:column}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader:focus-within{border-color:var(--s-focus-default);border-width:0.125rem}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{position:absolute;display:block;cursor:pointer;opacity:0;inset:0}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{cursor:default}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-cta.sc-flip-file-uploader,.file-uploader--disabled.sc-flip-file-uploader .file-uploader__drag-drop-label.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader__label.sc-flip-file-uploader{display:block;font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.file-uploader__description.sc-flip-file-uploader{display:block;margin-top:var(--s-space-4);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-icon-highlight)}.file-uploader__dropzone-label.sc-flip-file-uploader{margin-top:var(--s-space-16);line-height:var(--s-line-height-base)}.file-uploader__dropzone-cta.sc-flip-file-uploader{color:var(--s-interactive-primary-default);font-weight:var(--s-font-weight-medium)}.file-uploader__upload-button.sc-flip-file-uploader{margin-top:var(--s-space-16)}.file-uploader__input.sc-flip-file-uploader{display:none}";
+const flipFileUploaderCss = ".sc-flip-file-uploader-h{display:block;width:100%}.sc-flip-file-uploader-h *.sc-flip-file-uploader{box-sizing:border-box}.file-uploader.sc-flip-file-uploader{width:100%}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader{position:relative;display:flex;width:100%;height:10rem;margin-top:var(--s-space-16);justify-content:center;align-items:center;border:var(--s-border-width-default) dashed var(--s-border-strong);border-radius:var(--s-border-radius-s);flex-direction:column}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader:focus-within{border-width:0.125rem;border-color:var(--s-focus-default)}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{position:absolute;z-index:1;display:block;width:100%;cursor:pointer;opacity:0;inset:0}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{cursor:default}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-cta.sc-flip-file-uploader,.file-uploader--disabled.sc-flip-file-uploader .file-uploader__drag-drop-label.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader__label.sc-flip-file-uploader{display:block;font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.file-uploader__description.sc-flip-file-uploader{display:block;margin-top:var(--s-space-4);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-icon-highlight)}.file-uploader__dropzone-label.sc-flip-file-uploader{margin-top:var(--s-space-16);line-height:var(--s-line-height-base)}.file-uploader__dropzone-cta.sc-flip-file-uploader{color:var(--s-interactive-primary-default);font-weight:var(--s-font-weight-medium)}.file-uploader__upload-button.sc-flip-file-uploader{margin-top:var(--s-space-16)}.file-uploader__input.sc-flip-file-uploader{display:none}";
 const FlipFileUploader = class {
   constructor(hostRef) {

package/dist/cjs/flip-file-uploader.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-file-uploader.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,~~yiEAAyiE~~;;~~MCwBxjE~~,gBAAgB;EAZ7B;;;IAcU,aAAQ,GAAY,iBAAiB,CAAC;IAGtC,kBAAa,GAAY,mBAAmB,CAAC;IAK7C,iBAAY,GAAa,IAAI,CAAC;IAC9B,sBAAiB,GAAY,aAAa,CAAC;IAc3C,aAAQ,GAAG,CAAC,KAAY;MAC9B,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;MAE1D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;IAEM,wBAAmB,GAAG;MAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB,CAAC;GAkFH;;;;EA9FQ,MAAM,KAAK;IAChB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;GACzB;EAYD,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;QAC7C,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,OAAO,mBAAmB;QAC9D,GAAG,IAAI,CAAC,OAAO,mBAAmB,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5C,MAAM,SAAS,GAAGA,kBAAU,CAAC,eAAe,EAAE;MAC5C,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,8BAA8B,EAAE,IAAI,CAAC,YAAY;KAClD,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,SAAS,IACnBA,mBACE,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,QAAQ,IAE1B,IAAI,CAAC,KAAK,CACL,EAEP,IAAI,CAAC,WAAW,KACfA,kBACE,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,IAEhC,IAAI,CAAC,WAAW,CACZ,CACR,EAEDA,iBAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,YAAY,IAChB;MACEA,oCAAwB,KAAK,EAAC,8BAA8B,GAA0B;MACtFA,iBACE,KAAK,EAAC,+BAA+B,EACrC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,mBAAmB,IAEtCA,kBAAM,KAAK,EAAC,6BAA6B,IACtC,IAAI,CAAC,QAAQ,CACT,EAAC,GAAG,EACXA,kBAAM,KAAK,EAAC,gCAAgC,IACzC,IAAI,CAAC,aAAa,CACd,CACH;KACP,KAEDA,yBACE,KAAK,EAAC,8BAA8B,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,mBAAmB,EAAE,eAAe,EACpC,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,OAAO,EAAC,MAAM,GACD,CAChB,EAEDA,mBACE,MAAM,EAAE,IAAI,CAAC,MAAM,sBACD,eAAe,mBAClB,IAAI,CAAC,QAAQ,EAC5B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAC,sBAAsB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,MAAM,GACX,CACE,CACF,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-file-uploader/flip-file-uploader.css?tag=flip-file-uploader&encapsulation=scoped","./src/components/flip-file-uploader/flip-file-uploader.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.file-uploader {\n width: 100%;\n}\n\n.file-uploader--show-dropzone {\n & .file-uploader__dropzone {\n position: relative;\n display: flex;\n width: 100%;\n height: 10rem;\n margin-top: var(--s-space-16);\n justify-content: center;\n align-items: center;\n border: var(--s-border-width-default) dashed var(--s-border-strong);\n border-radius: var(--s-border-radius-s);\n flex-direction: column;\n\n &:focus-within {\n border-color: var(--s-focus-default);\n ~~border-width: 0.125rem;\n~~ }\n }\n\n & .file-uploader__input {\n position: absolute;\n display: block;\n cursor: pointer;\n opacity: 0;\n inset: 0;\n }\n}\n\n.file-uploader--disabled {\n & .file-uploader__input {\n cursor: default;\n }\n\n & .file-uploader__dropzone-cta,\n & .file-uploader__drag-drop-label {\n color: var(--s-text-disabled);\n }\n\n & .file-uploader__dropzone-icon {\n color: var(--s-text-disabled);\n }\n}\n\n.file-uploader__label {\n display: block;\n font-weight: var(--s-font-weight-semibold);\n line-height: var(--s-line-height-base);\n}\n\n.file-uploader__description {\n display: block;\n margin-top: var(--s-space-4);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n}\n\n.file-uploader__dropzone-icon {\n color: var(--s-icon-highlight);\n}\n\n.file-uploader__dropzone-label {\n margin-top: var(--s-space-16);\n line-height: var(--s-line-height-base);\n}\n\n.file-uploader__dropzone-cta {\n color: var(--s-interactive-primary-default);\n font-weight: var(--s-font-weight-medium);\n}\n\n.file-uploader__upload-button {\n margin-top: var(--s-space-16);\n}\n\n.file-uploader__input {\n display: none;\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\n@Component({\n /*\n Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n /\n scoped: true,\n shadow: false,\n styleUrl: \"flip-file-uploader.css\",\n tag: \"flip-file-uploader\",\n})\nexport class FlipFileUploader implements FlipFormInput<FileList> {\n @Prop() accept?: string;\n @Prop() ctaLabel?: string = \"Click to upload\";\n @Prop() description?: string;\n @Prop() disabled?: boolean;\n @Prop() dragDropLabel?: string = \"or drag and drop.\";\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() label!: string;\n @Prop() multiple?: boolean;\n @Prop() showDropzone?: boolean = true;\n @Prop() uploadButtonLabel?: string = \"Select file\";\n\n @Event() valueChange: EventEmitter<FileList>;\n\n private inputEl: HTMLInputElement;\n\n /\n Reset the file input.\n */\n @Method()\n public async reset() {\n this.inputEl.value = \"\";\n }\n\n private onChange = (event: Event) => {\n const fileList = (event.target as HTMLInputElement).files;\n\n this.valueChange.emit(fileList);\n };\n\n private onUploadButtonClick = () => {\n this.inputEl.click();\n };\n\n render() {\n const ariaDescribedby = Boolean(this.description)\n ? `${this.inputId}-description ${this.inputId}-additional-label`\n : `${this.inputId}-additional-label`;\n\n const tabIndex = this.showDropzone ? 0 : -1;\n\n const className = classnames(\"file-uploader\", {\n \"file-uploader--disabled\": this.disabled,\n \"file-uploader--show-dropzone\": this.showDropzone,\n });\n\n return (\n <Host>\n <div class={className}>\n <label\n class=\"file-uploader__label\"\n htmlFor={this.inputId}\n id={`${this.inputEl}-label`}\n >\n {this.label}\n </label>\n\n {this.description && (\n <span\n class=\"file-uploader__description\"\n id={`${this.inputId}-description`}\n >\n {this.description}\n </span>\n )}\n\n <div class=\"file-uploader__dropzone\">\n {this.showDropzone ? (\n [\n <flip-icon-cloud-upload class=\"file-uploader__dropzone-icon\"></flip-icon-cloud-upload>,\n <div\n class=\"file-uploader__dropzone-label\"\n id={`${this.inputId}-additional-label`}\n >\n <span class=\"file-uploader__dropzone-cta\">\n {this.ctaLabel}\n </span>{\" \"}\n <span class=\"file-uploader__drag-drop-label\">\n {this.dragDropLabel}\n </span>\n </div>,\n ]\n ) : (\n <flip-button\n class=\"file-uploader__upload-button\"\n disabled={this.disabled}\n flipAriaDescribedby={ariaDescribedby}\n intent=\"primary\"\n label={this.uploadButtonLabel}\n onClick={this.onUploadButtonClick}\n variant=\"flat\"\n ></flip-button>\n )}\n\n <input\n accept={this.accept}\n aria-describedby={ariaDescribedby}\n aria-disabled={this.disabled}\n autoComplete=\"off\"\n class=\"file-uploader__input\"\n disabled={this.disabled}\n id={this.inputId}\n multiple={this.multiple}\n name={this.inputName}\n onChange={this.onChange}\n ref={(el) => (this.inputEl = el)}\n tabIndex={tabIndex}\n type=\"file\"\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-file-uploader.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-file-uploader/flip-file-uploader.css?tag=flip-file-uploader&encapsulation=scoped","./src/components/flip-file-uploader/flip-file-uploader.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.file-uploader {\n width: 100%;\n}\n\n.file-uploader--show-dropzone {\n & .file-uploader__dropzone {\n position: relative;\n display: flex;\n width: 100%;\n height: 10rem;\n margin-top: var(--s-space-16);\n justify-content: center;\n align-items: center;\n border: var(--s-border-width-default) dashed var(--s-border-strong);\n border-radius: var(--s-border-radius-s);\n flex-direction: column;\n\n &:focus-within {\n border-width: 0.125rem;\n border-color: var(--s-focus-default);\n }\n }\n\n & .file-uploader__input {\n position: absolute;\n z-index: 1;\n display: block;\n width: 100%;\n cursor: pointer;\n opacity: 0;\n inset: 0;\n }\n}\n\n.file-uploader--disabled {\n & .file-uploader__input {\n cursor: default;\n }\n\n & .file-uploader__dropzone-cta,\n & .file-uploader__drag-drop-label {\n color: var(--s-text-disabled);\n }\n\n & .file-uploader__dropzone-icon {\n color: var(--s-text-disabled);\n }\n}\n\n.file-uploader__label {\n display: block;\n font-weight: var(--s-font-weight-semibold);\n line-height: var(--s-line-height-base);\n}\n\n.file-uploader__description {\n display: block;\n margin-top: var(--s-space-4);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n}\n\n.file-uploader__dropzone-icon {\n color: var(--s-icon-highlight);\n}\n\n.file-uploader__dropzone-label {\n margin-top: var(--s-space-16);\n line-height: var(--s-line-height-base);\n}\n\n.file-uploader__dropzone-cta {\n color: var(--s-interactive-primary-default);\n font-weight: var(--s-font-weight-medium);\n}\n\n.file-uploader__upload-button {\n margin-top: var(--s-space-16);\n}\n\n.file-uploader__input {\n display: none;\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\n@Component({\n /*\n Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n /\n scoped: true,\n shadow: false,\n styleUrl: \"flip-file-uploader.css\",\n tag: \"flip-file-uploader\",\n})\nexport class FlipFileUploader implements FlipFormInput<FileList> {\n @Prop() accept?: string;\n @Prop() ctaLabel?: string = \"Click to upload\";\n @Prop() description?: string;\n @Prop() disabled?: boolean;\n @Prop() dragDropLabel?: string = \"or drag and drop.\";\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() label!: string;\n @Prop() multiple?: boolean;\n @Prop() showDropzone?: boolean = true;\n @Prop() uploadButtonLabel?: string = \"Select file\";\n\n @Event() valueChange: EventEmitter<FileList>;\n\n private inputEl: HTMLInputElement;\n\n /\n Reset the file input.\n */\n @Method()\n public async reset() {\n this.inputEl.value = \"\";\n }\n\n private onChange = (event: Event) => {\n const fileList = (event.target as HTMLInputElement).files;\n\n this.valueChange.emit(fileList);\n };\n\n private onUploadButtonClick = () => {\n this.inputEl.click();\n };\n\n render() {\n const ariaDescribedby = Boolean(this.description)\n ? `${this.inputId}-description ${this.inputId}-additional-label`\n : `${this.inputId}-additional-label`;\n\n const tabIndex = this.showDropzone ? 0 : -1;\n\n const className = classnames(\"file-uploader\", {\n \"file-uploader--disabled\": this.disabled,\n \"file-uploader--show-dropzone\": this.showDropzone,\n });\n\n return (\n <Host>\n <div class={className}>\n <label\n class=\"file-uploader__label\"\n htmlFor={this.inputId}\n id={`${this.inputEl}-label`}\n >\n {this.label}\n </label>\n\n {this.description && (\n <span\n class=\"file-uploader__description\"\n id={`${this.inputId}-description`}\n >\n {this.description}\n </span>\n )}\n\n <div class=\"file-uploader__dropzone\">\n {this.showDropzone ? (\n [\n <flip-icon-cloud-upload class=\"file-uploader__dropzone-icon\"></flip-icon-cloud-upload>,\n <div\n class=\"file-uploader__dropzone-label\"\n id={`${this.inputId}-additional-label`}\n >\n <span class=\"file-uploader__dropzone-cta\">\n {this.ctaLabel}\n </span>{\" \"}\n <span class=\"file-uploader__drag-drop-label\">\n {this.dragDropLabel}\n </span>\n </div>,\n ]\n ) : (\n <flip-button\n class=\"file-uploader__upload-button\"\n disabled={this.disabled}\n flipAriaDescribedby={ariaDescribedby}\n intent=\"primary\"\n label={this.uploadButtonLabel}\n onClick={this.onUploadButtonClick}\n variant=\"flat\"\n ></flip-button>\n )}\n\n <input\n accept={this.accept}\n aria-describedby={ariaDescribedby}\n aria-disabled={this.disabled}\n autoComplete=\"off\"\n class=\"file-uploader__input\"\n disabled={this.disabled}\n id={this.inputId}\n multiple={this.multiple}\n name={this.inputName}\n onChange={this.onChange}\n ref={(el) => (this.inputEl = el)}\n tabIndex={tabIndex}\n type=\"file\"\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-file-viewer-audio_6.cjs.entry.js CHANGED Viewed

@@ -28,7 +28,7 @@ License: MIT
 !function(e,t){module.exports=t();}(_commonjsHelpers.commonjsGlobal,function s(){var f="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==f?f:{};var n=!f.document&&!!f.postMessage,o=n&&/blob:/i.test((f.location||{}).protocol),a={},h=0,b={parse:function(e,t){var i=(t=t||{}).dynamicTyping||!1;M(i)&&(t.dynamicTypingFunction=i,i={});if(t.dynamicTyping=i,t.transform=!!M(t.transform)&&t.transform,t.worker&&b.WORKERS_SUPPORTED){var r=function(){if(!b.WORKERS_SUPPORTED)return !1;var e=(i=f.URL||f.webkitURL||null,r=s.toString(),b.BLOB_URL||(b.BLOB_URL=i.createObjectURL(new Blob(["(",r,")();"],{type:"text/javascript"})))),t=new f.Worker(e);var i,r;return t.onmessage=_,t.id=h++,a[t.id]=t}();return r.userStep=t.step,r.userChunk=t.chunk,r.userComplete=t.complete,r.userError=t.error,t.step=M(t.step),t.chunk=M(t.chunk),t.complete=M(t.complete),t.error=M(t.error),delete t.worker,void r.postMessage({input:e,config:t,workerId:r.id})}var n=null;"string"==typeof e?n=t.download?new l(t):new p(t):!0===e.readable&&M(e.read)&&M(e.on)?n=new g(t):(f.File&&e instanceof File||e instanceof Object)&&(n=new c(t));return n.stream(e)},unparse:function(e,t){var n=!1,_=!0,m=",",y="\r\n",s='"',a=s+s,i=!1,r=null,o=!1;!function(){if("object"!=typeof t)return;"string"!=typeof t.delimiter||b.BAD_DELIMITERS.filter(function(e){return -1!==t.delimiter.indexOf(e)}).length||(m=t.delimiter);("boolean"==typeof t.quotes||"function"==typeof t.quotes||Array.isArray(t.quotes))&&(n=t.quotes);"boolean"!=typeof t.skipEmptyLines&&"string"!=typeof t.skipEmptyLines||(i=t.skipEmptyLines);"string"==typeof t.newline&&(y=t.newline);"string"==typeof t.quoteChar&&(s=t.quoteChar);"boolean"==typeof t.header&&(_=t.header);if(Array.isArray(t.columns)){if(0===t.columns.length)throw new Error("Option columns is empty");r=t.columns;}void 0!==t.escapeChar&&(a=t.escapeChar+s);("boolean"==typeof t.escapeFormulae||t.escapeFormulae instanceof RegExp)&&(o=t.escapeFormulae instanceof RegExp?t.escapeFormulae:/^[=+\-@\t\r].*$/);}();var h=new RegExp(j(s),"g");"string"==typeof e&&(e=JSON.parse(e));if(Array.isArray(e)){if(!e.length||Array.isArray(e[0]))return u(null,e,i);if("object"==typeof e[0])return u(r||Object.keys(e[0]),e,i)}else if("object"==typeof e)return "string"==typeof e.data&&(e.data=JSON.parse(e.data)),Array.isArray(e.data)&&(e.fields||(e.fields=e.meta&&e.meta.fields||r),e.fields||(e.fields=Array.isArray(e.data[0])?e.fields:"object"==typeof e.data[0]?Object.keys(e.data[0]):[]),Array.isArray(e.data[0])||"object"==typeof e.data[0]||(e.data=[e.data])),u(e.fields||[],e.data||[],i);throw new Error("Unable to serialize unrecognized input");function u(e,t,i){var r="";"string"==typeof e&&(e=JSON.parse(e)),"string"==typeof t&&(t=JSON.parse(t));var n=Array.isArray(e)&&0<e.length,s=!Array.isArray(t[0]);if(n&&_){for(var a=0;a<e.length;a++)0<a&&(r+=m),r+=v(e[a],a);0<t.length&&(r+=y);}for(var o=0;o<t.length;o++){var h=n?e.length:t[o].length,u=!1,f=n?0===Object.keys(t[o]).length:0===t[o].length;if(i&&!n&&(u="greedy"===i?""===t[o].join("").trim():1===t[o].length&&0===t[o][0].length),"greedy"===i&&n){for(var d=[],l=0;l<h;l++){var c=s?e[l]:l;d.push(t[o][c]);}u=""===d.join("").trim();}if(!u){for(var p=0;p<h;p++){0<p&&!f&&(r+=m);var g=n&&s?e[p]:p;r+=v(t[o][g],p);}o<t.length-1&&(!i||0<h&&!f)&&(r+=y);}}return r}function v(e,t){if(null==e)return "";if(e.constructor===Date)return JSON.stringify(e).slice(1,25);var i=!1;o&&"string"==typeof e&&o.test(e)&&(e="'"+e,i=!0);var r=e.toString().replace(h,a);return (i=i||!0===n||"function"==typeof n&&n(e,t)||Array.isArray(n)&&n[t]||function(e,t){for(var i=0;i<t.length;i++)if(-1<e.indexOf(t[i]))return !0;return !1}(r,b.BAD_DELIMITERS)||-1<r.indexOf(m)||" "===r.charAt(0)||" "===r.charAt(r.length-1))?s+r+s:r}}};if(b.RECORD_SEP=String.fromCharCode(30),b.UNIT_SEP=String.fromCharCode(31),b.BYTE_ORDER_MARK="\ufeff",b.BAD_DELIMITERS=["\r","\n",'"',b.BYTE_ORDER_MARK],b.WORKERS_SUPPORTED=!n&&!!f.Worker,b.NODE_STREAM_INPUT=1,b.LocalChunkSize=10485760,b.RemoteChunkSize=5242880,b.DefaultDelimiter=",",b.Parser=E,b.ParserHandle=i,b.NetworkStreamer=l,b.FileStreamer=c,b.StringStreamer=p,b.ReadableStreamStreamer=g,f.jQuery){var d=f.jQuery;d.fn.parse=function(o){var i=o.config||{},h=[];return this.each(function(e){if(!("INPUT"===d(this).prop("tagName").toUpperCase()&&"file"===d(this).attr("type").toLowerCase()&&f.FileReader)||!this.files||0===this.files.length)return !0;for(var t=0;t<this.files.length;t++)h.push({file:this.files[t],inputElem:this,instanceConfig:d.extend({},i)});}),e(),this;function e(){if(0!==h.length){var e,t,i,r,n=h[0];if(M(o.before)){var s=o.before(n.file,n.inputElem);if("object"==typeof s){if("abort"===s.action)return e="AbortError",t=n.file,i=n.inputElem,r=s.reason,void(M(o.error)&&o.error({name:e},t,i,r));if("skip"===s.action)return void u();"object"==typeof s.config&&(n.instanceConfig=d.extend(n.instanceConfig,s.config));}else if("skip"===s)return void u()}var a=n.instanceConfig.complete;n.instanceConfig.complete=function(e){M(a)&&a(e,n.file,n.inputElem),u();},b.parse(n.file,n.instanceConfig);}else M(o.complete)&&o.complete();}function u(){h.splice(0,1),e();}};}function u(e){this._handle=null,this._finished=!1,this._completed=!1,this._halted=!1,this._input=null,this._baseIndex=0,this._partialLine="",this._rowCount=0,this._start=0,this._nextChunk=null,this.isFirstChunk=!0,this._completeResults={data:[],errors:[],meta:{}},function(e){var t=w(e);t.chunkSize=parseInt(t.chunkSize),e.step||e.chunk||(t.chunkSize=null);this._handle=new i(t),(this._handle.streamer=this)._config=t;}.call(this,e),this.parseChunk=function(e,t){if(this.isFirstChunk&&M(this._config.beforeFirstChunk)){var i=this._config.beforeFirstChunk(e);void 0!==i&&(e=i);}this.isFirstChunk=!1,this._halted=!1;var r=this._partialLine+e;this._partialLine="";var n=this._handle.parse(r,this._baseIndex,!this._finished);if(!this._handle.paused()&&!this._handle.aborted()){var s=n.meta.cursor;this._finished||(this._partialLine=r.substring(s-this._baseIndex),this._baseIndex=s),n&&n.data&&(this._rowCount+=n.data.length);var a=this._finished||this._config.preview&&this._rowCount>=this._config.preview;if(o)f.postMessage({results:n,workerId:b.WORKER_ID,finished:a});else if(M(this._config.chunk)&&!t){if(this._config.chunk(n,this._handle),this._handle.paused()||this._handle.aborted())return void(this._halted=!0);n=void 0,this._completeResults=void 0;}return this._config.step||this._config.chunk||(this._completeResults.data=this._completeResults.data.concat(n.data),this._completeResults.errors=this._completeResults.errors.concat(n.errors),this._completeResults.meta=n.meta),this._completed||!a||!M(this._config.complete)||n&&n.meta.aborted||(this._config.complete(this._completeResults,this._input),this._completed=!0),a||n&&n.meta.paused||this._nextChunk(),n}this._halted=!0;},this._sendError=function(e){M(this._config.error)?this._config.error(e):o&&this._config.error&&f.postMessage({workerId:b.WORKER_ID,error:e,finished:!1});};}function l(e){var r;(e=e||{}).chunkSize||(e.chunkSize=b.RemoteChunkSize),u.call(this,e),this._nextChunk=n?function(){this._readChunk(),this._chunkLoaded();}:function(){this._readChunk();},this.stream=function(e){this._input=e,this._nextChunk();},this._readChunk=function(){if(this._finished)this._chunkLoaded();else {if(r=new XMLHttpRequest,this._config.withCredentials&&(r.withCredentials=this._config.withCredentials),n||(r.onload=v(this._chunkLoaded,this),r.onerror=v(this._chunkError,this)),r.open(this._config.downloadRequestBody?"POST":"GET",this._input,!n),this._config.downloadRequestHeaders){var e=this._config.downloadRequestHeaders;for(var t in e)r.setRequestHeader(t,e[t]);}if(this._config.chunkSize){var i=this._start+this._config.chunkSize-1;r.setRequestHeader("Range","bytes="+this._start+"-"+i);}try{r.send(this._config.downloadRequestBody);}catch(e){this._chunkError(e.message);}n&&0===r.status&&this._chunkError();}},this._chunkLoaded=function(){4===r.readyState&&(r.status<200||400<=r.status?this._chunkError():(this._start+=this._config.chunkSize?this._config.chunkSize:r.responseText.length,this._finished=!this._config.chunkSize||this._start>=function(e){var t=e.getResponseHeader("Content-Range");if(null===t)return -1;return parseInt(t.substring(t.lastIndexOf("/")+1))}(r),this.parseChunk(r.responseText)));},this._chunkError=function(e){var t=r.statusText||e;this._sendError(new Error(t));};}function c(e){var r,n;(e=e||{}).chunkSize||(e.chunkSize=b.LocalChunkSize),u.call(this,e);var s="undefined"!=typeof FileReader;this.stream=function(e){this._input=e,n=e.slice||e.webkitSlice||e.mozSlice,s?((r=new FileReader).onload=v(this._chunkLoaded,this),r.onerror=v(this._chunkError,this)):r=new FileReaderSync,this._nextChunk();},this._nextChunk=function(){this._finished||this._config.preview&&!(this._rowCount<this._config.preview)||this._readChunk();},this._readChunk=function(){var e=this._input;if(this._config.chunkSize){var t=Math.min(this._start+this._config.chunkSize,this._input.size);e=n.call(e,this._start,t);}var i=r.readAsText(e,this._config.encoding);s||this._chunkLoaded({target:{result:i}});},this._chunkLoaded=function(e){this._start+=this._config.chunkSize,this._finished=!this._config.chunkSize||this._start>=this._input.size,this.parseChunk(e.target.result);},this._chunkError=function(){this._sendError(r.error);};}function p(e){var i;u.call(this,e=e||{}),this.stream=function(e){return i=e,this._nextChunk()},this._nextChunk=function(){if(!this._finished){var e,t=this._config.chunkSize;return t?(e=i.substring(0,t),i=i.substring(t)):(e=i,i=""),this._finished=!i,this.parseChunk(e)}};}function g(e){u.call(this,e=e||{});var t=[],i=!0,r=!1;this.pause=function(){u.prototype.pause.apply(this,arguments),this._input.pause();},this.resume=function(){u.prototype.resume.apply(this,arguments),this._input.resume();},this.stream=function(e){this._input=e,this._input.on("data",this._streamData),this._input.on("end",this._streamEnd),this._input.on("error",this._streamError);},this._checkIsFinished=function(){r&&1===t.length&&(this._finished=!0);},this._nextChunk=function(){this._checkIsFinished(),t.length?this.parseChunk(t.shift()):i=!0;},this._streamData=v(function(e){try{t.push("string"==typeof e?e:e.toString(this._config.encoding)),i&&(i=!1,this._checkIsFinished(),this.parseChunk(t.shift()));}catch(e){this._streamError(e);}},this),this._streamError=v(function(e){this._streamCleanUp(),this._sendError(e);},this),this._streamEnd=v(function(){this._streamCleanUp(),r=!0,this._streamData("");},this),this._streamCleanUp=v(function(){this._input.removeListener("data",this._streamData),this._input.removeListener("end",this._streamEnd),this._input.removeListener("error",this._streamError);},this);}function i(m){var a,o,h,r=Math.pow(2,53),n=-r,s=/^\s*-?(\d+\.?|\.\d+|\d+\.\d+)([eE][-+]?\d+)?\s*$/,u=/^(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))$/,t=this,i=0,f=0,d=!1,e=!1,l=[],c={data:[],errors:[],meta:{}};if(M(m.step)){var p=m.step;m.step=function(e){if(c=e,_())g();else {if(g(),0===c.data.length)return;i+=e.data.length,m.preview&&i>m.preview?o.abort():(c.data=c.data[0],p(c,t));}};}function y(e){return "greedy"===m.skipEmptyLines?""===e.join("").trim():1===e.length&&0===e[0].length}function g(){return c&&h&&(k("Delimiter","UndetectableDelimiter","Unable to auto-detect delimiting character; defaulted to '"+b.DefaultDelimiter+"'"),h=!1),m.skipEmptyLines&&(c.data=c.data.filter(function(e){return !y(e)})),_()&&function(){if(!c)return;function e(e,t){M(m.transformHeader)&&(e=m.transformHeader(e,t)),l.push(e);}if(Array.isArray(c.data[0])){for(var t=0;_()&&t<c.data.length;t++)c.data[t].forEach(e);c.data.splice(0,1);}else c.data.forEach(e);}(),function(){if(!c||!m.header&&!m.dynamicTyping&&!m.transform)return c;function e(e,t){var i,r=m.header?{}:[];for(i=0;i<e.length;i++){var n=i,s=e[i];m.header&&(n=i>=l.length?"__parsed_extra":l[i]),m.transform&&(s=m.transform(s,n)),s=v(n,s),"__parsed_extra"===n?(r[n]=r[n]||[],r[n].push(s)):r[n]=s;}return m.header&&(i>l.length?k("FieldMismatch","TooManyFields","Too many fields: expected "+l.length+" fields but parsed "+i,f+t):i<l.length&&k("FieldMismatch","TooFewFields","Too few fields: expected "+l.length+" fields but parsed "+i,f+t)),r}var t=1;!c.data.length||Array.isArray(c.data[0])?(c.data=c.data.map(e),t=c.data.length):c.data=e(c.data,0);m.header&&c.meta&&(c.meta.fields=l);return f+=t,c}()}function _(){return m.header&&0===l.length}function v(e,t){return i=e,m.dynamicTypingFunction&&void 0===m.dynamicTyping[i]&&(m.dynamicTyping[i]=m.dynamicTypingFunction(i)),!0===(m.dynamicTyping[i]||m.dynamicTyping)?"true"===t||"TRUE"===t||"false"!==t&&"FALSE"!==t&&(function(e){if(s.test(e)){var t=parseFloat(e);if(n<t&&t<r)return !0}return !1}(t)?parseFloat(t):u.test(t)?new Date(t):""===t?null:t):t;var i;}function k(e,t,i,r){var n={type:e,code:t,message:i};void 0!==r&&(n.row=r),c.errors.push(n);}this.parse=function(e,t,i){var r=m.quoteChar||'"';if(m.newline||(m.newline=function(e,t){e=e.substring(0,1048576);var i=new RegExp(j(t)+"([^]*?)"+j(t),"gm"),r=(e=e.replace(i,"")).split("\r"),n=e.split("\n"),s=1<n.length&&n[0].length<r[0].length;if(1===r.length||s)return "\n";for(var a=0,o=0;o<r.length;o++)"\n"===r[o][0]&&a++;return a>=r.length/2?"\r\n":"\r"}(e,r)),h=!1,m.delimiter)M(m.delimiter)&&(m.delimiter=m.delimiter(e),c.meta.delimiter=m.delimiter);else {var n=function(e,t,i,r,n){var s,a,o,h;n=n||[",","\t","|",";",b.RECORD_SEP,b.UNIT_SEP];for(var u=0;u<n.length;u++){var f=n[u],d=0,l=0,c=0;o=void 0;for(var p=new E({comments:r,delimiter:f,newline:t,preview:10}).parse(e),g=0;g<p.data.length;g++)if(i&&y(p.data[g]))c++;else {var _=p.data[g].length;l+=_,void 0!==o?0<_&&(d+=Math.abs(_-o),o=_):o=_;}0<p.data.length&&(l/=p.data.length-c),(void 0===a||d<=a)&&(void 0===h||h<l)&&1.99<l&&(a=d,s=f,h=l);}return {successful:!!(m.delimiter=s),bestDelimiter:s}}(e,m.newline,m.skipEmptyLines,m.comments,m.delimitersToGuess);n.successful?m.delimiter=n.bestDelimiter:(h=!0,m.delimiter=b.DefaultDelimiter),c.meta.delimiter=m.delimiter;}var s=w(m);return m.preview&&m.header&&s.preview++,a=e,o=new E(s),c=o.parse(a,t,i),g(),d?{meta:{paused:!0}}:c||{meta:{paused:!1}}},this.paused=function(){return d},this.pause=function(){d=!0,o.abort(),a=M(m.chunk)?"":a.substring(o.getCharIndex());},this.resume=function(){t.streamer._halted?(d=!1,t.streamer.parseChunk(a,!0)):setTimeout(t.resume,3);},this.aborted=function(){return e},this.abort=function(){e=!0,o.abort(),c.meta.aborted=!0,M(m.complete)&&m.complete(c),a="";};}function j(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function E(e){var S,O=(e=e||{}).delimiter,x=e.newline,I=e.comments,T=e.step,D=e.preview,A=e.fastMode,L=S=void 0===e.quoteChar||null===e.quoteChar?'"':e.quoteChar;if(void 0!==e.escapeChar&&(L=e.escapeChar),("string"!=typeof O||-1<b.BAD_DELIMITERS.indexOf(O))&&(O=","),I===O)throw new Error("Comment character same as delimiter");!0===I?I="#":("string"!=typeof I||-1<b.BAD_DELIMITERS.indexOf(I))&&(I=!1),"\n"!==x&&"\r"!==x&&"\r\n"!==x&&(x="\n");var F=0,z=!1;this.parse=function(r,t,i){if("string"!=typeof r)throw new Error("Input must be a string");var n=r.length,e=O.length,s=x.length,a=I.length,o=M(T),h=[],u=[],f=[],d=F=0;if(!r)return C();if(A||!1!==A&&-1===r.indexOf(S)){for(var l=r.split(x),c=0;c<l.length;c++){if(f=l[c],F+=f.length,c!==l.length-1)F+=x.length;else if(i)return C();if(!I||f.substring(0,a)!==I){if(o){if(h=[],k(f.split(O)),R(),z)return C()}else k(f.split(O));if(D&&D<=c)return h=h.slice(0,D),C(!0)}}return C()}for(var p=r.indexOf(O,F),g=r.indexOf(x,F),_=new RegExp(j(L)+j(S),"g"),m=r.indexOf(S,F);;)if(r[F]!==S)if(I&&0===f.length&&r.substring(F,F+a)===I){if(-1===g)return C();F=g+s,g=r.indexOf(x,F),p=r.indexOf(O,F);}else if(-1!==p&&(p<g||-1===g))f.push(r.substring(F,p)),F=p+e,p=r.indexOf(O,F);else {if(-1===g)break;if(f.push(r.substring(F,g)),w(g+s),o&&(R(),z))return C();if(D&&h.length>=D)return C(!0)}else for(m=F,F++;;){if(-1===(m=r.indexOf(S,m+1)))return i||u.push({type:"Quotes",code:"MissingQuotes",message:"Quoted field unterminated",row:h.length,index:F}),E();if(m===n-1)return E(r.substring(F,m).replace(_,S));if(S!==L||r[m+1]!==L){if(S===L||0===m||r[m-1]!==L){-1!==p&&p<m+1&&(p=r.indexOf(O,m+1)),-1!==g&&g<m+1&&(g=r.indexOf(x,m+1));var y=b(-1===g?p:Math.min(p,g));if(r.substr(m+1+y,e)===O){f.push(r.substring(F,m).replace(_,S)),r[F=m+1+y+e]!==S&&(m=r.indexOf(S,F)),p=r.indexOf(O,F),g=r.indexOf(x,F);break}var v=b(g);if(r.substring(m+1+v,m+1+v+s)===x){if(f.push(r.substring(F,m).replace(_,S)),w(m+1+v+s),p=r.indexOf(O,F),m=r.indexOf(S,F),o&&(R(),z))return C();if(D&&h.length>=D)return C(!0);break}u.push({type:"Quotes",code:"InvalidQuotes",message:"Trailing quote on quoted field is malformed",row:h.length,index:F}),m++;}}else m++;}return E();function k(e){h.push(e),d=F;}function b(e){var t=0;if(-1!==e){var i=r.substring(m+1,e);i&&""===i.trim()&&(t=i.length);}return t}function E(e){return i||(void 0===e&&(e=r.substring(F)),f.push(e),F=n,k(f),o&&R()),C()}function w(e){F=e,k(f),f=[],g=r.indexOf(x,F);}function C(e){return {data:h,errors:u,meta:{delimiter:O,linebreak:x,aborted:z,truncated:!!e,cursor:d+(t||0)}}}function R(){T(C()),h=[],u=[];}},this.abort=function(){z=!0;},this.getCharIndex=function(){return F};}function _(e){var t=e.data,i=a[t.workerId],r=!1;if(t.error)i.userError(t.error,t.file);else if(t.results&&t.results.data){var n={abort:function(){r=!0,m(t.workerId,{data:[],errors:[],meta:{aborted:!0}});},pause:y,resume:y};if(M(i.userStep)){for(var s=0;s<t.results.data.length&&(i.userStep({data:t.results.data[s],errors:t.results.errors,meta:t.results.meta},n),!r);s++);delete t.results;}else M(i.userChunk)&&(i.userChunk(t.results,n,t.file),delete t.results);}t.finished&&!r&&m(t.workerId,t.results);}function m(e,t){var i=a[e];M(i.userComplete)&&i.userComplete(t),i.terminate(),delete a[e];}function y(){throw new Error("Not implemented.")}function w(e){if("object"!=typeof e||null===e)return e;var t=Array.isArray(e)?[]:{};for(var i in e)t[i]=w(e[i]);return t}function v(e,t){return function(){e.apply(t,arguments);}}function M(e){return "function"==typeof e}return o&&(f.onmessage=function(e){var t=e.data;void 0===b.WORKER_ID&&t&&(b.WORKER_ID=t.workerId);if("string"==typeof t.input)f.postMessage({workerId:b.WORKER_ID,results:b.parse(t.input,t.config),finished:!0});else if(f.File&&t.input instanceof File||t.input instanceof Object){var i=b.parse(t.input,t.config);i&&f.postMessage({workerId:b.WORKER_ID,results:i,finished:!0});}}),(l.prototype=Object.create(u.prototype)).constructor=l,(c.prototype=Object.create(u.prototype)).constructor=c,(p.prototype=Object.create(p.prototype)).constructor=p,(g.prototype=Object.create(u.prototype)).constructor=g,b});
 });
-const flipFileViewerCsvCss = ":host{position:relative;display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-csv__csv{overflow:auto;width:100%;max-height:100%}.file-viewer-csv__table{margin-right:auto;margin-left:auto;border-collapse:collapse}.file-viewer-csv__cell{padding:var(--s-space-8);border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-csv__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-csv__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
+const flipFileViewerCsvCss = ":host{position:relative;display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-csv__csv{overflow:auto;width:100%;max-height:100%;padding:var(--s-space-16);background-color:var(--s-background-default)}.file-viewer-csv__table{margin-right:auto;margin-left:auto;border-collapse:collapse}.file-viewer-csv__cell{padding:var(--s-space-8);border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-csv__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-csv__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
 const FlipFileViewerCsv = class {
   constructor(hostRef) {
@@ -29792,7 +29792,7 @@ const FlipFileViewerPdf = class {
 };
 FlipFileViewerPdf.style = flipFileViewerPdfCss;
-const flipFileViewerTextCss = ":host{position:relative;display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-text__text{overflow:auto;width:100%;max-height:100%;margin:0;padding:0;font-family:var(--s-font-family-code)}.file-viewer-text__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-text__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
+const flipFileViewerTextCss = ":host{position:relative;display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-text__text{overflow:auto;width:100%;max-height:100%;margin:0;padding:0;padding:var(--s-space-16);background-color:var(--s-background-default);font-family:var(--s-font-family-code)}.file-viewer-text__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-text__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
 const FlipFileViewerText = class {
   constructor(hostRef) {
@@ -29824,7 +29824,7 @@ const FlipFileViewerText = class {
 };
 FlipFileViewerText.style = flipFileViewerTextCss;
-const flipFileViewerVideoCss = ":host{display:inline-flex;width:100%;height:100%}:host *{box-sizing:border-box}.file-viewer-video__video{width:100%;height:100%}";
+const flipFileViewerVideoCss = ":host{display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-video__video{width:100%;background-color:rgba(0, 0, 0, 1)}";
 const FlipFileViewerVideo = class {
   constructor(hostRef) {