@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-avatar/avatar.stories.js

@@ -0,0 +1,175 @@
+import { v4 as uuid } from "uuid";
+export default {
+    title: 'Components/Avatar',
+};
+const script = ({ id }) => `
+    (function() {
+        const avatar = document.getElementById("${id}");
+        avatar.addEventListener('click', e => e.preventDefault());
+    })();
+`;
+export const Avatar = ({ placeholder, name, size, color, status, link, disabled }) => {
+    const id = uuid();
+    let attrs = '';
+    if (placeholder === '')
+        attrs += ` src="https://placebear.com/128/128"`;
+    if (name !== '')
+        attrs += ` name="${name}"`;
+    if (size !== 'default')
+        attrs += ` size="${size}"`;
+    if (color !== 'secondary')
+        attrs += ` color="${color}"`;
+    if (status !== 'none')
+        attrs += ` status="${status}"`;
+    if (link)
+        attrs += ` href="#"`;
+    if (disabled)
+        attrs += ` disabled`;
+    return `<xpl-avatar id="${id}"${attrs}>${placeholder}</xpl-avatar><script>${script({ id })}</script>`;
+};
+Avatar.argTypes = {
+    placeholder: {
+        type: { name: 'string', required: false },
+    },
+    name: {
+        type: { name: 'string', required: false },
+    },
+    size: {
+        options: ['default', 'md', 'sm'],
+        control: {
+            type: 'select',
+        },
+    },
+    color: {
+        options: ['green', 'yellow', 'pink', 'primary', 'secondary'],
+        control: {
+            type: 'select',
+        },
+    },
+    status: {
+        options: ['none', 'active', 'warning', 'inactive'],
+        control: {
+            type: 'select',
+        },
+    },
+    link: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    disabled: {
+        control: {
+            type: 'boolean',
+        },
+    },
+};
+Avatar.args = {
+    placeholder: '',
+    name: 'Firstname Lastname',
+    size: 'default',
+    color: 'secondary',
+    status: 'none',
+    link: false,
+    disabled: false,
+};
+Avatar.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: (({ placeholder, name, size, color, status, link, disabled }) => {
+            let attrs = '';
+            if (placeholder === '')
+                attrs += ` src="image.png"`;
+            if (name !== '')
+                attrs += ` name="${name}"`;
+            if (size !== 'default')
+                attrs += ` size="${size}"`;
+            if (color !== 'secondary')
+                attrs += ` color="${color}"`;
+            if (status !== 'none')
+                attrs += ` status="${status}"`;
+            if (link)
+                attrs += ` href="#"`;
+            if (disabled)
+                attrs += ` disabled`;
+            return `<xpl-avatar${attrs}>${placeholder}</xpl-avatar>`;
+        })(Avatar.args),
+    },
+    html: {
+        render: (({ placeholder, name, size, color, status, link, disabled }) => {
+            let className = 'xpl-avatar';
+            if (size)
+                className += ` xpl-avatar--${size}`;
+            if (color)
+                className += ` xpl-avatar--${color}`;
+            let attrs = '';
+            if (link)
+                attrs += ` href="#"`;
+            let tag = link && !disabled ? 'a' : 'div';
+            if (link && disabled) {
+                className += ' xpl-avatar--disabled';
+                // do not show href
+                attrs = '';
+            }
+            return `
+                <${tag} class="${className}"${attrs}>
+                <div>
+                ${!placeholder
+                ? `  <img alt="${name}" src="image.png" />`
+                : `  <div class="xpl-avatar__placeholder">${placeholder}</div>`}${status !== 'none'
+                ? `
+                            <div class="xpl-avatar__dot--${status}"></div>`
+                : ''}
+            </div>
+                </${tag}>
+            `;
+        })(Avatar.args),
+    },
+};
+/* export const AvatarGroup = ({ size, reverse }) => {
+    let className = "xpl-avatar-group";
+    if (size !== "default") className += " xpl-avatar-group--" + size;
+    if (reverse) className += " xpl-avatar-group--reverse";
+    return `<div class="${className}">
+        <img
+            src="https://placebear.com/128/128"
+            alt=""
+        /><img
+            src="https://placebear.com/128/128"
+            alt=""
+        /><img
+            src="https://placebear.com/128/128"
+            alt=""
+        /><img
+            src="https://placebear.com/128/128"
+            alt=""
+        /><img
+            src="https://placebear.com/128/128"
+            alt=""
+        />
+    </div>`;
+};
+
+AvatarGroup.argTypes = {
+    size: {
+        options: ["s", "default", "l"],
+        control: {
+        type: "select",
+        },
+    },
+    reverse: {
+        control: {
+            type: "boolean",
+        },
+    },
+};
+
+AvatarGroup.parameters = {
+    layout: "centered",
+};
+
+AvatarGroup.args = {
+    size: "default",
+    reverse: false,
+};
+*/
+//# sourceMappingURL=avatar.stories.js.map

