@soyfri/template 1.0.1 → 1.0.4

package/dist/assets/ts/components/_FeedbackComponent.ts

@@ -0,0 +1,152 @@
+import {
+  DataUtil,
+  ElementStyleUtil,
+  EventHandlerUtil,
+  getUniqueIdWithPrefix,
+  getAttributeValueByBreakpoint,
+} from '../_utils/index'
+
+export interface FeedbackOptions {
+  width?: number
+  placement?: string
+  content?: string
+  type?: string
+}
+
+const defaultFeedbackOptions: FeedbackOptions = {
+  width: 100,
+  placement: 'top-center',
+  content: '',
+  type: 'popup',
+}
+
+class FeedbackComponent {
+  element: HTMLElement
+  options: FeedbackOptions
+  instanceUid: string
+  shown: boolean
+
+  constructor(_element: HTMLElement, options: FeedbackOptions) {
+    this.element = _element
+    this.options = Object.assign(defaultFeedbackOptions, options)
+    this.instanceUid = getUniqueIdWithPrefix('feedback')
+    this.shown = false
+
+    // Event handlers
+    this._handlers() // will add in the show popup
+    DataUtil.set(this.element, 'feedback', this)
+  }
+
+  private _handlers = () => {
+    this.element.addEventListener('click', (e: Event) => {
+      e.preventDefault()
+      this._go()
+    })
+  }
+
+  private _go = () => {}
+
+  private showPopup = () => {
+    this.element = document.createElement('DIV')
+
+    this.element.classList.add('feedback feedback-popup')
+    this.element.innerHTML = this.options.content || ''
+
+    if (this.options.placement === 'top-center') {
+      this.setPopupTopCenterPosition()
+    }
+
+    document.body.appendChild(this.element)
+    this.element.classList.add('feedback-shown')
+    this.shown = true
+  }
+
+  private setPopupTopCenterPosition = () => {
+    const width = getAttributeValueByBreakpoint(this.options.width?.toString() || '0')
+    const height = ElementStyleUtil.get(this.element, 'height')
+    this.element.classList.add('feedback-top-center')
+    ElementStyleUtil.set(this.element, 'width', width)
+    ElementStyleUtil.set(this.element, 'left', '50%')
+    ElementStyleUtil.set(this.element, 'top', '-' + height)
+  }
+
+  private hidePopup = () => {
+    this.element.remove()
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public show = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.feedback.show') === false) {
+      return
+    }
+
+    if (this.options.type === 'popup') {
+      this.showPopup()
+    }
+
+    EventHandlerUtil.trigger(this.element, 'kt.feedback.shown')
+
+    return this
+  }
+
+  public hide = () => {
+    if (EventHandlerUtil.trigger(this.element, 'kt.feedback.hide') === false) {
+      return
+    }
+
+    if (this.options.type === 'popup') {
+      this.hidePopup()
+    }
+
+    this.shown = false
+    EventHandlerUtil.trigger(this.element, 'kt.feedback.hidden')
+    return this
+  }
+
+  public isShown = () => {
+    return this.isShown
+  }
+
+  public getElement = () => {
+    return this.element
+  }
+
+  // Event API
+  public on = (name: string, handler: Function) => {
+    return EventHandlerUtil.on(this.element, name, handler)
+  }
+
+  public one = (name: string, handler: Function) => {
+    return EventHandlerUtil.one(this.element, name, handler)
+  }
+
+  public off = (name: string, handerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handerId)
+  }
+
+  public trigger = (name: string, event: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Create Instances
+  public static createInstances(selector: string) {
+    throw new Error('not implemented')
+  }
+
+  // Static methods
+  public static hasInstace(element: HTMLElement) {
+    throw new Error('not implemented')
+  }
+
+  public static getInstance(element: HTMLElement) {
+    throw new Error('not implemented')
+  }
+
+  public static bootstrap(attr: string = '[data-Feedback]') {
+    throw new Error('not implemented')
+  }
+}
+
+export {FeedbackComponent, defaultFeedbackOptions}

