bromcom-ui-next 0.1.3 → 0.1.4

package/dist/cjs/app-globals-e8faea0d.js

@@ -1,43 +0,0 @@
-'use strict';
-
-function addHeadScript(obj) {
-    const head = document.head;
-    const script = document.createElement('script');
-    Object.keys(obj).forEach(key => {
-        script[key] = obj[key];
-    });
-    head.appendChild(script);
-}
-addHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });
-const FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';
-let element = (tag, p = {}) => Object.assign(document.createElement(tag), p);
-customElements.define('bcm-icon', class extends HTMLElement {
-    constructor() {
-        let href = FA_GLOBAL_CSS;
-        let linkFontAwesome = () => element('link', { rel: 'stylesheet', href });
-        let hasFontAwesome = document.querySelector(`link[href="${href}"]`);
-        if (!hasFontAwesome)
-            document.head.append(linkFontAwesome());
-        super().attachShadow({ mode: 'open' }).append(linkFontAwesome(), element('icon'));
-    }
-    connectedCallback() {
-        this.style.display = 'inline-block';
-        this.icon = this.icon;
-        //   this.onclick = evt => this.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: evt }));
-        //this.onmouseenter = evt => this.dispatchEvent(new CustomEvent('mouseenter', { bubbles: true, detail: evt }));
-        //this.onmouseleave = evt => this.dispatchEvent(new CustomEvent('mouseleave', { bubbles: true, detail: evt }));
-    }
-    get icon() {
-        return this.getAttribute('name') || this.getAttribute('icon-name');
-    }
-    set icon(icon) {
-        this.shadowRoot.querySelector('icon').innerHTML = `<i class="${icon}"></i>`;
-    }
-});
-const globalFn = () => { };
-
-const globalScripts = globalFn;
-
-exports.globalScripts = globalScripts;
-
-//# sourceMappingURL=app-globals-e8faea0d.js.map

package/dist/cjs/app-globals-e8faea0d.js.map

@@ -1 +0,0 @@
-{"file":"app-globals-e8faea0d.js","mappings":";;AAAA,SAAS,aAAa,CAAC,GAAG,EAAE;AAC5B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;AAChC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC1B;AACA,IAAI,IAAI,CAAC,WAAW,CAAC;AACrB;;AAEA,MAAM,aAAa,GAAG,qEAAqE,CAAC;;AAE5F,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,cAAc,WAAW,CAAC;;AAE5D,QAAQ,IAAI,IAAI,GAAG,aAAa,CAAC;;AAEjC,QAAQ,IAAI;AACZ,QAAQ,IAAI;AACZ,YAAY,QAAQ,CAAC,IAAI,CAAC;AAC1B,QAAQ,KAAK,EAAE,CAAC;AAChB,KAAK;AACL,IAAI,iBAAiB,GAAG;AACxB,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;AAC5C,QAAQ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;AAC9B;AACA;AACA;AACA,KAAK;AACL,IAAI,IAAI,IAAI,GAAG;AACf,QAAQ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;AAC3E,KAAK;AACL,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB;AACA,KAAK;AACL,CAAC,CAAC,CAAC;;;AChCS,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n  const head = document.head;\n  const script = document.createElement('script');\n  Object.keys(obj).forEach(key => {\n    script[key] = obj[key];\n  });\n  head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\nlet element = (tag, p = {}) => Object.assign(document.createElement(tag), p);\n\ncustomElements.define(\n  'bcm-icon',\n  class extends HTMLElement {\n    constructor() {\n      let href = FA_GLOBAL_CSS;\n      let linkFontAwesome = () => element('link', { rel: 'stylesheet', href });\n      let hasFontAwesome = document.querySelector(`link[href=\"${href}\"]`);\n      if (!hasFontAwesome) document.head.append(linkFontAwesome());\n      super().attachShadow({ mode: 'open' }).append(linkFontAwesome(), element('icon'));\n    }\n    connectedCallback() {\n      this.style.display = 'inline-block';\n      this.icon = this.icon;\n      //   this.onclick = evt => this.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: evt }));\n      //this.onmouseenter = evt => this.dispatchEvent(new CustomEvent('mouseenter', { bubbles: true, detail: evt }));\n      //this.onmouseleave = evt => this.dispatchEvent(new CustomEvent('mouseleave', { bubbles: true, detail: evt }));\n    }\n    get icon() {\n      return this.getAttribute('name') || this.getAttribute('icon-name');\n    }\n    set icon(icon) {\n      this.shadowRoot.querySelector('icon').innerHTML = `<i class=\"${icon}\"></i>`;\n    }\n  },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/bromcom-ui-next/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/bcm-avatar.cjs.entry.js

@@ -1,89 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-c36002ae.js');
-const index$1 = require('./index-a4eea4bb.js');
-
-const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:9999px}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmAvatarStyle0 = avatarCss;
-
-const BcmAvatar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**  Shape of the avatar (ellipse/square) */
-        this.shape = 'ellipse';
-        /** Size of the avatar */
-        this.size = 'medium';
-        /** Fallback icon class */
-        this.icon = 'fas fa-user';
-        /**  Status indicator animation */
-        this.blink = false;
-        this.isFallback = false;
-    }
-    getFirstLetters(name) {
-        const words = name.split(' ');
-        const initials = words.map(word => word.charAt(0).toUpperCase()).join('');
-        return initials.substring(0, 2);
-    }
-    render() {
-        const baseClass = index$1.cs('bcm-avatar bcm-ui-element bcm-ui-content-display', 'uppercase font-medium', 'inline-flex items-center justify-center', 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]', {
-            'shape-ellipse rounded-full': this.shape === 'ellipse',
-            'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',
-            'size-small text-size-4 w-6 h-6': this.size === 'small',
-            'size-medium text-size-5 w-8 h-8': this.size === 'medium',
-            'size-large text-size-6 w-10 h-10': this.size === 'large',
-        });
-        const badgeClass = index$1.cs('badge', {
-            'top-0 right-0': this.shape === 'ellipse',
-            '-top-0.5 -right-0.5': this.shape === 'square',
-        });
-        const imageClass = index$1.cs('image w-full h-full', {
-            'rounded-full': this.shape === 'ellipse',
-            'rounded-[--bcm-ui-radius]': this.shape === 'square',
-        });
-        let style = {};
-        if (this.color) {
-            const isColorTone = this.color.includes('-');
-            const _color = isColorTone ? this.color.split('-')[0] : this.color;
-            const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;
-            const textColor = `var(--bcm-ui-color-text-palette-${_color}`;
-            style = {
-                '--bcm-avatar-bg': bgColor,
-                '--bcm-avatar-text': textColor,
-            };
-        }
-        const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)
-            ? {
-                width: `${this.size}px`,
-                height: `${this.size}px`,
-                fontSize: `${+this.size / 2}px`,
-            }
-            : {};
-        const RenderContent = () => {
-            if (this.isFallback) {
-                if (this.name) {
-                    return this.getFirstLetters(this.name);
-                }
-                else {
-                    return index.h("i", { class: this.icon });
-                }
-            }
-            else if (this.image) {
-                return index.h("img", { class: imageClass, onError: () => (this.isFallback = true), src: this.image, alt: this.alt, "aria-label": this.alt || this.name || 'Avatar' });
-            }
-            else if (this.name) {
-                return this.getFirstLetters(this.name);
-            }
-            else {
-                return index.h("i", { class: this.icon });
-            }
-        };
-        return (index.h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: Object.assign(Object.assign({}, style), customSize) }, index.h(RenderContent, null), this.status && index.h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), index.h("slot", null)));
-    }
-};
-BcmAvatar.style = BcmAvatarStyle0;
-
-exports.bcm_avatar = BcmAvatar;
-
-//# sourceMappingURL=bcm-avatar.cjs.entry.js.map

