@pine-ds/core 3.21.0 → 3.22.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 (152) hide show
  1. package/components/pds-alert.js +1 -1
  2. package/components/pds-alert.js.map +1 -1
  3. package/components/pds-avatar.js +2 -2
  4. package/components/pds-avatar.js.map +1 -1
  5. package/components/pds-chip2.js +2 -2
  6. package/components/pds-chip2.js.map +1 -1
  7. package/components/pds-combobox.js +10 -2
  8. package/components/pds-combobox.js.map +1 -1
  9. package/components/pds-dropdown-menu-item.js +2 -2
  10. package/components/pds-dropdown-menu-item.js.map +1 -1
  11. package/components/pds-input.js +31 -4
  12. package/components/pds-input.js.map +1 -1
  13. package/components/pds-multiselect.js +3 -3
  14. package/components/pds-multiselect.js.map +1 -1
  15. package/components/pds-toast.js +2 -2
  16. package/components/pds-toast.js.map +1 -1
  17. package/dist/cjs/pds-alert.cjs.entry.js +1 -1
  18. package/dist/cjs/pds-alert.entry.cjs.js.map +1 -1
  19. package/dist/cjs/pds-avatar.cjs.entry.js +2 -2
  20. package/dist/cjs/pds-avatar.entry.cjs.js.map +1 -1
  21. package/dist/cjs/pds-chip.cjs.entry.js +2 -2
  22. package/dist/cjs/pds-chip.entry.cjs.js.map +1 -1
  23. package/dist/cjs/pds-combobox.cjs.entry.js +10 -2
  24. package/dist/cjs/pds-combobox.entry.cjs.js.map +1 -1
  25. package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +2 -2
  26. package/dist/cjs/pds-dropdown-menu-item.entry.cjs.js.map +1 -1
  27. package/dist/cjs/pds-input.cjs.entry.js +31 -4
  28. package/dist/cjs/pds-input.entry.cjs.js.map +1 -1
  29. package/dist/cjs/pds-multiselect.cjs.entry.js +3 -3
  30. package/dist/cjs/pds-multiselect.entry.cjs.js.map +1 -1
  31. package/dist/cjs/pds-toast.cjs.entry.js +2 -2
  32. package/dist/cjs/pds-toast.entry.cjs.js.map +1 -1
  33. package/dist/collection/components/pds-alert/pds-alert.js +1 -1
  34. package/dist/collection/components/pds-alert/pds-alert.js.map +1 -1
  35. package/dist/collection/components/pds-avatar/pds-avatar.js +2 -2
  36. package/dist/collection/components/pds-avatar/pds-avatar.js.map +1 -1
  37. package/dist/collection/components/pds-chip/pds-chip.js +2 -2
  38. package/dist/collection/components/pds-chip/pds-chip.js.map +1 -1
  39. package/dist/collection/components/pds-combobox/pds-combobox.js +10 -2
  40. package/dist/collection/components/pds-combobox/pds-combobox.js.map +1 -1
  41. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +2 -2
  42. package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js.map +1 -1
  43. package/dist/collection/components/pds-input/pds-input.js +31 -4
  44. package/dist/collection/components/pds-input/pds-input.js.map +1 -1
  45. package/dist/collection/components/pds-multiselect/pds-multiselect.js +3 -3
  46. package/dist/collection/components/pds-multiselect/pds-multiselect.js.map +1 -1
  47. package/dist/collection/components/pds-toast/pds-toast.js +2 -2
  48. package/dist/collection/components/pds-toast/pds-toast.js.map +1 -1
  49. package/dist/docs.json +35 -6
  50. package/dist/esm/pds-alert.entry.js +1 -1
  51. package/dist/esm/pds-alert.entry.js.map +1 -1
  52. package/dist/esm/pds-avatar.entry.js +2 -2
  53. package/dist/esm/pds-avatar.entry.js.map +1 -1
  54. package/dist/esm/pds-chip.entry.js +2 -2
  55. package/dist/esm/pds-chip.entry.js.map +1 -1
  56. package/dist/esm/pds-combobox.entry.js +10 -2
  57. package/dist/esm/pds-combobox.entry.js.map +1 -1
  58. package/dist/esm/pds-dropdown-menu-item.entry.js +2 -2
  59. package/dist/esm/pds-dropdown-menu-item.entry.js.map +1 -1
  60. package/dist/esm/pds-input.entry.js +31 -4
  61. package/dist/esm/pds-input.entry.js.map +1 -1
  62. package/dist/esm/pds-multiselect.entry.js +3 -3
  63. package/dist/esm/pds-multiselect.entry.js.map +1 -1
  64. package/dist/esm/pds-toast.entry.js +2 -2
  65. package/dist/esm/pds-toast.entry.js.map +1 -1
  66. package/dist/esm-es5/pds-alert.entry.js +1 -1
  67. package/dist/esm-es5/pds-alert.entry.js.map +1 -1
  68. package/dist/esm-es5/pds-avatar.entry.js +1 -1
  69. package/dist/esm-es5/pds-avatar.entry.js.map +1 -1
  70. package/dist/esm-es5/pds-chip.entry.js +1 -1
  71. package/dist/esm-es5/pds-chip.entry.js.map +1 -1
  72. package/dist/esm-es5/pds-combobox.entry.js +1 -1
  73. package/dist/esm-es5/pds-combobox.entry.js.map +1 -1
  74. package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
  75. package/dist/esm-es5/pds-dropdown-menu-item.entry.js.map +1 -1
  76. package/dist/esm-es5/pds-input.entry.js +1 -1
  77. package/dist/esm-es5/pds-input.entry.js.map +1 -1
  78. package/dist/esm-es5/pds-multiselect.entry.js +1 -1
  79. package/dist/esm-es5/pds-multiselect.entry.js.map +1 -1
  80. package/dist/esm-es5/pds-toast.entry.js +1 -1
  81. package/dist/esm-es5/pds-toast.entry.js.map +1 -1
  82. package/dist/pine-core/{p-378d01df.entry.js → p-009faf05.entry.js} +2 -2
  83. package/dist/pine-core/p-009faf05.entry.js.map +1 -0
  84. package/dist/pine-core/{p-4fb30dcc.system.entry.js → p-08cdf7f2.system.entry.js} +2 -2
  85. package/dist/pine-core/p-08cdf7f2.system.entry.js.map +1 -0
  86. package/dist/pine-core/{p-5bc45784.system.entry.js → p-15b66c25.system.entry.js} +2 -2
  87. package/dist/pine-core/p-15b66c25.system.entry.js.map +1 -0
  88. package/dist/pine-core/{p-c301925f.system.entry.js → p-25255ab8.system.entry.js} +2 -2
  89. package/dist/pine-core/{p-c301925f.system.entry.js.map → p-25255ab8.system.entry.js.map} +1 -1
  90. package/dist/pine-core/{p-40c04518.system.entry.js → p-36478643.system.entry.js} +2 -2
  91. package/dist/pine-core/{p-40c04518.system.entry.js.map → p-36478643.system.entry.js.map} +1 -1
  92. package/dist/pine-core/{p-37e5e471.entry.js → p-39cb879d.entry.js} +2 -2
  93. package/dist/pine-core/p-39cb879d.entry.js.map +1 -0
  94. package/dist/pine-core/{p-35e91ecb.entry.js → p-3e2fc38f.entry.js} +2 -2
  95. package/dist/pine-core/p-3e2fc38f.entry.js.map +1 -0
  96. package/dist/pine-core/{p-5dbbb2be.entry.js → p-44035cf4.entry.js} +3 -3
  97. package/dist/pine-core/{p-5dbbb2be.entry.js.map → p-44035cf4.entry.js.map} +1 -1
  98. package/dist/pine-core/{p-6fcac53b.entry.js → p-56d0e6f4.entry.js} +2 -2
  99. package/dist/pine-core/p-56d0e6f4.entry.js.map +1 -0
  100. package/dist/pine-core/{p-4e24be57.system.entry.js → p-5e83f6e3.system.entry.js} +2 -2
  101. package/dist/pine-core/p-5e83f6e3.system.entry.js.map +1 -0
  102. package/dist/pine-core/{p-35f644cf.system.entry.js → p-7737e4e8.system.entry.js} +2 -2
  103. package/dist/pine-core/p-7737e4e8.system.entry.js.map +1 -0
  104. package/dist/pine-core/{p-bf1a7158.entry.js → p-8a31ccd4.entry.js} +2 -2
  105. package/dist/pine-core/p-8a31ccd4.entry.js.map +1 -0
  106. package/dist/pine-core/{p-2f64a2fe.system.entry.js → p-8a53ae6d.system.entry.js} +2 -2
  107. package/dist/pine-core/p-8a53ae6d.system.entry.js.map +1 -0
  108. package/dist/pine-core/{p-d38da7a6.entry.js → p-9c0e22d4.entry.js} +2 -2
  109. package/dist/pine-core/p-9c0e22d4.entry.js.map +1 -0
  110. package/dist/pine-core/{p-B3-LvD0D.system.js.map → p-BohZ8Mvm.system.js.map} +1 -1
  111. package/dist/pine-core/p-CFqOsbKv.system.js.map +1 -0
  112. package/dist/pine-core/{p-bw-OZgCg.system.js.map → p-CTDKHxjD.system.js.map} +1 -1
  113. package/dist/pine-core/{p-n9xvc2MF.system.js.map → p-D497NWkn.system.js.map} +1 -1
  114. package/dist/pine-core/{p-_bwM2Rxz.system.js.map → p-DHNujrRT.system.js.map} +1 -1
  115. package/dist/pine-core/p-DqO0Rc5m.system.js.map +1 -0
  116. package/dist/pine-core/p-Dvsezmq8.system.js.map +1 -0
  117. package/dist/pine-core/p-JAVnELnm.system.js +1 -1
  118. package/dist/pine-core/{p-LEkjdrKv.system.js.map → p-bPSIyJOo.system.js.map} +1 -1
  119. package/dist/pine-core/{p-78132616.entry.js → p-cbf49268.entry.js} +2 -2
  120. package/dist/pine-core/p-cbf49268.entry.js.map +1 -0
  121. package/dist/pine-core/{p-cb2146b0.system.entry.js → p-ef7d0535.system.entry.js} +2 -2
  122. package/dist/pine-core/p-ef7d0535.system.entry.js.map +1 -0
  123. package/dist/pine-core/pds-alert.entry.esm.js.map +1 -1
  124. package/dist/pine-core/pds-avatar.entry.esm.js.map +1 -1
  125. package/dist/pine-core/pds-chip.entry.esm.js.map +1 -1
  126. package/dist/pine-core/pds-combobox.entry.esm.js.map +1 -1
  127. package/dist/pine-core/pds-dropdown-menu-item.entry.esm.js.map +1 -1
  128. package/dist/pine-core/pds-input.entry.esm.js.map +1 -1
  129. package/dist/pine-core/pds-multiselect.entry.esm.js.map +1 -1
  130. package/dist/pine-core/pds-toast.entry.esm.js.map +1 -1
  131. package/dist/pine-core/pine-core.esm.js +1 -1
  132. package/dist/types/components/pds-input/pds-input.d.ts +4 -1
  133. package/hydrate/index.js +53 -18
  134. package/hydrate/index.mjs +53 -18
  135. package/package.json +2 -2
  136. package/dist/pine-core/p-2f64a2fe.system.entry.js.map +0 -1
  137. package/dist/pine-core/p-35e91ecb.entry.js.map +0 -1
  138. package/dist/pine-core/p-35f644cf.system.entry.js.map +0 -1
  139. package/dist/pine-core/p-378d01df.entry.js.map +0 -1
  140. package/dist/pine-core/p-37e5e471.entry.js.map +0 -1
  141. package/dist/pine-core/p-4e24be57.system.entry.js.map +0 -1
  142. package/dist/pine-core/p-4fb30dcc.system.entry.js.map +0 -1
  143. package/dist/pine-core/p-5bc45784.system.entry.js.map +0 -1
  144. package/dist/pine-core/p-6fcac53b.entry.js.map +0 -1
  145. package/dist/pine-core/p-78132616.entry.js.map +0 -1
  146. package/dist/pine-core/p-B3xx1u93.system.js.map +0 -1
  147. package/dist/pine-core/p-CdpI5vUX.system.js.map +0 -1
  148. package/dist/pine-core/p-Dd9EYBI-.system.js.map +0 -1
  149. package/dist/pine-core/p-bf1a7158.entry.js.map +0 -1
  150. package/dist/pine-core/p-cb2146b0.system.entry.js.map +0 -1
  151. package/dist/pine-core/p-d38da7a6.entry.js.map +0 -1
  152. package/dist/vscode.html-data.json +0 -10420
