@fluid-topics/ft-file-drop 0.3.12 → 0.3.13

package/build/ft-file-drop.css.d.ts

@@ -0,0 +1,13 @@
+export declare const FtFileDropCssVariables: {
+    zIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    hintBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    hintColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    errorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    visibleBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-file-drop.css.d.ts.map

package/build/ft-file-drop.css.js

@@ -0,0 +1,95 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtChipCssVariables } from "@fluid-topics/ft-chip/build/ft-chip.css";
+export const FtFileDropCssVariables = {
+    zIndex: FtCssVariableFactory.create("--ft-file-drop-z-index", "NUMBER", "10"),
+    hintBackgroundColor: FtCssVariableFactory.extend("--ft-file-drop-hint-background-color", designSystemVariables.colorSurface),
+    hintColor: FtCssVariableFactory.extend("--ft-file-drop-hint-color", designSystemVariables.colorPrimary),
+    errorColor: FtCssVariableFactory.extend("--ft-file-drop-error-color", designSystemVariables.colorError),
+    borderRadius: FtCssVariableFactory.extend("--ft-file-drop-border-radius", designSystemVariables.borderRadiusL),
+    borderWidth: FtCssVariableFactory.create("--ft-file-drop-border-width", "SIZE", "4px"),
+    borderColor: FtCssVariableFactory.create("--ft-file-drop-border-color", "COLOR", "transparent"),
+    visibleBorderColor: FtCssVariableFactory.extend("--ft-file-drop-visible-border-color", designSystemVariables.colorOutline),
+    activeBorderColor: FtCssVariableFactory.extend("--ft-file-drop-active-border-color", designSystemVariables.colorPrimary),
+};
+// language=CSS
+export const styles = css `
+    :host {
+        display: block;
+        position: relative;
+    }
+
+    #container {
+        position: absolute;
+        inset: 0;
+        border: dashed ${FtFileDropCssVariables.borderWidth} ${FtFileDropCssVariables.borderColor};
+        border-radius: ${FtFileDropCssVariables.borderRadius};
+    }
+
+    #container.visible {
+        border-color: ${FtFileDropCssVariables.visibleBorderColor}
+    }
+
+    #container.dragging {
+        border-color: ${FtFileDropCssVariables.activeBorderColor}
+    }
+
+    slot {
+        position: absolute;
+        inset: 0;
+        display: block;
+        overflow: auto;
+    }
+
+    #overlay {
+        display: none;
+        position: absolute;
+        inset: 0;
+        z-index: ${FtFileDropCssVariables.zIndex};
+    }
+
+    #container.dragging #overlay {
+        display: block;
+    }
+
+    #overlay-background {
+        z-index: 1;
+        position: absolute;
+        inset: 0;
+        background-color: ${FtFileDropCssVariables.activeBorderColor};
+        opacity: 0.20;
+        border-radius: ${FtFileDropCssVariables.borderRadius};
+    }
+
+    #overlay-drop {
+        z-index: 2;
+        position: absolute;
+        inset: 0;
+    }
+
+    #overlay-content {
+        z-index: 1;
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+    }
+
+    #overlay-content ft-chip {
+        margin-bottom: 10%;
+        ${setVariable(FtChipCssVariables.color, FtFileDropCssVariables.hintColor)};
+        ${setVariable(FtChipCssVariables.iconSize, "32px")};
+        ${setVariable(FtChipCssVariables.colorOutline, "transparent")};
+    }
+
+    #overlay-content xft-chip[icon=error] {
+        ${setVariable(FtChipCssVariables.color, FtFileDropCssVariables.errorColor)};
+        ${setVariable(FtChipCssVariables.backgroundColor, FtFileDropCssVariables.hintBackgroundColor)};
+    }
+
+    [hidden] {
+        display: none;
+    }
+`;
+//# sourceMappingURL=ft-file-drop.css.js.map

package/build/ft-file-drop.d.ts

