@redvars/peacock 3.1.0 → 3.1.1

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 (138) hide show
  1. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js +3 -3
  2. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js.map +1 -1
  3. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.d.ts +0 -6
  4. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js +0 -6
  5. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js.map +1 -1
  6. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.d.ts +10 -0
  7. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js +17 -0
  8. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js.map +1 -0
  9. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.d.ts +1 -0
  10. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js +33 -0
  11. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js.map +1 -0
  12. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.d.ts +9 -0
  13. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js +37 -0
  14. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js.map +1 -0
  15. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.d.ts +1 -0
  16. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.js +2 -0
  17. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.js.map +1 -0
  18. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.d.ts +8 -0
  19. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js +15 -0
  20. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js.map +1 -0
  21. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.d.ts +0 -6
  22. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js +0 -7
  23. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js.map +1 -1
  24. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.d.ts +8 -1
  25. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js +11 -4
  26. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js.map +1 -1
  27. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.d.ts +3 -2
  28. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js +3 -2
  29. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js.map +1 -1
  30. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.d.ts +1 -0
  31. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.js +2 -0
  32. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.js.map +1 -0
  33. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.d.ts +2 -0
  34. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.js +36 -0
  35. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.js.map +1 -0
  36. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.d.ts +12 -0
  37. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.js +18 -0
  38. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.js.map +1 -0
  39. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js +31 -2
  40. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js.map +1 -1
  41. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.d.ts +9 -0
  42. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.js +46 -0
  43. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.js.map +1 -0
  44. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.d.ts +2 -0
  45. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.js +70 -0
  46. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.js.map +1 -0
  47. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.d.ts +0 -1
  48. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js +0 -7
  49. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js.map +1 -1
  50. package/.rollup.cache/E/git/redvars/peacock/components/dist/tsconfig.tsbuildinfo +1 -1
  51. package/{demo → assets}/tokens.css +60 -48
  52. package/copyDesignFiles.js +11 -0
  53. package/custom-elements-manifest.config.mjs +10 -22
  54. package/custom-elements.md +61 -137
  55. package/demo/index.html +21 -8
  56. package/dist/assets/styles/tokens.css +8 -1
  57. package/dist/{icon-1wpxQtrZ.js → avatar-GQwWRGRw.js} +94 -17
  58. package/dist/avatar-GQwWRGRw.js.map +1 -0
  59. package/dist/avatar-jfcIDB8G.js +424 -0
  60. package/dist/avatar-jfcIDB8G.js.map +1 -0
  61. package/dist/component/avatar.js +12 -8
  62. package/dist/component/avatar.js.map +1 -1
  63. package/dist/component/{Icon.js → icon.js} +96 -9
  64. package/dist/component/icon.js.map +1 -0
  65. package/dist/directive-CKEA2P55.js +70 -0
  66. package/dist/directive-CKEA2P55.js.map +1 -0
  67. package/dist/index.js +40 -61
  68. package/dist/index.js.map +1 -1
  69. package/dist/peacock-loader.js +132 -3
  70. package/dist/peacock-loader.js.map +1 -1
  71. package/dist/src/avatar/avatar.d.ts +0 -6
  72. package/dist/src/avatar/p-avatar.d.ts +10 -0
  73. package/dist/src/badge/badge.css.d.ts +1 -0
  74. package/dist/src/badge/badge.d.ts +9 -0
  75. package/dist/src/badge/index.d.ts +1 -0
  76. package/dist/src/badge/p-badge.d.ts +8 -0
  77. package/dist/src/icon/icon.d.ts +0 -6
  78. package/dist/src/icon/p-icon.d.ts +8 -1
  79. package/dist/src/index.d.ts +3 -2
  80. package/dist/src/link/link.css.d.ts +2 -0
  81. package/dist/src/styleMixins.css.d.ts +9 -0
  82. package/dist/src/text/text.css.d.ts +2 -0
  83. package/dist/src/utils.d.ts +0 -1
  84. package/dist/tsconfig.tsbuildinfo +1 -1
  85. package/dist/web-types.json +78 -0
  86. package/package.json +15 -7
  87. package/readme-gen.mjs +15 -2
  88. package/readme.md +190 -0
  89. package/rollup.config.js +12 -8
  90. package/src/avatar/avatar.css.ts +2 -2
  91. package/src/avatar/avatar.ts +0 -6
  92. package/src/avatar/demo/index.html +2 -2
  93. package/src/avatar/p-avatar.ts +12 -0
  94. package/src/badge/badge.css.ts +33 -0
  95. package/src/badge/badge.ts +29 -0
  96. package/src/badge/demo/index.html +54 -0
  97. package/src/badge/index.ts +1 -0
  98. package/src/badge/p-badge.ts +10 -0
  99. package/src/icon/demo/index.html +4 -4
  100. package/src/icon/icon.ts +1 -7
  101. package/src/icon/p-icon.ts +8 -1
  102. package/src/index.ts +3 -2
  103. package/src/link/link.css.ts +36 -0
  104. package/src/peacock-loader.ts +40 -2
  105. package/src/styleMixins.css.ts +55 -0
  106. package/src/styles.d.ts +11 -0
  107. package/src/text/text.css.ts +76 -0
  108. package/src/utils.ts +0 -8
  109. package/tsconfig.json +1 -1
  110. package/README.md +0 -46
  111. package/dist/component/Icon.js.map +0 -1
  112. package/dist/icon-1wpxQtrZ.js.map +0 -1
  113. package/dist/src/LoaderUtils.js +0 -81
  114. package/dist/src/LoaderUtils.js.map +0 -1
  115. package/dist/src/avatar/avatar.css.js +0 -41
  116. package/dist/src/avatar/avatar.css.js.map +0 -1
  117. package/dist/src/avatar/avatar.js +0 -49
  118. package/dist/src/avatar/avatar.js.map +0 -1
  119. package/dist/src/avatar/index.js +0 -2
  120. package/dist/src/avatar/index.js.map +0 -1
  121. package/dist/src/icon/datasource.js +0 -20
  122. package/dist/src/icon/datasource.js.map +0 -1
  123. package/dist/src/icon/icon.css.js +0 -22
  124. package/dist/src/icon/icon.css.js.map +0 -1
  125. package/dist/src/icon/icon.js +0 -124
  126. package/dist/src/icon/icon.js.map +0 -1
  127. package/dist/src/icon/index.js +0 -2
  128. package/dist/src/icon/index.js.map +0 -1
  129. package/dist/src/icon/p-icon.js +0 -15
  130. package/dist/src/icon/p-icon.js.map +0 -1
  131. package/dist/src/index.js +0 -3
  132. package/dist/src/index.js.map +0 -1
  133. package/dist/src/peacock-loader.js +0 -16
  134. package/dist/src/peacock-loader.js.map +0 -1
  135. package/dist/src/utils.js +0 -101
  136. package/dist/src/utils.js.map +0 -1
  137. package/dist/test/icon.test.js +0 -14
  138. package/dist/test/icon.test.js.map +0 -1
