@redvars/peacock 3.8.1 → 3.8.3

package/dist/avatar.js

@@ -0,0 +1,114 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  pointer-events: none;
+  --avatar-size: 2rem;
+  --avatar-container-color: var(--color-primary);
+  --avatar-text-color: var(--color-on-primary);
+  --avatar-container-shape: var(--global-avatar-container-shape);
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+  line-height: 0;
+}
+
+.avatar {
+  border-radius: var(--avatar-container-shape);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--avatar-text-color);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  font-family: var(--typography-body-large-emphasized-font-family) !important;
+  font-size: var(--typography-body-large-emphasized-font-size) !important;
+  font-weight: var(--typography-body-large-emphasized-font-weight) !important;
+  line-height: var(--typography-body-large-emphasized-line-height) !important;
+  letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
+  background-color: var(--avatar-container-color);
+  font-size: calc(var(--avatar-size) * 0.5) !important;
+}
+.avatar .image {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}`;
+
+/**
+ * @label Avatar
+ * @tag wc-avatar
+ * @rawTag avatar
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+ *
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
+ * @cssprop --avatar-container-color - Controls the color of the avatar container.
+ * @cssprop --avatar-size - Controls the size of the avatar.
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
+ *
+ *
+ * @example
+ * ```html
+ * <wc-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></wc-avatar>
+ * ```
+ *
+ * @tags display
+ */
+let Avatar = class Avatar extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Full name of the person. Used to derive initials when no `src` is provided. */
+        this.name = '';
+    }
+    render() {
+        return b `<div class="avatar-container">
+      <div
+        class=${e({
+            avatar: true,
+            initials: !this.src,
+            image: !!this.src,
+        })}
+      >
+        ${this.src
+            ? b `<img class="image" src=${this.src} alt=${this.name} />`
+            : b `<div class="initials">${this.__getInitials()}</div>`}
+      </div>
+    </div>`;
+    }
+    __getInitials() {
+        const [first = '', last = ''] = this.name.split(' ');
+        return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+    }
+};
+Avatar.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Avatar.prototype, "name", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Avatar.prototype, "src", void 0);
+Avatar = __decorate([
+    IndividualComponent
+], Avatar);
+
+export { Avatar };
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './avatar.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Avatar\n * @tag wc-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-container-color - Controls the color of the avatar container.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <wc-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.xs.webp\" style='--avatar-size: 4rem'></wc-avatar>\n * ```\n *\n * @tags display\n */\n@IndividualComponent\nexport class Avatar extends LitElement {\n  static styles = [styles];\n\n  /** Full name of the person. Used to derive initials when no `src` is provided. */\n  @property({ type: String, reflect: true }) name: string = '';\n\n  /** URL of the avatar image. When provided, the image is displayed instead of initials. */\n  @property({ type: String, reflect: true }) src?: string;\n\n  render() {\n    return html`<div class=\"avatar-container\">\n      <div\n        class=${classMap({\n          avatar: true,\n          initials: !this.src,\n          image: !!this.src,\n        })}\n      >\n        ${this.src\n          ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n          : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n      </div>\n    </div>`;\n  }\n\n  private __getInitials() {\n    const [first = '', last = ''] = this.name.split(' ');\n    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQA,GAAU,CAAA;AAA/B,IAAA,WAAA,GAAA;;;QAIsC,IAAA,CAAA,IAAI,GAAW,EAAE;IAyB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AA3BO,MAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAGmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGlB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAP7C,MAAM,GAAA,UAAA,CAAA;IADlB;AACY,CAAA,EAAA,MAAM,CA6BlB;;;;"}