@leavittsoftware/web 1.0.0

package/titanium/smart-attachment-input/cropper-styles.js

@@ -0,0 +1,311 @@
+import { css } from 'lit';
+/** Update when upgrading CropperJS */
+export const cropperCSS = css `
+  .cropper-container {
+    direction: ltr;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    -ms-touch-action: none;
+    touch-action: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .cropper-container img {
+    display: block;
+    height: 100%;
+    image-orientation: 0deg;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
+  }
+
+  .cropper-wrap-box,
+  .cropper-canvas,
+  .cropper-drag-box,
+  .cropper-crop-box,
+  .cropper-modal {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .cropper-wrap-box,
+  .cropper-canvas {
+    overflow: hidden;
+  }
+
+  .cropper-drag-box {
+    background-color: #fff;
+    opacity: 0;
+  }
+
+  .cropper-modal {
+    background-color: #000;
+    opacity: 0.5;
+  }
+
+  .cropper-view-box {
+    display: block;
+    height: 100%;
+    outline: 1px solid #39f;
+    outline-color: rgba(51, 153, 255, 0.75);
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .cropper-dashed {
+    border: 0 dashed #eee;
+    display: block;
+    opacity: 0.5;
+    position: absolute;
+  }
+
+  .cropper-dashed.dashed-h {
+    border-bottom-width: 1px;
+    border-top-width: 1px;
+    height: calc(100% / 3);
+    left: 0;
+    top: calc(100% / 3);
+    width: 100%;
+  }
+
+  .cropper-dashed.dashed-v {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    height: 100%;
+    left: calc(100% / 3);
+    top: 0;
+    width: calc(100% / 3);
+  }
+
+  .cropper-center {
+    display: block;
+    height: 0;
+    left: 50%;
+    opacity: 0.75;
+    position: absolute;
+    top: 50%;
+    width: 0;
+  }
+
+  .cropper-center::before,
+  .cropper-center::after {
+    background-color: #eee;
+    content: ' ';
+    display: block;
+    position: absolute;
+  }
+
+  .cropper-center::before {
+    height: 1px;
+    left: -3px;
+    top: 0;
+    width: 7px;
+  }
+
+  .cropper-center::after {
+    height: 7px;
+    left: 0;
+    top: -3px;
+    width: 1px;
+  }
+
+  .cropper-face,
+  .cropper-line,
+  .cropper-point {
+    display: block;
+    height: 100%;
+    opacity: 0.1;
+    position: absolute;
+    width: 100%;
+  }
+
+  .cropper-face {
+    background-color: #fff;
+    left: 0;
+    top: 0;
+  }
+
+  .cropper-line {
+    background-color: #39f;
+  }
+
+  .cropper-line.line-e {
+    cursor: ew-resize;
+    right: -3px;
+    top: 0;
+    width: 5px;
+  }
+
+  .cropper-line.line-n {
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
+    top: -3px;
+  }
+
+  .cropper-line.line-w {
+    cursor: ew-resize;
+    left: -3px;
+    top: 0;
+    width: 5px;
+  }
+
+  .cropper-line.line-s {
+    bottom: -3px;
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
+  }
+
+  .cropper-point {
+    background-color: #39f;
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+
+  .cropper-point.point-e {
+    cursor: ew-resize;
+    margin-top: -3px;
+    right: -3px;
+    top: 50%;
+  }
+
+  .cropper-point.point-n {
+    cursor: ns-resize;
+    left: 50%;
+    margin-left: -3px;
+    top: -3px;
+  }
+
+  .cropper-point.point-w {
+    cursor: ew-resize;
+    left: -3px;
+    margin-top: -3px;
+    top: 50%;
+  }
+
+  .cropper-point.point-s {
+    bottom: -3px;
+    cursor: s-resize;
+    left: 50%;
+    margin-left: -3px;
+  }
+
+  .cropper-point.point-ne {
+    cursor: nesw-resize;
+    right: -3px;
+    top: -3px;
+  }
+
+  .cropper-point.point-nw {
+    cursor: nwse-resize;
+    left: -3px;
+    top: -3px;
+  }
+
+  .cropper-point.point-sw {
+    bottom: -3px;
+    cursor: nesw-resize;
+    left: -3px;
+  }
+
+  .cropper-point.point-se {
+    bottom: -3px;
+    cursor: nwse-resize;
+    height: 20px;
+    opacity: 1;
+    right: -3px;
+    width: 20px;
+  }
+
+  @media (min-width: 768px) {
+    .cropper-point.point-se {
+      height: 15px;
+      width: 15px;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .cropper-point.point-se {
+      height: 10px;
+      width: 10px;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .cropper-point.point-se {
+      height: 5px;
+      opacity: 0.75;
+      width: 5px;
+    }
+  }
+
+  .cropper-point.point-se::before {
+    background-color: #39f;
+    bottom: -50%;
+    content: ' ';
+    display: block;
+    height: 200%;
+    opacity: 0;
+    position: absolute;
+    right: -50%;
+    width: 200%;
+  }
+
+  .cropper-invisible {
+    opacity: 0;
+  }
+
+  .cropper-bg {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+  }
+
+  .cropper-hide {
+    display: block;
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  .cropper-hidden {
+    display: none !important;
+  }
+
+  .cropper-move {
+    cursor: move;
+  }
+
+  .cropper-crop {
+    cursor: crosshair;
+  }
+
+  .cropper-disabled .cropper-drag-box,
+  .cropper-disabled .cropper-face,
+  .cropper-disabled .cropper-line,
+  .cropper-disabled .cropper-point {
+    cursor: not-allowed;
+  }
+
+  [circle] .cropper-view-box {
+    box-shadow: 0 0 0 1px #39f;
+    border-radius: 50%;
+    outline: 0;
+  }
+  [circle] .cropper-face {
+    background-color: inherit !important;
+  }
+  [circle] .cropper-view-box {
+    outline: inherit !important;
+  }
+`;
+//# sourceMappingURL=cropper-styles.js.map

