bromcom-ui 2.8.0-rc.10-h → 2.8.0-rc.10

package/dist/types/global/helper/index.d.ts

@@ -0,0 +1 @@
+export * from "./toast";

package/dist/types/global/helper/toast.d.ts

@@ -0,0 +1,96 @@
+interface ToastOptions {
+  "id"?: string;
+  "message"?: string;
+  "status"?: "success" | "error" | "warning" | "info";
+  "description"?: string;
+  "duration"?: number;
+  "position"?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+  "message-icon"?: string;
+  "view-button"?: boolean;
+  "close-button"?: boolean;
+}
+interface ToastEvents {
+  bcmToastView?: (event: any) => void;
+  bcmToastClose?: (event: any) => void;
+  bcmToastOpen?: (event: any) => void;
+}
+export declare class Toast {
+  element: any;
+  options: ToastOptions & ToastEvents;
+  /**
+   * Creates an instance of Toast.
+   * @param {ToastOptions & ToastEvents} [options={}]
+   * @example
+   * const toast = new Toast();
+   * @example
+   * const toast = new Toast({
+   * id: "my-toast",
+   * message: "Hello World",
+   * status: "success",
+   * description: "This is a description",
+   * duration: 5000,
+   * position: "top",
+   * "message-icon": "check",
+   * "view-button": true,
+   * "close-button": true,
+   * bcmToastView: (event) => {
+   * // This Event fires when the view button is clicked
+   * // do something
+   * },
+   * bcmToastClose: (event) => {
+   * // This Event fires when the toast is closed
+   * // do something
+   * },
+   * bcmToastOpen: (event) => {
+   * // This Event fires when the toast is opened
+   * // do something
+   * }
+   * });
+   * toast.show();
+   */
+  constructor(options: ToastOptions & ToastEvents);
+  private createElement;
+  private listeners;
+  private setAttributes;
+  /**
+   * Shows the toast
+   * @returns {HTMLElement} The element that was shown
+   * @example
+   * const toast = new Toast();
+   * toast.show();
+   * @example
+   * const toast = new Toast();
+   * toast.show().then(() => {
+   *   // do something
+   * });
+   * @example
+   * const toast = new Toast();
+   * toast.show().then(() => {
+   *  // do something
+   * }).catch(() => {
+   * // do something else
+   * });
+   */
+  show(): any;
+  /**
+   * Hides the toast
+   * @returns {HTMLElement} The element that was hidden
+   * @example
+   * const toast = new Toast();
+   * toast.hide();
+   * @example
+   * const toast = new Toast();
+   * toast.hide().then(() => {
+   *    // do something
+   * });
+   * @example
+   * const toast = new Toast();
+   * toast.hide().then(() => {
+   *   // do something
+   * }).catch(() => {
+   *  // do something else
+   * });
+   */
+  hide(): any;
+}
+export {};

package/dist/types/helper/generate.d.ts

@@ -19,4 +19,7 @@ export declare class Generate {
   static setAttributes: (item: any, obj: any) => void;
   static computedStyle: (element: HTMLElement, property: string) => string;
   static getAncestor: (el: any, selector: any) => any;
+  static findParentElement: (element: any, selector: any) => any;
+  static observeElementRemoval(element: Element, callback: () => void): void;
+  static getTwColor(color: string, variable?: string): {};
 }

package/dist/types/helper/popover-helper.d.ts

