godown 2.7.5 → 2.7.6

package/web-components/alert/alert.js

@@ -1,14 +1,16 @@
-var Alert_1;
 import { __decorate } from "tslib";
-import { css, html, property, unsafeCSS } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot, svgX } from "../../lib/templates.js";
-import { constructCSS } from "../../lib/utils.js";
-import { createScope, GodownElement } from "../../supers/root.js";
-const defineName = "alert";
-const cssvarScope = createScope(defineName);
+import { css, html, property, unsafeCSS } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { constructCSS } from "../../lib/css.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { svgX } from "../../lib/icons.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { createScope } from "../../styles/global.js";
+const protoName = "alert";
+const cssScope = createScope(protoName);
 const currentColor = "currentColor";
-const vars = ["color", "background", "border", "super"].map((v) => `${cssvarScope}--${v}`);
+const vars = ["color", "background", "border", "super"].map((v) => `--${cssScope}--${v}`);
 const colors = {
     success: ["#3c763d", "#dff0d8", "#d6e9c6", "#2b542c"],
     info: ["#31708f", "#d9edf7", "#bce8f1", "#245269"],
@@ -21,7 +23,7 @@ const colors = {
  *
  * Inspired by Ant-design.
  */
-let Alert = Alert_1 = class Alert extends GodownElement {
+let Alert = class Alert extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -45,13 +47,13 @@ let Alert = Alert_1 = class Alert extends GodownElement {
         if (this.autoclose) {
             setTimeout(() => this.close(), this.autoclose);
         }
-        return html `<main class="${this.call} alert">
-      <div>
-        <strong> ${this.title || htmlSlot("title")}</strong>
+        return html `<div part="root" class="${this.call} alert">
+      <div class="flex-1">
+        <strong part="title" class="title"> ${this.title || htmlSlot("title")}</strong>
         ${this.content || htmlSlot()}
       </div>
-      <aside class="close" @click="${this.close}">${htmlSlot("close", svgX(), this)}</aside>
-    </main>`;
+      <i class="close" @click="${this.close}">${svgX()}</i>
+    </div>`;
     }
     close() {
         this.shadowRoot.querySelector(".alert").classList.add("hide");
@@ -60,85 +62,12 @@ let Alert = Alert_1 = class Alert extends GodownElement {
         }, 250);
     }
     static alert(root, option) {
-        const ai = new Alert_1();
+        const ai = new this();
         Object.assign(ai, option);
         root.appendChild(ai);
         return ai;
     }
 };
-Alert.styles = [
-    unsafeCSS(constructCSS(vars, colors, (raw) => {
-        return `.${raw}`;
-    })),
-    css `
-      :host {
-        ${cssvarScope}--padding: .05em .25em .05em .35em;
-        ${cssvarScope}--border-width: 0.15em;
-        ${cssvarScope}--border-radius: 0.4em;
-        border-radius: var(${cssvarScope}--border-radius);
-        margin: 0 auto;
-        display: block;
-      }
-
-      .hide {
-        opacity: 0;
-        transform: translateY(-100%);
-      }
-
-      .alert {
-        transition: 0.25s;
-        display: flex;
-        justify-content: space-between;
-        padding: var(${cssvarScope}--padding);
-        border-radius: inherit;
-        border: var(${cssvarScope}--border-width) solid var(${cssvarScope}--border);
-        color: var(${cssvarScope}--color);
-        background: var(${cssvarScope}--background);
-        animation: alert 0.25s ease-in-out;
-      }
-
-      @keyframes alert {
-        0% {
-          opacity: 0;
-          transform: translateY(-50%);
-        }
-        100% {
-          opacity: 1;
-          transform: none;
-        }
-      }
-
-      div {
-        min-height: 1.5em;
-        line-height: 1.5em;
-      }
-
-      .close {
-        height: fit-content;
-        width: fit-content;
-        border-radius: 50%;
-        transition: inherit;
-      }
-
-      .close:hover {
-        backdrop-filter: contrast(115%);
-      }
-
-      svg {
-        display: block;
-        height: 1.6em;
-        width: 1.6em;
-      }
-
-      .close:hover path {
-        stroke: var(${cssvarScope}--super);
-      }
-
-      path {
-        stroke: var(${cssvarScope}--color);
-      }
-    `,
-];
 __decorate([
     property()
 ], Alert.prototype, "call", void 0);
@@ -151,8 +80,81 @@ __decorate([
 __decorate([
     property()
 ], Alert.prototype, "content", void 0);
-Alert = Alert_1 = __decorate([
-    define(defineName)
+Alert = __decorate([
+    godown(protoName),
+    styles([
+        unsafeCSS(constructCSS(vars, colors, (raw) => `.${raw}`)),
+        css `
+    :host {
+      border-radius: var(--${cssScope}--border-radius);
+      --${cssScope}--border-radius: 0.4em;
+      --${cssScope}--border-width: 0.15em;
+      --${cssScope}--padding: .1em;
+      margin: 0 auto;
+      display: block;
+    }
+
+    .hide {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    .alert {
+      transition: 0.25s;
+      display: flex;
+      justify-content: space-between;
+      padding: var(--${cssScope}--padding);
+      border-radius: inherit;
+      border: var(--${cssScope}--border-width) solid var(--${cssScope}--border);
+      color: var(--${cssScope}--color);
+      background: var(--${cssScope}--background);
+      animation: alert 0.25s ease-in-out;
+    }
+
+    @keyframes alert {
+      0% {
+        opacity: 0;
+        transform: translateY(-50%);
+      }
+      100% {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .close {
+      height: -moz-fit-content;
+      height: fit-content;
+      width: -moz-fit-content;
+      width: fit-content;
+      border-radius: 50%;
+      transition: inherit;
+    }
+
+    .close:hover {
+      -webkit-backdrop-filter: contrast(115%);
+              backdrop-filter: contrast(115%);
+    }
+
+    .title {
+      line-height: 1.5em;
+    }
+    .close:hover path {
+      stroke: var(--${cssScope}--super);
+    }
+    .flex-1 {
+      flex: 1;
+    }
+    svg {
+      display: block;
+      height: 1.5em;
+      width: 1.5em;
+    }
+    path {
+      stroke: var(--${cssScope}--color);
+    }
+  `,
+    ])
 ], Alert);
 export { Alert };
 export default Alert;

package/web-components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, unsafeCSS } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate, svgX } from \"../../lib/templates.js\";\nimport { constructCSS } from \"../../lib/utils.js\";\nimport { createScope, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"alert\";\nconst cssvarScope = createScope(defineName);\n\nconst currentColor = \"currentColor\";\n\nconst vars = [\"color\", \"background\", \"border\", \"super\"].map((v) => `${cssvarScope}--${v}`);\nconst colors = {\n  success: [\"#3c763d\", \"#dff0d8\", \"#d6e9c6\", \"#2b542c\"],\n  info: [\"#31708f\", \"#d9edf7\", \"#bce8f1\", \"#245269\"],\n  warning: [\"#8a6d3b\", \"#fcf8e3\", \"#faebcc\", \"#66512c\"],\n  danger: [\"#a94442\", \"#f2dede\", \"#ebccd1\", \"#843534\"],\n  inherit: [currentColor, \"inherit\", currentColor, currentColor],\n};\n\n/**\n * {@linkcode Alert} renders a alert.\n *\n * Inspired by Ant-design.\n */\n@define(defineName)\nexport class Alert extends GodownElement {\n  /**\n   * Type of performance.\n   */\n  @property() call: keyof typeof colors | \"hide\" = \"info\";\n  /**\n   * Close delay.\n   */\n  @property({ type: Number }) autoclose = 3000;\n  /**\n   * Alert title.\n   */\n  @property() title = \"\";\n  /**\n   * Alert content.\n   */\n  @property() content = \"\";\n\n  static styles = [\n    unsafeCSS(\n      constructCSS(vars, colors, (raw) => {\n        return `.${raw}`;\n      }),\n    ),\n    css`\n      :host {\n        ${cssvarScope}--padding: .05em .25em .05em .35em;\n        ${cssvarScope}--border-width: 0.15em;\n        ${cssvarScope}--border-radius: 0.4em;\n        border-radius: var(${cssvarScope}--border-radius);\n        margin: 0 auto;\n        display: block;\n      }\n\n      .hide {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n\n      .alert {\n        transition: 0.25s;\n        display: flex;\n        justify-content: space-between;\n        padding: var(${cssvarScope}--padding);\n        border-radius: inherit;\n        border: var(${cssvarScope}--border-width) solid var(${cssvarScope}--border);\n        color: var(${cssvarScope}--color);\n        background: var(${cssvarScope}--background);\n        animation: alert 0.25s ease-in-out;\n      }\n\n      @keyframes alert {\n        0% {\n          opacity: 0;\n          transform: translateY(-50%);\n        }\n        100% {\n          opacity: 1;\n          transform: none;\n        }\n      }\n\n      div {\n        min-height: 1.5em;\n        line-height: 1.5em;\n      }\n\n      .close {\n        height: fit-content;\n        width: fit-content;\n        border-radius: 50%;\n        transition: inherit;\n      }\n\n      .close:hover {\n        backdrop-filter: contrast(115%);\n      }\n\n      svg {\n        display: block;\n        height: 1.6em;\n        width: 1.6em;\n      }\n\n      .close:hover path {\n        stroke: var(${cssvarScope}--super);\n      }\n\n      path {\n        stroke: var(${cssvarScope}--color);\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    if (this.autoclose) {\n      setTimeout(() => this.close(), this.autoclose);\n    }\n    return html`<main class=\"${this.call} alert\">\n      <div>\n        <strong> ${this.title || htmlSlot(\"title\")}</strong>\n        ${this.content || htmlSlot()}\n      </div>\n      <aside class=\"close\" @click=\"${this.close}\">${htmlSlot(\"close\", svgX(), this)}</aside>\n    </main>`;\n  }\n\n  close() {\n    this.shadowRoot.querySelector(\".alert\").classList.add(\"hide\");\n    setTimeout(() => {\n      this.remove();\n    }, 250);\n  }\n\n  static alert(root: HTMLElement, option: Partial<Alert>): Alert {\n    const ai = new Alert();\n    Object.assign(ai, option);\n    root.appendChild(ai);\n    return ai;\n  }\n}\n\nexport default Alert;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"alert-item\": Alert;\n    \"g-alert\": Alert;\n  }\n}\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, unsafeCSS } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { constructCSS } from \"../../lib/css.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { svgX } from \"../../lib/icons.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { createScope } from \"../../styles/global.js\";\n\nconst protoName = \"alert\";\nconst cssScope = createScope(protoName);\n\nconst currentColor = \"currentColor\";\n\nconst vars = [\"color\", \"background\", \"border\", \"super\"].map((v) => `--${cssScope}--${v}`);\nconst colors = {\n  success: [\"#3c763d\", \"#dff0d8\", \"#d6e9c6\", \"#2b542c\"],\n  info: [\"#31708f\", \"#d9edf7\", \"#bce8f1\", \"#245269\"],\n  warning: [\"#8a6d3b\", \"#fcf8e3\", \"#faebcc\", \"#66512c\"],\n  danger: [\"#a94442\", \"#f2dede\", \"#ebccd1\", \"#843534\"],\n  inherit: [currentColor, \"inherit\", currentColor, currentColor],\n};\n\n/**\n * {@linkcode Alert} renders a alert.\n *\n * Inspired by Ant-design.\n */\n@godown(protoName)\n@styles([\n  unsafeCSS(constructCSS(vars, colors, (raw) => `.${raw}`)),\n  css`\n    :host {\n      border-radius: var(--${cssScope}--border-radius);\n      --${cssScope}--border-radius: 0.4em;\n      --${cssScope}--border-width: 0.15em;\n      --${cssScope}--padding: .1em;\n      margin: 0 auto;\n      display: block;\n    }\n\n    .hide {\n      opacity: 0;\n      transform: translateY(-100%);\n    }\n\n    .alert {\n      transition: 0.25s;\n      display: flex;\n      justify-content: space-between;\n      padding: var(--${cssScope}--padding);\n      border-radius: inherit;\n      border: var(--${cssScope}--border-width) solid var(--${cssScope}--border);\n      color: var(--${cssScope}--color);\n      background: var(--${cssScope}--background);\n      animation: alert 0.25s ease-in-out;\n    }\n\n    @keyframes alert {\n      0% {\n        opacity: 0;\n        transform: translateY(-50%);\n      }\n      100% {\n        opacity: 1;\n        transform: none;\n      }\n    }\n\n    .close {\n      height: -moz-fit-content;\n      height: fit-content;\n      width: -moz-fit-content;\n      width: fit-content;\n      border-radius: 50%;\n      transition: inherit;\n    }\n\n    .close:hover {\n      -webkit-backdrop-filter: contrast(115%);\n              backdrop-filter: contrast(115%);\n    }\n\n    .title {\n      line-height: 1.5em;\n    }\n    .close:hover path {\n      stroke: var(--${cssScope}--super);\n    }\n    .flex-1 {\n      flex: 1;\n    }\n    svg {\n      display: block;\n      height: 1.5em;\n      width: 1.5em;\n    }\n    path {\n      stroke: var(--${cssScope}--color);\n    }\n  `,\n])\nexport class Alert extends GodownElement {\n  /**\n   * Type of performance.\n   */\n  @property() call: keyof typeof colors | \"hide\" = \"info\";\n  /**\n   * Close delay.\n   */\n  @property({ type: Number }) autoclose = 3000;\n  /**\n   * Alert title.\n   */\n  @property() title = \"\";\n  /**\n   * Alert content.\n   */\n  @property() content = \"\";\n\n  protected render() {\n    if (this.autoclose) {\n      setTimeout(() => this.close(), this.autoclose);\n    }\n    return html`<div part=\"root\" class=\"${this.call} alert\">\n      <div class=\"flex-1\">\n        <strong part=\"title\" class=\"title\"> ${this.title || htmlSlot(\"title\")}</strong>\n        ${this.content || htmlSlot()}\n      </div>\n      <i class=\"close\" @click=\"${this.close}\">${svgX()}</i>\n    </div>`;\n  }\n\n  close() {\n    this.shadowRoot.querySelector(\".alert\").classList.add(\"hide\");\n    setTimeout(() => {\n      this.remove();\n    }, 250);\n  }\n\n  static alert(root: HTMLElement, option: Partial<Alert>): Alert {\n    const ai = new this();\n    Object.assign(ai, option);\n    root.appendChild(ai);\n    return ai;\n  }\n}\n\nexport default Alert;\n"]}

package/web-components/avatar/avatar-group.d.ts

@@ -0,0 +1,21 @@
+import { GodownElement } from "../../proto/godown-element.js";
+import Avatar from "./avatar.js";
+/**
+ * {@linkcode AvatarGroup} used to limit the number of subcomponents.
+ */
+export declare class AvatarGroup extends GodownElement {
+    /**
+     * Maximum number of child elements acceptable.
+     */
+    max: number;
+    /**
+     * Exceeded quantity.
+     */
+    more: number;
+    protected render(): (import("lit").TemplateResult<1> | (import("lit").TemplateResult<1> | Avatar)[])[];
+    connectedCallback(): void;
+    push(a: Avatar): void;
+    pop(): void;
+}
+export default AvatarGroup;
+//# sourceMappingURL=avatar-group.d.ts.map

package/web-components/avatar/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar-group.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,MAAM,MAAM,aAAa,CAAC;AAIjC;;GAEG;AACH,qBASa,WAAY,SAAQ,aAAa;IAC5C;;OAEG;IACyB,GAAG,SAAM;IAErC;;OAEG;IACM,IAAI,SAAK;IAElB,SAAS,CAAC,MAAM;IAUhB,iBAAiB,IAAI,IAAI;IAOzB,IAAI,CAAC,CAAC,EAAE,MAAM;IASd,GAAG;CAUJ;AAED,eAAe,WAAW,CAAC"}

package/web-components/avatar/avatar-group.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { css, property, state } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { ifValue } from "../../lib/directives.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { htmlStyle } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import Avatar from "./avatar.js";
+const protoName = "avatar-group";
+/**
+ * {@linkcode AvatarGroup} used to limit the number of subcomponents.
+ */
+let AvatarGroup = class AvatarGroup extends GodownElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Maximum number of child elements acceptable.
+         */
+        this.max = 99;
+        /**
+         * Exceeded quantity.
+         */
+        this.more = 0;
+    }
+    render() {
+        return [
+            htmlSlot(),
+            ifValue(this.more > 0, [
+                htmlStyle(`slot::slotted(:nth-of-type(n+${this.max})){display: none;}`),
+                new Avatar({ innerText: `+${this.more}` }),
+            ]),
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.children.length > this.max) {
+            this.more = this.children.length - this.max;
+        }
+    }
+    push(a) {
+        if (this.assigned.length === this.max) {
+            this.more = 2;
+        }
+        else {
+            this.more += 1;
+        }
+        this.appendChild(a);
+    }
+    pop() {
+        if (this.assigned.length) {
+            this.assigned.pop().remove();
+            if (this.more === 2) {
+                this.more = 0;
+            }
+            else {
+                this.more -= 1;
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: Number })
+], AvatarGroup.prototype, "max", void 0);
+__decorate([
+    state()
+], AvatarGroup.prototype, "more", void 0);
+AvatarGroup = __decorate([
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      display: flex;
+      width: 100%;
+    }
+  `,
+    ])
+], AvatarGroup);
+export { AvatarGroup };
+export default AvatarGroup;
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     ["godown-avatar-group"]: AvatarGroup;
+//   }
+// }
+//# sourceMappingURL=avatar-group.js.map

package/web-components/avatar/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,SAAS,GAAG,cAAc,CAAC;AAEjC;;GAEG;AAUI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;QACL;;WAEG;QACyB,QAAG,GAAG,EAAE,CAAC;QAErC;;WAEG;QACM,SAAI,GAAG,CAAC,CAAC;IAsCpB,CAAC;IApCW,MAAM;QACd,OAAO;YACL,QAAQ,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;gBACrB,SAAS,CAAC,gCAAgC,IAAI,CAAC,GAAG,oBAAoB,CAAC;gBACvE,IAAI,MAAM,CAAC,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;aAC3C,CAAC;SACH,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,IAAI,CAAC,CAAS;QACZ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;YACtC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QAChB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;QACjB,CAAC;QACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,GAAG;QACD,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;YAChB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;YACjB,CAAC;QACH,CAAC;IACH,CAAC;CACF,CAAA;AA3C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAU;AAK5B;IAAR,KAAK,EAAE;yCAAU;AATP,WAAW;IATvB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;;;;GAKF;KACF,CAAC;GACW,WAAW,CA+CvB;;AAED,eAAe,WAAW,CAAC;AAE3B,mBAAmB;AACnB,sCAAsC;AACtC,4CAA4C;AAC5C,MAAM;AACN,IAAI","sourcesContent":["import { css, property, state } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { htmlStyle } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport Avatar from \"./avatar.js\";\n\nconst protoName = \"avatar-group\";\n\n/**\n * {@linkcode AvatarGroup} used to limit the number of subcomponents.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      display: flex;\n      width: 100%;\n    }\n  `,\n])\nexport class AvatarGroup extends GodownElement {\n  /**\n   * Maximum number of child elements acceptable.\n   */\n  @property({ type: Number }) max = 99;\n\n  /**\n   * Exceeded quantity.\n   */\n  @state() more = 0;\n\n  protected render() {\n    return [\n      htmlSlot(),\n      ifValue(this.more > 0, [\n        htmlStyle(`slot::slotted(:nth-of-type(n+${this.max})){display: none;}`),\n        new Avatar({ innerText: `+${this.more}` }),\n      ]),\n    ];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (this.children.length > this.max) {\n      this.more = this.children.length - this.max;\n    }\n  }\n\n  push(a: Avatar) {\n    if (this.assigned.length === this.max) {\n      this.more = 2;\n    } else {\n      this.more += 1;\n    }\n    this.appendChild(a);\n  }\n\n  pop() {\n    if (this.assigned.length) {\n      this.assigned.pop().remove();\n      if (this.more === 2) {\n        this.more = 0;\n      } else {\n        this.more -= 1;\n      }\n    }\n  }\n}\n\nexport default AvatarGroup;\n\n// declare global {\n//   interface HTMLElementTagNameMap {\n//     [\"godown-avatar-group\"]: AvatarGroup;\n//   }\n// }\n"]}