package/titanium/smart-attachment-input/cropper-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropper-styles.js","sourceRoot":"","sources":["cropper-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,sCAAsC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmT5B,CAAC"}

package/titanium/smart-attachment-input/image-formats.d.ts

@@ -0,0 +1,5 @@
+export declare const imageFormats: string[];
+export declare function getExtension(filename: string): string;
+export declare function getFileIcon(extension: string): string;
+export declare function getFileBgIcon(extension: string): string;
+//# sourceMappingURL=image-formats.d.ts.map

package/titanium/smart-attachment-input/image-formats.js

@@ -0,0 +1,37 @@
+export const imageFormats = [
+    'tiff',
+    'pjp',
+    'jfif',
+    'bmp',
+    'gif',
+    'svg',
+    'png',
+    'xbm',
+    'dib',
+    'jxl',
+    'jpeg',
+    'svgz',
+    'jpg',
+    'webp',
+    'ico',
+    'tif',
+    'pjpeg',
+    'avif',
+];
+export function getExtension(filename) {
+    const parts = filename.split('.');
+    return parts?.[parts.length - 1] || '';
+}
+export function getFileIcon(extension) {
+    if (extension.toLowerCase() === 'pdf') {
+        return new URL('./images/icon-pdf.png', import.meta.url).href;
+    }
+    return new URL('./images/icon-other.png', import.meta.url).href;
+}
+export function getFileBgIcon(extension) {
+    if (extension.toLowerCase() === 'pdf') {
+        return new URL('./images/icon-pdf-bg.png', import.meta.url).href;
+    }
+    return new URL('./images/icon-other-bg.png', import.meta.url).href;
+}
+//# sourceMappingURL=image-formats.js.map

package/titanium/smart-attachment-input/image-formats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-formats.js","sourceRoot":"","sources":["image-formats.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM;IACN,KAAK;IACL,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,KAAK;IACL,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,QAAgB;IAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAClC,OAAO,KAAK,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,SAAiB;IAC3C,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;QACrC,OAAO,IAAI,GAAG,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;KAC/D;IACD,OAAO,IAAI,GAAG,CAAC,yBAAyB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,SAAiB;IAC7C,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE;QACrC,OAAO,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;KAClE;IACD,OAAO,IAAI,GAAG,CAAC,4BAA4B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AACrE,CAAC"}