@@ -7,14 +7,23 @@ export declare class Popover {
   color?: string;
   el?: HTMLElement;
   trigger?: string;
-  constructor({ content, message, targetId, placement, color, trigger }: {
+  openDelay: number;
+  closeDelay: number;
+  emitShow: () => void;
+  emitHide: () => void;
+  constructor({ content, message, targetId, placement, color, trigger, openDelay, closeDelay, emitShow, emitHide }: {
     content: any;
     message: any;
     targetId: any;
     placement?: string;
     color?: string;
     trigger?: string;
+    openDelay?: number;
+    closeDelay?: number;
+    emitShow?: () => void;
+    emitHide?: () => void;
   });
+  destroy: () => void;
   private bgColor;
   exepcitonColors: {
     white: string;
@@ -24,8 +33,9 @@ export declare class Popover {
   private init;
   update: () => void;
   listener: () => void;
+  removeListener: () => void;
   private calculatePosition;
-  show: () => void;
-  hide: () => void;
+  show: () => Promise<void>;
+  hide: () => Promise<void>;
   toggle: () => void;
 }

package/dist/types/helper/tooltip-helper.d.ts

@@ -6,20 +6,33 @@ export declare class Tooltip {
   color: string;
   el: HTMLElement;
   trigger: string;
-  constructor({ message, targetId, placement, color, trigger }: {
+  size: string;
+  openDelay: number;
+  closeDelay: number;
+  emitShow: () => void;
+  emitHide: () => void;
+  constructor({ message, targetId, placement, color, trigger, size, openDelay, closeDelay, emitShow, emitHide, }: {
     message: any;
     targetId: any;
     placement?: string;
     color?: string;
     trigger?: string;
+    size?: string;
+    openDelay?: number;
+    closeDelay?: number;
+    emitShow?: () => void;
+    emitHide?: () => void;
   });
+  destroy: () => void;
   private bgColor;
   private target;
+  private sizeClass;
   private init;
   update: () => void;
   listener: () => void;
+  removeListener: () => void;
   private calculatePosition;
-  show: () => void;
-  hide: () => void;
+  show: () => Promise<void>;
+  hide: () => Promise<void>;
   toggle: () => void;
 }

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { Components, JSX } from './components';
+export { Components, JSX } from "./components";

package/dist/types/models/bcm.d.ts

@@ -321,7 +321,8 @@ export declare namespace Bcm {
     url = "url",
     search = "search",
     tel = "tel",
-    hidden = "hidden"
+    hidden = "hidden",
+    color = "color"
   }
   enum KeyCode {
     backspace = 8,

package/dist/types/templates/input-template.d.ts

@@ -1,7 +1,7 @@
-import { FunctionalComponent } from '../stencil-public-runtime';
-import Bcm from '../models/bcm';
+import { FunctionalComponent } from "../stencil-public-runtime";
+import Bcm from "../models/bcm";
 interface InputTemplateProps extends Bcm.InputClickEvent {
-  elementType?: 'textarea' | 'input';
+  elementType?: "textarea" | "input";
   rows?: any;
   id?: any;
   internalId?: any;
@@ -29,6 +29,8 @@ interface InputTemplateProps extends Bcm.InputClickEvent {
   changePasswordVisibility?: () => void;
   handleClear?: (e: MouseEvent) => void;
   steps?: (type: any) => void;
+  isEyeDropperSupported?: () => boolean;
+  eyeDropper?: () => void;
 }
 export declare const InputTemplate: FunctionalComponent<InputTemplateProps>;
 export {};

package/dist/types/templates/list-template.d.ts

@@ -6,6 +6,7 @@ interface ListTemplateProps extends Bcm.ListClickEvent {
   bcmListContainer?: any;
   infoFooter?: any;
   searchPlaceholder?: string;
+  minSearchLength?: number;
   searchIsOnlyChilds?: boolean;
   value?: any;
   totalData?: any;

package/helper/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./toast";
+//# sourceMappingURL=index.d.ts.map

package/helper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/global/helper/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/helper/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./toast"), exports);

package/helper/toast.d.ts

@@ -0,0 +1,97 @@
+interface ToastOptions {
+    "id"?: string;
+    "message"?: string;
+    "status"?: "success" | "error" | "warning" | "info";
+    "description"?: string;
+    "duration"?: number;
+    "position"?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+    "message-icon"?: string;
+    "view-button"?: boolean;
+    "close-button"?: boolean;
+}
+interface ToastEvents {
+    bcmToastView?: (event: any) => void;
+    bcmToastClose?: (event: any) => void;
+    bcmToastOpen?: (event: any) => void;
+}
+export declare class Toast {
+    element: any;
+    options: ToastOptions & ToastEvents;
+    /**
+     * Creates an instance of Toast.
+     * @param {ToastOptions & ToastEvents} [options={}]
+     * @example
+     * const toast = new Toast();
+     * @example
+     * const toast = new Toast({
+     * id: "my-toast",
+     * message: "Hello World",
+     * status: "success",
+     * description: "This is a description",
+     * duration: 5000,
+     * position: "top",
+     * "message-icon": "check",
+     * "view-button": true,
+     * "close-button": true,
+     * bcmToastView: (event) => {
+     * // This Event fires when the view button is clicked
+     * // do something
+     * },
+     * bcmToastClose: (event) => {
+     * // This Event fires when the toast is closed
+     * // do something
+     * },
+     * bcmToastOpen: (event) => {
+     * // This Event fires when the toast is opened
+     * // do something
+     * }
+     * });
+     * toast.show();
+     */
+    constructor(options: ToastOptions & ToastEvents);
+    private createElement;
+    private listeners;
+    private setAttributes;
+    /**
+     * Shows the toast
+     * @returns {HTMLElement} The element that was shown
+     * @example
+     * const toast = new Toast();
+     * toast.show();
+     * @example
+     * const toast = new Toast();
+     * toast.show().then(() => {
+     *   // do something
+     * });
+     * @example
+     * const toast = new Toast();
+     * toast.show().then(() => {
+     *  // do something
+     * }).catch(() => {
+     * // do something else
+     * });
+     */
+    show(): any;
+    /**
+     * Hides the toast
+     * @returns {HTMLElement} The element that was hidden
+     * @example
+     * const toast = new Toast();
+     * toast.hide();
+     * @example
+     * const toast = new Toast();
+     * toast.hide().then(() => {
+     *    // do something
+     * });
+     * @example
+     * const toast = new Toast();
+     * toast.hide().then(() => {
+     *   // do something
+     * }).catch(() => {
+     *  // do something else
+     * });
+     */
+    hide(): any;
+}
+export {};
+//# sourceMappingURL=toast.d.ts.map

package/helper/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/global/helper/toast.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC;IACxF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,UAAU,WAAW;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC;AAED,qBAAa,KAAK;IACd,OAAO,EAAE,GAAG,CAAC;IACb,OAAO,EAAE,YAAY,GAAG,WAAW,CAAC;IAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;gBACS,OAAO,EAAE,YAAY,GAAG,WAAW;IAS/C,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa;IAMrB;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI;IAKJ;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI;CAIP"}

package/helper/toast.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+var Toast = /** @class */ (function () {
+    /**
+     * Creates an instance of Toast.
+     * @param {ToastOptions & ToastEvents} [options={}]
+     * @example
+     * const toast = new Toast();
+     * @example
+     * const toast = new Toast({
+     * id: "my-toast",
+     * message: "Hello World",
+     * status: "success",
+     * description: "This is a description",
+     * duration: 5000,
+     * position: "top",
+     * "message-icon": "check",
+     * "view-button": true,
+     * "close-button": true,
+     * bcmToastView: (event) => {
+     * // This Event fires when the view button is clicked
+     * // do something
+     * },
+     * bcmToastClose: (event) => {
+     * // This Event fires when the toast is closed
+     * // do something
+     * },
+     * bcmToastOpen: (event) => {
+     * // This Event fires when the toast is opened
+     * // do something
+     * }
+     * });
+     * toast.show();
+     */
+    function Toast(options) {
+        this.options = options;
+        this.createElement();
+        this.listeners();
+        this.setAttributes();
+        return this.element;
+    }
+    Toast.prototype.createElement = function () {
+        var _a;
+        var el;
+        ((_a = this.options) === null || _a === void 0 ? void 0 : _a.id) && (el = document.getElementById(this.options.id));
+        if (el) {
+            this.element = el;
+        }
+        else {
+            var tag = "bcm-toast";
+            this.element = document.createElement(tag);
+        }
+        document.body.appendChild(this.element);
+        return this.element;
+    };
+    Toast.prototype.listeners = function () {
+        this.options.bcmToastView && this.element.addEventListener("bcm-toast-view", this.options.bcmToastView);
+        this.options.bcmToastClose && this.element.addEventListener("bcm-toast-close", this.options.bcmToastClose);
+        this.options.bcmToastOpen && this.element.addEventListener("bcm-toast-open", this.options.bcmToastOpen);
+    };
+    Toast.prototype.setAttributes = function () {
+        for (var key in this.options) {
+            this.element.setAttribute(key, this.options[key]);
+        }
+    };
+    /**
+     * Shows the toast
+     * @returns {HTMLElement} The element that was shown
+     * @example
+     * const toast = new Toast();
+     * toast.show();
+     * @example
+     * const toast = new Toast();
+     * toast.show().then(() => {
+     *   // do something
+     * });
+     * @example
+     * const toast = new Toast();
+     * toast.show().then(() => {
+     *  // do something
+     * }).catch(() => {
+     * // do something else
+     * });
+     */
+    Toast.prototype.show = function () {
+        this.element.show();
+        return this.element;
+    };
+    /**
+     * Hides the toast
+     * @returns {HTMLElement} The element that was hidden
+     * @example
+     * const toast = new Toast();
+     * toast.hide();
+     * @example
+     * const toast = new Toast();
+     * toast.hide().then(() => {
+     *    // do something
+     * });
+     * @example
+     * const toast = new Toast();
+     * toast.hide().then(() => {
+     *   // do something
+     * }).catch(() => {
+     *  // do something else
+     * });
+     */
+    Toast.prototype.hide = function () {
+        this.element.hide();
+        return this.element;
+    };
+    return Toast;
+}());
+exports.Toast = Toast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bromcom-ui",
-  "version": "2.8.0-rc.10-h",
+  "version": "2.8.0-rc.10",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -12,16 +12,18 @@
   "unpkg": "dist/bromcom-ui/bromcom-ui.js",
   "files": [
     "dist/",
-    "loader/"
+    "loader/",
+    "helper/"
   ],
   "scripts": {
     "start": "npm-run-all clean:www -p dev:*",
     "clean:www": "rm -rf www",
     "dev:stencil": "stencil build --dev --watch --serve",
     "dev:tailwind": "tailwindcss -i ./src/directives.css -o ./src/global/tailwind.css --watch --minify",
-    "build": "run-s clean:dist clean:loader build:tailwind build:stencil build:aliases",
+    "build": "run-s clean:dist clean:loader clean:helper tsc-helper build:tailwind build:stencil build:aliases",
     "clean:dist": "rm -rf dist",
     "clean:loader": "rm -rf loader",
+    "clean:helper": "rm -rf helper",
     "build:tailwind": "tailwindcss -i ./src/directives.css -o ./src/global/tailwind.css --minify",
     "build:stencil": "stencil build --prod",
     "build:aliases": "tsc-alias -p tsconfig.aliases.json",
@@ -31,7 +33,9 @@
     "ds-version": "npm run build && npm version patch && npm run build",
     "storybook": "start-storybook -p 8000",
     "build:storybook": "build-storybook",
-    "generate:storybook": "npm run build && npm run build:storybook"
+    "generate:storybook": "npm run build && npm run build:storybook",
+    "tsc-helper": "npm run clean:helper && cd ./src/global/helper && tsc index.ts --declaration --declarationMap --allowJs --outDir ./../../../helper",
+    "format": "prettier --write \"src/**/*.tsx\""
   },
   "license": "MIT",
   "devDependencies": {
@@ -43,29 +47,36 @@
     "@stencil/core": "^2.17.1",
     "@stencil/sass": "^1.3.2",
     "@stencil/store": "^1.5.0",
-    "@storybook/addon-a11y": "^6.5.14",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.14",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-notes": "^5.3.21",
-    "@storybook/builder-webpack4": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/html": "^6.5.14",
-    "@storybook/manager-webpack4": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/html": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
-    "@types/node": "^18.7.1",
+    "@types/estree": "^1.0.0",
+    "@types/node": "^18.15.3",
     "babel-loader": "^8.2.0",
     "classnames": "^2.2.6",
     "cpy-cli": "^4.2.0",
     "fs-extra": "^11.1.0",
     "jsx-dom": "^6.4.23",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.3",
-    "prettier-plugin-tailwindcss": "^0.2.2",
-    "rollup-plugin-dotenv": "^0.3.0",
+    "prettier": "^2.8.7",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "prettier-plugin-tailwindcss": "^0.2.6",
+    "react": "^16.14.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^16.14.0",
+    "rollup": "^2.58.0",
+    "@rollup/plugin-replace": "^3.1.0",
+    "rollup-plugin-dotenv": "latest",
     "slugify": "^1.6.5",
     "snq": "^1.0.3",
     "storybook-fetch-addon": "^1.2.1",