package/web-components/avatar/avatar.d.ts

@@ -1,5 +1,4 @@
-import { type HTMLTemplate } from "../../lib/templates.js";
-import GodownAnchor from "../../supers/anchor.js";
+import GodownAnchor from "../../proto/super-a.js";
 /**
  * {@linkcode Avatar} renders the avatar or name and has a href.
  */
@@ -11,31 +10,19 @@ export declare class Avatar extends GodownAnchor {
     /**
      * Default image src.
      */
-    def: string;
+    default: string;
     /**
      * Link href.
      */
     href: any;
     /**
-     * If the image is not available, the {@linkcode Avatar.avaName} will be displayed.
+     * If the image is not available, the {@linkcode Avatar.format} will be displayed.
      */
     name: string;
-    /**
-     * If there is a value, the {@linkcode Avatar.avaMore} will be displayed.
-     */
-    more: number;
-    static styles: import("lit").CSSResult[];
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     private renderAva;
-    avaMore(): string | number;
-    avaName(): string;
+    format(): string;
     imgOnError(e: ErrorEvent): void;
 }
 export default Avatar;
-declare global {
-    interface HTMLElementTagNameMap {
-        "avatar-a": Avatar;
-        "g-avatar": Avatar;
-    }
-}
 //# sourceMappingURL=avatar.d.ts.map