@@ -1,5 +1,5 @@
1
- import { css, unsafeCSS } from 'lit';
2
- import { getTypography } from '../utils.js';
1
+ import { css } from 'lit';
2
+ import { getTypography } from '../styleMixins.css.js';
3
3
  export const styles = css `
4
4
  :host {
5
5
  display: inline-block;
@@ -25,7 +25,7 @@ export const styles = css `
25
25
  color: var(--avatar-text-color);
26
26
  width: var(--avatar-size);
27
27
  height: var(--avatar-size);
28
- ${unsafeCSS(getTypography('body-large-emphasized'))}
28
+ ${getTypography('body-large-emphasized')}
29
29
  background-color: var(--avatar-background-color);
30
30
 
31
31
  font-size: calc(var(--avatar-size) * 0.4);
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.css.js","sourceRoot":"","sources":["../../../src/avatar/avatar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;MAyBnB,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;;;;;;;;;;;;CAYtD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { getTypography } from '../utils.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n pointer-events: none;\n --avatar-size: 2rem;\n --avatar-background-color: var(--color-primary);\n --avatar-text-color: var(--color-on-primary);\n --avatar-border-radius: var(--global-avatar-border-radius);\n }\n\n .avatar-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-050);\n line-height: 0;\n }\n\n .avatar {\n border-radius: var(--avatar-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--avatar-text-color);\n width: var(--avatar-size);\n height: var(--avatar-size);\n ${unsafeCSS(getTypography('body-large-emphasized'))}\n background-color: var(--avatar-background-color);\n\n font-size: calc(var(--avatar-size) * 0.4);\n\n .image {\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"avatar.css.js","sourceRoot":"","sources":["../../../src/avatar/avatar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;MAyBnB,aAAa,CAAC,uBAAuB,CAAC;;;;;;;;;;;;CAY3C,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n pointer-events: none;\n --avatar-size: 2rem;\n --avatar-background-color: var(--color-primary);\n --avatar-text-color: var(--color-on-primary);\n --avatar-border-radius: var(--global-avatar-border-radius);\n }\n\n .avatar-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-050);\n line-height: 0;\n }\n\n .avatar {\n border-radius: var(--avatar-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--avatar-text-color);\n width: var(--avatar-size);\n height: var(--avatar-size);\n ${getTypography('body-large-emphasized')}\n background-color: var(--avatar-background-color);\n\n font-size: calc(var(--avatar-size) * 0.4);\n\n .image {\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n }\n }\n`;\n"]}
@@ -1,10 +1,4 @@
1
1
  import { LitElement } from 'lit';