package/dist/assets/ts/components/_ImageInputComponent.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultImageInputQueires = exports.defaultImageInputOptions = exports.ImageInputComponent = void 0;
-var index_1 = require("../_utils/index");
-var defaultImageInputOptions = {};
-exports.defaultImageInputOptions = defaultImageInputOptions;
-var defaultImageInputQueires = {
+import { EventHandlerUtil, DataUtil, getUniqueIdWithPrefix, getCSS } from '../_utils/index';
+const defaultImageInputOptions = {};
+const defaultImageInputQueires = {
     componentName: 'image-input',
     instanseQuery: '[data-kt-image-input]',
     inputQuery: 'input[type="file"]',
@@ -13,88 +9,23 @@ var defaultImageInputQueires = {
     removeQuery: '[data-kt-image-input-action="remove"]',
     hiddenQuery: 'input[type="hidden"]',
 };
-exports.defaultImageInputQueires = defaultImageInputQueires;
-var ImageInputComponent = /** @class */ (function () {
-    function ImageInputComponent(_element, _options, _queries) {
-        var _this = this;
-        this.src = '';
-        this.value = '';
-        // Event Handlers
-        this._change = function (e) {
-            e.preventDefault();
-            if (_this.inputElement !== null && _this.inputElement.files && _this.inputElement.files[0]) {
-                // Fire change event
-                if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.change', e) === false) {
-                    return;
-                }
-                var reader = new FileReader();
-                reader.onload = function (e) {
-                    if (_this.wrapperElement && e.target) {
-                        _this.wrapperElement.style.setProperty('background-image', "url('".concat(e.target.result, "')"));
-                    }
-                };
-                reader.readAsDataURL(_this.inputElement.files[0]);
-                _this.element.classList.add('image-input-changed');
-                _this.element.classList.remove('image-input-empty');
-                // Fire removed event
-                index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.changed', e);
-            }
-        };
-        this._cancel = function (e) {
-            e.preventDefault();
-            // Fire cancel event
-            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.cancel', e) === false) {
-                return;
-            }
-            _this.element.classList.remove('image-input-changed');
-            _this.element.classList.remove('image-input-empty');
-            _this.element.style.setProperty('background-image', _this.src);
-            if (_this.inputElement) {
-                _this.inputElement.value = '';
-            }
-            if (_this.hiddenElement !== null) {
-                _this.hiddenElement.value = '0';
-            }
-            // Fire canceled event
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.canceled', e);
-        };
-        this._remove = function (e) {
-            e.preventDefault();
-            // Fire remove event
-            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.remove', e) === false) {
-                return;
-            }
-            _this.element.classList.remove('image-input-changed');
-            _this.element.classList.add('image-input-empty');
-            if (_this.wrapperElement) {
-                _this.wrapperElement.style.setProperty('background-image', 'none');
-            }
-            if (_this.inputElement) {
-                _this.inputElement.value = '';
-            }
-            if (_this.hiddenElement !== null) {
-                _this.hiddenElement.value = '1';
-            }
-            // Fire removed event
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.removed', e);
-        };
-        // Event API
-        this.on = function (name, handler) {
-            return index_1.EventHandlerUtil.on(_this.element, name, handler);
-        };
-        this.one = function (name, handler) {
-            return index_1.EventHandlerUtil.one(_this.element, name, handler);
-        };
-        this.off = function (name, handlerId) {
-            return index_1.EventHandlerUtil.off(_this.element, name, handlerId);
-        };
-        this.trigger = function (name, event) {
-            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
-        };
+class ImageInputComponent {
+    element;
+    inputElement;
+    wrapperElement;
+    cancelElement;
+    removeElement;
+    hiddenElement;
+    src = '';
+    options;
+    queries;
+    uid;
+    value = '';
+    constructor(_element, _options, _queries) {
         // Variables
         this.options = Object.assign(defaultImageInputOptions, _options);
         this.queries = _queries;
-        this.uid = (0, index_1.getUniqueIdWithPrefix)(this.queries.componentName);
+        this.uid = getUniqueIdWithPrefix(this.queries.componentName);
         // Elements
         this.element = _element;
         this.inputElement = this.element.querySelector(this.queries.inputQuery);
@@ -103,13 +34,13 @@ var ImageInputComponent = /** @class */ (function () {
         this.removeElement = this.element.querySelector(this.queries.removeQuery);
         this.hiddenElement = this.element.querySelector(this.queries.hiddenQuery);
         if (this.wrapperElement) {
-            this.src = (0, index_1.getCSS)(this.wrapperElement, 'backgroundImage');
+            this.src = getCSS(this.wrapperElement, 'backgroundImage');
         }
         // Event Handlers
         this.handlers();
-        index_1.DataUtil.set(this.element, this.queries.componentName, this);
+        DataUtil.set(this.element, this.queries.componentName, this);
     }
-    ImageInputComponent.prototype.handlers = function () {
+    handlers() {
         this.element.addEventListener('change', this._change);
         if (this.cancelElement) {
             this.cancelElement.addEventListener('click', this._cancel);
@@ -117,60 +48,122 @@ var ImageInputComponent = /** @class */ (function () {
         if (this.removeElement) {
             this.removeElement.addEventListener('click', this._cancel);
         }
+    }
+    // Event Handlers
+    _change = (e) => {
+        e.preventDefault();
+        if (this.inputElement !== null && this.inputElement.files && this.inputElement.files[0]) {
+            // Fire change event
+            if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.change', e) === false) {
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                if (this.wrapperElement && e.target) {
+                    this.wrapperElement.style.setProperty('background-image', `url('${e.target.result}')`);
+                }
+            };
+            reader.readAsDataURL(this.inputElement.files[0]);
+            this.element.classList.add('image-input-changed');
+            this.element.classList.remove('image-input-empty');
+            // Fire removed event
+            EventHandlerUtil.trigger(this.element, 'kt.imageinput.changed', e);
+        }
+    };
+    _cancel = (e) => {
+        e.preventDefault();
+        // Fire cancel event
+        if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.cancel', e) === false) {
+            return;
+        }
+        this.element.classList.remove('image-input-changed');
+        this.element.classList.remove('image-input-empty');
+        this.element.style.setProperty('background-image', this.src);
+        if (this.inputElement) {
+            this.inputElement.value = '';
+        }
+        if (this.hiddenElement !== null) {
+            this.hiddenElement.value = '0';
+        }
+        // Fire canceled event
+        EventHandlerUtil.trigger(this.element, 'kt.imageinput.canceled', e);
+    };
+    _remove = (e) => {
+        e.preventDefault();
+        // Fire remove event
+        if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.remove', e) === false) {
+            return;
+        }
+        this.element.classList.remove('image-input-changed');
+        this.element.classList.add('image-input-empty');
+        if (this.wrapperElement) {
+            this.wrapperElement.style.setProperty('background-image', 'none');
+        }
+        if (this.inputElement) {
+            this.inputElement.value = '';
+        }
+        if (this.hiddenElement !== null) {
+            this.hiddenElement.value = '1';
+        }
+        // Fire removed event
+        EventHandlerUtil.trigger(this.element, 'kt.imageinput.removed', e);
     };
     ///////////////////////
     // ** Public API  ** //
     ///////////////////////
-    ImageInputComponent.prototype.getInputElement = function () {
+    getInputElement() {
         return this.inputElement;
-    };
-    ImageInputComponent.prototype.getElement = function () {
+    }
+    getElement() {
         return this.element;
+    }
+    // Event API
+    on = (name, handler) => {
+        return EventHandlerUtil.on(this.element, name, handler);
+    };
+    one = (name, handler) => {
+        return EventHandlerUtil.one(this.element, name, handler);
+    };
+    off = (name, handlerId) => {
+        return EventHandlerUtil.off(this.element, name, handlerId);
+    };
+    trigger = (name, event) => {
+        return EventHandlerUtil.trigger(this.element, name, event);
     };
     // Static methods
-    ImageInputComponent.getInstance = function (el, componentName) {
-        if (componentName === void 0) { componentName = defaultImageInputQueires.componentName; }
-        var ImageInput = index_1.DataUtil.get(el, componentName);
+    static getInstance = (el, componentName = defaultImageInputQueires.componentName) => {
+        const ImageInput = DataUtil.get(el, componentName);
         if (ImageInput) {
             return ImageInput;
         }
     };
-    ImageInputComponent.createInstances = function (selector, options, queries) {
-        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
-        if (options === void 0) { options = defaultImageInputOptions; }
-        if (queries === void 0) { queries = defaultImageInputQueires; }
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (el) {
-            var item = el;
-            var ImageInput = ImageInputComponent.getInstance(item);
+    static createInstances = (selector = defaultImageInputQueires.instanseQuery, options = defaultImageInputOptions, queries = defaultImageInputQueires) => {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((el) => {
+            const item = el;
+            let ImageInput = ImageInputComponent.getInstance(item);
             if (!ImageInput) {
                 ImageInput = new ImageInputComponent(item, options, queries);
             }
         });
     };
-    ImageInputComponent.createInsance = function (selector, options, queries) {
-        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
-        if (options === void 0) { options = defaultImageInputOptions; }
-        if (queries === void 0) { queries = defaultImageInputQueires; }
-        var element = document.body.querySelector(selector);
+    static createInsance = (selector = defaultImageInputQueires.instanseQuery, options = defaultImageInputOptions, queries = defaultImageInputQueires) => {
+        const element = document.body.querySelector(selector);
         if (!element) {
             return;
         }
-        var item = element;
-        var ImageInput = ImageInputComponent.getInstance(item);
+        const item = element;
+        let ImageInput = ImageInputComponent.getInstance(item);
         if (!ImageInput) {
             ImageInput = new ImageInputComponent(item, options, queries);
         }
         return ImageInput;
     };
-    ImageInputComponent.bootstrap = function (selector) {
-        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
+    static bootstrap = (selector = defaultImageInputQueires.instanseQuery) => {
         ImageInputComponent.createInstances(selector);
     };
-    ImageInputComponent.reinitialization = function (selector) {
-        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
+    static reinitialization = (selector = defaultImageInputQueires.instanseQuery) => {
         ImageInputComponent.createInstances(selector);
     };
-    return ImageInputComponent;
-}());
-exports.ImageInputComponent = ImageInputComponent;
+}
+export { ImageInputComponent, defaultImageInputOptions, defaultImageInputQueires };

package/dist/assets/ts/components/_ImageInputComponent.ts

@@ -0,0 +1,229 @@
+import {EventHandlerUtil, DataUtil, getUniqueIdWithPrefix, getCSS} from '../_utils/index'
+
+export interface IImageInputOptions {}
+
+export interface IImageInputQueries {
+  componentName: string
+  instanseQuery: string
+  inputQuery: string
+  wrapperQuery: string
+  cancelQuery: string
+  removeQuery: string
+  hiddenQuery: string
+}
+
+const defaultImageInputOptions = {}
+
+const defaultImageInputQueires: IImageInputQueries = {
+  componentName: 'image-input',
+  instanseQuery: '[data-kt-image-input]',
+  inputQuery: 'input[type="file"]',
+  wrapperQuery: '.image-input-wrapper',
+  cancelQuery: '[data-kt-image-input-action="cancel"]',
+  removeQuery: '[data-kt-image-input-action="remove"]',
+  hiddenQuery: 'input[type="hidden"]',
+}
+
+class ImageInputComponent {
+  element: HTMLElement
+  inputElement: HTMLInputElement | null
+  wrapperElement: HTMLElement | null
+  cancelElement: HTMLElement | null
+  removeElement: HTMLElement | null
+  hiddenElement: HTMLInputElement | null
+  src: string = ''
+  options: IImageInputOptions
+  queries: IImageInputQueries
+  uid: string
+  value: string = ''
+
+  constructor(_element: HTMLElement, _options: IImageInputOptions, _queries: IImageInputQueries) {
+    // Variables
+    this.options = Object.assign(defaultImageInputOptions, _options)
+    this.queries = _queries
+    this.uid = getUniqueIdWithPrefix(this.queries.componentName)
+
+    // Elements
+    this.element = _element
+    this.inputElement = this.element.querySelector(this.queries.inputQuery)
+    this.wrapperElement = this.element.querySelector(this.queries.wrapperQuery)
+    this.cancelElement = this.element.querySelector(this.queries.cancelQuery)
+    this.removeElement = this.element.querySelector(this.queries.removeQuery)
+    this.hiddenElement = this.element.querySelector(this.queries.hiddenQuery)
+    if (this.wrapperElement) {
+      this.src = getCSS(this.wrapperElement, 'backgroundImage')
+    }
+
+    // Event Handlers
+    this.handlers()
+
+    DataUtil.set(this.element, this.queries.componentName, this)
+  }
+
+  private handlers(): void {
+    this.element.addEventListener('change', this._change)
+    if (this.cancelElement) {
+      this.cancelElement.addEventListener('click', this._cancel)
+    }
+
+    if (this.removeElement) {
+      this.removeElement.addEventListener('click', this._cancel)
+    }
+  }
+
+  // Event Handlers
+  private _change = (e: Event) => {
+    e.preventDefault()
+
+    if (this.inputElement !== null && this.inputElement.files && this.inputElement.files[0]) {
+      // Fire change event
+      if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.change', e) === false) {
+        return
+      }
+
+      const reader = new FileReader()
+
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        if (this.wrapperElement && e.target) {
+          this.wrapperElement.style.setProperty('background-image', `url('${e.target.result}')`)
+        }
+      }
+
+      reader.readAsDataURL(this.inputElement.files[0])
+      this.element.classList.add('image-input-changed')
+      this.element.classList.remove('image-input-empty')
+
+      // Fire removed event
+      EventHandlerUtil.trigger(this.element, 'kt.imageinput.changed', e)
+    }
+  }
+
+  private _cancel = (e: Event) => {
+    e.preventDefault()
+
+    // Fire cancel event
+    if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.cancel', e) === false) {
+      return
+    }
+
+    this.element.classList.remove('image-input-changed')
+    this.element.classList.remove('image-input-empty')
+    this.element.style.setProperty('background-image', this.src)
+    if (this.inputElement) {
+      this.inputElement.value = ''
+    }
+
+    if (this.hiddenElement !== null) {
+      this.hiddenElement.value = '0'
+    }
+
+    // Fire canceled event
+    EventHandlerUtil.trigger(this.element, 'kt.imageinput.canceled', e)
+  }
+
+  private _remove = (e: Event) => {
+    e.preventDefault()
+
+    // Fire remove event
+    if (EventHandlerUtil.trigger(this.element, 'kt.imageinput.remove', e) === false) {
+      return
+    }
+
+    this.element.classList.remove('image-input-changed')
+    this.element.classList.add('image-input-empty')
+    if (this.wrapperElement) {
+      this.wrapperElement.style.setProperty('background-image', 'none')
+    }
+
+    if (this.inputElement) {
+      this.inputElement.value = ''
+    }
+
+    if (this.hiddenElement !== null) {
+      this.hiddenElement.value = '1'
+    }
+
+    // Fire removed event
+    EventHandlerUtil.trigger(this.element, 'kt.imageinput.removed', e)
+  }
+
+  ///////////////////////
+  // ** Public API  ** //
+  ///////////////////////
+  public getInputElement(): HTMLInputElement | null {
+    return this.inputElement
+  }
+
+  public getElement(): HTMLElement {
+    return this.element
+  }
+
+  // Event API
+  public on = (name: string, handler: Function) => {
+    return EventHandlerUtil.on(this.element, name, handler)
+  }
+
+  public one = (name: string, handler: Function) => {
+    return EventHandlerUtil.one(this.element, name, handler)
+  }
+
+  public off = (name: string, handlerId: string) => {
+    return EventHandlerUtil.off(this.element, name, handlerId)
+  }
+
+  public trigger = (name: string, event: Event) => {
+    return EventHandlerUtil.trigger(this.element, name, event)
+  }
+
+  // Static methods
+  public static getInstance = (
+    el: HTMLElement,
+    componentName: string = defaultImageInputQueires.componentName
+  ): ImageInputComponent | undefined => {
+    const ImageInput = DataUtil.get(el, componentName)
+    if (ImageInput) {
+      return ImageInput as ImageInputComponent
+    }
+  }
+
+  public static createInstances = (
+    selector: string = defaultImageInputQueires.instanseQuery,
+    options: IImageInputOptions = defaultImageInputOptions,
+    queries: IImageInputQueries = defaultImageInputQueires
+  ) => {
+    const elements = document.body.querySelectorAll(selector)
+    elements.forEach((el) => {
+      const item = el as HTMLElement
+      let ImageInput = ImageInputComponent.getInstance(item)
+      if (!ImageInput) {
+        ImageInput = new ImageInputComponent(item, options, queries)
+      }
+    })
+  }
+
+  public static createInsance = (
+    selector: string = defaultImageInputQueires.instanseQuery,
+    options: IImageInputOptions = defaultImageInputOptions,
+    queries: IImageInputQueries = defaultImageInputQueires
+  ): ImageInputComponent | undefined => {
+    const element = document.body.querySelector(selector)
+    if (!element) {
+      return
+    }
+    const item = element as HTMLElement
+    let ImageInput = ImageInputComponent.getInstance(item)
+    if (!ImageInput) {
+      ImageInput = new ImageInputComponent(item, options, queries)
+    }
+    return ImageInput
+  }
+
+  public static bootstrap = (selector: string = defaultImageInputQueires.instanseQuery) => {
+    ImageInputComponent.createInstances(selector)
+  }
+
+  public static reinitialization = (selector: string = defaultImageInputQueires.instanseQuery) => {
+    ImageInputComponent.createInstances(selector)
+  }
+}
+export {ImageInputComponent, defaultImageInputOptions, defaultImageInputQueires}