package/web-components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAMlD;;GAEG;AACH,qBACa,MAAO,SAAQ,YAAY;IACtC;;OAEG;IACS,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAM;IAChD;;OAEG;IACS,GAAG,EAAE,MAAM,CAAa;IACpC;;OAEG;IACS,IAAI,MAAa;IAC7B;;OAEG;IACS,IAAI,SAAM;IACtB;;OAEG;IACyB,IAAI,SAAK;IAErC,MAAM,CAAC,MAAM,4BAyCX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAOhC,OAAO,CAAC,SAAS;IAajB,OAAO,IAAI,MAAM,GAAG,MAAM;IAO1B,OAAO,IAAI,MAAM;IAKjB,UAAU,CAAC,CAAC,EAAE,UAAU;CAOzB;AAED,eAAe,MAAM,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/avatar/avatar.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAMlD;;GAEG;AACH,qBA8Ca,MAAO,SAAQ,YAAY;IACtC;;OAEG;IACS,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC3C;;OAEG;IACS,OAAO,EAAE,MAAM,CAAa;IACxC;;OAEG;IACS,IAAI,MAAa;IAC7B;;OAEG;IACS,IAAI,SAAM;IAEtB,SAAS,CAAC,MAAM;IAIhB,OAAO,CAAC,SAAS;IAUjB,MAAM,IAAI,MAAM;IAIhB,UAAU,CAAC,CAAC,EAAE,UAAU;CAOzB;AAED,eAAe,MAAM,CAAC"}

