@pine-ds/core 3.26.4 → 3.27.0

package/components/pds-avatar.js

@@ -1,141 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as checkCircleFilled, e as userFilled } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const pdsAvatarCss = ":host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}";
-
-const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The alt for a custom user image.
-         * @defaultValue null
-         */
-        this.alt = null;
-        /**
-         * Determines whether the badge is visible or not.
-         * @defaultValue false
-         */
-        this.badge = false;
-        /**
-         * Determines whether the avatar functions as a dropdown trigger.
-         * @defaultValue false
-         */
-        this.dropdown = false;
-        /**
-         * The src for a custom user image.
-         * @defaultValue null
-         */
-        this.image = null;
-        /**
-         * The initials to display in the avatar when no image is provided.
-         * @defaultValue null
-         */
-        this.initials = null;
-        /**
-         * Size of the avatar. Value can be preset or custom.
-         * @defaultValue lg
-         */
-        this.size = 'lg';
-        /**
-         * Determines the variant of avatar. Changes appearance accordingly.
-         * @defaultValue customer
-         */
-        this.variant = 'customer';
-        this.renderAssetWrapper = () => {
-            const style = {
-                height: this.avatarSize(),
-                width: this.avatarSize()
-            };
-            return (h("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
-        };
-        this.renderAvatar = () => {
-            return (this.dropdown
-                ?
-                    h("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
-                :
-                    this.renderAssetWrapper());
-        };
-        this.renderBadge = () => (this.badge
-            // Percentage is average size of icon in relation to total avatar size
-            // of all preset sizes found in Figma.
-            // Used to allow icons to scale to container size
-            && h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
-        this.renderIconOrImage = () => {
-            if (this.image) {
-                return h("img", { alt: this.alt, src: this.image });
-            }
-            if (this.initials) {
-                return (h("svg", { class: "pds-avatar__initials", viewBox: "0 0 32 32" }, h("text", { x: "16", y: "20" }, this.initials)));
-            }
-            // Percentage is average size of icon in relation to total avatar size
-            // of all preset sizes found in Figma.
-            // Used to allow icons to scale to container size
-            return h("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
-        };
-        this.classNames = () => ({
-            'pds-avatar': true,
-            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
-            [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
-            [`pds-avatar--${this.variant}`]: this.variant === 'admin'
-        });
-    }
-    avatarSize() {
-        const sizes = {
-            xs: '24px',
-            sm: '32px',
-            md: '40px',
-            lg: '56px',
-            xl: '64px',
-        };
-        if (sizes[this.size]) {
-            return sizes[this.size];
-        }
-        else {
-            return this.size;
-        }
-    }
-    render() {
-        return (h(Host, { key: '7bdd177a6b7064ed12cabeb21d96b0a0cc6071ae', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
-    }
-    static get style() { return pdsAvatarCss; }
-}, [257, "pds-avatar", {
-        "alt": [1],
-        "badge": [4],
-        "componentId": [1, "component-id"],
-        "dropdown": [4],
-        "image": [1],
-        "initials": [1],
-        "size": [513],
-        "variant": [513]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-avatar", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-avatar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsAvatar$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsAvatar = PdsAvatar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsAvatar, defineCustomElement };
-//# sourceMappingURL=pds-avatar.js.map
-
-//# sourceMappingURL=pds-avatar.js.map
+import{proxyCustomElement as i,HTMLElement as a,h as r,Host as t,transformTag as e}from"@stencil/core/internal/client";import{b as n,e as s}from"./index2.js";import{d as o}from"./pds-icon2.js";const d=i(class extends a{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.alt=null,this.badge=!1,this.dropdown=!1,this.image=null,this.initials=null,this.size="lg",this.variant="customer",this.renderAssetWrapper=()=>{const i={height:this.avatarSize(),width:this.avatarSize()};return r("div",{style:i,part:"asset-wrapper"},this.renderIconOrImage(),this.renderBadge())},this.renderAvatar=()=>this.dropdown?r("button",{class:"pds-avatar__button",type:"button",part:"button","aria-label":"Avatar dropdown trigger"},this.renderAssetWrapper()):this.renderAssetWrapper(),this.renderBadge=()=>this.badge&&r("pds-icon",{color:"var(--pine-color-purple-600)",class:"pds-avatar__badge",icon:n,size:"33.53%"}),this.renderIconOrImage=()=>this.image?r("img",{alt:this.alt,src:this.image}):this.initials?r("svg",{class:"pds-avatar__initials",viewBox:"0 0 32 32"},r("text",{x:"16",y:"20"},this.initials)):r("pds-icon",{color:"var(--pine-color-brand)",icon:s,size:"33.53%"}),this.classNames=()=>({"pds-avatar":!0,"pds-avatar--has-image":""!==this.image&&null!==this.image,"pds-avatar--has-initials":""!==this.initials&&null!==this.initials,["pds-avatar--"+this.variant]:"admin"===this.variant})}avatarSize(){const i={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};return i[this.size]?i[this.size]:this.size}render(){return r(t,{key:"7bdd177a6b7064ed12cabeb21d96b0a0cc6071ae",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())}static get style(){return":host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}"}},[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],initials:[1],size:[513],variant:[513]}]),l=d,c=function(){"undefined"!=typeof customElements&&["pds-avatar","pds-icon"].forEach((i=>{switch(i){case"pds-avatar":customElements.get(e(i))||customElements.define(e(i),d);break;case"pds-icon":customElements.get(e(i))||o()}}))};export{l as PdsAvatar,c as defineCustomElement}

package/components/pds-box.js

@@ -1,9 +1 @@
-import { P as PdsBox$1, d as defineCustomElement$1 } from './pds-box2.js';
-
-const PdsBox = PdsBox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsBox, defineCustomElement };
-//# sourceMappingURL=pds-box.js.map
-
-//# sourceMappingURL=pds-box.js.map
+import{P as o,d as s}from"./pds-box2.js";const p=o,r=s;export{p as PdsBox,r as defineCustomElement}