@@ -1 +1 @@
1
- {"version":3,"file":"pds-avatar.entry.js","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 --color-background-container: var(--pine-color-background-container-hover);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-dimension-150);\n border-radius: var(--border-radius-admin-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 align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n.pds-avatar__badge {\n background-color: transparent;\n border: var(--pine-dimension-none);\n border-color: transparent;\n border-radius: var(--pine-border-radius-round);\n inset-block-end: var(--pine-dimension-none);\n inset-inline-end: var(--pine-dimension-none);\n position: absolute;\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n\n.pds-avatar__initials {\n color: var(--pine-color-brand);\n fill: var(--pine-color-brand);\n font-size: var(--pine-font-size-085);\n font-weight: var(--pine-font-weight-semi-bold);\n height: 100%;\n text-align: center;\n width: 100%;\n\n text {\n text-anchor: middle;\n }\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 styleUrls: ['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 * The initials to display in the avatar when no image is provided.\n * @defaultValue null\n */\n @Prop() initials?: 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\" aria-label=\"Avatar dropdown trigger\">\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 color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => {\n if (this.image) {\n return <img alt={this.alt} src={this.image} />;\n }\n\n if (this.initials) {\n return (\n <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n <text x=\"16\" y=\"20\">{this.initials}</text>\n </svg>\n );\n }\n\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 return <pds-icon color=\"var(--pine-color-brand)\" 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--has-initials`]: this.initials !== '' && this.initials !== null,\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"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pds-avatar.entry.js","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 --color-background-container: var(--pine-color-background-container-hover);\n\n align-items: center;\n background-color: var(--color-background-container);\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n display: inline-flex;\n justify-content: center;\n position: relative;\n\n :host(.pds-avatar--admin) & {\n --border-radius-admin-round: var(--pine-dimension-150);\n border-radius: var(--border-radius-admin-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 align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-none);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n.pds-avatar__badge {\n background-color: transparent;\n border: var(--pine-dimension-none);\n border-color: transparent;\n border-radius: var(--pine-border-radius-round);\n inset-block-end: var(--pine-dimension-none);\n inset-inline-end: var(--pine-dimension-none);\n position: absolute;\n}\n\nimg {\n border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n height: 100%;\n object-fit: cover;\n width: 100%;\n}\n\n.pds-avatar__initials {\n color: var(--pine-color-brand);\n fill: var(--pine-color-brand);\n font-size: var(--pine-font-size-085);\n font-weight: var(--pine-font-weight-semi-bold);\n height: 100%;\n text-align: center;\n width: 100%;\n\n text {\n text-anchor: middle;\n }\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 styleUrls: ['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 * The initials to display in the avatar when no image is provided.\n * @defaultValue null\n */\n @Prop() initials?: 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\" part=\"button\" aria-label=\"Avatar dropdown trigger\">\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 color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n );\n\n private renderIconOrImage = () => {\n if (this.image) {\n return <img alt={this.alt} src={this.image} />;\n }\n\n if (this.initials) {\n return (\n <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n <text x=\"16\" y=\"20\">{this.initials}</text>\n </svg>\n );\n }\n\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 return <pds-icon color=\"var(--pine-color-brand)\" 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--has-initials`]: this.initials !== '' && this.initials !== null,\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"],"names":[],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{r as registerInstance,c as createEvent,h,H as Host}from"./index-DHPhrb5T.js";import{d as downSmall,r as remove}from"./index-Bmf4Ow_8.js";var pdsChipTokensCss=":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600)}";var pdsChipCss=":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.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{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}";var PdsChip=function(){function i(i){var n=this;registerInstance(this,i);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick");this.dot=false;this.large=false;this.sentiment="neutral";this.variant="text";this.handleCloseClick=function(){n.pdsTagCloseClick.emit()}}Object.defineProperty(i.prototype,"effectiveSize",{get:function(){if(this.size!=null)return this.size;if(this.large)return"lg";return"md"},enumerable:false,configurable:true});i.prototype.classNames=function(){var i=["pds-chip"];var n=this.effectiveSize;if(n&&n!=="md"){i.push("pds-chip--"+n)}var e=this.sentiment==="brand"?"text":this.variant;if(e){i.push("pds-chip--"+e)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join(" ")};Object.defineProperty(i.prototype,"effectiveVariant",{get:function(){return this.sentiment==="brand"?"text":this.variant},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"iconSize",{get:function(){switch(this.effectiveSize){case"sm":return"10px";case"lg":return"14px";default:return"12px"}},enumerable:false,configurable:true});i.prototype.setChipContent=function(){var i=this.effectiveVariant==="dropdown";var n=this.sentiment==="brand"?false:this.dot;var e=i?h("button",{class:"pds-chip__button",type:"button"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null),h("pds-icon",{icon:downSmall,size:this.iconSize,"aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null));return e};i.prototype.renderCloseButton=function(){var i=this;var n=this.removeUrl?"a":"button";var e=function(){if(i.removeUrl){var n={class:"pds-chip__close",href:i.removeUrl,"aria-label":"Remove"};if(i.removeTarget){n.target=i.removeTarget}if(i.removeHttpMethod){n["data-method"]=i.removeHttpMethod;n["data-turbo-method"]=i.removeHttpMethod}var e=[];if(i.removeTarget==="_blank"){e.push("noopener","noreferrer")}if(i.removeHttpMethod&&i.removeHttpMethod!=="get"){e.push("nofollow")}if(e.length>0){n.rel=e.join(" ")}return n}return{class:"pds-chip__close",type:"button","aria-label":"Remove"}};return h(n,Object.assign({},e(),{onClick:this.handleCloseClick}),h("pds-icon",{icon:remove,size:this.iconSize}))};i.prototype.render=function(){return h(Host,{key:"fcd4828fabaeba300c35cd9a0b90701feefd6480",class:this.classNames(),id:this.componentId},this.setChipContent(),this.effectiveVariant==="tag"&&this.renderCloseButton())};return i}();PdsChip.style=pdsChipTokensCss+pdsChipCss;export{PdsChip as pds_chip};
1
+ import{r as registerInstance,c as createEvent,h,H as Host}from"./index-DHPhrb5T.js";import{d as downSmall,r as remove}from"./index-Bmf4Ow_8.js";var pdsChipTokensCss=":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600)}";var pdsChipCss=":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.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{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}";var PdsChip=function(){function i(i){var n=this;registerInstance(this,i);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick");this.dot=false;this.large=false;this.sentiment="neutral";this.variant="text";this.handleCloseClick=function(){n.pdsTagCloseClick.emit()}}Object.defineProperty(i.prototype,"effectiveSize",{get:function(){if(this.size!=null)return this.size;if(this.large)return"lg";return"md"},enumerable:false,configurable:true});i.prototype.classNames=function(){var i=["pds-chip"];var n=this.effectiveSize;if(n&&n!=="md"){i.push("pds-chip--"+n)}var e=this.sentiment==="brand"?"text":this.variant;if(e){i.push("pds-chip--"+e)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join(" ")};Object.defineProperty(i.prototype,"effectiveVariant",{get:function(){return this.sentiment==="brand"?"text":this.variant},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"iconSize",{get:function(){switch(this.effectiveSize){case"sm":return"10px";case"lg":return"14px";default:return"12px"}},enumerable:false,configurable:true});i.prototype.setChipContent=function(){var i=this.effectiveVariant==="dropdown";var n=this.sentiment==="brand"?false:this.dot;var e=i?h("button",{class:"pds-chip__button",type:"button",part:"button"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null),h("pds-icon",{icon:downSmall,size:this.iconSize,"aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null));return e};i.prototype.renderCloseButton=function(){var i=this;var n=this.removeUrl?"a":"button";var e=function(){if(i.removeUrl){var n={class:"pds-chip__close",href:i.removeUrl,"aria-label":"Remove"};if(i.removeTarget){n.target=i.removeTarget}if(i.removeHttpMethod){n["data-method"]=i.removeHttpMethod;n["data-turbo-method"]=i.removeHttpMethod}var e=[];if(i.removeTarget==="_blank"){e.push("noopener","noreferrer")}if(i.removeHttpMethod&&i.removeHttpMethod!=="get"){e.push("nofollow")}if(e.length>0){n.rel=e.join(" ")}return n}return{class:"pds-chip__close",type:"button","aria-label":"Remove"}};return h(n,Object.assign({},e(),{onClick:this.handleCloseClick}),h("pds-icon",{icon:remove,size:this.iconSize}))};i.prototype.render=function(){return h(Host,{key:"c6afa0a9aba7716fd7a7ee32d1c0993c30464b1e",class:this.classNames(),id:this.componentId},this.setChipContent(),this.effectiveVariant==="tag"&&this.renderCloseButton())};return i}();PdsChip.style=pdsChipTokensCss+pdsChipCss;export{PdsChip as pds_chip};
2
2
  //# sourceMappingURL=pds-chip.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pds-chip.entry.js","sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n/* stylelint-disable pine-design-system/prefer-semantic-tokens */\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-grey-900),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n/* stylelint-enable pine-design-system/prefer-semantic-tokens */\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\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 .pds-chip__label, .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line */\n color: map.get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-hover, $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-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n\n pds-icon:last-child {\n margin-inline-end: calc(var(--pine-dimension-025) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// small\n\n:host(.pds-chip--sm) {\n --sizing-close: var(--pine-dimension-100);\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n\n .pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-sm-medium);\n letter-spacing: var(--pine-letter-spacing);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--brand) {\n .pds-chip__label {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n// large\n\n:host(.pds-chip--lg) {\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font-family: var(--pine-font-family-heading);\n font-size: var(--pine-font-size-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--lg.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n }\n}\n\n:host(.pds-chip--brand) {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n position: relative;\n z-index: var(--pine-z-index-raised);\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-chip__button {\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n background: rgba(255, 255, 255, 0.8);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', '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 * Determines whether a dot should be displayed on the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n /**\n * The name of the icon to display before the chip text.\n */\n @Prop() icon?: string;\n\n /**\n * Determines whether the chip should be displayed in a larger size. DEPRECATED.\n * @defaultValue false\n * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n */\n @Prop() large = false;\n\n /**\n * Sets the size of the chip.\n * @defaultValue 'md'\n */\n @Prop() size?: ChipSizeType;\n\n /**\n * Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: ChipSentimentType = 'neutral';\n\n /**\n * Sets the style variant of the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue 'text'\n */\n @Prop() variant: ChipVariantType = 'text';\n\n /**\n * URL to navigate to when the remove button is clicked.\n * When provided, renders the close button as a link instead of a button.\n * Only applies to tag variant.\n */\n @Prop() removeUrl?: string;\n\n /**\n * HTTP method to use for the remove action.\n * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n * Only applies when removeUrl is provided.\n */\n @Prop() removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';\n\n /**\n * Specifies where to open the linked document when removeUrl is provided.\n * Only applies when removeUrl is set.\n */\n @Prop() removeTarget?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter<void>;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private get effectiveSize(): ChipSizeType {\n if (this.size != null) return this.size;\n if (this.large) return 'lg';\n return 'md';\n }\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n const size = this.effectiveSize;\n if (size && size !== 'md') {\n classNames.push('pds-chip--' + size);\n }\n\n // For brand sentiment, always use text variant\n const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n if (effectiveVariant) {\n classNames.push('pds-chip--' + effectiveVariant);\n }\n\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private get effectiveVariant() {\n // For brand sentiment, force text variant behavior\n return this.sentiment === 'brand' ? 'text' : this.variant;\n }\n\n private get iconSize() {\n switch (this.effectiveSize) {\n case 'sm': return '10px';\n case 'lg': return '14px';\n default: return '12px';\n }\n }\n\n private setChipContent() {\n const isDropdown = this.effectiveVariant === 'dropdown';\n\n // For brand sentiment, ignore dot prop\n const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n private renderCloseButton() {\n const CloseElement = this.removeUrl ? 'a' : 'button';\n\n const closeAttributes = () => {\n if (this.removeUrl) {\n // Link attributes\n const linkAttrs: any = {\n class: 'pds-chip__close',\n href: this.removeUrl,\n 'aria-label': 'Remove',\n };\n\n // Add target if specified\n if (this.removeTarget) {\n linkAttrs.target = this.removeTarget;\n }\n\n // Add HTTP method attributes if specified\n if (this.removeHttpMethod) {\n linkAttrs['data-method'] = this.removeHttpMethod;\n linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n }\n\n // Build rel attribute by collecting all required values\n const relValues = [];\n\n // Add noopener noreferrer if target is _blank\n if (this.removeTarget === '_blank') {\n relValues.push('noopener', 'noreferrer');\n }\n\n // Add nofollow for non-GET methods (best practice)\n if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n relValues.push('nofollow');\n }\n\n // Set rel attribute if we have any values\n if (relValues.length > 0) {\n linkAttrs.rel = relValues.join(' ');\n }\n\n return linkAttrs;\n }\n\n // Button attributes\n return {\n class: 'pds-chip__close',\n type: 'button',\n 'aria-label': 'Remove',\n };\n };\n\n return (\n <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </CloseElement>\n );\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pds-chip.entry.js","sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n/* stylelint-disable pine-design-system/prefer-semantic-tokens */\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-grey-900),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n/* stylelint-enable pine-design-system/prefer-semantic-tokens */\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\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 .pds-chip__label, .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line */\n color: map.get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-hover, $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-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n\n pds-icon:last-child {\n margin-inline-end: calc(var(--pine-dimension-025) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// small\n\n:host(.pds-chip--sm) {\n --sizing-close: var(--pine-dimension-100);\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-100);\n\n .pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-sm-medium);\n letter-spacing: var(--pine-letter-spacing);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n:host(.pds-chip--sm.pds-chip--brand) {\n .pds-chip__label {\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n }\n}\n\n// large\n\n:host(.pds-chip--lg) {\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font-family: var(--pine-font-family-heading);\n font-size: var(--pine-font-size-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--lg.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n }\n}\n\n:host(.pds-chip--brand) {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-100);\n position: relative;\n z-index: var(--pine-z-index-raised);\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-chip__button {\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n background: rgba(255, 255, 255, 0.8);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', '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 * Determines whether a dot should be displayed on the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n /**\n * The name of the icon to display before the chip text.\n */\n @Prop() icon?: string;\n\n /**\n * Determines whether the chip should be displayed in a larger size. DEPRECATED.\n * @defaultValue false\n * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n */\n @Prop() large = false;\n\n /**\n * Sets the size of the chip.\n * @defaultValue 'md'\n */\n @Prop() size?: ChipSizeType;\n\n /**\n * Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: ChipSentimentType = 'neutral';\n\n /**\n * Sets the style variant of the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue 'text'\n */\n @Prop() variant: ChipVariantType = 'text';\n\n /**\n * URL to navigate to when the remove button is clicked.\n * When provided, renders the close button as a link instead of a button.\n * Only applies to tag variant.\n */\n @Prop() removeUrl?: string;\n\n /**\n * HTTP method to use for the remove action.\n * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n * Only applies when removeUrl is provided.\n */\n @Prop() removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';\n\n /**\n * Specifies where to open the linked document when removeUrl is provided.\n * Only applies when removeUrl is set.\n */\n @Prop() removeTarget?: '_blank' | '_self' | '_parent' | '_top';\n\n /**\n * Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter<void>;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private get effectiveSize(): ChipSizeType {\n if (this.size != null) return this.size;\n if (this.large) return 'lg';\n return 'md';\n }\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n const size = this.effectiveSize;\n if (size && size !== 'md') {\n classNames.push('pds-chip--' + size);\n }\n\n // For brand sentiment, always use text variant\n const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n if (effectiveVariant) {\n classNames.push('pds-chip--' + effectiveVariant);\n }\n\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private get effectiveVariant() {\n // For brand sentiment, force text variant behavior\n return this.sentiment === 'brand' ? 'text' : this.variant;\n }\n\n private get iconSize() {\n switch (this.effectiveSize) {\n case 'sm': return '10px';\n case 'lg': return '14px';\n default: return '12px';\n }\n }\n\n private setChipContent() {\n const isDropdown = this.effectiveVariant === 'dropdown';\n\n // For brand sentiment, ignore dot prop\n const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\" part=\"button\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n private renderCloseButton() {\n const CloseElement = this.removeUrl ? 'a' : 'button';\n\n const closeAttributes = () => {\n if (this.removeUrl) {\n // Link attributes\n const linkAttrs: any = {\n class: 'pds-chip__close',\n href: this.removeUrl,\n 'aria-label': 'Remove',\n };\n\n // Add target if specified\n if (this.removeTarget) {\n linkAttrs.target = this.removeTarget;\n }\n\n // Add HTTP method attributes if specified\n if (this.removeHttpMethod) {\n linkAttrs['data-method'] = this.removeHttpMethod;\n linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n }\n\n // Build rel attribute by collecting all required values\n const relValues = [];\n\n // Add noopener noreferrer if target is _blank\n if (this.removeTarget === '_blank') {\n relValues.push('noopener', 'noreferrer');\n }\n\n // Add nofollow for non-GET methods (best practice)\n if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n relValues.push('nofollow');\n }\n\n // Set rel attribute if we have any values\n if (relValues.length > 0) {\n linkAttrs.rel = relValues.join(' ');\n }\n\n return linkAttrs;\n }\n\n // Button attributes\n return {\n class: 'pds-chip__close',\n type: 'button',\n 'aria-label': 'Remove',\n };\n };\n\n return (\n <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </CloseElement>\n );\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}