package/titanium/smart-attachment-input/image-preview-dialog.d.ts

@@ -0,0 +1,21 @@
+import '@material/web/dialog/dialog';
+import '@material/web/icon/icon';
+import '@material/web/button/text-button';
+import { LitElement } from 'lit';
+import { MdDialog } from '@material/web/dialog/dialog';
+/**
+ * Image preview dialog
+ *
+ * @element image-preview-dialog
+ *
+ */
+export declare class ImagePreviewDialog extends LitElement {
+    protected imageUrl: string | undefined;
+    protected downloadSrc: string | undefined;
+    protected filename: string | undefined;
+    protected dialog: MdDialog;
+    open(imageUrl: string, downloadSrc?: string, filename?: string): Promise<void>;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=image-preview-dialog.d.ts.map

package/titanium/smart-attachment-input/image-preview-dialog.js

@@ -0,0 +1,83 @@
+import { __decorate } from "tslib";
+import '@material/web/dialog/dialog';
+import '@material/web/icon/icon';
+import '@material/web/button/text-button';
+import { css, html, LitElement } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { middleEllipsis } from '../../titanium/helpers/middle-ellipsis';
+/**
+ * Image preview dialog
+ *
+ * @element image-preview-dialog
+ *
+ */
+let ImagePreviewDialog = class ImagePreviewDialog extends LitElement {
+    async open(imageUrl, downloadSrc, filename) {
+        this.imageUrl = undefined; //prevent ghost images
+        this.filename = filename;
+        this.downloadSrc = downloadSrc;
+        this.imageUrl = imageUrl;
+        return this.dialog.show();
+    }
+    static { this.styles = [
+        css `
+      div[header] {
+        word-break: break-all;
+      }
+
+      md-dialog {
+        max-width: calc(100vw - 48px);
+        max-height: calc(100vh - 48px);
+      }
+
+      img {
+        width: 100%;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <md-dialog>
+        <div header slot="headline">${middleEllipsis(this.filename || 'Image preview', 60)}</div>
+        <img slot="content" draggable="false" src=${ifDefined(this.imageUrl)} />
+        <div slot="actions">
+          ${this.downloadSrc
+            ? html `<md-text-button
+                @click=${(e) => {
+                e.stopPropagation();
+                window.open(this.downloadSrc);
+            }}
+                ><md-icon slot="icon">file_download</md-icon>Download</md-text-button
+              >`
+            : html `<div></div>`}
+
+          <md-text-button
+            @click=${(e) => {
+            e.stopPropagation();
+            this.dialog.close('close');
+        }}
+            >Close</md-text-button
+          >
+        </div>
+      </md-dialog>
+    `;
+    }
+};
+__decorate([
+    state()
+], ImagePreviewDialog.prototype, "imageUrl", void 0);
+__decorate([
+    state()
+], ImagePreviewDialog.prototype, "downloadSrc", void 0);
+__decorate([
+    state()
+], ImagePreviewDialog.prototype, "filename", void 0);
+__decorate([
+    query('md-dialog')
+], ImagePreviewDialog.prototype, "dialog", void 0);
+ImagePreviewDialog = __decorate([
+    customElement('image-preview-dialog')
+], ImagePreviewDialog);
+export { ImagePreviewDialog };
+//# sourceMappingURL=image-preview-dialog.js.map

package/titanium/smart-attachment-input/image-preview-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-preview-dialog.js","sourceRoot":"","sources":["image-preview-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAGxE;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAOhD,KAAK,CAAC,IAAI,CAAC,QAAgB,EAAE,WAAoB,EAAE,QAAiB;QAClE,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC,sBAAsB;QACjD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;aAEM,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF,AAfY,CAeX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;sCAEuB,cAAc,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAe,EAAE,EAAE,CAAC;oDACtC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;YAEhE,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;yBACO,CAAC,CAAa,EAAE,EAAE;gBACzB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAChC,CAAC;;gBAED;YACJ,CAAC,CAAC,IAAI,CAAA,aAAa;;;qBAGV,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;;;;;KAKR,CAAC;IACJ,CAAC;;AAzDkB;IAAlB,KAAK,EAAE;oDAAwC;AAC7B;IAAlB,KAAK,EAAE;uDAA2C;AAChC;IAAlB,KAAK,EAAE;oDAAwC;AAElB;IAA7B,KAAK,CAAC,WAAW,CAAC;kDAA4B;AALpC,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA2D9B"}

package/titanium/smart-attachment-input/smart-attachment-input.d.ts

@@ -0,0 +1,126 @@
+import '../chip-multi-select/chip-multi-select';
+import './crop-and-save-image-dialog';
+import './image-preview-dialog';
+import '@material/web/dialog/dialog';
+import '@material/web/icon/icon';
+import '@material/web/button/text-button';
+import '@material/web/button/outlined-button';
+import '@material/web/chips/input-chip';
+import { LitElement } from 'lit';
+import { CropAndSaveImageDialog, CropperOptions } from './crop-and-save-image-dialog';
+import { SmartAttachment } from './type/smart-attachment';
+import { ImagePreviewDialog } from './image-preview-dialog';
+import { IDatabaseAttachment } from '@leavittsoftware/lg-core-typescript/lg.net.system';
+export type TitaniumSmartInputOptions = Cropper.Options & {
+    shape?: ' square' | 'circle';
+};
+/**
+ * Material outline image input with cropper
+ *
+ * @element titanium-smart-attachment-input
+ *
+ * @fires change - Fired when image is attached or removed from input.
+ *
+ *
+ */
+export declare class TitaniumSmartAttachmentInput extends LitElement {
+    #private;
+    protected files: SmartAttachment[];
+    protected isOver: boolean;
+    protected previewSrc: string | undefined;
+    protected input: HTMLInputElement;
+    protected imagePreviewDialog: ImagePreviewDialog;
+    protected cropperDialog: CropAndSaveImageDialog;
+    private confirmDeleteDialog;
+    private chipMultiSelect;
+    /**
+     *  File types to accept ex. "image/*,.pdf"
+     */
+    accept: string;
+    /**
+     *  Allow multiple attachments
+     */
+    multiple: boolean;
+    /**
+     *  Requires at least one attachment on validate
+     */
+    required: boolean;
+    /**
+     *  Whether or not the input should be disabled
+     */
+    disabled: boolean;
+    /**
+     *  Requires user to confirm when delete of an attachment is requested
+     */
+    confirmDelete: boolean;
+    /**
+     *  Delete confirmation header text
+     */
+    confirmDeleteHeader: string;
+    /**
+     *  Delete confirmation paragraph text
+     */
+    confirmDeleteText: string;
+    /**
+     *  Add button label text
+     */
+    addButtonLabel: string;
+    /**
+     *  Label of input
+     */
+    label: string;
+    /**
+     *  Sets supporting text
+     */
+    supportingText: string;
+    /**
+     *  Text to show when there are no attachments
+     */
+    noItemsText: string;
+    /**
+     *  Configurable CropperJs options.
+     */
+    options: CropperOptions;
+    /**
+     *  Image formats here are sent to the cropper
+     */
+    croppableImageFormats: Array<string>;
+    /**
+     *  File object of cropped image.
+     */
+    getFiles(): SmartAttachment[];
+    /**
+     *  Use to preset input to existing image.
+     */
+    setFiles(...files: {
+        fileName: string;
+        previewSrc?: string;
+        downloadSrc?: string;
+        id?: number;
+    }[]): void;
+    /**
+     *  Use to preset input to existing image.
+     */
+    setFilesFromDatabaseAttachments(...attachments: Partial<IDatabaseAttachment>[]): void;
+    /**
+     *  Returns true if the input passes validity checks.
+     */
+    checkValidity(): boolean;
+    /**
+     *  Runs checkValidity() method, and if it returns false, then it reports to the user that the input is invalid.
+     */
+    reportValidity(): boolean;
+    /**
+     *  Returns true if the images have been added, removed or edited.
+     */
+    hasChanges(): boolean;
+    /**
+     *  Resets the inputs state.
+     */
+    reset(): Promise<void>;
+    handleNewFile(files: FileList): Promise<void>;
+    toBase64(file: File): Promise<string | ArrayBuffer | null>;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=smart-attachment-input.d.ts.map