package/dist/cjs/bcm-avatar.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bcm-avatar.entry.cjs.js","mappings":"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","names":["cs","h"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n  --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-avatar-text: var(--bcm-ui-color-text-default);\n  --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n  tag: 'bcm-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class BcmAvatar {\n  /** Source URL for avatar image */\n  @Prop()\n  image: string;\n\n  /** Alternative text for image */\n  @Prop()\n  alt: string;\n\n  /**  Shape of the avatar (ellipse/square) */\n  @Prop()\n  shape: AvatarShape = 'ellipse';\n\n  /** Size of the avatar */\n  @Prop()\n  size: AvatarSize = 'medium';\n\n  /** Custom background color */\n  @Prop()\n  color: string;\n\n  /** Fallback icon class */\n  @Prop()\n  icon: string = 'fas fa-user';\n\n  /**  Status indicator type */\n  @Prop()\n  status: AvatarStatus;\n\n  /**  Status indicator animation */\n  @Prop()\n  blink = false;\n\n  /**  Display name (used for initials) */\n  @Prop()\n  name: string;\n\n  @State() isFallback: boolean = false;\n\n  private getFirstLetters(name: string): string {\n    const words = name.split(' ');\n    const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n    return initials.substring(0, 2);\n  }\n\n  render() {\n    const baseClass = cs(\n      'bcm-avatar bcm-ui-element bcm-ui-content-display',\n      'uppercase font-medium',\n      'inline-flex items-center justify-center',\n      'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n      {\n        'shape-ellipse rounded-full': this.shape === 'ellipse',\n        'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n        'size-small text-size-4 w-6 h-6': this.size === 'small',\n        'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n        'size-large text-size-6 w-10 h-10': this.size === 'large',\n      },\n    );\n\n    const badgeClass = cs('badge', {\n      'top-0 right-0': this.shape === 'ellipse',\n      '-top-0.5 -right-0.5': this.shape === 'square',\n    });\n\n    const imageClass = cs('image w-full h-full', {\n      'rounded-full': this.shape === 'ellipse',\n      'rounded-[--bcm-ui-radius]': this.shape === 'square',\n    });\n\n    let style = {};\n\n    if (this.color) {\n      const isColorTone = this.color.includes('-');\n      const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n      const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n      const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n      style = {\n        '--bcm-avatar-bg': bgColor,\n        '--bcm-avatar-text': textColor,\n      };\n    }\n\n    const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n      ? {\n          width: `${this.size}px`,\n          height: `${this.size}px`,\n          fontSize: `${+this.size / 2}px`,\n        }\n      : {};\n\n    const RenderContent = () => {\n      if (this.isFallback) {\n        if (this.name) {\n          return this.getFirstLetters(this.name);\n        } else {\n          return <i class={this.icon}></i>;\n        }\n      } else if (this.image) {\n        return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n      } else if (this.name) {\n        return this.getFirstLetters(this.name);\n      } else {\n        return <i class={this.icon}></i>;\n      }\n    };\n\n    return (\n      <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n        <RenderContent />\n        {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}