@everymatrix/ui-skeleton 0.0.0

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { U as UiSkeleton } from './ui-skeleton-2473e87c.js';
+import './index-f5cf3f14.js';

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-f5cf3f14.js';
+export { s as setNonce } from './index-f5cf3f14.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[2],"height":[2],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[2],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/esm/ui-skeleton-2473e87c.js

@@ -0,0 +1,134 @@
+import { r as registerInstance, h } from './index-f5cf3f14.js';
+
+const uiSkeletonCss = ".Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Toggles skeleton animation
+         */
+        this.animation = true;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    updateStyles() {
+        if (this.primaryColor) {
+            this.skeletonContainer.style.setProperty('--emw-skeleton-primary-color', this.primaryColor);
+        }
+        if (this.secondaryColor) {
+            this.skeletonContainer.style.setProperty('--emw-skeleton-secondary-color', this.secondaryColor);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+        }
+    }
+    renderLogo() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            'background-color': `${this.color}`,
+            'border-radius': `${this.borderRadius}px`,
+            'margin-bottom': `${this.marginBottom}px`,
+            'margin-top': `${this.marginTop}px`,
+            'margin-left': `${this.marginLeft}px`,
+            'margin-right': `${this.marginRight}px`
+        };
+        return (h("div", { style: styles, class: "Skeleton Logo" }));
+    }
+    renderImage() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            'background-color': `${this.color}`,
+            'border-radius': `${this.borderRadius}px`,
+            'margin-bottom': `${this.marginBottom}px`,
+            'margin-top': `${this.marginTop}px`,
+            'margin-left': `${this.marginLeft}px`,
+            'margin-right': `${this.marginRight}px`
+        };
+        return (h("div", { style: styles, class: "Skeleton Image" }));
+    }
+    renderTitle() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            'background-color': `${this.color}`,
+            'border-radius': `${this.borderRadius}px`,
+            'margin-bottom': `${this.marginBottom}px`,
+            'margin-top': `${this.marginTop}px`,
+            'margin-left': `${this.marginLeft}px`,
+            'margin-right': `${this.marginRight}px`
+        };
+        return (h("div", { style: styles, class: "Skeleton Title" }));
+    }
+    renderText() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            'background-color': `${this.color}`,
+            'border-radius': `${this.borderRadius}px`,
+            'margin-bottom': `${this.marginBottom}px`,
+            'margin-top': `${this.marginTop}px`,
+            'margin-left': `${this.marginLeft}px`,
+            'margin-right': `${this.marginRight}px`
+        };
+        return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "Skeleton Text" }))));
+    }
+    renderRectangle() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            'backgroud-color': `${this.color}`,
+            'border-radius': `${this.borderRadius}px`,
+            'margin-bottom': `${this.marginBottom}px`,
+            'margin-top': `${this.marginTop}px`,
+            'margin-left': `${this.marginLeft}px`,
+            'margin-right': `${this.marginRight}px`
+        };
+        return (h("div", { style: styles, class: "Skeleton Rectangle" }));
+    }
+    renderCircle() {
+        const styles = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+            'background-color': `${this.color}`,
+            'margin-bottom': `${this.marginBottom}px`,
+            'margin-top': `${this.marginTop}px`,
+            'margin-left': `${this.marginLeft}px`,
+            'margin-right': `${this.marginRight}px`
+        };
+        return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    componentDidLoad() {
+        this.updateStyles();
+    }
+    render() {
+        return (this.handleStructure(this.structure));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"],
+        "primaryColor": ["updateStyles"],
+        "secondaryColor": ["updateStyles"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { UiSkeleton as U };

package/dist/esm/ui-skeleton.entry.js

@@ -0,0 +1,2 @@
+export { U as ui_skeleton } from './ui-skeleton-2473e87c.js';
+import './index-f5cf3f14.js';

package/dist/esm/ui-skeleton.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-f5cf3f14.js';
+export { s as setNonce } from './index-f5cf3f14.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[2],"height":[2],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[2],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+});

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/stencil.config.dev.js

@@ -0,0 +1,19 @@
+import { sass } from "@stencil/sass";
+export const config = {
+    namespace: 'ui-skeleton',
+    taskQueue: 'async',
+    sourceMap: false,
+    minifyJs: true,
+    extras: {
+        experimentalImportInjection: true
+    },
+    plugins: [sass()],
+    outputTargets: [
+        {
+            type: 'www'
+        },
+        {
+            type: 'docs-readme'
+        }
+    ]
+};

package/dist/stencil.config.js

@@ -0,0 +1,17 @@
+import { sass } from "@stencil/sass";
+export const config = {
+    namespace: 'ui-skeleton',
+    taskQueue: 'async',
+    sourceMap: false,
+    minifyJs: true,
+    extras: {
+        experimentalImportInjection: true
+    },
+    plugins: [sass()],
+    outputTargets: [
+        {
+            type: 'dist',
+            esmLoaderPath: '../loader'
+        }
+    ]
+};

package/dist/storybook/main.js

@@ -0,0 +1,21 @@
+import * as path from "path";
+const config = {
+    stories: ['../**/*.@(mdx|stories.@(js|ts|tsx))'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-dark-mode'],
+    docs: {
+        defaultName: 'Documentation',
+        autodocs: 'tag'
+    },
+    framework: {
+        name: '@storybook/web-components-vite',
+        options: {}
+    },
+    viteFinal: async (config) => {
+        return Object.assign(Object.assign({}, config), { resolve: {
+                alias: {
+                    'ui-skeleton': path.resolve(__dirname, '../../../../dist/packages/stencil/ui-skeleton')
+                }
+            } });
+    }
+};
+export default config;

package/dist/storybook/preview.js

@@ -0,0 +1,9 @@
+import { themes } from "@storybook/theming";
+export const parameters = {
+    darkMode: {
+        dark: Object.assign(Object.assign({}, themes.dark), { appBg: 'black' }),
+        light: Object.assign(Object.assign({}, themes.normal), { appBg: 'green' }),
+        current: 'light',
+        stylePreview: true
+    }
+};

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.dev.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/storybook/main.d.ts

@@ -0,0 +1,3 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+declare const config: StorybookConfig;
+export default config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/storybook/preview.d.ts

@@ -0,0 +1,70 @@
+export declare const parameters: {
+    darkMode: {
+        dark: {
+            appBg: string;
+            base: "light" | "dark";
+            colorPrimary: string;
+            colorSecondary: string;
+            appContentBg: string;
+            appPreviewBg: string;
+            appBorderColor: string;
+            appBorderRadius: number;
+            fontBase: string;
+            fontCode: string;
+            textColor: string;
+            textInverseColor: string;
+            textMutedColor: string;
+            barTextColor: string;
+            barHoverColor: string;
+            barSelectedColor: string;
+            barBg: string;
+            buttonBg: string;
+            buttonBorder: string;
+            booleanBg: string;
+            booleanSelectedBg: string;
+            inputBg: string;
+            inputBorder: string;
+            inputTextColor: string;
+            inputBorderRadius: number;
+            brandTitle?: string;
+            brandUrl?: string;
+            brandImage?: string;
+            brandTarget?: string;
+            gridCellSize?: number;
+        };
+        light: {
+            appBg: string;
+            base: "light" | "dark";
+            colorPrimary: string;
+            colorSecondary: string;
+            appContentBg: string;
+            appPreviewBg: string;
+            appBorderColor: string;
+            appBorderRadius: number;
+            fontBase: string;
+            fontCode: string;
+            textColor: string;
+            textInverseColor: string;
+            textMutedColor: string;
+            barTextColor: string;
+            barHoverColor: string;
+            barSelectedColor: string;
+            barBg: string;
+            buttonBg: string;
+            buttonBorder: string;
+            booleanBg: string;
+            booleanSelectedBg: string;
+            inputBg: string;
+            inputBorder: string;
+            inputTextColor: string;
+            inputBorderRadius: number;
+            brandTitle?: string;
+            brandUrl?: string;
+            brandImage?: string;
+            brandTarget?: string;
+            gridCellSize?: number;
+        };
+        current: string;
+        stylePreview: boolean;
+    };
+};

package/dist/types/components/ui-skeleton/index.d.ts

@@ -0,0 +1 @@
+export { UiSkeleton } from './ui-skeleton';

package/dist/types/components/ui-skeleton/ui-skeleton.d.ts

@@ -0,0 +1,71 @@
+export declare class UiSkeleton {
+    /**
+     * The structure of the skeleton
+     */
+    structure: 'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle';
+    /**
+     * Width of the element
+     */
+    width: number;
+    /**
+     * Height of the element
+     */
+    height: number;
+    /**
+     * The border radius of the element
+     */
+    borderRadius: number;
+    /**
+     * Margin bottom for the element
+     */
+    marginBottom: number;
+    /**
+     * Margin top for the element
+     */
+    marginTop: number;
+    /**
+     * Margin left for the element
+     */
+    marginLeft: number;
+    /**
+     * Margin right for the element
+     */
+    marginRight: number;
+    /**
+     * Toggles skeleton animation
+     */
+    animation: boolean;
+    /**
+     * Number of rows displayed - only for `text`
+     */
+    rows: number;
+    /**
+     * The size of the circle - only for `circle
+     */
+    size: number;
+    /**
+     * Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)
+     */
+    color: string;
+    /**
+     * Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)
+     */
+    primaryColor: string;
+    /**
+     * Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)
+     */
+    secondaryColor: string;
+    private skeletonContainer;
+    constructor();
+    handleStructureChange(newValue: any, oldValue: any): void;
+    updateStyles(): void;
+    handleStructure(structure: any): any;
+    renderLogo(): any;
+    renderImage(): any;
+    renderTitle(): any;
+    renderText(): any[];
+    renderRectangle(): any;
+    renderCircle(): any;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,149 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+export namespace Components {
+    interface UiSkeleton {
+        /**
+          * Toggles skeleton animation
+         */
+        "animation": boolean;
+        /**
+          * The border radius of the element
+         */
+        "borderRadius": number;
+        /**
+          * Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)
+         */
+        "color": string;
+        /**
+          * Height of the element
+         */
+        "height": number;
+        /**
+          * Margin bottom for the element
+         */
+        "marginBottom": number;
+        /**
+          * Margin left for the element
+         */
+        "marginLeft": number;
+        /**
+          * Margin right for the element
+         */
+        "marginRight": number;
+        /**
+          * Margin top for the element
+         */
+        "marginTop": number;
+        /**
+          * Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)
+         */
+        "primaryColor": string;
+        /**
+          * Number of rows displayed - only for `text`
+         */
+        "rows": number;
+        /**
+          * Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)
+         */
+        "secondaryColor": string;
+        /**
+          * The size of the circle - only for `circle
+         */
+        "size": number;
+        /**
+          * The structure of the skeleton
+         */
+        "structure": 'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle';
+        /**
+          * Width of the element
+         */
+        "width": number;
+    }
+}
+declare global {
+    interface HTMLUiSkeletonElement extends Components.UiSkeleton, HTMLStencilElement {
+    }
+    var HTMLUiSkeletonElement: {
+        prototype: HTMLUiSkeletonElement;
+        new (): HTMLUiSkeletonElement;
+    };
+    interface HTMLElementTagNameMap {
+        "ui-skeleton": HTMLUiSkeletonElement;
+    }
+}
+declare namespace LocalJSX {
+    interface UiSkeleton {
+        /**
+          * Toggles skeleton animation
+         */
+        "animation"?: boolean;
+        /**
+          * The border radius of the element
+         */
+        "borderRadius"?: number;
+        /**
+          * Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)
+         */
+        "color"?: string;
+        /**
+          * Height of the element
+         */
+        "height"?: number;
+        /**
+          * Margin bottom for the element
+         */
+        "marginBottom"?: number;
+        /**
+          * Margin left for the element
+         */
+        "marginLeft"?: number;
+        /**
+          * Margin right for the element
+         */
+        "marginRight"?: number;
+        /**
+          * Margin top for the element
+         */
+        "marginTop"?: number;
+        /**
+          * Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)
+         */
+        "primaryColor"?: string;
+        /**
+          * Number of rows displayed - only for `text`
+         */
+        "rows"?: number;
+        /**
+          * Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)
+         */
+        "secondaryColor"?: string;
+        /**
+          * The size of the circle - only for `circle
+         */
+        "size"?: number;
+        /**
+          * The structure of the skeleton
+         */
+        "structure"?: 'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle';
+        /**
+          * Width of the element
+         */
+        "width"?: number;
+    }
+    interface IntrinsicElements {
+        "ui-skeleton": UiSkeleton;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "ui-skeleton": LocalJSX.UiSkeleton & JSXBase.HTMLAttributes<HTMLUiSkeletonElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components/ui-skeleton';