@leavittsoftware/web 1.0.0 → 1.2.1

package/titanium/smart-attachment-input/crop-and-save-image-dialog.js

@@ -41,83 +41,83 @@ let CropAndSaveImageDialog = class CropAndSaveImageDialog extends LoadWhile(LitE
         h1,
         p,
         cropperCSS,
-        css `
-      :host {
-        display: block;
-      }
-
-      md-dialog {
-        max-width: calc(100vw - 24px);
-        max-height: calc(100vh - 24px);
-      }
-
-      main {
-        display: flex;
-        position: relative;
-        align-self: center;
-      }
-
-      loading-animation {
-        display: flex;
-        flex-direction: column;
-        place-content: center;
-        place-items: center;
-        width: 100%;
-      }
-
-      loading-animation img {
-        height: 300px;
-      }
-
-      section[crop] {
-        display: grid;
-        width: 100%;
-        grid: 'cropper buttons' / 1fr 58px;
-      }
-
-      cropper-container {
-        grid-area: cropper;
-
-        display: block;
-        max-width: 800px;
-        max-height: 600px;
-        overflow: hidden;
-      }
-
-      cropper-container img {
-        display: block;
-        /* This rule is very important, please don't ignore this */
-        max-width: 100%;
-      }
-
-      crop-buttons {
-        grid-area: buttons;
-
-        display: grid;
-        align-content: start;
-        grid-auto-flow: row;
-
-        padding: 0 8px;
-        gap: 8px;
-      }
-
-      @media (max-width: 600px) {
-        section[crop] {
-          grid:
-            'cropper'
-            'buttons';
-        }
-
-        crop-buttons {
-          justify-content: end;
-          grid-auto-flow: column;
-          padding: 8px 0;
-        }
-      }
-
-      [hidden] {
-        display: none !important;
-      }
+        css `
+      :host {
+        display: block;
+      }
+
+      md-dialog {
+        max-width: calc(100vw - 24px);
+        max-height: calc(100vh - 24px);
+      }
+
+      main {
+        display: flex;
+        position: relative;
+        align-self: center;
+      }
+
+      loading-animation {
+        display: flex;
+        flex-direction: column;
+        place-content: center;
+        place-items: center;
+        width: 100%;
+      }
+
+      loading-animation img {
+        height: 300px;
+      }
+
+      section[crop] {
+        display: grid;
+        width: 100%;
+        grid: 'cropper buttons' / 1fr 58px;
+      }
+
+      cropper-container {
+        grid-area: cropper;
+
+        display: block;
+        max-width: 800px;
+        max-height: 600px;
+        overflow: hidden;
+      }
+
+      cropper-container img {
+        display: block;
+        /* This rule is very important, please don't ignore this */
+        max-width: 100%;
+      }
+
+      crop-buttons {
+        grid-area: buttons;
+
+        display: grid;
+        align-content: start;
+        grid-auto-flow: row;
+
+        padding: 0 8px;
+        gap: 8px;
+      }
+
+      @media (max-width: 600px) {
+        section[crop] {
+          grid:
+            'cropper'
+            'buttons';
+        }
+
+        crop-buttons {
+          justify-content: end;
+          grid-auto-flow: column;
+          padding: 8px 0;
+        }
+      }
+
+      [hidden] {
+        display: none !important;
+      }
     `,
     ]; }
     #saveCroppedImageFunc;
@@ -185,47 +185,47 @@ let CropAndSaveImageDialog = class CropAndSaveImageDialog extends LoadWhile(LitE
         return await imagePromise;
     }
     render() {
-        return html `
-      <md-dialog
-        focus-trap
+        return html `
+      <md-dialog
+        focus-trap
         @close=${(e) => {
             if (e.target.returnValue === 'cancel' || e.target.returnValue === 'cropped') {
                 return this.#resolve(e.target.returnValue);
             }
             e.preventDefault();
-        }}
-      >
-        <div slot="headline">Crop and save image</div>
-        <main slot="content">
-          <loading-animation ?hidden=${!this.isLoading}>
-            <img src=${LoaderGif} />
-            <p>Uploading image...</p>
-          </loading-animation>
-          <section crop ?hidden=${this.isLoading}>
-            <cropper-container ?circle=${this.options.shape === 'circle'}>
-              <img />
-            </cropper-container>
-            <crop-buttons>
-              <md-icon-button label="Rotate right" title="Rotate right" @click=${() => this.#cropper?.rotate(90)}
-                ><md-icon>rotate_right</md-icon></md-icon-button
-              >
-              <md-icon-button label="Rotate left" title="Rotate left" @click=${() => this.#cropper?.rotate(-90)}>
-                <md-icon>rotate_left</md-icon>
-              </md-icon-button>
-            </crop-buttons>
-          </section>
-        </main>
-        <div slot="actions">
-          <md-text-button
-            ?disabled=${this.isLoading}
+        }}
+      >
+        <div slot="headline">Crop and save image</div>
+        <main slot="content">
+          <loading-animation ?hidden=${!this.isLoading}>
+            <img src=${LoaderGif} />
+            <p>Uploading image...</p>
+          </loading-animation>
+          <section crop ?hidden=${this.isLoading}>
+            <cropper-container ?circle=${this.options.shape === 'circle'}>
+              <img />
+            </cropper-container>
+            <crop-buttons>
+              <md-icon-button label="Rotate right" title="Rotate right" @click=${() => this.#cropper?.rotate(90)}
+                ><md-icon>rotate_right</md-icon></md-icon-button
+              >
+              <md-icon-button label="Rotate left" title="Rotate left" @click=${() => this.#cropper?.rotate(-90)}>
+                <md-icon>rotate_left</md-icon>
+              </md-icon-button>
+            </crop-buttons>
+          </section>
+        </main>
+        <div slot="actions">
+          <md-text-button
+            ?disabled=${this.isLoading}
             @click=${() => {
             this.reset();
             this.dialog.close('cancel');
-        }}
-            >Cancel</md-text-button
-          >
-          <md-text-button
-            ?disabled=${this.isLoading}
+        }}
+            >Cancel</md-text-button
+          >
+          <md-text-button
+            ?disabled=${this.isLoading}
             @click=${async () => {
             this.isLoading = true;
             await this.updateComplete;
@@ -243,11 +243,11 @@ let CropAndSaveImageDialog = class CropAndSaveImageDialog extends LoadWhile(LitE
             await save;
             this.isLoading = false;
             this.dialog.close('cropped');
-        }}
-            >Save</md-text-button
-          >
-        </div>
-      </md-dialog>
+        }}
+            >Save</md-text-button
+          >
+        </div>
+      </md-dialog>
     `;
     }
 };