npm - @pine-ds/core - Versions diffs - 0.1.4 → 0.2.0 - Mend

@pine-ds/core 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (569) hide show

package/dist/esm-es5/pds-avatar.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-9312507f.js";var pdsAvatarCss=":host{display:inline-block}div{--background-color:var(--pine-color-primary-100);--badge-background-color:var(--pine-color-base-white);--border:var(--pine-border-default);--radius-round:50%;-ms-flex-align:center;align-items:center;background-color:var(--background-color);border-radius:var(--admin-radius-round, var(--radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--admin-radius-round:12px;border-radius:var(--admin-radius-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--badge-background-color);border:var(--border);border-color:var(--badge-background-color);border-radius:var(--radius-round);bottom:0;position:absolute;right:0}img{border-radius:var(--admin-radius-round, var(--radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";var PdsAvatarStyle0=pdsAvatarCss;var PdsAvatar=function(){function r(r){var a=this;registerInstance(this,r);this.renderAvatar=function(){var r={height:a.avatarSize(),width:a.avatarSize()};return a.dropdown?h("button",{class:"pds-avatar__button",type:"button"},h("div",{style:r},a.renderIconOrImage(),a.renderBadge())):h("div",{style:r},a.renderIconOrImage(),a.renderBadge())};this.renderBadge=function(){return a.badge&&h("pds-icon",{class:"pds-avatar__badge",name:"check-circle-filled",size:"33.53%"})};this.renderIconOrImage=function(){return a.image?h("img",{alt:a.alt,src:a.image}):h("pds-icon",{name:"user-filled",size:"33.53%"})};this.classNames=function(){var r;return r={"pds-avatar":true},r["pds-avatar--has-image"]=a.image!==""&&a.image!==null,r["pds-avatar--".concat(a.variant)]=a.variant==="admin",r};this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}r.prototype.avatarSize=function(){var r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}};r.prototype.render=function(){return h(Host,{key:"179b1d53b2250e1fab6807a324c474c2d02c8d43",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())};return r}();PdsAvatar.style=PdsAvatarStyle0;export{PdsAvatar as pds_avatar};
+import{r as registerInstance,h,H as Host}from"./index-09d6e504.js";import{c as checkCircleFilled,a as userFilled}from"./index-acbaa5e7.js";var pdsAvatarCss=":host{display:inline-block}div{--background-color:var(--pine-color-primary-100);--badge-background-color:var(--pine-color-base-white);--border:var(--pine-border-default);--radius-round:50%;-ms-flex-align:center;align-items:center;background-color:var(--background-color);border-radius:var(--admin-radius-round, var(--radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--admin-radius-round:12px;border-radius:var(--admin-radius-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--badge-background-color);border:var(--border);border-color:var(--badge-background-color);border-radius:var(--radius-round);bottom:0;position:absolute;right:0}img{border-radius:var(--admin-radius-round, var(--radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";var PdsAvatarStyle0=pdsAvatarCss;var PdsAvatar=function(){function r(r){var a=this;registerInstance(this,r);this.renderAssetWrapper=function(){var r={height:a.avatarSize(),width:a.avatarSize()};return h("div",{style:r,part:"asset-wrapper"},a.renderIconOrImage(),a.renderBadge())};this.renderAvatar=function(){return a.dropdown?h("button",{class:"pds-avatar__button",type:"button"},a.renderAssetWrapper()):a.renderAssetWrapper()};this.renderBadge=function(){return a.badge&&h("pds-icon",{class:"pds-avatar__badge",icon:checkCircleFilled,size:"33.53%"})};this.renderIconOrImage=function(){return a.image?h("img",{alt:a.alt,src:a.image}):h("pds-icon",{color:"var(--pine-color-primary-400)",icon:userFilled,size:"33.53%"})};this.classNames=function(){var r;return r={"pds-avatar":true},r["pds-avatar--has-image"]=a.image!==""&&a.image!==null,r["pds-avatar--".concat(a.variant)]=a.variant==="admin",r};this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}r.prototype.avatarSize=function(){var r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}};r.prototype.render=function(){return h(Host,{key:"0e214f7cca56b36b49e27c8dc097acc7b34391cc",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())};return r}();PdsAvatar.style=PdsAvatarStyle0;export{PdsAvatar as pds_avatar};
+//# sourceMappingURL=pds-avatar.entry.js.map

package/dist/esm-es5/pds-avatar.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["pdsAvatarCss","PdsAvatarStyle0","PdsAvatar","this","renderAssetWrapper","style","height","_this","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","icon","checkCircleFilled","size","image","alt","src","color","userFilled","classNames","_a","concat","variant","prototype","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\ndiv {\n // These custom props are not reachable\n --background-color: var(--pine-color-primary-100);\n --badge-background-color: var(--pine-color-base-white);\n --border: var(--pine-border-default);\n --radius-round: 50%;\n\n align-items: center;\n background-color: var(--background-color);\n border-radius: var(--admin-radius-round, var(--radius-round));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --admin-radius-round: 12px;\n border-radius: var(--admin-radius-round);\n }\n\n // Remove when FF has support for :has\n :host(.pds-avatar--has-image) & {\n background: transparent\n }\n\n @supports selector(:has) {\n &:has(img) {\n background-color: transparent\n }\n }\n}\n\n.pds-avatar__button {\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--radius-round);\n cursor: pointer;\n display: flex;\n padding: 0;\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n}\n\n.pds-avatar__badge {\n background-color: var(--badge-background-color);\n border: var(--border);\n border-color: var(--badge-background-color);\n border-radius: var(--radius-round);\n bottom: 0;\n position: absolute;\n right: 0;\n}\n\nimg {\n border-radius: var(--admin-radius-round, var(--radius-round));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n tag: 'pds-avatar',\n styleUrl: 'pds-avatar.scss',\n shadow: true,\n})\nexport class PdsAvatar {\n\n /**\n * The alt for a custom user image.\n * @defaultValue null\n */\n @Prop() alt?: string | null = null;\n\n /**\n * Determines whether the badge is visible or not.\n * @defaultValue false\n */\n @Prop() badge? = false;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the avatar functions as a dropdown trigger.\n * @defaultValue false\n */\n @Prop() dropdown? = false;\n\n /**\n * The src for a custom user image.\n * @defaultValue null\n */\n @Prop() image?: string | null = null;\n\n /**\n * Size of the avatar. Value can be preset or custom.\n * @defaultValue lg\n */\n @Prop({ reflect: true }) size?:\n | 'xl' // 64px\n | 'lg' // 56px\n | 'md' // 40px\n | 'sm' // 32px\n | 'xs' // 24px\n | string = 'lg';\n\n /**\n * Determines the variant of avatar. Changes appearance accordingly.\n * @defaultValue customer\n */\n @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n private avatarSize() {\n const sizes: { [key: string]: any } = {\n xs: '24px',\n sm: '32px',\n md: '40px',\n lg: '56px',\n xl: '64px',\n }\n\n if (sizes[this.size]) {\n return sizes[this.size];\n } else {\n return this.size\n }\n }\n\n private renderAssetWrapper = () => {\n const style = {\n height: this.avatarSize(),\n width: this.avatarSize()\n };\n\n return (\n <div style={style} part=\"asset-wrapper\">\n {this.renderIconOrImage()}\n {this.renderBadge()}\n </div>\n )\n };\n\n private renderAvatar = () => {\n return (\n this.dropdown\n ?\n <button class=\"pds-avatar__button\" type=\"button\">\n {this.renderAssetWrapper()}\n </button>\n :\n this.renderAssetWrapper()\n )\n };\n\n private renderBadge = () => (\n this.badge\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => (\n this.image\n ? <img alt={this.alt} src={this.image} />\n // Percentage is average size of icon in relation to total avatar size\n // of all preset sizes found in Figma.\n // Used to allow icons to scale to container size\n : <pds-icon color=\"var(--pine-color-primary-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n );\n\n private classNames = () => (\n {\n 'pds-avatar': true,\n [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n }\n );\n\n render() {\n\n return (\n <Host\n id={this.componentId}\n class={{...this.classNames()}}\n >\n {this.renderAvatar()}\n </Host>\n );\n }\n}\n"],"mappings":"2IAAA,IAAMA,aAAe,24CACrB,IAAAC,gBAAeD,a,ICUFE,UAAS,W,kDAiEZC,KAAAC,mBAAqB,WAC3B,IAAMC,EAAQ,CACZC,OAAQC,EAAKC,aACbC,MAAOF,EAAKC,cAGd,OACEE,EAAA,OAAKL,MAAOA,EAAOM,KAAK,iBACrBJ,EAAKK,oBACLL,EAAKM,c,EAKJV,KAAAW,aAAe,WACrB,OACEP,EAAKQ,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,UACrCV,EAAKH,sBAGRG,EAAKH,oB,EAIHD,KAAAU,YAAc,kBACpBN,EAAKW,OAIAR,EAAA,YAAUM,MAAM,oBAAoBG,KAAMC,kBAAmBC,KAAK,UALnD,EAQdlB,KAAAS,kBAAoB,kBAC1BL,EAAKe,MACDZ,EAAA,OAAKa,IAAKhB,EAAKgB,IAAKC,IAAKjB,EAAKe,QAI9BZ,EAAA,YAAUe,MAAM,gCAAgCN,KAAMO,WAAYL,KAAK,UANjD,EASpBlB,KAAAwB,WAAa,W,MAAA,OAAAC,EAAA,CAEjB,aAAc,MACdA,EAAC,yBAA0BrB,EAAKe,QAAU,IAAMf,EAAKe,QAAU,KAC/DM,EAAC,eAAAC,OAAetB,EAAKuB,UAAYvB,EAAKuB,UAAY,Q,CAJjC,E,SAtGS,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElD5B,EAAA6B,UAAAvB,WAAA,WACN,IAAMwB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAM7B,KAAKkB,MAAO,CACpB,OAAOW,EAAM7B,KAAKkB,K,KACb,CACL,OAAOlB,KAAKkB,I,GAuDhBnB,EAAA6B,UAAAO,OAAA,WAEE,OACE5B,EAAC6B,KAAI,CAAAC,IAAA,2CACHC,GAAItC,KAAKuC,YACT1B,MAAK2B,OAAAC,OAAA,GAAMzC,KAAKwB,eAEfxB,KAAKW,e,WA3HQ,G"}

package/dist/esm-es5/pds-box.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-9312507f.js";var pdsBoxCss="pds-box{--box-background-color:inherit;--box-border-color:inherit;--box-min-height:none;--box-min-width:none;--box-gap-xxs:var(--pine-spacing-050);--box-gap-xs:var(--pine-spacing-100);--box-gap-sm:var(--pine-spacing-200);--box-gap-md:var(--pine-spacing-300);--box-gap-lg:var(--pine-spacing-450);--box-gap-xl:var(--pine-spacing-600);--box-gap-xxl:var(--pine-spacing-800);display:block}[class*=pds-box]{background-color:var(--box-background-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--box-min-height);min-width:var(--box-min-width)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-2xl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-2xl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-2xl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-2xl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-2xl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-box--auto{-ms-flex:0 0 var(--box-min-width, fit-content);flex:0 0 var(--box-min-width, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--box-border-color, var(--pine-border-default-color));border-style:var(--pine-border-default-style);border-width:var(--pine-border-default-width)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-border-radius-xs)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-sm)}.pds-border-radius-md{border-radius:var(--pine-border-radius-md)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-lg)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-xs);box-shadow:var(--pine-box-shadow-xs)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-sm);box-shadow:var(--pine-box-shadow-sm)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-md);box-shadow:var(--pine-box-shadow-md)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-lg);box-shadow:var(--pine-box-shadow-lg)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--box-gap-xxs)}.pds-box-gap-xs{gap:var(--box-gap-xs)}.pds-box-gap-sm{gap:var(--box-gap-sm)}.pds-box-gap-md{gap:var(--box-gap-md)}.pds-box-gap-lg{gap:var(--box-gap-lg)}.pds-box-gap-xl{gap:var(--box-gap-xl)}.pds-box-gap-xxl{gap:var(--box-gap-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--box-gap-xxs)}.pds-padding-xs{padding:var(--box-gap-xxs)}.pds-padding-sm{padding:var(--box-gap-sm)}.pds-padding-md{padding:var(--box-gap-md)}.pds-padding-lg{padding:var(--box-gap-lg)}.pds-padding-xl{padding:var(--box-gap-xl)}.pds-padding-xxl{padding:var(--box-gap-2xl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";var PdsBoxStyle0=pdsBoxCss;var PdsBox=function(){function i(i){registerInstance(this,i);this.alignItems=undefined;this.auto=undefined;this.backgroundColor=undefined;this.border=false;this.borderColor=undefined;this.borderRadius=undefined;this.direction=undefined;this.display=undefined;this.fit=undefined;this.gap=undefined;this.flex=undefined;this.justifyContent=undefined;this.minHeight=undefined;this.minWidth=undefined;this.offset=undefined;this.offsetXs=undefined;this.offsetSm=undefined;this.offsetMd=undefined;this.offsetLg=undefined;this.offsetXl=undefined;this.padding=undefined;this.shadow=undefined;this.size=undefined;this.sizeXs=undefined;this.sizeSm=undefined;this.sizeMd=undefined;this.sizeLg=undefined;this.sizeXl=undefined}i.prototype.render=function(){var i="\n    ".concat(this.alignItems!==undefined&&this.alignItems.trim()!==""?"pds-align-items-".concat(this.alignItems):"","\n    ").concat(this.auto?"pds-box--auto":"","\n    ").concat(this.border?"pds-box--border":"","\n    ").concat(this.borderRadius!==undefined&&this.borderRadius.trim()!==""?"pds-border-radius-".concat(this.borderRadius):"","\n    ").concat(this.direction!==undefined&&this.direction.trim()!==""?"pds-box-direction-".concat(this.direction):"","\n    ").concat(this.display!==undefined&&this.display.trim()!==""?"pds-box--display-".concat(this.display):"","\n    ").concat(this.fit?"pds-box--fit":"","\n    ").concat(this.gap!==undefined&&this.gap.trim()!==""?"pds-box-gap-".concat(this.gap):"","\n    ").concat(this.flex!==undefined&&this.flex.trim()!==""?"pds-box--flex-".concat(this.flex):"","\n    ").concat(this.justifyContent!==undefined&&this.justifyContent.trim()!==""?"pds-justify-content-".concat(this.justifyContent):"","\n    ").concat(this.offset!==undefined&&this.offset.trim()!==""?"pds-box-offset-".concat(this.offset):"","\n    ").concat(this.offsetXs!==undefined&&this.offsetXs.trim()!==""?"pds-box-offset-xs-".concat(this.offsetXs):"","\n    ").concat(this.offsetSm!==undefined&&this.offsetSm.trim()!==""?"pds-box-offset-sm-".concat(this.offsetSm):"","\n    ").concat(this.offsetMd!==undefined&&this.offsetMd.trim()!==""?"pds-box-offset-md-".concat(this.offsetMd):"","\n    ").concat(this.offsetLg!==undefined&&this.offsetLg.trim()!==""?"pds-box-offset-lg-".concat(this.offsetLg):"","\n    ").concat(this.offsetXl!==undefined&&this.offsetXl.trim()!==""?"pds-box-offset-xl-".concat(this.offsetXl):"","\n    ").concat(this.padding!==undefined&&this.padding.trim()!==""?"pds-padding-".concat(this.padding):"","\n    ").concat(this.shadow!==undefined&&this.shadow.trim()!==""?"pds-shadow-".concat(this.shadow):"","\n    ").concat(this.size!==undefined&&this.size.trim()!==""?"pds-box pds-box-".concat(this.size):"","\n    ").concat(this.sizeXs!==undefined&&this.sizeXs.trim()!==""?"pds-box-xs-".concat(this.sizeXs):"","\n    ").concat(this.sizeSm!==undefined&&this.sizeSm.trim()!==""?"pds-box-sm-".concat(this.sizeSm):"","\n    ").concat(this.sizeMd!==undefined&&this.sizeMd.trim()!==""?"pds-box-md-".concat(this.sizeMd):"","\n    ").concat(this.sizeLg!==undefined&&this.sizeLg.trim()!==""?"pds-box-lg-".concat(this.sizeLg):"","\n    ").concat(this.sizeXl!==undefined&&this.sizeXl.trim()!==""?"pds-box-xl-".concat(this.sizeXl):"","\n    ").concat(this.size==undefined&&this.sizeSm==undefined&&this.sizeMd==undefined&&this.sizeLg==undefined&&this.sizeXl==undefined?"pds-box":"","\n    ");var s=Object.assign(Object.assign(Object.assign(Object.assign({},this.backgroundColor&&{"--box-background-color":this.backgroundColor}),this.borderColor&&{"--box-border-color":this.borderColor}),this.minHeight&&{"--box-min-height":this.minHeight}),this.minWidth&&{"--box-min-width":this.minWidth});return h(Host,{key:"c04696c04b987f82aa03e23d41078ffa32ed6e78",class:i,style:s})};return i}();PdsBox.style=PdsBoxStyle0;export{PdsBox as pds_box};
+import{r as registerInstance,h,H as Host}from"./index-09d6e504.js";var pdsBoxCss="pds-box{--box-background-color:inherit;--box-border-color:inherit;--box-min-height:none;--box-min-width:none;--box-gap-xxs:var(--pine-spacing-050);--box-gap-xs:var(--pine-spacing-100);--box-gap-sm:var(--pine-spacing-200);--box-gap-md:var(--pine-spacing-300);--box-gap-lg:var(--pine-spacing-450);--box-gap-xl:var(--pine-spacing-600);--box-gap-xxl:var(--pine-spacing-800);display:block}[class*=pds-box]{background-color:var(--box-background-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--box-min-height);min-width:var(--box-min-width)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-2xl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-2xl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-2xl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-2xl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-2xl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-box--auto{-ms-flex:0 0 var(--box-min-width, fit-content);flex:0 0 var(--box-min-width, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--box-border-color, var(--pine-border-default-color));border-style:var(--pine-border-default-style);border-width:var(--pine-border-default-width)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-border-radius-xs)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-sm)}.pds-border-radius-md{border-radius:var(--pine-border-radius-md)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-lg)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-xs);box-shadow:var(--pine-box-shadow-xs)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-sm);box-shadow:var(--pine-box-shadow-sm)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-md);box-shadow:var(--pine-box-shadow-md)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-lg);box-shadow:var(--pine-box-shadow-lg)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--box-gap-xxs)}.pds-box-gap-xs{gap:var(--box-gap-xs)}.pds-box-gap-sm{gap:var(--box-gap-sm)}.pds-box-gap-md{gap:var(--box-gap-md)}.pds-box-gap-lg{gap:var(--box-gap-lg)}.pds-box-gap-xl{gap:var(--box-gap-xl)}.pds-box-gap-xxl{gap:var(--box-gap-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--box-gap-xxs)}.pds-padding-xs{padding:var(--box-gap-xxs)}.pds-padding-sm{padding:var(--box-gap-sm)}.pds-padding-md{padding:var(--box-gap-md)}.pds-padding-lg{padding:var(--box-gap-lg)}.pds-padding-xl{padding:var(--box-gap-xl)}.pds-padding-xxl{padding:var(--box-gap-2xl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";var PdsBoxStyle0=pdsBoxCss;var PdsBox=function(){function i(i){registerInstance(this,i);this.alignItems=undefined;this.auto=undefined;this.backgroundColor=undefined;this.border=false;this.borderColor=undefined;this.borderRadius=undefined;this.direction=undefined;this.display=undefined;this.fit=undefined;this.gap=undefined;this.flex=undefined;this.justifyContent=undefined;this.minHeight=undefined;this.minWidth=undefined;this.offset=undefined;this.offsetXs=undefined;this.offsetSm=undefined;this.offsetMd=undefined;this.offsetLg=undefined;this.offsetXl=undefined;this.padding=undefined;this.shadow=undefined;this.size=undefined;this.sizeXs=undefined;this.sizeSm=undefined;this.sizeMd=undefined;this.sizeLg=undefined;this.sizeXl=undefined}i.prototype.render=function(){var i="\n    ".concat(this.alignItems!==undefined&&this.alignItems.trim()!==""?"pds-align-items-".concat(this.alignItems):"","\n    ").concat(this.auto?"pds-box--auto":"","\n    ").concat(this.border?"pds-box--border":"","\n    ").concat(this.borderRadius!==undefined&&this.borderRadius.trim()!==""?"pds-border-radius-".concat(this.borderRadius):"","\n    ").concat(this.direction!==undefined&&this.direction.trim()!==""?"pds-box-direction-".concat(this.direction):"","\n    ").concat(this.display!==undefined&&this.display.trim()!==""?"pds-box--display-".concat(this.display):"","\n    ").concat(this.fit?"pds-box--fit":"","\n    ").concat(this.gap!==undefined&&this.gap.trim()!==""?"pds-box-gap-".concat(this.gap):"","\n    ").concat(this.flex!==undefined&&this.flex.trim()!==""?"pds-box--flex-".concat(this.flex):"","\n    ").concat(this.justifyContent!==undefined&&this.justifyContent.trim()!==""?"pds-justify-content-".concat(this.justifyContent):"","\n    ").concat(this.offset!==undefined&&this.offset.trim()!==""?"pds-box-offset-".concat(this.offset):"","\n    ").concat(this.offsetXs!==undefined&&this.offsetXs.trim()!==""?"pds-box-offset-xs-".concat(this.offsetXs):"","\n    ").concat(this.offsetSm!==undefined&&this.offsetSm.trim()!==""?"pds-box-offset-sm-".concat(this.offsetSm):"","\n    ").concat(this.offsetMd!==undefined&&this.offsetMd.trim()!==""?"pds-box-offset-md-".concat(this.offsetMd):"","\n    ").concat(this.offsetLg!==undefined&&this.offsetLg.trim()!==""?"pds-box-offset-lg-".concat(this.offsetLg):"","\n    ").concat(this.offsetXl!==undefined&&this.offsetXl.trim()!==""?"pds-box-offset-xl-".concat(this.offsetXl):"","\n    ").concat(this.padding!==undefined&&this.padding.trim()!==""?"pds-padding-".concat(this.padding):"","\n    ").concat(this.shadow!==undefined&&this.shadow.trim()!==""?"pds-shadow-".concat(this.shadow):"","\n    ").concat(this.size!==undefined&&this.size.trim()!==""?"pds-box pds-box-".concat(this.size):"","\n    ").concat(this.sizeXs!==undefined&&this.sizeXs.trim()!==""?"pds-box-xs-".concat(this.sizeXs):"","\n    ").concat(this.sizeSm!==undefined&&this.sizeSm.trim()!==""?"pds-box-sm-".concat(this.sizeSm):"","\n    ").concat(this.sizeMd!==undefined&&this.sizeMd.trim()!==""?"pds-box-md-".concat(this.sizeMd):"","\n    ").concat(this.sizeLg!==undefined&&this.sizeLg.trim()!==""?"pds-box-lg-".concat(this.sizeLg):"","\n    ").concat(this.sizeXl!==undefined&&this.sizeXl.trim()!==""?"pds-box-xl-".concat(this.sizeXl):"","\n    ").concat(this.size==undefined&&this.sizeSm==undefined&&this.sizeMd==undefined&&this.sizeLg==undefined&&this.sizeXl==undefined?"pds-box":"","\n    ");var s=Object.assign(Object.assign(Object.assign(Object.assign({},this.backgroundColor&&{"--box-background-color":this.backgroundColor}),this.borderColor&&{"--box-border-color":this.borderColor}),this.minHeight&&{"--box-min-height":this.minHeight}),this.minWidth&&{"--box-min-width":this.minWidth});return h(Host,{key:"c04696c04b987f82aa03e23d41078ffa32ed6e78",class:i,style:s})};return i}();PdsBox.style=PdsBoxStyle0;export{PdsBox as pds_box};
+//# sourceMappingURL=pds-box.entry.js.map

package/dist/esm-es5/pds-box.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["pdsBoxCss","PdsBoxStyle0","PdsBox","prototype","render","boxClasses","concat","this","alignItems","undefined","trim","auto","border","borderRadius","direction","display","fit","gap","flex","justifyContent","offset","offsetXs","offsetSm","offsetMd","offsetLg","offsetXl","padding","shadow","size","sizeXs","sizeSm","sizeMd","sizeLg","sizeXl","boxInlineStyles","Object","assign","backgroundColor","borderColor","minHeight","minWidth","h","Host","key","class","style"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --box-background-color: inherit;\n --box-border-color: inherit;\n --box-min-height: none;\n --box-min-width: none;\n\n --box-gap-xxs: var(--pine-spacing-050);\n --box-gap-xs: var(--pine-spacing-100);\n --box-gap-sm: var(--pine-spacing-200);\n --box-gap-md: var(--pine-spacing-300);\n --box-gap-lg: var(--pine-spacing-450);\n --box-gap-xl: var(--pine-spacing-600);\n --box-gap-xxl: var(--pine-spacing-800);\n\n display: block;\n}\n\n[class*='pds-box'] {\n background-color: var(--box-background-color);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--box-min-height);;\n min-width: var(--box-min-width);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n 2xl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--box-min-width, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--box-border-color, var(--pine-border-default-color));\n border-style: var(--pine-border-default-style);\n border-width: var(--pine-border-default-width);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-border-radius-xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-border-radius-sm);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-border-radius-md);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-border-radius-lg);\n}\n\n.pds-border-radius-circle {\n border-radius: 50%;\n}\n\n// Box shadow helpers\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-xs);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-sm);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-md);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-lg);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--box-gap-xxs);\n}\n\n.pds-box-gap-xs {\n gap: var(--box-gap-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--box-gap-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--box-gap-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--box-gap-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--box-gap-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--box-gap-2xl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--box-gap-xxs);\n}\n\n.pds-padding-xs {\n padding: var(--box-gap-xxs);\n}\n\n.pds-padding-sm {\n padding: var(--box-gap-sm);\n}\n\n.pds-padding-md {\n padding: var(--box-gap-md);\n}\n\n.pds-padding-lg {\n padding: var(--box-gap-lg);\n}\n\n.pds-padding-xl {\n padding: var(--box-gap-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--box-gap-2xl);\n}\n\n// Display helpers\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /**\n * Defines the vertical alignment of the box items.\n * @defaultValue start\n */\n @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n /**\n * If `true`, the box will be sized to fit its contents.\n */\n @Prop() auto?: boolean;\n\n /**\n * Defines the background-color of the box.\n */\n @Prop() backgroundColor?: string;\n\n /**\n * If `true`, the box will have a border.\n */\n @Prop() border? = false;\n\n /**\n * Defines the border color of the box.\n */\n @Prop() borderColor?: string;\n\n /**\n * Defines how rounded the box corners are.\n * @defaultValue none\n */\n @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n \n /**\n * Defines the orientation of the box items.\n * @defaultValue row\n */\n @Prop() direction?: `row` | `column`;\n\n /**\n * Defines the display style of the box.\n * @defaultValue flex\n */\n @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n /**\n * If `true`, sets the box `max-width` to `100%`.\n */\n @Prop() fit?: boolean;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() gap?: BoxTShirtSizeType;\n\n /**\n * Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n */\n @Prop() flex?: `none` | `grow` | `shrink`;\n\n /**\n * Defines the horizontal alignment of the box items.\n * @defaultValue start\n */\n @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n /**\n * The minimum height of the row. Used in conjunction with alignment props\n */\n @Prop() minHeight?: string;\n\n /**\n * The minimum width of the row. Used in conjunction with alignment props\n */\n @Prop() minWidth?: string;\n \n /**\n * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offset?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXs?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetSm?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetMd?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetLg?: BoxColumnType;\n\n /**\n * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n */\n @Prop() offsetXl?: BoxColumnType;\n\n /**\n * Defines the spacing between the box items.\n * @defaultValue none\n */\n @Prop() padding?: BoxTShirtSizeType;\n\n /**\n * Defines the box shadow.\n * @defaultValue none\n */\n @Prop() shadow?: BoxTShirtSizeType;\n\n /**\n * Size of the column for all screen sizes that are not explicitly set.\n */\n @Prop() size?: BoxColumnType;\n\n /**\n * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXs?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeSm?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeMd?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeLg?: BoxColumnType;\n\n /**\n * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--box-background-color': this.backgroundColor }),\n ...(this.borderColor && { '--box-border-color': this.borderColor }),\n ...(this.minHeight && { '--box-min-height': this.minHeight }),\n ...(this.minWidth && { '--box-min-width': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"mappings":"mEAAA,IAAMA,UAAY,4kqBAClB,IAAAC,aAAeD,U,ICOFE,OAAM,W,gIAoBC,M,6iBAkIlBA,EAAAC,UAAAC,OAAA,WACE,IAAMC,EAAa,SAAAC,OACjBC,KAAKC,aAAeC,WAAaF,KAAKC,WAAWE,SAAW,GAAK,mBAAAJ,OAAmBC,KAAKC,YAAe,GAAE,UAAAF,OAC1GC,KAAKI,KAAO,gBAAkB,GAAE,UAAAL,OAChCC,KAAKK,OAAS,kBAAoB,GAAE,UAAAN,OACpCC,KAAKM,eAAiBJ,WAAaF,KAAKM,aAAaH,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKM,cAAiB,GAAE,UAAAP,OAClHC,KAAKO,YAAcL,WAAaF,KAAKO,UAAUJ,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKO,WAAc,GAAE,UAAAR,OACzGC,KAAKQ,UAAYN,WAAaF,KAAKQ,QAAQL,SAAW,GAAK,oBAAAJ,OAAoBC,KAAKQ,SAAY,GAAE,UAAAT,OAClGC,KAAKS,IAAM,eAAiB,GAAE,UAAAV,OAC9BC,KAAKU,MAAQR,WAAaF,KAAKU,IAAIP,SAAW,GAAK,eAAAJ,OAAeC,KAAKU,KAAQ,GAAE,UAAAX,OACjFC,KAAKW,OAAST,WAAaF,KAAKW,KAAKR,SAAW,GAAK,iBAAAJ,OAAiBC,KAAKW,MAAS,GAAE,UAAAZ,OACtFC,KAAKY,iBAAmBV,WAAaF,KAAKY,eAAeT,SAAW,GAAK,uBAAAJ,OAAuBC,KAAKY,gBAAmB,GAAE,UAAAb,OAC1HC,KAAKa,SAAWX,WAAaF,KAAKa,OAAOV,SAAW,GAAK,kBAAAJ,OAAkBC,KAAKa,QAAW,GAAE,UAAAd,OAC7FC,KAAKc,WAAaZ,WAAaF,KAAKc,SAASX,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKc,UAAa,GAAE,UAAAf,OACtGC,KAAKe,WAAab,WAAaF,KAAKe,SAASZ,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKe,UAAa,GAAE,UAAAhB,OACtGC,KAAKgB,WAAad,WAAaF,KAAKgB,SAASb,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKgB,UAAa,GAAE,UAAAjB,OACtGC,KAAKiB,WAAaf,WAAaF,KAAKiB,SAASd,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKiB,UAAa,GAAE,UAAAlB,OACtGC,KAAKkB,WAAahB,WAAaF,KAAKkB,SAASf,SAAW,GAAK,qBAAAJ,OAAqBC,KAAKkB,UAAa,GAAE,UAAAnB,OACtGC,KAAKmB,UAAYjB,WAAaF,KAAKmB,QAAQhB,SAAW,GAAK,eAAAJ,OAAeC,KAAKmB,SAAY,GAAE,UAAApB,OAC7FC,KAAKoB,SAAWlB,WAAaF,KAAKoB,OAAOjB,SAAW,GAAK,cAAAJ,OAAcC,KAAKoB,QAAW,GAAE,UAAArB,OACzFC,KAAKqB,OAASnB,WAAaF,KAAKqB,KAAKlB,SAAW,GAAK,mBAAAJ,OAAmBC,KAAKqB,MAAS,GAAE,UAAAtB,OACxFC,KAAKsB,SAAWpB,WAAaF,KAAKsB,OAAOnB,SAAW,GAAK,cAAAJ,OAAcC,KAAKsB,QAAW,GAAE,UAAAvB,OACzFC,KAAKuB,SAAWrB,WAAaF,KAAKuB,OAAOpB,SAAW,GAAK,cAAAJ,OAAcC,KAAKuB,QAAW,GAAE,UAAAxB,OACzFC,KAAKwB,SAAWtB,WAAaF,KAAKwB,OAAOrB,SAAW,GAAK,cAAAJ,OAAcC,KAAKwB,QAAW,GAAE,UAAAzB,OACzFC,KAAKyB,SAAWvB,WAAaF,KAAKyB,OAAOtB,SAAW,GAAK,cAAAJ,OAAcC,KAAKyB,QAAW,GAAE,UAAA1B,OACzFC,KAAK0B,SAAWxB,WAAaF,KAAK0B,OAAOvB,SAAW,GAAK,cAAAJ,OAAcC,KAAK0B,QAAW,GAAE,UAAA3B,OACzFC,KAAKqB,MAAQnB,WACbF,KAAKuB,QAAUrB,WACfF,KAAKwB,QAAUtB,WACfF,KAAKyB,QAAUvB,WACfF,KAAK0B,QAAUxB,UAAY,UAAY,GAAE,UAG3C,IAAMyB,EAAeC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACf7B,KAAK8B,iBAAmB,CAAE,yBAA0B9B,KAAK8B,kBACzD9B,KAAK+B,aAAe,CAAE,qBAAsB/B,KAAK+B,cACjD/B,KAAKgC,WAAa,CAAE,mBAAoBhC,KAAKgC,YAC7ChC,KAAKiC,UAAY,CAAE,kBAAmBjC,KAAKiC,WAGjD,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOvC,EAAYwC,MAAOX,G,WA/LnB,G"}

