kemet-ui 1.4.0 → 2.0.0

package/dist/components/kemet-upload/styles.js

@@ -1,6 +1,121 @@
 import { css } from 'lit';
+export const stylesUpload = css `
+  :host {
+    color: var(--kemet-upload-color, var(--kemet-color-white));
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: var(--kemet-upload-height, 364px);
+    border: var(--kemet-upload-border, 1rem solid var(--kemet-color-gray1-to-transparent));
+    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));
+  }
+
+  :host([mobile]) {
+    display: block;
+    height: auto;
+  }
+
+  input {
+    display: none;
+  }
+
+  .button {
+    cursor: pointer;
+    font-size: 1rem;
+    display: block;
+    color: var(--kemet-color-white);
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--kemet-color-white);
+    background-color: transparent;
+  }
+
+  .upload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--kemet-upload-margin);
+    flex-direction: column;
+    border: 2px dashed var(--kemet-color-white);
+  }
+
+  :host([over]) .upload {
+    background-color: green;
+  }
+
+  :host([mobile]) .upload {
+    height: 280px;
+  }
+
+  .files {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+    padding: 0 1rem;
+    overflow: auto;
+    background-color: var(--kemet-color-gray1-to-transparent);
+  }
+
+  :host([mobile]) .files {
+    padding: 0;
+    max-height: 280px;
+  }
+
+  .heading {
+    font-size: 1.25rem;
+    margin: 0 0 2rem 0;
+  }
 
-export const stylesLoaders = css`
+  :host([no-drag-drop]) .heading {
+    display: none;
+  }
+`;
+export const stylesUploadFile = css `
+  :host {
+    --kemet-upload-file-ripple-color: var(--kemet-color-primary);
+
+    color: var(--kemet-upload-file-color, var(--kemet-color-text));
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    height: 100%;
+    max-height: 50%;
+    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
+    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
+  }
+
+  :host([status='error']) {
+    border: 1px solid var(--kemet-color-error);
+  }
+
+  :host([status='complete']) {
+    border: 1px solid var(--kemet-color-success);
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  .percentage {
+    font-size: clamp(2rem, 3vw, 2.5rem);
+    align-self: center;
+    justify-self: center;
+  }
+
+  .indicator {
+    transform: scale(0.8);
+  }
+
+  :host([status='complete']) .message,
+  :host([status='complete']) .indicator {
+    color: var(--kemet-color-success);
+  }
+
+  :host([status='error']) .message,
+  :host([status='error']) .indicator {
+    color: var(--kemet-color-error);
+  }
+`;
+export const stylesLoaders = css `
   .lds-ripple {
     display: inline-block;
     position: relative;
@@ -51,3 +166,4 @@ export const stylesLoaders = css`
     }
   }
 `;
+//# sourceMappingURL=styles.js.map

package/dist/components/kemet-upload/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ClC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesUpload = css`\n  :host {\n    color: var(--kemet-upload-color, var(--kemet-color-white));\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: var(--kemet-upload-height, 364px);\n    border: var(--kemet-upload-border, 1rem solid var(--kemet-color-gray1-to-transparent));\n    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));\n  }\n\n  :host([mobile]) {\n    display: block;\n    height: auto;\n  }\n\n  input {\n    display: none;\n  }\n\n  .button {\n    cursor: pointer;\n    font-size: 1rem;\n    display: block;\n    color: var(--kemet-color-white);\n    padding: 0.5rem 1rem;\n    border: 1px solid var(--kemet-color-white);\n    background-color: transparent;\n  }\n\n  .upload {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: var(--kemet-upload-margin);\n    flex-direction: column;\n    border: 2px dashed var(--kemet-color-white);\n  }\n\n  :host([over]) .upload {\n    background-color: green;\n  }\n\n  :host([mobile]) .upload {\n    height: 280px;\n  }\n\n  .files {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n    padding: 0 1rem;\n    overflow: auto;\n    background-color: var(--kemet-color-gray1-to-transparent);\n  }\n\n  :host([mobile]) .files {\n    padding: 0;\n    max-height: 280px;\n  }\n\n  .heading {\n    font-size: 1.25rem;\n    margin: 0 0 2rem 0;\n  }\n\n  :host([no-drag-drop]) .heading {\n    display: none;\n  }\n`;\n\nexport const stylesUploadFile = css`\n  :host {\n    --kemet-upload-file-ripple-color: var(--kemet-color-primary);\n\n    color: var(--kemet-upload-file-color, var(--kemet-color-text));\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    height: 100%;\n    max-height: 50%;\n    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);\n    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));\n  }\n\n  :host([status='error']) {\n    border: 1px solid var(--kemet-color-error);\n  }\n\n  :host([status='complete']) {\n    border: 1px solid var(--kemet-color-success);\n  }\n\n  h3 {\n    margin: 0;\n  }\n\n  .percentage {\n    font-size: clamp(2rem, 3vw, 2.5rem);\n    align-self: center;\n    justify-self: center;\n  }\n\n  .indicator {\n    transform: scale(0.8);\n  }\n\n  :host([status='complete']) .message,\n  :host([status='complete']) .indicator {\n    color: var(--kemet-color-success);\n  }\n\n  :host([status='error']) .message,\n  :host([status='error']) .indicator {\n    color: var(--kemet-color-error);\n  }\n`;\n\nexport const stylesLoaders = css`\n  .lds-ripple {\n    display: inline-block;\n    position: relative;\n    width: 80px;\n    height: 80px;\n  }\n\n  .lds-ripple div {\n    position: absolute;\n    border: 4px solid var(--kemet-upload-file-ripple-color);\n    opacity: 1;\n    border-radius: 50%;\n    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n  }\n\n  .lds-ripple div:nth-child(2) {\n    animation-delay: -0.5s;\n  }\n\n  @keyframes lds-ripple {\n    0% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 0;\n    }\n    4.9% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 0;\n    }\n    5% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 1;\n    }\n    100% {\n      top: 0px;\n      left: 0px;\n      width: 72px;\n      height: 72px;\n      opacity: 0;\n    }\n  }\n`;\n"]}

package/dist/components/kemet-upload/types.d.ts

@@ -0,0 +1,21 @@
+export interface KemetUploadInterface extends HTMLElement {
+    slug?: string;
+    accept?: string;
+    multiple?: boolean;
+    over?: boolean;
+    heading?: string;
+    mobile?: boolean;
+    breakpoint?: string;
+    noDragDrop?: boolean;
+    maxSize?: number;
+    buttonLabel?: string;
+}
+export interface KemetUploadFile extends HTMLElement {
+    name?: string;
+    loaded?: number;
+    size?: number;
+    type?: string;
+    status?: string;
+    percent?: number;
+    message?: string;
+}

package/dist/components/kemet-upload/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/kemet-upload/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetUploadInterface extends HTMLElement {\n  slug?: string,\n  accept?: string,\n  multiple?: boolean,\n  over?: boolean,\n  heading?: string,\n  mobile?: boolean,\n  breakpoint?: string,\n  noDragDrop?: boolean,\n  maxSize?: number,\n  buttonLabel?: string\n}\n\nexport interface KemetUploadFile extends HTMLElement {\n  name?: string,\n  loaded?: number,\n  size?: number,\n  type?: string,\n  status?: string,\n  percent?: number,\n  message?: string,\n}\n"]}