2
- /**
3
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
4
- *
5
- * @cssprop --icon-color - Controls the color of the icon.
6
- * @cssprop --icon-size - Controls the size of the icon.
7
- */
8
2
  export declare class Avatar extends LitElement {
9
3
  static styles: import("lit").CSSResult[];
10
4
  name: string;
@@ -3,12 +3,6 @@ import { html, LitElement } from 'lit';
3
3
  import { property } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { styles } from './avatar.css.js';
6
- /**
7
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
8
- *
9
- * @cssprop --icon-color - Controls the color of the icon.
10
- * @cssprop --icon-size - Controls the size of the icon.
11
- */
12
6
  export class Avatar extends LitElement {
13
7
  constructor() {
14
8
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;GAKG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAG6C,SAAI,GAAW,EAAE,CAAC;IAwB/D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;YACnB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;UAEA,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,IAAI,KAAK;YAC9D,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,aAAa,EAAE,QAAQ;;WAE1D,CAAC;IACV,CAAC;IAEO,aAAa;QACnB,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrD,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7D,CAAC;;AAzBM,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './avatar.css.js';\n\n/**\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop --icon-size - Controls the size of the icon.\n */\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"]}
1
+ {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAG6C,SAAI,GAAW,EAAE,CAAC;IAwB/D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;YACnB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;UAEA,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,IAAI,KAAK;YAC9D,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,aAAa,EAAE,QAAQ;;WAE1D,CAAC;IACV,CAAC;IAEO,aAAa;QACnB,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrD,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7D,CAAC;;AAzBM,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAc","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './avatar.css.js';\n\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"]}
@@ -0,0 +1,10 @@
1
+ import { Avatar } from './avatar.js';
2
+ /**
3
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
4
+ *
5
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
6
+ * @cssprop --avatar-size - Controls the size of the avatar.
7
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
8
+ */
9
+ export declare class PAvatar extends Avatar {
10
+ }
@@ -0,0 +1,17 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators.js';
3
+ import { Avatar } from './avatar.js';
4
+ /**
5
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
6
+ *
7
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
8
+ * @cssprop --avatar-size - Controls the size of the avatar.
9
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
10
+ */
11
+ let PAvatar = class PAvatar extends Avatar {
12
+ };
13
+ PAvatar = __decorate([
14
+ customElement('p-avatar')
15
+ ], PAvatar);
16
+ export { PAvatar };
17
+ //# sourceMappingURL=p-avatar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"p-avatar.js","sourceRoot":"","sources":["../../../src/avatar/p-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;GAMG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,MAAM;CAAG,CAAA;AAAzB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAAkB","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { Avatar } from './avatar.js';\n\n/**\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n */\n@customElement('p-avatar')\nexport class PAvatar extends Avatar {}\n"]}
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
@@ -0,0 +1,33 @@
1
+ import { css } from 'lit';
2
+ import { getTypography } from '../styleMixins.css.js';
3
+ export const styles = css `
4
+ :host {
5
+ display: inline-block;
6
+ --badge-color: var(--global-badge-color);
7
+ }
8
+
9
+ .badge {
10
+ pointer-events: none;
11
+ z-index: var(--z-index-badge);
12
+ color: var(--color-white);
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ background-color: var(--badge-color);
17
+ border-radius: var(--shape-corner-full);
18
+
19
+ &.has-content {
20
+ height: 1rem;
21
+ min-width: 1rem;
22
+ padding-inline: var(--spacing-050);
23
+ ${getTypography('label-small')};
24
+ color: var(--color-on-error);
25
+ }
26
+
27
+ &:not(.has-content) {
28
+ height: 6px;
29
+ width: 6px;
30
+ }
31
+ }
32
+ `;
33
+ //# sourceMappingURL=badge.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"badge.css.js","sourceRoot":"","sources":["../../../src/badge/badge.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;QAoBjB,aAAa,CAAC,aAAa,CAAC;;;;;;;;;CASnC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n --badge-color: var(--global-badge-color);\n }\n\n .badge {\n pointer-events: none;\n z-index: var(--z-index-badge);\n color: var(--color-white);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--badge-color);\n border-radius: var(--shape-corner-full);\n\n &.has-content {\n height: 1rem;\n min-width: 1rem;\n padding-inline: var(--spacing-050);\n ${getTypography('label-small')};\n color: var(--color-on-error);\n }\n\n &:not(.has-content) {\n height: 6px;\n width: 6px;\n }\n }\n`;\n"]}
@@ -0,0 +1,9 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class Badge extends LitElement {
3
+ #private;
4
+ static styles: import("lit").CSSResult[];
5
+ name: string;
6
+ src?: string;
7
+ slotHasContent: boolean;
8
+ render(): import("lit-html").TemplateResult<1>;
9
+ }
@@ -0,0 +1,37 @@
1
+ var _Badge_instances, _Badge_handleSlotChange;
2
+ import { __classPrivateFieldGet, __decorate } from "tslib";
3
+ import { html, LitElement } from 'lit';
4
+ import { property, state } from 'lit/decorators.js';
5
+ import { classMap } from 'lit/directives/class-map.js';
6
+ import { styles } from './badge.css.js';
7
+ export class Badge extends LitElement {
8
+ constructor() {
9
+ super(...arguments);
10
+ _Badge_instances.add(this);
11
+ this.name = '';
12
+ this.slotHasContent = false;
13
+ }
14
+ render() {
15
+ return html `<div
16
+ class=${classMap({ badge: true, 'has-content': this.slotHasContent })}
17
+ >
18
+ <slot @slotchange=${__classPrivateFieldGet(this, _Badge_instances, "m", _Badge_handleSlotChange)}></slot>
19
+ </div>`;
20
+ }
21
+ }
22
+ _Badge_instances = new WeakSet(), _Badge_handleSlotChange = function _Badge_handleSlotChange(event) {
23
+ const slot = event.target;
24
+ // Check assignedElements length
25
+ this.slotHasContent = slot.assignedElements().length > 0;
26
+ };
27
+ Badge.styles = [styles];
28
+ __decorate([
29
+ property({ type: String, reflect: true })
30
+ ], Badge.prototype, "name", void 0);
31
+ __decorate([
32
+ property({ type: String, reflect: true })
33
+ ], Badge.prototype, "src", void 0);
34
+ __decorate([
35
+ state()
36
+ ], Badge.prototype, "slotHasContent", void 0);
37
+ //# sourceMappingURL=badge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;;QAG6C,SAAI,GAAW,EAAE,CAAC;QAK7D,mBAAc,GAAG,KAAK,CAAC;IAezB,CAAC;IAbC,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;;0BAEjD,uBAAA,IAAI,iDAAkB;WACrC,CAAC;IACV,CAAC;;6FAEiB,KAAsB;IACtC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;AAC3D,CAAC;AArBM,YAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEkB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAmB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAAc;AAGxD;IADC,KAAK,EAAE;6CACe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './badge.css.js';\n\nexport class Badge extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n @state()\n slotHasContent = false;\n\n render() {\n return html`<div\n class=${classMap({ badge: true, 'has-content': this.slotHasContent })}\n >\n <slot @slotchange=${this.#handleSlotChange}></slot>\n </div>`;\n }\n\n #handleSlotChange(event: { target: any }) {\n const slot = event.target;\n // Check assignedElements length\n this.slotHasContent = slot.assignedElements().length > 0;\n }\n}\n"]}
@@ -0,0 +1 @@
1
+ export { Badge } from './badge.js';
@@ -0,0 +1,2 @@
1
+ export { Badge } from './badge.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { Badge } from './badge.js';\n"]}
@@ -0,0 +1,8 @@
1
+ import { Badge } from './badge.js';
2
+ /**
3
+ * @summary The badge component is used to display a small amount of information to the user.
4
+ *
5
+ * @cssprop --badge-color - Controls the color of the badge.
6
+ */
7
+ export declare class PBadge extends Badge {
8
+ }
@@ -0,0 +1,15 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators.js';
3
+ import { Badge } from './badge.js';
4
+ /**
5
+ * @summary The badge component is used to display a small amount of information to the user.
6
+ *
7
+ * @cssprop --badge-color - Controls the color of the badge.
8
+ */
9
+ let PBadge = class PBadge extends Badge {
10
+ };
11
+ PBadge = __decorate([
12
+ customElement('p-badge')
13
+ ], PBadge);
14
+ export { PBadge };
15
+ //# sourceMappingURL=p-badge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"p-badge.js","sourceRoot":"","sources":["../../../src/badge/p-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC;;;;GAIG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,KAAK;CAAG,CAAA;AAAvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAAiB","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { Badge } from './badge.js';\n\n/**\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n */\n@customElement('p-badge')\nexport class PBadge extends Badge {}\n"]}
@@ -1,10 +1,4 @@
1
1
  import { LitElement } from 'lit';
2
- /**
3
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
4
- *
5
- * @cssprop --icon-color - Controls the color of the icon.
6
- * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
7
- */
8
2
  export declare class Icon extends LitElement {
9
3
  static styles: import("lit").CSSResult[];
10
4
  name?: string;
@@ -5,16 +5,9 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
5
5
  import { fetchIcon, fetchSVG } from './datasource.js';
6
6
  import { sanitizeSvg } from '../utils.js';
7
7
  import { styles } from './icon.css.js';
8
- /**
9
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
10
- *
11
- * @cssprop --icon-color - Controls the color of the icon.
12
- * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
13
- */
14
8
  export class Icon extends LitElement {
15
9
  constructor() {
16
10
  super(...arguments);
17
- this.name = 'home';
18
11
  this.provider = 'material-symbols';
19
12
  this.svgContent = '';
20
13
  // loading + error states for consumers/tests
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { fetchIcon, fetchSVG } from './datasource.js';\nimport { sanitizeSvg } from '../utils.js';\nimport { styles } from './icon.css.js';\n\n/**\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n */\nexport class Icon extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name?: string = 'home';\n\n @property({ type: String, reflect: true }) src?: string;\n\n @property({ type: String }) provider?: 'material-symbols' | 'carbon' =\n 'material-symbols';\n\n @state()\n private svgContent: string = '';\n\n // loading + error states for consumers/tests\n @state()\n private loading: boolean = false;\n\n @state()\n private error: Error | null = null;\n\n // token to avoid race conditions when multiple fetches overlap\n private _fetchId = 0;\n\n // optional debounce for rapid property changes\n private _debounceTimer: number | undefined;\n\n firstUpdated() {\n // perform initial fetch once component is connected and rendered\n this.__scheduleUpdate();\n }\n\n updated(changedProperties: any) {\n // only refetch when name or src changed\n if (changedProperties.has('name') || changedProperties.has('src')) {\n this.__scheduleUpdate();\n }\n }\n\n render() {\n // accessible wrapper; consumers can provide a fallback via <slot name=\"fallback\">.\n return html` <div class=\"icon\">\n ${this.svgContent\n ? unsafeSVG(this.svgContent)\n : html`<slot name=\"fallback\"></slot>`}\n </div>`;\n }\n\n // small debounce to coalesce rapid changes (50ms)\n private __scheduleUpdate() {\n if (this._debounceTimer) {\n clearTimeout(this._debounceTimer as any);\n }\n // @ts-ignore - setTimeout in DOM returns number\n this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);\n }\n\n /**\n * @internal\n */\n private async __updateSvg() {\n this._fetchId += 1;\n const currentId = this._fetchId;\n this.loading = true;\n this.error = null;\n\n try {\n let raw: string | undefined;\n\n if (this.name) {\n raw = await fetchIcon(this.name, this.provider);\n } else if (this.src) {\n raw = await fetchSVG(this.src);\n } else {\n raw = '';\n }\n\n // If another fetch started after this one, ignore this result\n if (currentId !== this._fetchId) return;\n\n if (raw) {\n this.svgContent = sanitizeSvg(raw);\n } else {\n this.svgContent = '';\n }\n } catch (err: any) {\n // capture and surface error, but avoid throwing\n this.error = err instanceof Error ? err : new Error(String(err));\n this.svgContent = '';\n // bubble an event so consumers can react\n this.dispatchEvent(\n new CustomEvent('icon-error', {\n detail: { name: this.name, src: this.src, error: this.error },\n bubbles: true,\n composed: true,\n }),\n );\n } finally {\n // ensure loading is cleared unless another fetch started\n if (currentId === this._fetchId) {\n this.loading = false;\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { fetchIcon, fetchSVG } from './datasource.js';\nimport { sanitizeSvg } from '../utils.js';\nimport { styles } from './icon.css.js';\n\nexport class Icon extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name?: string;\n\n @property({ type: String, reflect: true }) src?: string;\n\n @property({ type: String }) provider?: 'material-symbols' | 'carbon' =\n 'material-symbols';\n\n @state()\n private svgContent: string = '';\n\n // loading + error states for consumers/tests\n @state()\n private loading: boolean = false;\n\n @state()\n private error: Error | null = null;\n\n // token to avoid race conditions when multiple fetches overlap\n private _fetchId = 0;\n\n // optional debounce for rapid property changes\n private _debounceTimer: number | undefined;\n\n firstUpdated() {\n // perform initial fetch once component is connected and rendered\n this.__scheduleUpdate();\n }\n\n updated(changedProperties: any) {\n // only refetch when name or src changed\n if (changedProperties.has('name') || changedProperties.has('src')) {\n this.__scheduleUpdate();\n }\n }\n\n render() {\n // accessible wrapper; consumers can provide a fallback via <slot name=\"fallback\">.\n return html` <div class=\"icon\">\n ${this.svgContent\n ? unsafeSVG(this.svgContent)\n : html`<slot name=\"fallback\"></slot>`}\n </div>`;\n }\n\n // small debounce to coalesce rapid changes (50ms)\n private __scheduleUpdate() {\n if (this._debounceTimer) {\n clearTimeout(this._debounceTimer as any);\n }\n // @ts-ignore - setTimeout in DOM returns number\n this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);\n }\n\n /**\n * @internal\n */\n private async __updateSvg() {\n this._fetchId += 1;\n const currentId = this._fetchId;\n this.loading = true;\n this.error = null;\n\n try {\n let raw: string | undefined;\n\n if (this.name) {\n raw = await fetchIcon(this.name, this.provider);\n } else if (this.src) {\n raw = await fetchSVG(this.src);\n } else {\n raw = '';\n }\n\n // If another fetch started after this one, ignore this result\n if (currentId !== this._fetchId) return;\n\n if (raw) {\n this.svgContent = sanitizeSvg(raw);\n } else {\n this.svgContent = '';\n }\n } catch (err: any) {\n // capture and surface error, but avoid throwing\n this.error = err instanceof Error ? err : new Error(String(err));\n this.svgContent = '';\n // bubble an event so consumers can react\n this.dispatchEvent(\n new CustomEvent('icon-error', {\n detail: { name: this.name, src: this.src, error: this.error },\n bubbles: true,\n composed: true,\n }),\n );\n } finally {\n // ensure loading is cleared unless another fetch started\n if (currentId === this._fetchId) {\n this.loading = false;\n }\n }\n }\n}\n"]}
@@ -1,3 +1,10 @@
1
1
  import { Icon } from './icon.js';
2
- export declare class IconComponent extends Icon {
2
+ /**
3
+ * @name Icon
4
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
5
+ *
6
+ * @cssprop --icon-color - Controls the color of the icon.
7
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
8
+ */
9
+ export declare class PIcon extends Icon {
3
10
  }
@@ -1,10 +1,17 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { customElement } from 'lit/decorators.js';
3
3
  import { Icon } from './icon.js';
4
- let IconComponent = class IconComponent extends Icon {
4
+ /**
5
+ * @name Icon
6
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
7
+ *
8
+ * @cssprop --icon-color - Controls the color of the icon.
9
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
10
+ */
11
+ let PIcon = class PIcon extends Icon {
5
12
  };
6
- IconComponent = __decorate([
13
+ PIcon = __decorate([
7
14
  customElement('p-icon')
8
- ], IconComponent);
9
- export { IconComponent };
15
+ ], PIcon);
16
+ export { PIcon };
10
17
  //# sourceMappingURL=p-icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"p-icon.js","sourceRoot":"","sources":["../../../src/icon/p-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAG1B,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,IAAI;CAAG,CAAA;AAA7B,aAAa;IADzB,aAAa,CAAC,QAAQ,CAAC;GACX,aAAa,CAAgB","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { Icon } from './icon.js';\n\n@customElement('p-icon')\nexport class IconComponent extends Icon {}\n"]}
1
+ {"version":3,"file":"p-icon.js","sourceRoot":"","sources":["../../../src/icon/p-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC;;;;;;GAMG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,IAAI;CAAG,CAAA;AAArB,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAAgB","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { Icon } from './icon.js';\n\n/**\n * @name Icon\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n */\n@customElement('p-icon')\nexport class PIcon extends Icon {}\n"]}
@@ -1,2 +1,3 @@
1
- export { Icon } from './icon/icon.js';
2
- export { Avatar } from './avatar/avatar.js';
1
+ export { Icon } from './icon/index.js';
2
+ export { Avatar } from './avatar/index.js';
3
+ export { Badge } from './badge/index.js';
@@ -1,3 +1,4 @@
1
- export { Icon } from './icon/icon.js';
2
- export { Avatar } from './avatar/avatar.js';
1
+ export { Icon } from './icon/index.js';
2
+ export { Avatar } from './avatar/index.js';
3
+ export { Badge } from './badge/index.js';
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { Icon } from './icon/icon.js';\nexport { Avatar } from './avatar/avatar.js';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { Icon } from './icon/index.js';\nexport { Avatar } from './avatar/index.js';\nexport { Badge } from './badge/index.js';\n"]}
@@ -0,0 +1 @@
1
+ export { Link } from './link.js';
@@ -0,0 +1,2 @@
1
+ export { Link } from './link.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { Link } from './link.js';\n"]}
@@ -0,0 +1,2 @@
1
+ import { CSSResult } from 'lit';
2
+ export declare const createLinkStyles: (prefix: string) => CSSResult;
@@ -0,0 +1,36 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ import { focusRing } from '../styleMixins.css.js';
3
+ export const createLinkStyles = (prefix) => css `
4
+ .${unsafeCSS(prefix)}-link {
5
+ border-radius: inherit;
6
+ corner-shape: inherit;
7
+
8
+ color: var(--color-primary);
9
+ --icon-color: var(--color-primary);
10
+ }
11
+
12
+ .${unsafeCSS(prefix)}-link:hover {
13
+ color: var(--color-on-primary-container);
14
+ --icon-color: var(--color-on-primary-container);
15
+ }
16
+
17
+ .${unsafeCSS(prefix)}-link:focus {
18
+ text-decoration: none;
19
+ ${focusRing()}
20
+ }
21
+
22
+ .${unsafeCSS(prefix)}-link.no-style {
23
+ color: var(--color-on-surface);
24
+ --icon-color: var(--color-on-surface);
25
+ text-decoration: none !important;
26
+ }
27
+
28
+ .${unsafeCSS(prefix)}-link.no-decoration {
29
+ text-decoration: none !important;
30
+ }
31
+
32
+ .${unsafeCSS(prefix)}-link.inline {
33
+ text-decoration: var(--link-decoration, underline);
34
+ }
35
+ `;
36
+ //# sourceMappingURL=link.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"link.css.js","sourceRoot":"","sources":["../../../src/link/link.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAc,EAAa,EAAE,CAAC,GAAG,CAAA;KAC7D,SAAS,CAAC,MAAM,CAAC;;;;;;;;KAQjB,SAAS,CAAC,MAAM,CAAC;;;;;KAKjB,SAAS,CAAC,MAAM,CAAC;;MAEhB,SAAS,EAAE;;;KAGZ,SAAS,CAAC,MAAM,CAAC;;;;;;KAMjB,SAAS,CAAC,MAAM,CAAC;;;;KAIjB,SAAS,CAAC,MAAM,CAAC;;;CAGrB,CAAC","sourcesContent":["import { css, unsafeCSS, CSSResult } from 'lit';\nimport { focusRing } from '../styleMixins.css.js';\n\nexport const createLinkStyles = (prefix: string): CSSResult => css`\n .${unsafeCSS(prefix)}-link {\n border-radius: inherit;\n corner-shape: inherit;\n\n color: var(--color-primary);\n --icon-color: var(--color-primary);\n }\n\n .${unsafeCSS(prefix)}-link:hover {\n color: var(--color-on-primary-container);\n --icon-color: var(--color-on-primary-container);\n }\n\n .${unsafeCSS(prefix)}-link:focus {\n text-decoration: none;\n ${focusRing()}\n }\n\n .${unsafeCSS(prefix)}-link.no-style {\n color: var(--color-on-surface);\n --icon-color: var(--color-on-surface);\n text-decoration: none !important;\n }\n\n .${unsafeCSS(prefix)}-link.no-decoration {\n text-decoration: none !important;\n }\n\n .${unsafeCSS(prefix)}-link.inline {\n text-decoration: var(--link-decoration, underline);\n }\n`;\n"]}
@@ -0,0 +1,12 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
4
+ *
5
+ * @cssprop --icon-color - Controls the color of the icon.
6
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
7
+ */
8
+ export declare class Link extends LitElement {
9
+ static styles: import("lit").CSSResult[];
10
+ createRenderRoot(): this;
11
+ render(): import("lit-html").TemplateResult<1>;
12
+ }
@@ -0,0 +1,18 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { styles } from './link.css.js';
3
+ /**
4
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
5
+ *
6
+ * @cssprop --icon-color - Controls the color of the icon.
7
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
8
+ */
9
+ export class Link extends LitElement {
10
+ createRenderRoot() {
11
+ return this; // Renders to the Light DOM
12
+ }
13
+ render() {
14
+ return html `<slot></slot>`;
15
+ }
16
+ }
17
+ Link.styles = [styles];
18
+ //# sourceMappingURL=link.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAGlC,gBAAgB;QACd,OAAO,IAAI,CAAC,CAAC,2BAA2B;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AARM,WAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './link.css.js';\n\n/**\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n */\nexport class Link extends LitElement {\n static styles = [styles];\n\n createRenderRoot() {\n return this; // Renders to the Light DOM\n }\n\n render() {\n return html`<slot></slot>`;\n }\n}\n"]}
@@ -1,14 +1,43 @@
1
1
  // Eager loaded
2
2
  import { Icon } from './icon/icon.js';
3
+ import { Avatar } from './avatar/avatar.js';
3
4
  import { LoaderUtils } from './LoaderUtils.js';
5
+ import cssComponentsStyleSheet from '../assets/tokens.css';
6
+ import { createLinkStyles } from './link/link.css.js';
7
+ import { createTextStyles } from './text/text.css.js';
8
+ const libraryPrefix = 'p';
9
+ function buildSheet(styleSheet) {
10
+ const sheet = new CSSStyleSheet();
11
+ // Add rules
12
+ sheet.replaceSync(styleSheet.toString());
13
+ return sheet;
14
+ }
15
+ const styleSheets = [buildSheet(cssComponentsStyleSheet)];
16
+ const linkStylesheet = createLinkStyles(libraryPrefix).styleSheet;
17
+ if (linkStylesheet)
18
+ styleSheets.push(linkStylesheet);
19
+ const textStylesheet = createTextStyles(libraryPrefix).styleSheet;
20
+ if (textStylesheet)
21
+ styleSheets.push(textStylesheet);
22
+ function stringifyStyleSheet(stylesheet) {
23
+ // Use Array.from() to convert the CSSRuleList to an array
24
+ return (Array.from(stylesheet.cssRules)
25
+ // Map each rule to its cssText property
26
+ .map((rule) => rule.cssText || '')
27
+ // Join all the rules with a newline character
28
+ .join('\\n'));
29
+ }
30
+ console.log(stringifyStyleSheet(textStylesheet));
31
+ document.adoptedStyleSheets = styleSheets;
4
32
  const loaderConfig = {
5
- prefix: 'p',
33
+ prefix: libraryPrefix,
6
34
  components: {
7
35
  icon: {
8
36
  CustomElementClass: Icon,
37
+ // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
9
38
  },
10
39
  avatar: {
11
- importPath: './component/avatar.js',
40
+ CustomElementClass: Avatar,
12
41
  },
13
42
  },
14
43
  };
@@ -1 +1 @@
1
- {"version":3,"file":"peacock-loader.js","sourceRoot":"","sources":["../../src/peacock-loader.ts"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAgB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE7D,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,GAAG;IACX,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,kBAAkB,EAAE,IAAI;SACzB;QACD,MAAM,EAAE;YACN,UAAU,EAAE,uBAAuB;SACpC;KACF;CACF,CAAC;AAEF,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC","sourcesContent":["// Eager loaded\nimport { Icon } from './icon/icon.js';\nimport { LoaderConfig, LoaderUtils } from './LoaderUtils.js';\n\nconst loaderConfig: LoaderConfig = {\n prefix: 'p',\n components: {\n icon: {\n CustomElementClass: Icon,\n },\n avatar: {\n importPath: './component/avatar.js',\n },\n },\n};\n\nnew LoaderUtils(loaderConfig).start();\n"]}
1
+ {"version":3,"file":"peacock-loader.js","sourceRoot":"","sources":["../../src/peacock-loader.ts"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAgB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,uBAAuB,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,SAAS,UAAU,CAAC,UAAe;IACjC,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;IAClC,YAAY;IACZ,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;IACzC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAE1D,MAAM,cAAc,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AAClE,IAAI,cAAc;IAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAErD,MAAM,cAAc,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AAClE,IAAI,cAAc;IAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAErD,SAAS,mBAAmB,CAAC,UAAe;IAC1C,0DAA0D;IAC1D,OAAO,CACL,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAC7B,wCAAwC;SACvC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACvC,8CAA8C;SAC7C,IAAI,CAAC,KAAK,CAAC,CACf,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC;AAEjD,QAAQ,CAAC,kBAAkB,GAAG,WAAW,CAAC;AAE1C,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,kBAAkB,EAAE,IAAI;YACxB,6FAA6F;SAC9F;QACD,MAAM,EAAE;YACN,kBAAkB,EAAE,MAAM;SAC3B;KACF;CACF,CAAC;AAEF,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC","sourcesContent":["// Eager loaded\nimport { Icon } from './icon/icon.js';\nimport { Avatar } from './avatar/avatar.js';\n\nimport { LoaderConfig, LoaderUtils } from './LoaderUtils.js';\nimport cssComponentsStyleSheet from '../assets/tokens.css';\nimport { createLinkStyles } from './link/link.css.js';\nimport { createTextStyles } from './text/text.css.js';\n\nconst libraryPrefix = 'p';\n\nfunction buildSheet(styleSheet: any) {\n const sheet = new CSSStyleSheet();\n // Add rules\n sheet.replaceSync(styleSheet.toString());\n return sheet;\n}\n\nconst styleSheets = [buildSheet(cssComponentsStyleSheet)];\n\nconst linkStylesheet = createLinkStyles(libraryPrefix).styleSheet;\nif (linkStylesheet) styleSheets.push(linkStylesheet);\n\nconst textStylesheet = createTextStyles(libraryPrefix).styleSheet;\nif (textStylesheet) styleSheets.push(textStylesheet);\n\nfunction stringifyStyleSheet(stylesheet: any) {\n // Use Array.from() to convert the CSSRuleList to an array\n return (\n Array.from(stylesheet.cssRules)\n // Map each rule to its cssText property\n .map((rule: any) => rule.cssText || '')\n // Join all the rules with a newline character\n .join('\\\\n')\n );\n}\n\nconsole.log(stringifyStyleSheet(textStylesheet));\n\ndocument.adoptedStyleSheets = styleSheets;\n\nconst loaderConfig: LoaderConfig = {\n prefix: libraryPrefix,\n components: {\n icon: {\n CustomElementClass: Icon,\n // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass\n },\n avatar: {\n CustomElementClass: Avatar,\n },\n },\n};\n\nnew LoaderUtils(loaderConfig).start();\n"]}
@@ -0,0 +1,9 @@
1
+ import { CSSResult } from 'lit';
2
+ export declare const focusRing: (color?: string) => CSSResult;
3
+ export declare const getTypography: (name: string) => CSSResult;
4
+ export declare const getTypographyNotImportant: (name: string) => CSSResult;
5
+ export declare const forPhoneOnly: (content: CSSResult) => CSSResult;
6
+ export declare const forTabletPortraitUp: (content: CSSResult) => CSSResult;
7
+ export declare const forTabletLandscapeUp: (content: CSSResult) => CSSResult;
8
+ export declare const forDesktopUp: (content: CSSResult) => CSSResult;
9
+ export declare const forBigDesktopUp: (content: CSSResult) => CSSResult;
@@ -0,0 +1,46 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ export const focusRing = (color = 'var(--border-interactive)') => css `
3
+ outline: 2px solid ${unsafeCSS(color)};
4
+ `;
5
+ export const getTypography = (name) => css `
6
+ font-family: var(--typography-${unsafeCSS(name)}-font-family) !important;
7
+ font-size: var(--typography-${unsafeCSS(name)}-font-size) !important;
8
+ font-weight: var(--typography-${unsafeCSS(name)}-font-weight) !important;
9
+ line-height: var(--typography-${unsafeCSS(name)}-line-height) !important;
10
+ letter-spacing: var(
11
+ --typography-${unsafeCSS(name)}-letter-spacing
12
+ ) !important;
13
+ `;
14
+ export const getTypographyNotImportant = (name) => css `
15
+ font-family: var(--typography-${unsafeCSS(name)}-font-family);
16
+ font-size: var(--typography-${unsafeCSS(name)}-font-size);
17
+ font-weight: var(--typography-${unsafeCSS(name)}-font-weight);
18
+ line-height: var(--typography-${unsafeCSS(name)}-line-height);
19
+ letter-spacing: var(--typography-${unsafeCSS(name)}-letter-spacing);
20
+ `;
21
+ export const forPhoneOnly = (content) => css `
22
+ @media (max-width: 671px) {
23
+ ${content}
24
+ }
25
+ `;
26
+ export const forTabletPortraitUp = (content) => css `
27
+ @media (min-width: 672px) {
28
+ ${content}
29
+ }
30
+ `;
31
+ export const forTabletLandscapeUp = (content) => css `
32
+ @media (min-width: 1056px) {
33
+ ${content}
34
+ }
35
+ `;
36
+ export const forDesktopUp = (content) => css `
37
+ @media (min-width: 1312px) {
38
+ ${content}
39
+ }
40
+ `;
41
+ export const forBigDesktopUp = (content) => css `
42
+ @media (min-width: 1584px) {
43
+ ${content}
44
+ }
45
+ `;
46
+ //# sourceMappingURL=styleMixins.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styleMixins.css.js","sourceRoot":"","sources":["../../src/styleMixins.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAEhD,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAAK,GAAG,2BAA2B,EACxB,EAAE,CAAC,GAAG,CAAA;uBACI,SAAS,CAAC,KAAK,CAAC;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAY,EAAa,EAAE,CAAC,GAAG,CAAA;kCAC3B,SAAS,CAAC,IAAI,CAAC;gCACjB,SAAS,CAAC,IAAI,CAAC;kCACb,SAAS,CAAC,IAAI,CAAC;kCACf,SAAS,CAAC,IAAI,CAAC;;mBAE9B,SAAS,CAAC,IAAI,CAAC;;CAEjC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAa,EAAE,CAAC,GAAG,CAAA;kCACvC,SAAS,CAAC,IAAI,CAAC;gCACjB,SAAS,CAAC,IAAI,CAAC;kCACb,SAAS,CAAC,IAAI,CAAC;kCACf,SAAS,CAAC,IAAI,CAAC;qCACZ,SAAS,CAAC,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAkB,EAAa,EAAE,CAAC,GAAG,CAAA;;MAE5D,OAAO;;CAEZ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAkB,EAAa,EAAE,CAAC,GAAG,CAAA;;MAEnE,OAAO;;CAEZ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAkB,EAAa,EAAE,CAAC,GAAG,CAAA;;MAEpE,OAAO;;CAEZ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAkB,EAAa,EAAE,CAAC,GAAG,CAAA;;MAE5D,OAAO;;CAEZ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAkB,EAAa,EAAE,CAAC,GAAG,CAAA;;MAE/D,OAAO;;CAEZ,CAAC","sourcesContent":["import { css, unsafeCSS, CSSResult } from 'lit';\n\nexport const focusRing = (\n color = 'var(--border-interactive)',\n): CSSResult => css`\n outline: 2px solid ${unsafeCSS(color)};\n`;\n\nexport const getTypography = (name: string): CSSResult => css`\n font-family: var(--typography-${unsafeCSS(name)}-font-family) !important;\n font-size: var(--typography-${unsafeCSS(name)}-font-size) !important;\n font-weight: var(--typography-${unsafeCSS(name)}-font-weight) !important;\n line-height: var(--typography-${unsafeCSS(name)}-line-height) !important;\n letter-spacing: var(\n --typography-${unsafeCSS(name)}-letter-spacing\n ) !important;\n`;\n\nexport const getTypographyNotImportant = (name: string): CSSResult => css`\n font-family: var(--typography-${unsafeCSS(name)}-font-family);\n font-size: var(--typography-${unsafeCSS(name)}-font-size);\n font-weight: var(--typography-${unsafeCSS(name)}-font-weight);\n line-height: var(--typography-${unsafeCSS(name)}-line-height);\n letter-spacing: var(--typography-${unsafeCSS(name)}-letter-spacing);\n`;\n\nexport const forPhoneOnly = (content: CSSResult): CSSResult => css`\n @media (max-width: 671px) {\n ${content}\n }\n`;\n\nexport const forTabletPortraitUp = (content: CSSResult): CSSResult => css`\n @media (min-width: 672px) {\n ${content}\n }\n`;\n\nexport const forTabletLandscapeUp = (content: CSSResult): CSSResult => css`\n @media (min-width: 1056px) {\n ${content}\n }\n`;\n\nexport const forDesktopUp = (content: CSSResult): CSSResult => css`\n @media (min-width: 1312px) {\n ${content}\n }\n`;\n\nexport const forBigDesktopUp = (content: CSSResult): CSSResult => css`\n @media (min-width: 1584px) {\n ${content}\n }\n`;\n"]}
@@ -0,0 +1,2 @@
1
+ import { CSSResult } from 'lit';
2
+ export declare const createTextStyles: (prefix: string) => CSSResult;