package/dist/esm-es5/pds-button.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-9312507f.js";var hasShadowDom=function(r){return!!r.shadowRoot&&!!r.attachShadow};var pdsButtonCss=":host{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-disabled:transparent;--background-color-primary:var(--pine-color-neutral-charcoal-400);--background-color-hover-primary:var(--pine-color-neutral-charcoal-500);--background-color-disabled-primary:var(--pine-color-neutral-grey-300);--color-primary:var(--pine-color-base-white);--color-disabled-primary:var(--pine-color-neutral-charcoal-100);--outline-color-primary:var(--pine-color-primary-200);--border-color-secondary:var(--pine-color-neutral-grey-400);--border-color-hover-secondary:var(--pine-color-neutral-grey-500);--border-color-focus-secondary:var(--pine-color-neutral-grey-300);--border-color-disabled-secondary:var(--pine-color-neutral-grey-300);--color-secondary:var(--pine-color-neutral-charcoal-400);--color-disabled-secondary:var(--pine-color-neutral-charcoal-100);--outline-color-secondary:var(--pine-color-primary-200);--background-color-accent:var(--pine-color-primary-300);--background-color-hover-accent:var(--pine-color-primary-400);--background-color-disabled-accent:var(--pine-color-primary-100);--color-accent:var(--pine-color-base-white);--color-disabled-accent:var(--pine-color-primary-200);--outline-color-accent:var(--pine-color-primary-200);--background-color-destructive:var(--pine-color-red-300);--background-color-hover-destructive:var(--pine-color-red-400);--background-color-disabled-destructive:var(--pine-color-red-100);--color-destructive:var(--pine-color-base-white);--color-disabled-destructive:var(--pine-color-red-200);--outline-color-destructive:var(--pine-color-red-200);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:10px;color:var(--color);display:-ms-flexbox;display:flex;font-family:inherit;font-size:1rem;font-weight:500;min-height:40px;padding:0.5rem 1rem}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.pds-button:hover{background-color:var(--background-color-hover);border-color:var(--border-color-hover)}.pds-button:focus{border-color:var(--border-color-focus);outline:4px solid var(--outline-color)}.pds-button:disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled);color:var(--color-disabled)}.pds-button--primary{--background-color:var(--background-color-primary);--background-color-hover:var(--background-color-hover-primary);--background-color-disabled:var(--background-color-disabled-primary);--color:var(--color-primary);--color-disabled:var(--color-disabled-primary);--outline-color:var(--outline-color-primary)}.pds-button--accent{--background-color:var(--background-color-accent);--background-color-hover:var(--background-color-hover-accent);--background-color-disabled:var(--background-color-disabled-accent);--color:var(--color-accent);--color-disabled:var(--color-disabled-accent);--outline-color:var(--outline-color-accent)}.pds-button--destructive{--background-color:var(--background-color-destructive);--background-color-hover:var(--background-color-hover-destructive);--background-color-disabled:var(--background-color-disabled-destructive);--color:var(--color-destructive);--color-disabled:var(--color-disabled-destructive);--outline-color:var(--outline-color-destructive)}.pds-button--secondary,.pds-button--disclosure{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--border-color-disabled:var(--border-color-disabled-secondary);--border-color-focus:var(--border-color-focus-secondary);--border-color-hover:var(--border-color-hover-secondary);--border-color:var(--border-color-secondary);--color:var(--color-secondary);--color-disabled:var(--color-disabled-secondary);--outline-color:var(--outline-color-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.pds-button--unstyled{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--color:inherit;border:0;margin:0;min-height:auto;padding:0;width:inherit}";var PdsButtonStyle0=pdsButtonCss;var PdsButton=function(){function r(r){var o=this;registerInstance(this,r);this.handleClick=function(r){if(o.type!="button"){if(hasShadowDom(o.el)){var e=o.el.closest("form");if(e){r.preventDefault();var a=document.createElement("button");a.type=o.type;a.style.display="none";e.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")};r.prototype.render=function(){return h(Host,{key:"0f8f16b8e8d941481d66f1833a4a7e5402aab2bc","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},h("button",{key:"c8b0a1f8b0f6c984477e2bb6cdb77226f8250ac3",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&h("pds-icon",{name:this.icon,part:"icon"}),h("slot",{key:"76310f327aad59ecd150261a186e256c52cf6251"}),this.variant==="disclosure"&&h("pds-icon",{name:"caret-down",part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PdsButton.style=PdsButtonStyle0;export{PdsButton as pds_button};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-09d6e504.js";var hasShadowDom=function(r){return!!r.shadowRoot&&!!r.attachShadow};var pdsButtonCss=":host{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-disabled:transparent;--background-color-primary:var(--pine-color-neutral-charcoal-400);--background-color-hover-primary:var(--pine-color-neutral-charcoal-500);--background-color-disabled-primary:var(--pine-color-neutral-grey-300);--color-primary:var(--pine-color-base-white);--color-disabled-primary:var(--pine-color-neutral-charcoal-100);--outline-color-primary:var(--pine-color-primary-200);--border-color-secondary:var(--pine-color-neutral-grey-400);--border-color-hover-secondary:var(--pine-color-neutral-grey-500);--border-color-focus-secondary:var(--pine-color-neutral-grey-300);--border-color-disabled-secondary:var(--pine-color-neutral-grey-300);--color-secondary:var(--pine-color-neutral-charcoal-400);--color-disabled-secondary:var(--pine-color-neutral-charcoal-100);--outline-color-secondary:var(--pine-color-primary-200);--background-color-accent:var(--pine-color-primary-300);--background-color-hover-accent:var(--pine-color-primary-400);--background-color-disabled-accent:var(--pine-color-primary-100);--color-accent:var(--pine-color-base-white);--color-disabled-accent:var(--pine-color-primary-200);--outline-color-accent:var(--pine-color-primary-200);--background-color-destructive:var(--pine-color-red-300);--background-color-hover-destructive:var(--pine-color-red-400);--background-color-disabled-destructive:var(--pine-color-red-100);--color-destructive:var(--pine-color-base-white);--color-disabled-destructive:var(--pine-color-red-200);--outline-color-destructive:var(--pine-color-red-200);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:10px;color:var(--color);display:-ms-flexbox;display:flex;font-family:inherit;font-size:1rem;font-weight:500;min-height:40px;padding:0.5rem 1rem}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.pds-button:hover{background-color:var(--background-color-hover);border-color:var(--border-color-hover)}.pds-button:focus{border-color:var(--border-color-focus);outline:4px solid var(--outline-color)}.pds-button:disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled);color:var(--color-disabled)}.pds-button--primary{--background-color:var(--background-color-primary);--background-color-hover:var(--background-color-hover-primary);--background-color-disabled:var(--background-color-disabled-primary);--color:var(--color-primary);--color-disabled:var(--color-disabled-primary);--outline-color:var(--outline-color-primary)}.pds-button--accent{--background-color:var(--background-color-accent);--background-color-hover:var(--background-color-hover-accent);--background-color-disabled:var(--background-color-disabled-accent);--color:var(--color-accent);--color-disabled:var(--color-disabled-accent);--outline-color:var(--outline-color-accent)}.pds-button--destructive{--background-color:var(--background-color-destructive);--background-color-hover:var(--background-color-hover-destructive);--background-color-disabled:var(--background-color-disabled-destructive);--color:var(--color-destructive);--color-disabled:var(--color-disabled-destructive);--outline-color:var(--outline-color-destructive)}.pds-button--secondary,.pds-button--disclosure{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--border-color-disabled:var(--border-color-disabled-secondary);--border-color-focus:var(--border-color-focus-secondary);--border-color-hover:var(--border-color-hover-secondary);--border-color:var(--border-color-secondary);--color:var(--color-secondary);--color-disabled:var(--color-disabled-secondary);--outline-color:var(--outline-color-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.pds-button--unstyled{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--color:inherit;border:0;margin:0;min-height:auto;padding:0;width:inherit}";var PdsButtonStyle0=pdsButtonCss;var PdsButton=function(){function r(r){var o=this;registerInstance(this,r);this.handleClick=function(r){if(o.type!="button"){if(hasShadowDom(o.el)){var e=o.el.closest("form");if(e){r.preventDefault();var a=document.createElement("button");a.type=o.type;a.style.display="none";e.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")};r.prototype.render=function(){return h(Host,{key:"0f8f16b8e8d941481d66f1833a4a7e5402aab2bc","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},h("button",{key:"c8b0a1f8b0f6c984477e2bb6cdb77226f8250ac3",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&h("pds-icon",{name:this.icon,part:"icon"}),h("slot",{key:"76310f327aad59ecd150261a186e256c52cf6251"}),this.variant==="disclosure"&&h("pds-icon",{name:"caret-down",part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PdsButton.style=PdsButtonStyle0;export{PdsButton as pds_button};
+//# sourceMappingURL=pds-button.entry.js.map

package/dist/esm-es5/pds-button.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: transparent;\n --border-color-disabled: transparent;\n\n // primary\n --background-color-primary: var(--pine-color-neutral-charcoal-400);\n --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);\n --background-color-disabled-primary: var(--pine-color-neutral-grey-300);\n --color-primary: var(--pine-color-base-white);\n --color-disabled-primary: var(--pine-color-neutral-charcoal-100);\n --outline-color-primary: var(--pine-color-primary-200);\n\n // secondary\n --border-color-secondary: var(--pine-color-neutral-grey-400);\n --border-color-hover-secondary: var(--pine-color-neutral-grey-500);\n --border-color-focus-secondary: var(--pine-color-neutral-grey-300);\n --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);\n --color-secondary: var(--pine-color-neutral-charcoal-400);\n --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);\n --outline-color-secondary: var(--pine-color-primary-200);\n\n // accent\n --background-color-accent: var(--pine-color-primary-300);\n --background-color-hover-accent: var(--pine-color-primary-400);\n --background-color-disabled-accent: var(--pine-color-primary-100);\n --color-accent: var(--pine-color-base-white);\n --color-disabled-accent: var(--pine-color-primary-200);\n --outline-color-accent: var(--pine-color-primary-200);\n\n // destructive\n --background-color-destructive: var(--pine-color-red-300);\n --background-color-hover-destructive: var(--pine-color-red-400);\n --background-color-disabled-destructive: var(--pine-color-red-100);\n --color-destructive: var(--pine-color-base-white);\n --color-disabled-destructive: var(--pine-color-red-200);\n --outline-color-destructive: var(--pine-color-red-200);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--background-color);\n border: 1px solid var(--border-color);\n border-radius: 10px;\n color: var(--color);\n display: flex;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n min-height: 40px;\n padding: 0.5rem 1rem;\n\n pds-icon {\n fill: currentColor;\n margin-inline-end: 0.5rem;\n }\n\n &:hover {\n background-color: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:focus {\n border-color: var(--border-color-focus);\n outline: 4px solid var(--outline-color);\n }\n\n &:disabled {\n background-color: var(--background-color-disabled);\n border-color: var(--border-color-disabled);\n color: var(--color-disabled);\n }\n}\n\n.pds-button--primary {\n --background-color: var(--background-color-primary);\n --background-color-hover: var(--background-color-hover-primary);\n --background-color-disabled: var(--background-color-disabled-primary);\n --color: var(--color-primary);\n --color-disabled: var(--color-disabled-primary);\n --outline-color: var(--outline-color-primary);\n}\n\n.pds-button--accent {\n --background-color: var(--background-color-accent);\n --background-color-hover: var(--background-color-hover-accent);\n --background-color-disabled: var(--background-color-disabled-accent);\n --color: var(--color-accent);\n --color-disabled: var(--color-disabled-accent);\n --outline-color: var(--outline-color-accent);\n}\n\n.pds-button--destructive {\n --background-color: var(--background-color-destructive);\n --background-color-hover: var(--background-color-hover-destructive);\n --background-color-disabled: var(--background-color-disabled-destructive);\n --color: var(--color-destructive);\n --color-disabled: var(--color-disabled-destructive);\n --outline-color: var(--outline-color-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-disabled: transparent;\n --border-color-disabled: var(--border-color-disabled-secondary);\n --border-color-focus: var(--border-color-focus-secondary);\n --border-color-hover: var(--border-color-hover-secondary);\n --border-color: var(--border-color-secondary);\n --color: var(--color-secondary);\n --color-disabled: var(--color-disabled-secondary);\n --outline-color: var(--outline-color-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: 0;\n margin-inline-start: 0.5rem;\n }\n}\n\n.pds-button--unstyled {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-disabled: transparent;\n --color: inherit;\n border: 0;\n margin: 0;\n min-height: auto;\n padding: 0;\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrl: 'pds-button.scss',\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon name=\"caret-down\" part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"mFAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,aAAe,0pIACrB,IAAAC,gBAAeD,a,ICaFE,UAAS,W,kDAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIX,aAAaU,EAAKT,IAAK,CACzB,IAAMW,EAAOF,EAAKT,GAAGY,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FhB,EAAAiB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIjB,KAAKkB,QAAS,CAChBD,EAAWE,KAAK,eAAiBnB,KAAKkB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBrB,EAAAiB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYxB,KAAKyB,SAAW,OAAS,KACxCC,GAAI1B,KAAK2B,YACTC,QAAS5B,KAAKC,YACdiB,QAASlB,KAAKkB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO7B,KAAKiB,aACZQ,SAAUzB,KAAKyB,SACfK,KAAM9B,KAAK8B,KACXC,KAAK,SACL3B,KAAMJ,KAAKI,KACX4B,MAAOhC,KAAKgC,OAEXhC,KAAKiC,MAAQjC,KAAKkB,UAAY,cAAgBI,EAAA,YAAUQ,KAAM9B,KAAKiC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCxB,KAAKkB,UAAY,cAAgBI,EAAA,YAAUQ,KAAK,aAAaC,KAAK,W,gIAvFvD,G"}

package/dist/esm-es5/pds-checkbox_2.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-9312507f.js";import{m as messageId,P as PdsLabel,a as assignDescription}from"./pds-label-d33eab3b.js";var pdsCheckboxCss=':host{--background-color:var(--pine-color-base-white);--background-color-disabled:var(--pine-color-neutral-grey-200);--background-color-hover:var(--pine-color-neutral-grey-100);--border:var(--pine-border-interactive);--border-color-disabled:var(--pine-color-neutral-charcoal-100);--border-color-hover:var(--pine-border-interactive-hover-color);--border-color-icon:var(--pine-color-base-white);--border-radius:var(--pine-border-radius-xs);--color-checked:var(--pine-color-neutral-charcoal-500);--color-disabled:var(--pine-color-neutral-grey-300);--color-focus:var(--pine-color-primary-200);--color-invalid-focus:var(--pine-color-red-200);--color-invalid:var(--pine-color-red-300);--message-color-disabled:var(--pine-color-neutral-grey-500);--message-color:var(--pine-color-neutral-charcoal-200);--input-size:16px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-invalid-focus);box-shadow:0 0 0 4px var(--color-invalid-focus);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color);border:var(--border);border-radius:var(--border-radius);height:var(--input-size);margin:0;position:relative;width:var(--input-size)}input:hover{background:var(--background-color-hover);border-color:var(--border-color-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--border-color-icon);border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--background-color-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--border-color-disabled)}input:disabled+label{color:var(--border-color-hover);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--message-color-disabled)}input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-focus);box-shadow:0 0 0 4px var(--color-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--message-color);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}';var PdsCheckboxStyle0=pdsCheckboxCss;var PdsCheckbox=function(){function e(e){var i=this;registerInstance(this,e);this.pdsCheckboxChange=createEvent(this,"pdsCheckboxChange",7);this.handleCheckboxChange=function(e){if(i.disabled){return}var r=e.target;i.checked=r.checked;i.pdsCheckboxChange.emit({checked:r.checked,value:i.value})};this.checked=undefined;this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.indeterminate=undefined;this.invalid=undefined;this.label=undefined;this.labelHidden=undefined;this.name=undefined;this.required=undefined;this.value=undefined}e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"df4d541eb43253bac6d9f0396d5af5c0a0181db0",class:this.classNames()},h("input",{key:"59f4ff764cdf4fac9ff38a734b91cf31219f2a59","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,type:"checkbox",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange}),h(PdsLabel,{key:"99da91ab0d67c72f29092a623164b0822ff56a66",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&h("div",{class:"pds-checkbox__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{class:"pds-checkbox__message pds-checkbox__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};return e}();PdsCheckbox.style=PdsCheckboxStyle0;var pdsTableCellCss=":host{--background-fixed:var(--pine-color-base-white);--box-shadow:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color:var(--pine-color-neutral-charcoal-200);--fixed-column-index:0;--font-size:var(--pine-font-size-body-sm);--line-height:var(--pine-line-height-sm);--padding:calc(var(--pine-spacing-md) / 2);--padding-compact:var(--pine-spacing-xxs);--fixed-cell-position:0;--max-width-truncated:100px;color:var(--color);display:table-cell;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding);vertical-align:inherit}:host(.is-compact){padding-block:var(--padding-compact)}:host(.is-fixed){background:var(--background-fixed);left:var(--fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(.is-truncated){max-width:var(--max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var PdsTableCellStyle0=pdsTableCellCss;var PdsTableCell=function(){function e(e){var i=this;registerInstance(this,e);this.handleScroll=function(){if(i.tableRef.scrollLeft>0){i.tableScrolling=true}else{i.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return h(Host,{key:"71ff527047eaafcf9b9c57a6aa96634e4a887f0b",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"b62c595da7fbf8795e90c67c3d50b9f5e7449067"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableCell.style=PdsTableCellStyle0;export{PdsCheckbox as pds_checkbox,PdsTableCell as pds_table_cell};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-09d6e504.js";import{m as messageId,P as PdsLabel,a as assignDescription}from"./pds-label-ea621e18.js";var pdsCheckboxCss=':host{--background-color:var(--pine-color-base-white);--background-color-disabled:var(--pine-color-neutral-grey-200);--background-color-hover:var(--pine-color-neutral-grey-100);--border:var(--pine-border-interactive);--border-color-disabled:var(--pine-color-neutral-charcoal-100);--border-color-hover:var(--pine-border-interactive-hover-color);--border-color-icon:var(--pine-color-base-white);--border-radius:var(--pine-border-radius-xs);--color-checked:var(--pine-color-neutral-charcoal-500);--color-disabled:var(--pine-color-neutral-grey-300);--color-focus:var(--pine-color-primary-200);--color-invalid-focus:var(--pine-color-red-200);--color-invalid:var(--pine-color-red-300);--message-color-disabled:var(--pine-color-neutral-grey-500);--message-color:var(--pine-color-neutral-charcoal-200);--input-size:16px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-invalid-focus);box-shadow:0 0 0 4px var(--color-invalid-focus);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color);border:var(--border);border-radius:var(--border-radius);height:var(--input-size);margin:0;position:relative;width:var(--input-size)}input:hover{background:var(--background-color-hover);border-color:var(--border-color-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--border-color-icon);border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--background-color-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--border-color-disabled)}input:disabled+label{color:var(--border-color-hover);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--message-color-disabled)}input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-focus);box-shadow:0 0 0 4px var(--color-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--message-color);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}';var PdsCheckboxStyle0=pdsCheckboxCss;var PdsCheckbox=function(){function e(e){var i=this;registerInstance(this,e);this.pdsCheckboxChange=createEvent(this,"pdsCheckboxChange",7);this.handleCheckboxChange=function(e){if(i.disabled){return}var r=e.target;i.checked=r.checked;i.pdsCheckboxChange.emit({checked:r.checked,value:i.value})};this.checked=undefined;this.componentId=undefined;this.disabled=undefined;this.errorMessage=undefined;this.helperMessage=undefined;this.indeterminate=undefined;this.invalid=undefined;this.label=undefined;this.labelHidden=undefined;this.name=undefined;this.required=undefined;this.value=undefined}e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"df4d541eb43253bac6d9f0396d5af5c0a0181db0",class:this.classNames()},h("input",{key:"59f4ff764cdf4fac9ff38a734b91cf31219f2a59","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,type:"checkbox",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange}),h(PdsLabel,{key:"99da91ab0d67c72f29092a623164b0822ff56a66",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&h("div",{class:"pds-checkbox__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{class:"pds-checkbox__message pds-checkbox__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};return e}();PdsCheckbox.style=PdsCheckboxStyle0;var pdsTableCellCss=":host{--background-fixed:var(--pine-color-base-white);--box-shadow:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color:var(--pine-color-neutral-charcoal-200);--fixed-column-index:0;--font-size:var(--pine-font-size-body-sm);--line-height:var(--pine-line-height-sm);--padding:calc(var(--pine-spacing-md) / 2);--padding-compact:var(--pine-spacing-xxs);--fixed-cell-position:0;--max-width-truncated:100px;color:var(--color);display:table-cell;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding);vertical-align:inherit}:host(.is-compact){padding-block:var(--padding-compact)}:host(.is-fixed){background:var(--background-fixed);left:var(--fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(.is-truncated){max-width:var(--max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";var PdsTableCellStyle0=pdsTableCellCss;var PdsTableCell=function(){function e(e){var i=this;registerInstance(this,e);this.handleScroll=function(){if(i.tableRef.scrollLeft>0){i.tableScrolling=true}else{i.tableScrolling=false}};this.truncate=undefined;this.tableScrolling=false}e.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};e.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};e.prototype.classNames=function(){var e=[];if(this.tableRef&&this.tableRef.compact){e.push("is-compact")}if(this.truncate){e.push("is-truncated")}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){e.push("has-scrolled")}return e.join(" ")};e.prototype.render=function(){return h(Host,{key:"71ff527047eaafcf9b9c57a6aa96634e4a887f0b",class:this.classNames(),role:"gridcell",style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},h("slot",{key:"b62c595da7fbf8795e90c67c3d50b9f5e7449067"}))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTableCell.style=PdsTableCellStyle0;export{PdsCheckbox as pds_checkbox,PdsTableCell as pds_table_cell};
+//# sourceMappingURL=pds-checkbox_2.entry.js.map

package/dist/esm-es5/pds-checkbox_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["pdsCheckboxCss","PdsCheckboxStyle0","PdsCheckbox","this","handleCheckboxChange","e","_this","disabled","target","checked","pdsCheckboxChange","emit","value","prototype","classNames","invalid","push","indeterminate","join","render","h","Host","key","class","assignDescription","componentId","helperMessage","undefined","type","id","name","required","onChange","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage","pdsTableCellCss","PdsTableCellStyle0","PdsTableCell","handleScroll","tableRef","scrollLeft","tableScrolling","componentWillRender","hostElement","closest","componentDidLoad","responsive","fixedColumn","addEventListener","compact","truncate","role","style","selectable"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx","src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --background-color: var(--pine-color-base-white);\n --background-color-disabled: var(--pine-color-neutral-grey-200);\n --background-color-hover: var(--pine-color-neutral-grey-100);\n --border: var(--pine-border-interactive);\n --border-color-disabled: var(--pine-color-neutral-charcoal-100);\n --border-color-hover: var(--pine-border-interactive-hover-color);\n --border-color-icon: var(--pine-color-base-white);\n --border-radius: var(--pine-border-radius-xs);\n --color-checked: var(--pine-color-neutral-charcoal-500);\n --color-disabled: var(--pine-color-neutral-grey-300);\n --color-focus: var(--pine-color-primary-200);\n --color-invalid-focus: var(--pine-color-red-200);\n --color-invalid: var(--pine-color-red-300);\n --message-color-disabled: var(--pine-color-neutral-grey-500);\n --message-color: var(--pine-color-neutral-charcoal-200);\n --input-size: 16px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--color-invalid);\n\n &:checked {\n background: var(--color-invalid);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px var(--color-invalid-focus);\n outline: none;\n }\n }\n\n label,\n .pds-checkbox__message--error {\n color: var(--color-invalid);\n }\n}\n\n:host(.is-indeterminate) {\n input:checked {\n &::after {\n border-bottom: 0;\n transform: rotate(87deg) translate3d(-114%, 25%, 0);\n }\n }\n}\n\ninput {\n appearance: none;\n background-color: var(--background-color);\n border: var(--border);\n border-radius: var(--border-radius);\n height: var(--input-size);\n margin: 0;\n position: relative;\n width: var(--input-size);\n\n &:hover {\n background: var(--background-color-hover);\n border-color: var(--border-color-hover);\n }\n\n &:checked {\n background: var(--color-checked);\n border-color: var(--color-checked);\n\n &::after {\n border: 1px solid var(--border-color-icon);\n border-left: 0;\n border-top: 0;\n content: \"\";\n display: block;\n height: 7px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: rotate(43deg) translate3d(-110%, -30%, 0);\n width: 4px;\n }\n }\n\n &:disabled {\n background: var(--background-color-disabled);\n border-color: var(--color-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--color-disabled);\n border-color: var(--color-disabled);\n\n &::after {\n border-color: var(--border-color-disabled);\n }\n }\n\n + label {\n color: var(--border-color-hover);\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--message-color-disabled);\n }\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px var(--color-focus);\n outline: none;\n }\n}\n\nlabel {\n margin-inline-start: 10px;\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-checkbox__message {\n color: var(--message-color);\n font-size: 14px;\n margin-block-start: 6px;\n margin-inline-start: 26px;\n width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrl: 'pds-checkbox.scss',\n shadow: true,\n})\nexport class PdsCheckbox {\n /**\n * It determines whether or not the checkbox is checked.\n */\n @Prop() checked: boolean;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * It determines whether or not the checkbox is disabled.\n */\n @Prop() disabled: boolean;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage: string;\n\n /**\n * String used for helper message below checkbox.\n */\n @Prop() helperMessage: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n */\n @Prop() indeterminate: boolean;\n\n /**\n * It determines whether or not the checkbox is invalid.\n */\n @Prop() invalid: boolean;\n\n /**\n * String used for label text next to checkbox.\n */\n @Prop() label: string;\n\n /**\n * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() labelHidden: boolean;\n\n /**\n * String used for checkbox `name` attribute.\n */\n @Prop() name: string;\n\n /**\n * It determines whether or not the checkbox is required.\n */\n @Prop() required: boolean;\n\n /**\n * The value of the checkbox that is submitted with a form.\n */\n @Prop() value: string;\n\n /**\n * Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"checkbox\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n",":host {\n --background-fixed: var(--pine-color-base-white);\n --box-shadow: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n --color: var(--pine-color-neutral-charcoal-200);\n --fixed-column-index: 0;\n --font-size: var(--pine-font-size-body-sm);\n --line-height: var(--pine-line-height-sm);\n --padding: calc(var(--pine-spacing-md) / 2);\n --padding-compact: var(--pine-spacing-xxs);\n --fixed-cell-position: 0;\n --max-width-truncated: 100px;\n\n color: var(--color);\n display: table-cell;\n font-size: var(--font-size);\n line-height: var(--line-height);\n padding: var(--padding);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--padding-compact);\n}\n\n:host(.is-fixed) {\n background: var(--background-fixed);\n left: var(--fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow);\n}\n\n:host(.is-truncated) {\n max-width: var(--max-width-truncated);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrl: 'pds-table-cell.scss',\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n tableRef: HTMLPdsTableElement;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n this.tableRef.addEventListener('scroll', this.handleScroll);\n }\n }\n\n /**\n * Truncates content to a max width of 100px and adds an ellipsis.\n */\n @Prop() truncate: boolean;\n\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"6LAAA,IAAMA,eAAiB,kmGACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAmEdC,KAAAC,qBAAuB,SAACC,GAC9B,GAAIC,EAAKC,SAAU,CACjB,M,CAGF,IAAMC,EAASH,EAAEG,OACjBF,EAAKG,QAAUD,EAAOC,QAEtBH,EAAKI,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAON,EAAKM,O,0SAIRV,EAAAW,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIX,KAAKY,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIb,KAAKc,cAAe,CAAEH,EAAWE,KAAK,mB,CAC1C,GAAIb,KAAKI,SAAU,CAAEO,EAAWE,KAAK,c,CAErC,OAAOF,EAAWI,KAAK,K,EAGzBhB,EAAAW,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOpB,KAAKW,cAChBM,EAAA,SAAAE,IAAA,8DACoBE,kBAAkBrB,KAAKsB,YAAatB,KAAKY,QAASZ,KAAKuB,eAAc,eACzEvB,KAAKY,QAAU,OAASY,UACtCC,KAAK,WACLC,GAAI1B,KAAKsB,YACTK,KAAM3B,KAAK2B,KACXlB,MAAOT,KAAKS,MACZH,QAASN,KAAKM,QACdsB,SAAU5B,KAAK4B,SACfxB,SAAUJ,KAAKI,SACfyB,SAAU7B,KAAKC,uBAEjBgB,EAACa,SAAQ,CAAAX,IAAA,2CAACY,QAAS/B,KAAKsB,YAAaU,KAAMhC,KAAKiC,MAAOtB,WAAYX,KAAKkC,YAAc,kBAAoB,KACzGlC,KAAKuB,eACJN,EAAA,OACEG,MAAO,wBACPM,GAAIS,UAAUnC,KAAKsB,YAAa,WAE/BtB,KAAKuB,eAGTvB,KAAKoC,cACJnB,EAAA,OACEG,MAAO,qDACPM,GAAIS,UAAUnC,KAAKsB,YAAa,SAAQ,YAC9B,aAETtB,KAAKoC,c,WAzHM,G,oCCVxB,IAAMC,gBAAkB,k+BACxB,IAAAC,mBAAeD,gB,ICMFE,aAAY,W,kDAuCfvC,KAAAwC,aAAe,WACrB,GAAIrC,EAAKsC,SAASC,WAAa,EAAG,CAChCvC,EAAKwC,eAAiB,I,KACjB,CACLxC,EAAKwC,eAAiB,K,+CAxBiB,K,CAf3CJ,EAAA7B,UAAAkC,oBAAA,WACE5C,KAAKyC,SAAWzC,KAAK6C,YAAYC,QAAQ,Y,EAG3CP,EAAA7B,UAAAqC,iBAAA,WACE,GAAI/C,KAAKyC,UAAYzC,KAAKyC,SAASO,YAAchD,KAAKyC,SAASQ,YAAa,CAC1EjD,KAAKyC,SAASS,iBAAiB,SAAUlD,KAAKwC,a,GAW1CD,EAAA7B,UAAAC,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIX,KAAKyC,UAAYzC,KAAKyC,SAASU,QAAS,CAC1CxC,EAAWE,KAAK,a,CAGlB,GAAIb,KAAKoD,SAAU,CACjBzC,EAAWE,KAAK,e,CAGlB,GAAIb,KAAKyC,UAAYzC,KAAKyC,SAASQ,aAAejD,KAAK2C,eAAgB,CACrEhC,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWI,KAAK,I,EAWzBwB,EAAA7B,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CACHC,MAAOpB,KAAKW,aACZ0C,KAAK,WACLC,MACEtD,KAAKyC,UACLzC,KAAKyC,SAASQ,aACdjD,KAAKyC,SAASc,WACV,CAAE,wBAAyB,QAC3B,IAGNtC,EAAA,QAAAE,IAAA,6C,yIA5DiB,G"}

package/dist/esm-es5/pds-chip.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-9312507f.js";var pdsChipCss=":host{--background-danger:var(--pine-color-red-100);--background-danger-dot:var(--pine-color-red-300);--background-danger-interactive:var(--pine-color-red-200);--background-neutral:var(--pine-color-neutral-grey-300);--background-neutral-dot:var(--pine-color-neutral-charcoal-100);--background-neutral-interactive:var(--pine-color-neutral-grey-400);--background-info:var(--pine-color-primary-100);--background-info-dot:var(--pine-color-primary-300);--background-info-interactive:var(--pine-color-primary-200);--background-accent:var(--pine-color-purple-100);--background-accent-dot:var(--pine-color-purple-300);--background-accent-interactive:var(--pine-color-purple-200);--background-success:var(--pine-color-green-100);--background-success-dot:var(--pine-color-green-300);--background-success-interactive:var(--pine-color-green-200);--background-warning:var(--pine-color-yellow-100);--background-warning-dot:var(--pine-color-yellow-300);--background-warning-interactive:var(--pine-color-yellow-200);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--border-radius:var(--pine-border-radius-lg);--font-size:var(--pine-font-size-body-sm);--font-size-lg:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-sm);--padding-block-sm:calc(var(--pine-spacing-xxs) / 2);--padding-block:var(--pine-spacing-xxs);--padding-block-lg:6px;--padding-inline-sm:calc(var(--pine-spacing-xxs) / 2);--padding-inline:10px;--padding-inline-lg:calc(var(--pine-spacing-md) / 2);--padding-inline-xl:14px;--margin-block-xs:calc(var(--pine-spacing-xxs) / 2);--margin-inline-sm:calc(var(--pine-spacing-xs) / 2);--margin-inline-xs:calc(var(--pine-spacing-xxs) / 2);--margin-inline:4px;--margin-inline-lg:var(--pine-spacing-xs);--margin-inline-xl:calc(var(--pine-spacing-md) / 2);--dot-size:4px;--close-size:10px;--close-size-lg:24px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--padding-block-sm);padding-inline:var(--padding-inline)}:host(.pds-chip--accent){background:var(--background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--background-accent-interactive)}:host(.pds-chip--danger){background:var(--background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--background-danger-interactive)}:host(.pds-chip--info){background:var(--background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--background-info-interactive)}:host(.pds-chip--neutral){background:var(--background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--background-neutral-interactive)}:host(.pds-chip--success){background:var(--background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--background-success-interactive)}:host(.pds-chip--warning){background:var(--background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--dot-size);-webkit-margin-after:var(--margin-block-xs);margin-block-end:var(--margin-block-xs);-webkit-margin-end:var(--margin-inline-sm);margin-inline-end:var(--margin-inline-sm);width:var(--dot-size)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:1px;margin-block-end:1px;-webkit-margin-before:var(--margin-block-xs);margin-block-start:var(--margin-block-xs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--padding-block-sm);padding-inline:var(--padding-inline)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--margin-inline-xs) * -1);margin-inline-end:calc(var(--margin-inline-xs) * -1);-webkit-margin-start:var(--margin-inline);margin-inline-start:var(--margin-inline)}:host(.pds-chip--tag){padding-block:var(--padding-block-sm)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--close-size);-webkit-margin-end:calc(var(--margin-inline-lg) * -1);margin-inline-end:calc(var(--margin-inline-lg) * -1);-webkit-margin-start:var(--margin-inline);margin-inline-start:var(--margin-inline);padding:var(--close-size);position:relative;width:var(--close-size)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-lg);padding-block:var(--padding-block-lg);padding-inline:var(--padding-inline-xl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--padding-block);padding-inline:var(--padding-inline-sm)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-lg);padding-inline:var(--padding-inline-lg)}:host(.pds-chip--large) .pds-chip__close{height:var(--close-size-lg);-webkit-margin-end:calc(var(--margin-inline-xl) * -1);margin-inline-end:calc(var(--margin-inline-xl) * -1);width:var(--close-size-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--padding-block)}";var PdsChipStyle0=pdsChipCss;var PdsChip=function(){function i(i){var n=this;registerInstance(this,i);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){n.pdsTagCloseClick.emit()};this.componentId=undefined;this.sentiment="neutral";this.dot=false;this.label=undefined;this.large=false;this.variant="text"}i.prototype.classNames=function(){var i=["pds-chip"];if(this.large){i.push("pds-chip--large")}if(this.variant){i.push("pds-chip--"+this.variant)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join("  ")};i.prototype.setChipContent=function(){var i=this.variant==="dropdown";var n=i?h("button",{class:"pds-chip__button",type:"button"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,h("pds-icon",{name:"down-small",size:"12px","aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return n};i.prototype.render=function(){return h(Host,{key:"224fcbae613eb1a7a8ab5661582e06612aa3c491",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&h("button",{class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},h("pds-icon",{name:"remove",size:"12px"})))};return i}();PdsChip.style=PdsChipStyle0;export{PdsChip as pds_chip};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-09d6e504.js";var pdsChipCss=":host{--background-danger:var(--pine-color-red-100);--background-danger-dot:var(--pine-color-red-300);--background-danger-interactive:var(--pine-color-red-200);--background-neutral:var(--pine-color-neutral-grey-300);--background-neutral-dot:var(--pine-color-neutral-charcoal-100);--background-neutral-interactive:var(--pine-color-neutral-grey-400);--background-info:var(--pine-color-primary-100);--background-info-dot:var(--pine-color-primary-300);--background-info-interactive:var(--pine-color-primary-200);--background-accent:var(--pine-color-purple-100);--background-accent-dot:var(--pine-color-purple-300);--background-accent-interactive:var(--pine-color-purple-200);--background-success:var(--pine-color-green-100);--background-success-dot:var(--pine-color-green-300);--background-success-interactive:var(--pine-color-green-200);--background-warning:var(--pine-color-yellow-100);--background-warning-dot:var(--pine-color-yellow-300);--background-warning-interactive:var(--pine-color-yellow-200);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--border-radius:var(--pine-border-radius-lg);--font-size:var(--pine-font-size-body-sm);--font-size-lg:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-sm);--padding-block-sm:calc(var(--pine-spacing-xxs) / 2);--padding-block:var(--pine-spacing-xxs);--padding-block-lg:6px;--padding-inline-sm:calc(var(--pine-spacing-xxs) / 2);--padding-inline:10px;--padding-inline-lg:calc(var(--pine-spacing-md) / 2);--padding-inline-xl:14px;--margin-block-xs:calc(var(--pine-spacing-xxs) / 2);--margin-inline-sm:calc(var(--pine-spacing-xs) / 2);--margin-inline-xs:calc(var(--pine-spacing-xxs) / 2);--margin-inline:4px;--margin-inline-lg:var(--pine-spacing-xs);--margin-inline-xl:calc(var(--pine-spacing-md) / 2);--dot-size:4px;--close-size:10px;--close-size-lg:24px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--padding-block-sm);padding-inline:var(--padding-inline)}:host(.pds-chip--accent){background:var(--background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--background-accent-dot)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--background-accent-interactive)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--background-accent-interactive)}:host(.pds-chip--danger){background:var(--background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--background-danger-dot)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--background-danger-interactive)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--background-danger-interactive)}:host(.pds-chip--info){background:var(--background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--background-info-dot)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--background-info-interactive)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--background-info-interactive)}:host(.pds-chip--neutral){background:var(--background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--background-neutral-interactive)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--background-neutral-interactive)}:host(.pds-chip--success){background:var(--background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--background-success-dot)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--background-success-interactive)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--background-success-interactive)}:host(.pds-chip--warning){background:var(--background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--background-warning-dot)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--background-warning-interactive)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--background-warning-interactive)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--dot-size);-webkit-margin-after:var(--margin-block-xs);margin-block-end:var(--margin-block-xs);-webkit-margin-end:var(--margin-inline-sm);margin-inline-end:var(--margin-inline-sm);width:var(--dot-size)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:1px;margin-block-end:1px;-webkit-margin-before:var(--margin-block-xs);margin-block-start:var(--margin-block-xs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-family:inherit;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding-block:var(--padding-block-sm);padding-inline:var(--padding-inline)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--margin-inline-xs) * -1);margin-inline-end:calc(var(--margin-inline-xs) * -1);-webkit-margin-start:var(--margin-inline);margin-inline-start:var(--margin-inline)}:host(.pds-chip--tag){padding-block:var(--padding-block-sm)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--close-size);-webkit-margin-end:calc(var(--margin-inline-lg) * -1);margin-inline-end:calc(var(--margin-inline-lg) * -1);-webkit-margin-start:var(--margin-inline);margin-inline-start:var(--margin-inline);padding:var(--close-size);position:relative;width:var(--close-size)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-lg);padding-block:var(--padding-block-lg);padding-inline:var(--padding-inline-xl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--padding-block);padding-inline:var(--padding-inline-sm)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-lg);padding-inline:var(--padding-inline-lg)}:host(.pds-chip--large) .pds-chip__close{height:var(--close-size-lg);-webkit-margin-end:calc(var(--margin-inline-xl) * -1);margin-inline-end:calc(var(--margin-inline-xl) * -1);width:var(--close-size-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--padding-block)}";var PdsChipStyle0=pdsChipCss;var PdsChip=function(){function i(i){var n=this;registerInstance(this,i);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){n.pdsTagCloseClick.emit()};this.componentId=undefined;this.sentiment="neutral";this.dot=false;this.label=undefined;this.large=false;this.variant="text"}i.prototype.classNames=function(){var i=["pds-chip"];if(this.large){i.push("pds-chip--large")}if(this.variant){i.push("pds-chip--"+this.variant)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join("  ")};i.prototype.setChipContent=function(){var i=this.variant==="dropdown";var n=i?h("button",{class:"pds-chip__button",type:"button"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,h("pds-icon",{name:"down-small",size:"12px","aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return n};i.prototype.render=function(){return h(Host,{key:"224fcbae613eb1a7a8ab5661582e06612aa3c491",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&h("button",{class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},h("pds-icon",{name:"remove",size:"12px"})))};return i}();PdsChip.style=PdsChipStyle0;export{PdsChip as pds_chip};
+//# sourceMappingURL=pds-chip.entry.js.map