package/web-components/avatar/avatar.js

@@ -1,135 +1,120 @@
 import { __decorate } from "tslib";
-import { css, html, ifDefined, property } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import GodownAnchor from "../../supers/anchor.js";
-import { createScope } from "../../supers/root.js";
-const defineName = "avatar";
-const cssvarScope = createScope(defineName);
+import { css, html, ifDefined, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
+import GodownAnchor from "../../proto/super-a.js";
+import { createScope } from "../../styles/global.js";
+const protoName = "avatar";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode Avatar} renders the avatar or name and has a href.
  */
 let Avatar = class Avatar extends GodownAnchor {
     constructor() {
         super(...arguments);
-        /**
-         * Image src.
-         */
-        this.src = "";
         /**
          * Default image src.
          */
-        this.def = undefined;
+        this.default = undefined;
         /**
          * Link href.
          */
         this.href = undefined;
         /**
-         * If the image is not available, the {@linkcode Avatar.avaName} will be displayed.
+         * If the image is not available, the {@linkcode Avatar.format} will be displayed.
          */
         this.name = "";
-        /**
-         * If there is a value, the {@linkcode Avatar.avaMore} will be displayed.
-         */
-        this.more = 0;
     }
     render() {
-        return html `
-      <a href="${ifDefined(this.href)}"> ${this.renderAva()} ${htmlSlot("mask")} </a>
-      ${htmlSlot()}
-    `;
+        return html `<a part="root" href="${ifDefined(this.href)}"> ${this.renderAva()} ${htmlSlot("mask")}</a> `;
     }
     renderAva() {
-        if (this.more) {
-            return html `<span>${this.avaMore()}</span>`;
-        }
         if (this.src) {
-            return html `<img src="${this.src}" @error=${this.imgOnError} alt="" />`;
+            return html `<img part="image" src="${this.src}" @error=${this.imgOnError} alt="${this.name}" />`;
         }
         if (this.name) {
-            return html `<span>${this.avaName()}</span>`;
-        }
-        return htmlSlot("avatar");
-    }
-    avaMore() {
-        if (this.more < 0) {
-            return "+";
+            return html `<span part="name">${this.format()}</span>`;
         }
-        return (this.more > 99 ? "99" : this.more) + "+";
+        return htmlSlot();
     }
-    avaName() {
-        const name = this.name.slice(0, 2);
-        return name[0].toUpperCase() + name.slice(1);
+    format() {
+        return this.name;
     }
     imgOnError(e) {
-        if (this.def) {
-            e.target.src = this.def;
+        if (this.default) {
+            e.target.src = this.default;
         }
         else {
             this.src = undefined;
         }
     }
 };
-Avatar.styles = [
-    css `
-      :host {
-        ${cssvarScope}--ava: 1.5em;
-        display: inline-flex;
-        align-items: center;
-      }
-
-      * {
-        border-radius: inherit;
-      }
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-
-      a {
-        height: var(${cssvarScope}--ava);
-        width: var(${cssvarScope}--ava);
-        color: inherit;
-        display: flex;
-        position: relative;
-        align-items: inherit;
-      }
-
-      span {
-        position: absolute;
-        width: 100%;
-        text-align: center;
-      }
-
-      slot[name="mask"] {
-        position: absolute;
-        display: flex;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-      }
-    `,
-];
 __decorate([
     property()
 ], Avatar.prototype, "src", void 0);
 __decorate([
     property()
-], Avatar.prototype, "def", void 0);
+], Avatar.prototype, "default", void 0);
 __decorate([
     property()
 ], Avatar.prototype, "href", void 0);
 __decorate([
     property()
 ], Avatar.prototype, "name", void 0);
-__decorate([
-    property({ type: Number })
-], Avatar.prototype, "more", void 0);
 Avatar = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--avatar-size: 2.4em;
+      display: inline-block;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    a {
+      display: block;
+      color: inherit;
+      overflow: hidden;
+      position: relative;
+      border-radius: inherit;
+      width: var(--${cssScope}--avatar-size);
+      height: var(--${cssScope}--avatar-size);
+    }
+
+    span {
+      position: absolute;
+      width: 100%;
+    }
+
+    a,
+    [part="name"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [part="mask"] {
+      position: absolute;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+  `,
+    ])
 ], Avatar);
 export { Avatar };
 export default Avatar;
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     ["godown-avatar"]: Avatar
+//   }
+// }
 //# sourceMappingURL=avatar.js.map