package/dist/collection/components/xplor-avatar/avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.stories.js","sourceRoot":"","sources":["../../../src/components/xplor-avatar/avatar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuid } from 'uuid';\n\nexport default {\n  title: 'Components/Avatar',\n};\n\nconst script = ({ id }) => `\n    (function() {\n        const avatar = document.getElementById(\"${id}\");\n        avatar.addEventListener('click', e => e.preventDefault());\n    })();\n`;\n\nexport const Avatar = ({ placeholder, name, size, color, status, link, disabled }) => {\n  const id = uuid();\n  let attrs = '';\n  if (placeholder === '') attrs += ` src=\"https://placebear.com/128/128\"`;\n  if (name !== '') attrs += ` name=\"${name}\"`;\n  if (size !== 'default') attrs += ` size=\"${size}\"`;\n  if (color !== 'secondary') attrs += ` color=\"${color}\"`;\n  if (status !== 'none') attrs += ` status=\"${status}\"`;\n  if (link) attrs += ` href=\"#\"`;\n  if (disabled) attrs += ` disabled`;\n  return `<xpl-avatar id=\"${id}\"${attrs}>${placeholder}</xpl-avatar><script>${script({ id })}</script>`;\n};\n\nAvatar.argTypes = {\n  placeholder: {\n    type: { name: 'string', required: false },\n  },\n  name: {\n    type: { name: 'string', required: false },\n  },\n  size: {\n    options: ['default', 'md', 'sm'],\n    control: {\n      type: 'select',\n    },\n  },\n  color: {\n    options: ['green', 'yellow', 'pink', 'primary', 'secondary'],\n    control: {\n      type: 'select',\n    },\n  },\n  status: {\n    options: ['none', 'active', 'warning', 'inactive'],\n    control: {\n      type: 'select',\n    },\n  },\n  link: {\n    control: {\n      type: 'boolean',\n    },\n  },\n  disabled: {\n    control: {\n      type: 'boolean',\n    },\n  },\n};\n\nAvatar.args = {\n  placeholder: '',\n  name: 'Firstname Lastname',\n  size: 'default',\n  color: 'secondary',\n  status: 'none',\n  link: false,\n  disabled: false,\n};\n\nAvatar.parameters = {\n  layout: 'centered',\n  'web-component': {\n    render: (({ placeholder, name, size, color, status, link, disabled }) => {\n      let attrs = '';\n      if (placeholder === '') attrs += ` src=\"image.png\"`;\n      if (name !== '') attrs += ` name=\"${name}\"`;\n      if (size !== 'default') attrs += ` size=\"${size}\"`;\n      if (color !== 'secondary') attrs += ` color=\"${color}\"`;\n      if (status !== 'none') attrs += ` status=\"${status}\"`;\n      if (link) attrs += ` href=\"#\"`;\n      if (disabled) attrs += ` disabled`;\n      return `<xpl-avatar${attrs}>${placeholder}</xpl-avatar>`;\n    })(Avatar.args),\n  },\n  html: {\n    render: (({ placeholder, name, size, color, status, link, disabled }) => {\n      let className = 'xpl-avatar';\n      if (size) className += ` xpl-avatar--${size}`;\n      if (color) className += ` xpl-avatar--${color}`;\n\n      let attrs = '';\n      if (link) attrs += ` href=\"#\"`;\n\n      let tag = link && !disabled ? 'a' : 'div';\n      if (link && disabled) {\n        className += ' xpl-avatar--disabled';\n        // do not show href\n        attrs = '';\n      }\n\n      return `\n                <${tag} class=\"${className}\"${attrs}>\n                <div>\n                ${\n                  !placeholder\n                    ? `  <img alt=\"${name}\" src=\"image.png\" />`\n                    : `  <div class=\"xpl-avatar__placeholder\">${placeholder}</div>`\n                }${\n                  status !== 'none'\n                    ? `\n                            <div class=\"xpl-avatar__dot--${status}\"></div>`\n                    : ''\n                }\n            </div>\n                </${tag}>\n            `;\n    })(Avatar.args),\n  },\n};\n\n/* export const AvatarGroup = ({ size, reverse }) => {\n    let className = \"xpl-avatar-group\";\n    if (size !== \"default\") className += \" xpl-avatar-group--\" + size;\n    if (reverse) className += \" xpl-avatar-group--reverse\";\n    return `<div class=\"${className}\">\n        <img\n            src=\"https://placebear.com/128/128\"\n            alt=\"\"\n        /><img\n            src=\"https://placebear.com/128/128\"\n            alt=\"\"\n        /><img\n            src=\"https://placebear.com/128/128\"\n            alt=\"\"\n        /><img\n            src=\"https://placebear.com/128/128\"\n            alt=\"\"\n        /><img\n            src=\"https://placebear.com/128/128\"\n            alt=\"\"\n        />\n    </div>`;\n};\n\nAvatarGroup.argTypes = {\n    size: {\n        options: [\"s\", \"default\", \"l\"],\n        control: {\n        type: \"select\",\n        },\n    },\n    reverse: {\n        control: {\n            type: \"boolean\",\n        },\n    },\n};\n\nAvatarGroup.parameters = {\n    layout: \"centered\",\n};\n\nAvatarGroup.args = {\n    size: \"default\",\n    reverse: false,\n};\n*/\n"]}

package/dist/collection/components/xplor-avatar/xplor-avatar.css

@@ -0,0 +1,271 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/xplor-avatar/xplor-avatar.js

@@ -0,0 +1,186 @@
+import { Host, h } from "@stencil/core";
+export class XplorAvatar {
+    constructor() {
+        // eslint-disable-next-line @stencil/required-jsdoc
+        this.disabled = false;
+    }
+    render() {
+        let className = 'xpl-avatar';
+        if (this.size)
+            className += ` xpl-avatar--${this.size}`;
+        if (this.color)
+            className += ` xpl-avatar--${this.color}`;
+        const inner = (h("div", { key: '2e2722f2649108b7fdc3fd51375e17ac47e6f1ff' }, this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" }, h("slot", null))), this.status && h("div", { key: '1367e8fccd661b566d95cb1bf3a20467be7bc40f', class: `xpl-avatar__dot--${this.status}` })));
+        return (h(Host, { key: 'ac12deb4b322146d75c650ba0abe6d96c35efd67' }, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: className + ' xpl-avatar--disabled' }, inner)) : (h("div", { class: className }, inner))));
+    }
+    static get is() { return "xplor-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "'green' | 'yellow' | 'pink' | 'primary' | 'secondary'",
+                    "resolved": "\"green\" | \"pink\" | \"primary\" | \"secondary\" | \"yellow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color when there is no image src"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL if the avatar should be hyperlinked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image if there is an image src"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'md' | 'sm'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "attribute": "src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": false,
+                "complexType": {
+                    "original": "'active' | 'warning' | 'inactive'",
+                    "resolved": "\"active\" | \"inactive\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color styles for the dot indicator to indicate varied states"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to open the URL chosen for the `href` prop:\n`_self` (default), `_blank`, `_parent`, or `_top`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xplor-avatar.js.map

package/dist/collection/components/xplor-avatar/xplor-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-avatar.js","sourceRoot":"","sources":["../../../src/components/xplor-avatar/xplor-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IALxB;QAQE,mDAAmD;QAC3C,aAAQ,GAAa,KAAK,CAAC;KAiDpC;IAhCC,MAAM;QACJ,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI;YAAE,SAAS,IAAI,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC;QACxD,IAAI,IAAI,CAAC,KAAK;YAAE,SAAS,IAAI,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC;QAE1D,MAAM,KAAK,GAAG,CACZ;YACG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACV,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACvC,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,yBAAyB;gBAClC,eAAa,CACT,CACP;YACA,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAQ,CACjE,CACP,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC7B,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtD,KAAK,CACJ,CACL,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC/B,WAAK,KAAK,EAAE,SAAS,GAAG,uBAAuB,IAAG,KAAK,CAAO,CAC/D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,SAAS,IAAG,KAAK,CAAO,CACrC,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-avatar',\n  styleUrl: 'xplor-avatar.scss',\n  shadow: true,\n})\nexport class XplorAvatar {\n  /** Background color when there is no image src */\n  @Prop() color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';\n  // eslint-disable-next-line @stencil/required-jsdoc\n  @Prop() disabled?: boolean = false;\n  /** The URL if the avatar should be hyperlinked */\n  @Prop() href?: string;\n  /** Alt text for the image if there is an image src */\n  @Prop() name?: string;\n  /** Size of the avatar */\n  @Prop() size?: 'md' | 'sm';\n  /** The image URL */\n  @Prop() src?: string;\n  /** Color styles for the dot indicator to indicate varied states */\n  @Prop() status?: 'active' | 'warning' | 'inactive';\n  /**\n   * Where to open the URL chosen for the `href` prop:\n   * `_self` (default), `_blank`, `_parent`, or `_top`\n   */\n  @Prop() target?: string;\n\n  render() {\n    let className = 'xpl-avatar';\n    if (this.size) className += ` xpl-avatar--${this.size}`;\n    if (this.color) className += ` xpl-avatar--${this.color}`;\n\n    const inner = (\n      <div>\n        {this.src ? (\n          <img alt={this.name} src={this.src} />\n        ) : (\n          <div class=\"xpl-avatar__placeholder\">\n            <slot></slot>\n          </div>\n        )}\n        {this.status && <div class={`xpl-avatar__dot--${this.status}`}></div>}\n      </div>\n    );\n\n    return (\n      <Host>\n        {this.href && !this.disabled ? (\n          <a href={this.href} class={className} target={this.target}>\n            {inner}\n          </a>\n        ) : this.href && this.disabled ? (\n          <div class={className + ' xpl-avatar--disabled'}>{inner}</div>\n        ) : (\n          <div class={className}>{inner}</div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}