@@ -1,21 +1,5 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export interface FtFileDropProperties {
-    dropHint: string;
-    accept: string;
-    fileTypeError: string;
-    visible: boolean;
-}
-export declare const FtFileDropCssVariables: {
-    zIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    hintBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    hintColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    errorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    visibleBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    activeBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtFileDropProperties } from "./ft-file-drop.properties";
 export declare class FileDropEvent extends CustomEvent<{
     file: File;
 }> {

package/build/ft-file-drop.js

@@ -4,23 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from "lit";
+import { html } from "lit";
 import { property, state } from "lit/decorators.js";
-import { designSystemVariables, FtCssVariableFactory, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { classMap } from "lit/directives/class-map.js";
 import { matchAccept } from "./match-accept";
-import { FtChip, FtChipCssVariables } from "@fluid-topics/ft-chip";
-export const FtFileDropCssVariables = {
-    zIndex: FtCssVariableFactory.create("--ft-file-drop-z-index", "NUMBER", "10"),
-    hintBackgroundColor: FtCssVariableFactory.extend("--ft-file-drop-hint-background-color", designSystemVariables.colorSurface),
-    hintColor: FtCssVariableFactory.extend("--ft-file-drop-hint-color", designSystemVariables.colorPrimary),
-    errorColor: FtCssVariableFactory.extend("--ft-file-drop-error-color", designSystemVariables.colorError),
-    borderRadius: FtCssVariableFactory.extend("--ft-file-drop-border-radius", designSystemVariables.borderRadiusL),
-    borderWidth: FtCssVariableFactory.create("--ft-file-drop-border-width", "SIZE", "4px"),
-    borderColor: FtCssVariableFactory.create("--ft-file-drop-border-color", "COLOR", "transparent"),
-    visibleBorderColor: FtCssVariableFactory.extend("--ft-file-drop-visible-border-color", designSystemVariables.colorOutline),
-    activeBorderColor: FtCssVariableFactory.extend("--ft-file-drop-active-border-color", designSystemVariables.colorPrimary),
-};
+import { FtChip } from "@fluid-topics/ft-chip";
+import { styles } from "./ft-file-drop.css";
 export class FileDropEvent extends CustomEvent {
     constructor(file) {
         super("file-drop", { detail: { file } });
@@ -93,86 +83,7 @@ export class FtFileDrop extends FtLitElement {
 FtFileDrop.elementDefinitions = {
     "ft-chip": FtChip,
 };
-// language=CSS
-FtFileDrop.styles = css `
-        :host {
-            display: block;
-            position: relative;
-        }
-
-        #container {
-            position: absolute;
-            inset: 0;
-            border: dashed ${FtFileDropCssVariables.borderWidth} ${FtFileDropCssVariables.borderColor};
-            border-radius: ${FtFileDropCssVariables.borderRadius};
-        }
-
-        #container.visible {
-            border-color: ${FtFileDropCssVariables.visibleBorderColor}
-        }
-
-        #container.dragging {
-            border-color: ${FtFileDropCssVariables.activeBorderColor}
-        }
-
-        slot {
-            position: absolute;
-            inset: 0;
-            display: block;
-            overflow: auto;
-        }
-
-        #overlay {
-            display: none;
-            position: absolute;
-            inset: 0;
-            z-index: ${FtFileDropCssVariables.zIndex};
-        }
-
-        #container.dragging #overlay {
-            display: block;
-        }
-
-        #overlay-background {
-            z-index: 1;
-            position: absolute;
-            inset: 0;
-            background-color: ${FtFileDropCssVariables.activeBorderColor};
-            opacity: 0.20;
-            border-radius: ${FtFileDropCssVariables.borderRadius};
-        }
-
-        #overlay-drop {
-            z-index: 2;
-            position: absolute;
-            inset: 0;
-        }
-
-        #overlay-content {
-            z-index: 1;
-            position: absolute;
-            inset: 0;
-            display: flex;
-            align-items: flex-end;
-            justify-content: center;
-        }
-
-        #overlay-content ft-chip {
-            margin-bottom: 10%;
-            ${setVariable(FtChipCssVariables.color, FtFileDropCssVariables.hintColor)};
-            ${setVariable(FtChipCssVariables.iconSize, "32px")};
-            ${setVariable(FtChipCssVariables.colorOutline, "transparent")};
-        }
-
-        #overlay-content xft-chip[icon=error] {
-            ${setVariable(FtChipCssVariables.color, FtFileDropCssVariables.errorColor)};
-            ${setVariable(FtChipCssVariables.backgroundColor, FtFileDropCssVariables.hintBackgroundColor)};
-        }
-
-        [hidden] {
-            display: none;
-        }
-    `;
+FtFileDrop.styles = styles;
 __decorate([
     property()
 ], FtFileDrop.prototype, "dropHint", void 0);