package/dist/esm-es5/pds-chip.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["pdsChipCss","PdsChipStyle0","PdsChip","this","handleCloseClick","_this","pdsTagCloseClick","emit","prototype","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","name","size","render","Host","key","id","componentId","onClick"],"sources":["src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":[":host {\n --background-danger: var(--pine-color-red-100);\n --background-danger-dot: var(--pine-color-red-300);\n --background-danger-interactive: var(--pine-color-red-200);\n --background-neutral: var(--pine-color-neutral-grey-300);\n --background-neutral-dot: var(--pine-color-neutral-charcoal-100);\n --background-neutral-interactive: var(--pine-color-neutral-grey-400);\n --background-info: var(--pine-color-primary-100);\n --background-info-dot: var(--pine-color-primary-300);\n --background-info-interactive: var(--pine-color-primary-200);\n --background-accent: var(--pine-color-purple-100);\n --background-accent-dot: var(--pine-color-purple-300);\n --background-accent-interactive: var(--pine-color-purple-200);\n --background-success: var(--pine-color-green-100);\n --background-success-dot: var(--pine-color-green-300);\n --background-success-interactive: var(--pine-color-green-200);\n --background-warning: var(--pine-color-yellow-100);\n --background-warning-dot: var(--pine-color-yellow-300);\n --background-warning-interactive: var(--pine-color-yellow-200);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n\n --border-radius: var(--pine-border-radius-lg);\n --font-size: var(--pine-font-size-body-sm);\n --font-size-lg: var(--pine-font-size-body);\n --font-weight: var(--pine-font-weight-medium);\n --line-height: var(--pine-line-height-sm);\n --padding-block-sm: calc(var(--pine-spacing-xxs) / 2);\n --padding-block: var(--pine-spacing-xxs);\n --padding-block-lg: 6px;\n --padding-inline-sm: calc(var(--pine-spacing-xxs) / 2);\n --padding-inline: 10px;\n --padding-inline-lg: calc(var(--pine-spacing-md) / 2);\n --padding-inline-xl: 14px;\n --margin-block-xs: calc(var(--pine-spacing-xxs) / 2);\n --margin-inline-sm: calc(var(--pine-spacing-xs) / 2);\n --margin-inline-xs: calc(var(--pine-spacing-xxs) / 2);\n --margin-inline: 4px;\n --margin-inline-lg: var(--pine-spacing-xs);\n --margin-inline-xl: calc(var(--pine-spacing-md) / 2);\n\n --dot-size: 4px;\n --close-size: 10px;\n --close-size-lg: 24px;\n\n align-items: center;\n border-radius: var(--border-radius);\n display: inline-flex;\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n line-height: var(--line-height);\n padding-block: var(--padding-block-sm);\n padding-inline: var(--padding-inline);\n}\n\n$pds-chip-sentiment: (\n accent: var(--background-accent),\n danger: var(--background-danger),\n info: var(--background-info),\n neutral: var(--background-neutral),\n success: var(--background-success),\n warning: var(--background-warning),\n);\n\n$pds-chip-sentiment-dots: (\n accent: var(--background-accent-dot),\n danger: var(--background-danger-dot),\n info: var(--background-info-dot),\n neutral: var(--background-neutral-dot),\n success: var(--background-success-dot),\n warning: var(--background-warning-dot),\n);\n\n$pds-chip-sentiment-interactive: (\n accent: var(--background-accent-interactive),\n danger: var(--background-danger-interactive),\n info: var(--background-info-interactive),\n neutral: var(--background-neutral-interactive),\n success: var(--background-success-interactive),\n warning: var(--background-warning-interactive),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n\n // dot colors\n .pds-chip__dot {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-dots, $sentiment);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-interactive, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n /* stylelint-disable-next-line */\n background: map-get($pds-chip-sentiment-interactive, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: 1px solid transparent;\n border-radius: 50%;\n display: inline-block;\n height: var(--dot-size);\n margin-block-end: var(--margin-block-xs);\n margin-inline-end: var(--margin-inline-sm);\n width: var(--dot-size);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: 0;\n\n .pds-chip__dot {\n margin-block-end: 1px;\n margin-block-start: var(--margin-block-xs);\n }\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--border-radius);\n display: flex;\n font-family: inherit;\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n line-height: var(--line-height);\n padding-block: var(--padding-block-sm);\n padding-inline: var(--padding-inline);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n\n pds-icon {\n margin-inline-end: calc(var(--margin-inline-xs) * -1);\n margin-inline-start: var(--margin-inline);\n }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n padding-block: var(--padding-block-sm);\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 50%;\n height: var(--close-size);\n margin-inline-end: calc(var(--margin-inline-lg) * -1);\n margin-inline-start: var(--margin-inline);\n padding: var(--close-size);\n position: relative;\n width: var(--close-size);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n}\n\n// large\n\n:host(.pds-chip--large) {\n font-size: var(--font-size-lg);\n padding-block: var(--padding-block-lg);\n padding-inline: var(--padding-inline-xl);\n\n &:host(.pds-chip--dropdown) {\n padding-block: var(--padding-block);\n padding-inline: var(--padding-inline-sm);\n\n .pds-chip__dot {\n margin-block-end: 0;\n }\n }\n\n .pds-chip__button {\n font-size: var(--font-size-lg);\n padding-inline: var(--padding-inline-lg)\n }\n\n .pds-chip__close {\n height: var(--close-size-lg);\n margin-inline-end: calc(var(--margin-inline-xl) * -1);\n width: var(--close-size-lg);\n }\n\n &:host(.pds-chip--tag) {\n padding-block: var(--padding-block);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'pds-chip',\n styleUrl: 'pds-chip.scss',\n shadow: true,\n})\nexport class PdsChip {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Sets the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n /**\n * Determines whether a dot should be displayed on the chip.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n /**\n * Sets the text label content of the chip.\n */\n @Prop() label: string;\n\n /**\n * Determines whether the chip should be rendered in a larger size.\n * @defaultValue false\n */\n @Prop() large = false;\n\n /**\n * Sets the style variant of the chip.\n * @defaultValue 'text'\n */\n @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n /**\n * Event when close button is clicked on tag variant.\n */\n @Event() pdsTagCloseClick: EventEmitter;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n }\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\n }\n if (this.variant) {\n classNames.push('pds-chip--' + this.variant);\n }\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private setChipContent() {\n const isDropdown = this.variant === 'dropdown';\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\">\n {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n {this.label}\n <pds-icon name=\"down-small\" size=\"12px\" aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n {this.label}\n </span>\n );\n\n return chipContent;\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.variant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon name=\"remove\" size=\"12px\"></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"oFAAA,IAAMA,WAAa,mwNACnB,IAAAC,cAAeD,W,ICMFE,QAAO,W,+GAwCVC,KAAAC,iBAAmB,WACzBC,EAAKC,iBAAiBC,M,4CA/B8D,U,SAMxE,M,gCAWE,M,aAM+B,M,CAWvCL,EAAAM,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIN,KAAKO,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIR,KAAKS,QAAS,CAChBH,EAAWE,KAAK,aAAeR,KAAKS,Q,CAEtC,GAAIT,KAAKU,UAAW,CAClBJ,EAAWE,KAAK,aAAeR,KAAKU,U,CAGtC,OAAOJ,EAAWK,KAAK,K,EAGjBZ,EAAAM,UAAAO,eAAA,WACN,IAAMC,EAAab,KAAKS,UAAY,WACpC,IAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnCjB,KAAKkB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDhB,KAAKmB,MACNJ,EAAA,YAAUK,KAAK,aAAaC,KAAK,OAAM,cAAa,UAGtDN,EAAA,QAAMC,MAAM,mBACThB,KAAKkB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDhB,KAAKmB,OAIV,OAAOL,C,EAGTf,EAAAM,UAAAiB,OAAA,WACE,OACEP,EAACQ,KAAI,CAAAC,IAAA,2CAACR,MAAOhB,KAAKM,aAAcmB,GAAIzB,KAAK0B,aACtC1B,KAAKY,iBACLZ,KAAKS,UAAY,OAChBM,EAAA,UAAQC,MAAM,kBAAkBC,KAAK,SAASU,QAAS3B,KAAKC,iBAAgB,aAAa,UACvFc,EAAA,YAAUK,KAAK,SAASC,KAAK,U,WApFrB,G"}

package/dist/esm-es5/pds-copytext.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host}from"./index-9312507f.js";var pdsCopytextCss=":host(.pds-copytext){--background:var(--pine-color-base-white);--background-hover:var(--pine-color-neutral-grey-200);--border:var(--pine-border-interactive);--border-hover:var(--pine-border-interactive-hover-color);--border-radius:var(--pine-border-radius-md);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-hover:var(--pine-color-neutral-charcoal-400);--font-size:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-semibold);--line-height:var(--pine-line-height-md);--spacing-sm:var(--pine-spacing-sm);--spacing-xs:var(--pine-spacing-xs);--spacing-xxs:var(--pine-spacing-xxs)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--background);border:0;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);max-width:100%;padding:var(--spacing-xxs) var(--spacing-xs)}:host(.pds-copytext) pds-button:hover{background-color:var(--background-hover);color:var(--color-hover)}:host(.pds-copytext) pds-button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-copytext) pds-button span{line-height:var(--line-height);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:0;padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border);border-radius:var(--border-radius);-webkit-margin-end:var(--spacing-sm);margin-inline-end:var(--spacing-sm);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border-color:var(--border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";var PdsCopytextStyle0=pdsCopytextCss;var PdsCopytext=function(){function t(t){var e=this;registerInstance(this,t);this.pdsCopyTextClick=createEvent(this,"pdsCopyTextClick",7);this.copyToClipboard=function(t){return __awaiter(e,void 0,void 0,(function(){var e,o;return __generator(this,(function(s){switch(s.label){case 0:s.trys.push([0,4,,5]);if(!navigator.clipboard)return[3,2];return[4,navigator.clipboard.writeText(t)];case 1:s.sent();this.pdsCopyTextClick.emit("Copied to clipboard");return[3,3];case 2:e=document.createElement("textarea");e.value=t;e.setAttribute("readonly","");e.style.position="absolute";e.style.left="-9999px";document.body.appendChild(e);e.focus();e.setSelectionRange(0,e.value.length);document.execCommand("copy");document.body.removeChild(e);this.pdsCopyTextClick.emit("Copied to clipboard");s.label=3;case 3:return[3,5];case 4:o=s.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(o));return[3,5];case 5:return[2]}}))}))};this.handleClick=function(){e.copyToClipboard(e.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}t.prototype.classNames=function(){var t=["pds-copytext"];if(this.border){t.push("pds-copytext--bordered")}if(this.fullWidth){t.push("pds-copytext--full-width")}if(this.truncate){t.push("pds-copytext--truncated")}return t.join("  ")};t.prototype.render=function(){return h(Host,{key:"650ef9a2f68e604211c98721ef61e68a44a619b2",class:this.classNames(),id:this.componentId},h("pds-button",{key:"3c4e3d7779e794c65115431ea93e6c321c5e8f83",type:"button",variant:"unstyled",onClick:this.handleClick},h("span",{key:"e755703bd191e440d1b10250027c1dfcf1340cbe"},this.value),h("pds-icon",{key:"6fc35fd7fef1a98b9f248054a2927a1b006561d0",name:"copy",size:"16px"})))};return t}();PdsCopytext.style=PdsCopytextStyle0;export{PdsCopytext as pds_copytext};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host}from"./index-09d6e504.js";var pdsCopytextCss=":host(.pds-copytext){--background:var(--pine-color-base-white);--background-hover:var(--pine-color-neutral-grey-200);--border:var(--pine-border-interactive);--border-hover:var(--pine-border-interactive-hover-color);--border-radius:var(--pine-border-radius-md);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-hover:var(--pine-color-neutral-charcoal-400);--font-size:var(--pine-font-size-body);--font-weight:var(--pine-font-weight-semibold);--line-height:var(--pine-line-height-md);--spacing-sm:var(--pine-spacing-sm);--spacing-xs:var(--pine-spacing-xs);--spacing-xxs:var(--pine-spacing-xxs)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--background);border:0;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;font-size:var(--font-size);font-weight:var(--font-weight);max-width:100%;padding:var(--spacing-xxs) var(--spacing-xs)}:host(.pds-copytext) pds-button:hover{background-color:var(--background-hover);color:var(--color-hover)}:host(.pds-copytext) pds-button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-copytext) pds-button span{line-height:var(--line-height);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:0;padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:0}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border);border-radius:var(--border-radius);-webkit-margin-end:var(--spacing-sm);margin-inline-end:var(--spacing-sm);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border-color:var(--border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";var PdsCopytextStyle0=pdsCopytextCss;var PdsCopytext=function(){function t(t){var e=this;registerInstance(this,t);this.pdsCopyTextClick=createEvent(this,"pdsCopyTextClick",7);this.copyToClipboard=function(t){return __awaiter(e,void 0,void 0,(function(){var e,o;return __generator(this,(function(s){switch(s.label){case 0:s.trys.push([0,4,,5]);if(!navigator.clipboard)return[3,2];return[4,navigator.clipboard.writeText(t)];case 1:s.sent();this.pdsCopyTextClick.emit("Copied to clipboard");return[3,3];case 2:e=document.createElement("textarea");e.value=t;e.setAttribute("readonly","");e.style.position="absolute";e.style.left="-9999px";document.body.appendChild(e);e.focus();e.setSelectionRange(0,e.value.length);document.execCommand("copy");document.body.removeChild(e);this.pdsCopyTextClick.emit("Copied to clipboard");s.label=3;case 3:return[3,5];case 4:o=s.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(o));return[3,5];case 5:return[2]}}))}))};this.handleClick=function(){e.copyToClipboard(e.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}t.prototype.classNames=function(){var t=["pds-copytext"];if(this.border){t.push("pds-copytext--bordered")}if(this.fullWidth){t.push("pds-copytext--full-width")}if(this.truncate){t.push("pds-copytext--truncated")}return t.join("  ")};t.prototype.render=function(){return h(Host,{key:"650ef9a2f68e604211c98721ef61e68a44a619b2",class:this.classNames(),id:this.componentId},h("pds-button",{key:"3c4e3d7779e794c65115431ea93e6c321c5e8f83",type:"button",variant:"unstyled",onClick:this.handleClick},h("span",{key:"e755703bd191e440d1b10250027c1dfcf1340cbe"},this.value),h("pds-icon",{key:"6fc35fd7fef1a98b9f248054a2927a1b006561d0",name:"copy",size:"16px"})))};return t}();PdsCopytext.style=PdsCopytextStyle0;export{PdsCopytext as pds_copytext};
+//# sourceMappingURL=pds-copytext.entry.js.map

package/dist/esm-es5/pds-copytext.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["pdsCopytextCss","PdsCopytextStyle0","PdsCopytext","this","copyToClipboard","value","__awaiter","_this","navigator","clipboard","writeText","_a","sent","pdsCopyTextClick","emit","el","document","createElement","setAttribute","style","position","left","body","appendChild","focus","setSelectionRange","length","execCommand","removeChild","concat","err_1","handleClick","class_1","prototype","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","name","size"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n --background: var(--pine-color-base-white);\n --background-hover: var(--pine-color-neutral-grey-200);\n --border: var(--pine-border-interactive);\n --border-hover: var(--pine-border-interactive-hover-color);\n --border-radius: var(--pine-border-radius-md);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-hover: var(--pine-color-neutral-charcoal-400);\n --font-size: var(--pine-font-size-body);\n --font-weight: var(--pine-font-weight-semibold);\n --line-height: var(--pine-line-height-md);\n --spacing-sm: var(--pine-spacing-sm);\n --spacing-xs: var(--pine-spacing-xs);\n --spacing-xxs: var(--pine-spacing-xxs);\n\n pds-button {\n align-items: center;\n background: var(--background);\n border: 0;\n border-radius: var(--border-radius);\n display: inline-flex;\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n max-width: 100%;\n padding: var(--spacing-xxs) var(--spacing-xs);\n\n &:hover {\n background-color: var(--background-hover);\n color: var(--color-hover);\n }\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n }\n\n span {\n line-height: var(--line-height);\n margin-inline-end: var(--spacing-xs);\n white-space: nowrap;\n }\n\n :nth-child(2) {\n flex-shrink: 0;\n }\n }\n\n // bordered\n\n &:host(.pds-copytext--bordered) {\n border: 0;\n padding: 0;\n\n pds-button {\n padding: 0;\n\n &:hover {\n background: none;\n }\n }\n\n span {\n border: var(--border);\n border-radius: var(--border-radius);\n margin-inline-end: var(--spacing-sm);\n padding-block: var(--spacing-xs);\n padding-inline: var(--spacing-sm);\n }\n\n :hover {\n span {\n border-color: var(--border-hover)\n }\n }\n }\n\n // full width\n\n &:host(.pds-copytext--full-width) {\n display: flex;\n width: 100%;\n\n pds-button {\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n span {\n text-align: left;\n width: 100%;\n }\n }\n }\n\n // truncated\n\n &:host(.pds-copytext--truncated) {\n pds-button {\n display: flex;\n width: 100%;\n\n span {\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n width: 100%;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-copytext',\n styleUrl: 'pds-copytext.scss',\n shadow: true,\n})\nexport class PdsCopytext {\n /**\n * Determines whether `copytext` should have a border.\n * @defaultValue true\n */\n @Prop({ reflect: true }) border = true;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether `copytext` should expand to the full width of its container.\n * @defaultValue false\n */\n @Prop() fullWidth = false;\n\n /**\n * Determines whether the `value` should truncate and display with an ellipsis.\n * @defaultValue false\n */\n @Prop() truncate = false;\n\n /**\n * String that is displayed and that is also copied to the clipboard upon interaction.\n */\n @Prop() value!: string;\n\n /**\n * Event when copyText button is clicked.\n */\n @Event() pdsCopyTextClick: EventEmitter;\n\n private copyToClipboard = async (value: string) => {\n try {\n if (navigator.clipboard) {\n await navigator.clipboard.writeText(value);\n this.pdsCopyTextClick.emit('Copied to clipboard');\n } else {\n // falback for safari\n const el = document.createElement('textarea');\n el.value = value;\n el.setAttribute('readonly', '');\n el.style.position = 'absolute';\n el.style.left = '-9999px';\n document.body.appendChild(el);\n el.focus();\n el.setSelectionRange(0, el.value.length);\n document.execCommand('copy');\n document.body.removeChild(el);\n this.pdsCopyTextClick.emit('Copied to clipboard');\n }\n } catch (err) {\n this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n }\n };\n\n private handleClick = () => {\n this.copyToClipboard(this.value);\n };\n\n private classNames() {\n const classNames = ['pds-copytext'];\n\n if (this.border) {\n classNames.push('pds-copytext--bordered');\n }\n\n if (this.fullWidth) {\n classNames.push('pds-copytext--full-width');\n }\n\n if (this.truncate) {\n classNames.push('pds-copytext--truncated');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n <span>{this.value}</span>\n <pds-icon name=\"copy\" size=\"16px\"></pds-icon>\n </pds-button>\n </Host>\n );\n }\n}\n"],"mappings":"6HAAA,IAAMA,eAAiB,0gFACvB,IAAAC,kBAAeD,e,ICMFE,YAAW,W,+GAkCdC,KAAAC,gBAAkB,SAAOC,GAAa,OAAAC,UAAAC,OAAA,qB,8FAEtCC,UAAUC,UAAV,YACF,SAAMD,UAAUC,UAAUC,UAAUL,I,OAApCM,EAAAC,OACAT,KAAKU,iBAAiBC,KAAK,uB,mBAGrBC,EAAKC,SAASC,cAAc,YAClCF,EAAGV,MAAQA,EACXU,EAAGG,aAAa,WAAY,IAC5BH,EAAGI,MAAMC,SAAW,WACpBL,EAAGI,MAAME,KAAO,UAChBL,SAASM,KAAKC,YAAYR,GAC1BA,EAAGS,QACHT,EAAGU,kBAAkB,EAAGV,EAAGV,MAAMqB,QACjCV,SAASW,YAAY,QACrBX,SAASM,KAAKM,YAAYb,GAC1BZ,KAAKU,iBAAiBC,KAAK,uB,+CAG7BX,KAAKU,iBAAiBC,KAAK,oCAAAe,OAAoCC,I,qCAI3D3B,KAAA4B,YAAc,WACpBxB,EAAKH,gBAAgBG,EAAKF,M,cAtDM,K,0CAWd,M,cAMD,M,qBAwCX2B,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,gBAEpB,GAAI/B,KAAKgC,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAIjC,KAAKkC,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAIjC,KAAKmC,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,EAGzBP,EAAAC,UAAAO,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOzC,KAAK+B,aAAcW,GAAI1C,KAAK2C,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAS9C,KAAK4B,aACzDU,EAAA,QAAAE,IAAA,4CAAOxC,KAAKE,OACZoC,EAAA,YAAAE,IAAA,2CAAUO,KAAK,OAAOC,KAAK,U,WArFb,G"}

package/dist/esm-es5/pds-divider.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-9312507f.js";var pdsDividerCss=":host{--background-color:var(--pine-color-neutral-grey-400);--offset-xxs:var(--pine-spacing-xxs);--offset-xs:var(--pine-spacing-xs);--offset-sm:var(--pine-spacing-sm);--offset-md:var(--pine-spacing-md);--offset-lg:var(--pine-spacing-lg);--offset-xxl:var(--pine-spacing-2xl)}.pds-divider{background:var(--background-color);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--offset-xxs) * -1);padding:0 var(--offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--offset-xxs) * -1) 0;padding:var(--offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--offset-xs) * -1);padding:0 var(--offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--offset-xs) * -1) 0;padding:var(--offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--offset-sm) * -1);padding:0 var(--offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--offset-sm) * -1) 0;padding:var(--offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--offset-md) * -1);padding:0 var(--offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--offset-md) * -1) 0;padding:var(--offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--offset-lg) * -1);padding:0 var(--offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--offset-lg) * -1) 0;padding:var(--offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--offset-xl) * -1);padding:0 var(--offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--offset-xl) * -1) 0;padding:var(--offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--offset-xxl) * -1);padding:0 var(--offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--offset-xxl) * -1) 0;padding:var(--offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";var PdsDividerStyle0=pdsDividerCss;var PdsDivider=function(){function d(d){registerInstance(this,d);this.componentId=undefined;this.offset=undefined;this.vertical=false}d.prototype.classNames=function(){var d=["pds-divider"];if(this.vertical){d.push("pds-divider--vertical")}if(this.offset){var i="pds-divider--offset-"+this.offset;d.push(i)}return d.join(" ")};d.prototype.render=function(){return h(Host,{key:"d5d42d70c2417e0fc801f87f8460557bb1756443",id:this.componentId},h("hr",{key:"49554a46b6949d09adc4794b22441a1f76eb1d13",class:this.classNames()}))};return d}();PdsDivider.style=PdsDividerStyle0;export{PdsDivider as pds_divider};
+import{r as registerInstance,h,H as Host}from"./index-09d6e504.js";var pdsDividerCss=":host{--background-color:var(--pine-color-neutral-grey-400);--offset-xxs:var(--pine-spacing-xxs);--offset-xs:var(--pine-spacing-xs);--offset-sm:var(--pine-spacing-sm);--offset-md:var(--pine-spacing-md);--offset-lg:var(--pine-spacing-lg);--offset-xxl:var(--pine-spacing-2xl)}.pds-divider{background:var(--background-color);border:0;display:-ms-flexbox;display:flex;height:1px;margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--offset-xxs) * -1);padding:0 var(--offset-xxs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--offset-xxs) * -1) 0;padding:var(--offset-xxs) 0}.pds-divider--offset-xs{margin:0 calc(var(--offset-xs) * -1);padding:0 var(--offset-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--offset-xs) * -1) 0;padding:var(--offset-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--offset-sm) * -1);padding:0 var(--offset-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--offset-sm) * -1) 0;padding:var(--offset-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--offset-md) * -1);padding:0 var(--offset-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--offset-md) * -1) 0;padding:var(--offset-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--offset-lg) * -1);padding:0 var(--offset-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--offset-lg) * -1) 0;padding:var(--offset-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--offset-xl) * -1);padding:0 var(--offset-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--offset-xl) * -1) 0;padding:var(--offset-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--offset-xxl) * -1);padding:0 var(--offset-xxl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--offset-xxl) * -1) 0;padding:var(--offset-xxl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";var PdsDividerStyle0=pdsDividerCss;var PdsDivider=function(){function d(d){registerInstance(this,d);this.componentId=undefined;this.offset=undefined;this.vertical=false}d.prototype.classNames=function(){var d=["pds-divider"];if(this.vertical){d.push("pds-divider--vertical")}if(this.offset){var i="pds-divider--offset-"+this.offset;d.push(i)}return d.join(" ")};d.prototype.render=function(){return h(Host,{key:"d5d42d70c2417e0fc801f87f8460557bb1756443",id:this.componentId},h("hr",{key:"49554a46b6949d09adc4794b22441a1f76eb1d13",class:this.classNames()}))};return d}();PdsDivider.style=PdsDividerStyle0;export{PdsDivider as pds_divider};
+//# sourceMappingURL=pds-divider.entry.js.map

package/dist/esm-es5/pds-divider.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["pdsDividerCss","PdsDividerStyle0","PdsDivider","prototype","classNames","this","vertical","push","offset","offsetClassName","join","render","h","Host","key","id","componentId","class"],"sources":["src/components/pds-divider/pds-divider.scss?tag=pds-divider&encapsulation=shadow","src/components/pds-divider/pds-divider.tsx"],"sourcesContent":[":host {\n --background-color: var(--pine-color-neutral-grey-400);\n --offset-xxs: var(--pine-spacing-xxs);\n --offset-xs: var(--pine-spacing-xs);\n --offset-sm: var(--pine-spacing-sm);\n --offset-md: var(--pine-spacing-md);\n --offset-lg: var(--pine-spacing-lg);\n --offset-xxl: var(--pine-spacing-2xl);\n}\n\n$pds-divider-offsets: (\n xxs: var(--offset-xxs),\n xs: var(--offset-xs),\n sm: var(--offset-sm),\n md: var(--offset-md),\n lg: var(--offset-lg),\n xl: var(--offset-xl),\n xxl: var(--offset-xxl),\n);\n\n.pds-divider {\n background: var(--background-color);\n border: 0;\n display: flex;\n height: 1px;\n margin: 0;\n width: 100%;\n}\n\n.pds-divider--vertical {\n height: 100%;\n width: 1px;\n}\n\n@each $offset, $value in $pds-divider-offsets {\n .pds-divider--offset-#{$offset} {\n margin: 0 calc($value * -1);\n padding: 0 $value;\n\n &.pds-divider--vertical {\n margin: calc($value * -1) 0;\n padding: $value 0;\n }\n }\n}\n\n@media (max-width: 767px) {\n .pds-divider--vertical {\n display: none;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-divider',\n styleUrl: 'pds-divider.scss',\n shadow: true,\n})\nexport class PdsDivider {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n */\n @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n /**\n * Sets divider to display vertically\n * @defaultValue false\n */\n @Prop() vertical = false;\n\n private classNames() {\n const classNames = ['pds-divider'];\n\n if (this.vertical) {\n classNames.push('pds-divider--vertical');\n }\n\n if (this.offset) {\n const offsetClassName = 'pds-divider--offset-' + this.offset;\n classNames.push(offsetClassName);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host id={this.componentId}>\n <hr class={this.classNames()} />\n </Host>\n );\n }\n}\n"],"mappings":"mEAAA,IAAMA,cAAgB,g3DACtB,IAAAC,iBAAeD,c,ICMFE,WAAU,W,sGAeF,K,CAEXA,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,eAEpB,GAAIC,KAAKC,SAAU,CACjBF,EAAWG,KAAK,wB,CAGlB,GAAIF,KAAKG,OAAQ,CACf,IAAMC,EAAkB,uBAAyBJ,KAAKG,OACtDJ,EAAWG,KAAKE,E,CAGlB,OAAOL,EAAWM,KAAK,I,EAGzBR,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,GAAIV,KAAKW,aACbJ,EAAA,MAAAE,IAAA,2CAAIG,MAAOZ,KAAKD,e,WAnCD,G"}

package/dist/esm-es5/pds-icon.entry.js CHANGED Viewed

@@ -1 +1,2 @@
-import{a as getAssetPath,r as registerInstance,h,H as Host,g as getElement}from"./index-9312507f.js";var CACHED_MAP;var getIconMap=function(){if(typeof window==="undefined"){return new Map}else{if(!CACHED_MAP){var n=window;n.PdsIcons=n.PdsIcons||{};CACHED_MAP=n.PdsIcons.map=n.PdsIcons.map||new Map}return CACHED_MAP}};var getName=function(n,t){if(!n&&t&&!isSrc(t)){n=t}if(isStr(n)){n=toLower(n)}if(!isStr(n)||n.trim()===""){return null}var e=n.replace(/[a-z]|-|\d/gi,"");if(e!=""){return null}return n};var getNamedUrl=function(n){var t=getIconMap().get(n);if(t){return t}return getAssetPath("svg/".concat(n,".svg"))};var getSrc=function(n){if(isStr(n)){n=n.trim();if(isSrc(n)){return n}}return null};var getUrl=function(n){var t=getSrc(n.src);if(t){return t}t=getName(n.name,n.icon);if(t){return getNamedUrl(t)}if(n.icon){t=getSrc(n.icon);if(t){return t}}return null};var isSrc=function(n){return n.length>0&&/(\/|\.)/.test(n)};var isStr=function(n){return typeof n==="string"};var toLower=function(n){return n.toLowerCase()};var inheritAttributes=function(n,t){if(t===void 0){t=[]}var e={};t.forEach((function(t){if(n.hasAttribute(t)){var r=n.getAttribute(t);if(r!==null){e[t]=n.getAttribute(t)}n.removeAttribute(t)}}));return e};var validateContent=function(n){var t=document.createElement("div");t.innerHTML=n;for(var e=t.childNodes.length-1;e>=0;e--){if(t.childNodes[e].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[e])}}var r=t.firstElementChild;if(r&&r.nodeName.toLowerCase()==="svg"){var i=r.getAttribute("class")||"";r.setAttribute("class",(i+" s-pds-icon").trim());if(isValid(r)){return t.innerHTML}}return""};var isValid=function(n){if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<n.attributes.length;t++){var e=n.attributes[t].name;if(isStr(e)&&e.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<n.childNodes.length;t++){if(!isValid(n.childNodes[t])){return false}}}return true};var isSvgDataUrl=function(n){return n.startsWith("data:image/svg+xml")};var isEncodedDataUrl=function(n){return n.indexOf(";utf8,")!==-1};var pdsIconContent=new Map;var requests=new Map;var parser;var getSvgContent=function(n,t){if(t===void 0){t=false}var e=requests.get(n);if(!e){if(typeof fetch!="undefined"&&typeof document!=="undefined"){if(isSvgDataUrl(n)&&isEncodedDataUrl(n)){if(!parser){parser=new DOMParser}var r=parser.parseFromString(n,"text/html");var i=r.querySelector("svg");if(i){pdsIconContent.set(n,i.outerHTML)}return Promise.resolve()}else{e=fetch(n).then((function(e){if(e.ok){return e.text().then((function(e){if(e&&t!==false){e=validateContent(e)}pdsIconContent.set(n,e||"")}))}pdsIconContent.set(n,"")}));requests.set(n,e)}}else{pdsIconContent.set(n,"");return Promise.resolve()}}return e};var pdsIconCss=":host{contain:strict;display:inline-block;fill:currentColor;height:1em;width:1em}:host .pdsicon{fill:currentColor}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}";var PdsIconStyle0=pdsIconCss;var PdsIcon=function(){function n(n){var t=this;registerInstance(this,n);this.inheritedAttributes={};this.hasAriaHidden=function(){var n=t.el;return n.hasAttribute("aria-hidden")&&n.getAttribute("aria-hidden")==="true"};this.ariaLabel=undefined;this.isVisible=false;this.svgContent=undefined;this.color=undefined;this.icon=undefined;this.name=undefined;this.size="regular";this.src=undefined}n.prototype.iconSize=function(){var n={small:"12px",regular:"16px",medium:"20px",large:"24px"};if(n[this.size]){return n[this.size]}else{return this.size}};n.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label"])};n.prototype.connectedCallback=function(){var n=this;this.waitUntilVisible(this.el,"50px",(function(){n.isVisible=true;n.loadIcon()}))};n.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};n.prototype.loadIcon=function(){var n=this;if(this.isVisible){var t=getUrl(this);if(t){if(pdsIconContent.has(t)){this.svgContent=pdsIconContent.get(t)}else{getSvgContent(t).then((function(){return n.svgContent=pdsIconContent.get(t)}))}}}var e=getName(this.name,this.icon);if(e){this.ariaLabel=e.replace(/\-/g," ")}};n.prototype.render=function(){var n=this,t=n.ariaLabel,e=n.inheritedAttributes;var r={height:this.iconSize(),width:this.iconSize(),color:this.color};return h(Host,Object.assign({"aria-label":t!==undefined&&!this.hasAriaHidden()?t:null,role:"img",style:r,class:Object.assign({},createColorClasses(this.color))},e),this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};n.prototype.waitUntilVisible=function(n,t,e){var r=this;if(typeof window!=="undefined"&&window.IntersectionObserver){var i=this.io=new window.IntersectionObserver((function(n){if(n[0].isIntersecting){i.disconnect();r.io=undefined;e()}}),{rootMargin:t});i.observe(n)}else{e()}};Object.defineProperty(n,"assetsDirs",{get:function(){return["svg"]},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}},enumerable:false,configurable:true});return n}();var createColorClasses=function(n){var t;return n?(t={"pds-color":true},t["pds-color-".concat(n)]=true,t):null};PdsIcon.style=PdsIconStyle0;export{PdsIcon as pds_icon};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-09d6e504.js";var missingAssetPathWarning=false;var getAssetPath=function(n){var t;var e=(t=document.head.querySelector("meta[data-pine-asset-path]"))===null||t===void 0?void 0:t.dataset.pineAssetPath;var r=window.__PINE_ASSET_PATH__;var i="https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/pds-icons/";var s=e||r||i||"/";if(s.startsWith("https://cdn.jsdelivr.net/npm/")&&!missingAssetPathWarning){missingAssetPathWarning=true;console.warn("\n      Fetching Pine asssets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and setting the path accordingly.\n\nFor more information you read the documentation:\n    ")}var a=n;if(n.startsWith("./")){a=n.substring(2)}if(!s.endsWith("/")){a="/"+a}return s+a};var CACHED_MAP;var getIconMap=function(){if(typeof window==="undefined"){return new Map}else{if(!CACHED_MAP){var n=window;n.PdsIcons=n.PdsIcons||{};CACHED_MAP=n.PdsIcons.map=n.PdsIcons.map||new Map}return CACHED_MAP}};var getName=function(n,t){if(!n&&t&&!isSrc(t)){n=t}if(isStr(n)){n=toLower(n)}if(!isStr(n)||n.trim()===""){return null}var e=n.replace(/[a-z]|-|\d/gi,"");if(e!=""){return null}return n};var getNamedUrl=function(n){var t=getIconMap().get(n);if(t){return t}return getAssetPath("svg/".concat(n,".svg"))};var getSrc=function(n){if(isStr(n)){n=n.trim();if(isSrc(n)){return n}}return null};var getUrl=function(n){var t=getSrc(n.src);if(t){return t}t=getName(n.name,n.icon);if(t){return getNamedUrl(t)}if(n.icon){t=getSrc(n.icon);if(t){return t}}return null};var isSrc=function(n){return n.length>0&&/(\/|\.)/.test(n)};var isStr=function(n){return typeof n==="string"};var toLower=function(n){return n.toLowerCase()};var inheritAttributes=function(n,t){if(t===void 0){t=[]}var e={};t.forEach((function(t){if(n.hasAttribute(t)){var r=n.getAttribute(t);if(r!==null){e[t]=n.getAttribute(t)}n.removeAttribute(t)}}));return e};var validateContent=function(n){var t=document.createElement("div");t.innerHTML=n;for(var e=t.childNodes.length-1;e>=0;e--){if(t.childNodes[e].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[e])}}var r=t.firstElementChild;if(r&&r.nodeName.toLowerCase()==="svg"){var i=r.getAttribute("class")||"";r.setAttribute("class",(i+" s-pds-icon").trim());if(isValid(r)){return t.innerHTML}}return""};var isValid=function(n){if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<n.attributes.length;t++){var e=n.attributes[t].name;if(isStr(e)&&e.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<n.childNodes.length;t++){if(!isValid(n.childNodes[t])){return false}}}return true};var isSvgDataUrl=function(n){return n.startsWith("data:image/svg+xml")};var isEncodedDataUrl=function(n){return n.indexOf(";utf8,")!==-1};var pdsIconContent=new Map;var requests=new Map;var parser;var getSvgContent=function(n,t){if(t===void 0){t=false}var e=requests.get(n);if(!e){if(typeof fetch!="undefined"&&typeof document!=="undefined"){if(isSvgDataUrl(n)&&isEncodedDataUrl(n)){if(!parser){parser=new DOMParser}var r=parser.parseFromString(n,"text/html");var i=r.querySelector("svg");if(i){pdsIconContent.set(n,i.outerHTML)}return Promise.resolve()}else{e=fetch(n).then((function(e){if(e.ok){return e.text().then((function(e){if(e&&t!==false){e=validateContent(e)}pdsIconContent.set(n,e||"")}))}pdsIconContent.set(n,"")}));requests.set(n,e)}}else{pdsIconContent.set(n,"");return Promise.resolve()}}return e};var pdsIconCss=":host{contain:strict;display:inline-block;fill:currentColor;height:1em;width:1em}:host .pdsicon{fill:currentColor}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}";var PdsIconStyle0=pdsIconCss;var PdsIcon=function(){function n(n){var t=this;registerInstance(this,n);this.inheritedAttributes={};this.hasAriaHidden=function(){var n=t.el;return n.hasAttribute("aria-hidden")&&n.getAttribute("aria-hidden")==="true"};this.ariaLabel=undefined;this.isVisible=false;this.svgContent=undefined;this.color=undefined;this.icon=undefined;this.name=undefined;this.size="regular";this.src=undefined}n.prototype.iconSize=function(){var n={small:"12px",regular:"16px",medium:"20px",large:"24px"};if(n[this.size]){return n[this.size]}else{return this.size}};n.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label"])};n.prototype.connectedCallback=function(){var n=this;this.waitUntilVisible(this.el,"50px",(function(){n.isVisible=true;n.loadIcon()}))};n.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};n.prototype.loadIcon=function(){var n=this;if(this.isVisible){var t=getUrl(this);if(t){if(pdsIconContent.has(t)){this.svgContent=pdsIconContent.get(t)}else{getSvgContent(t).then((function(){return n.svgContent=pdsIconContent.get(t)}))}}}var e=getName(this.name,this.icon);if(e){this.ariaLabel=e.replace(/\-/g," ")}};n.prototype.render=function(){var n=this,t=n.ariaLabel,e=n.inheritedAttributes;var r={height:this.iconSize(),width:this.iconSize(),color:this.color};return h(Host,Object.assign({"aria-label":t!==undefined&&!this.hasAriaHidden()?t:null,role:"img",style:r,class:Object.assign({},createColorClasses(this.color))},e),this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};n.prototype.waitUntilVisible=function(n,t,e){var r=this;if(typeof window!=="undefined"&&window.IntersectionObserver){var i=this.io=new window.IntersectionObserver((function(n){if(n[0].isIntersecting){i.disconnect();r.io=undefined;e()}}),{rootMargin:t});i.observe(n)}else{e()}};Object.defineProperty(n,"assetsDirs",{get:function(){return["svg"]},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}},enumerable:false,configurable:true});return n}();var createColorClasses=function(n){var t;return n?(t={"pds-color":true},t["pds-color-".concat(n)]=true,t):null};PdsIcon.style=PdsIconStyle0;export{PdsIcon as pds_icon};
+//# sourceMappingURL=pds-icon.entry.js.map