@redvars/peacock 3.1.1 → 3.1.2

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 (132) hide show
  1. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js.map +1 -1
  2. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.d.ts +19 -0
  3. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js +19 -0
  4. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js.map +1 -1
  5. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.d.ts +0 -7
  6. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js +0 -7
  7. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js.map +1 -1
  8. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js +5 -4
  9. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js.map +1 -1
  10. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.d.ts +15 -1
  11. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js +27 -10
  12. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js.map +1 -1
  13. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.d.ts +0 -5
  14. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js +0 -5
  15. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js.map +1 -1
  16. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.d.ts +1 -0
  17. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.js +12 -0
  18. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.js.map +1 -0
  19. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.d.ts +27 -0
  20. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js +58 -0
  21. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js.map +1 -0
  22. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.d.ts +1 -0
  23. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.js +2 -0
  24. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.js.map +1 -0
  25. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.d.ts +1 -0
  26. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.js +58 -0
  27. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.js.map +1 -0
  28. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.d.ts +28 -0
  29. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js +68 -0
  30. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js.map +1 -0
  31. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.d.ts +1 -0
  32. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.js +2 -0
  33. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.js.map +1 -0
  34. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.d.ts +21 -1
  35. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js +16 -0
  36. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js.map +1 -1
  37. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.d.ts +0 -7
  38. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js +0 -7
  39. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js.map +1 -1
  40. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.d.ts +2 -0
  41. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js +2 -0
  42. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js.map +1 -1
  43. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js +12 -2
  44. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js.map +1 -1
  45. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.d.ts +1 -0
  46. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js +32 -0
  47. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js.map +1 -1
  48. package/.rollup.cache/E/git/redvars/peacock/components/dist/tsconfig.tsbuildinfo +1 -1
  49. package/bin/typedoc-gen.mjs +64 -0
  50. package/custom-elements-manifest.config.mjs +5 -6
  51. package/demo/index.html +4 -5
  52. package/demo/int.html +2 -0
  53. package/dist/{component/avatar.js → avatar.js} +25 -19
  54. package/dist/avatar.js.map +1 -0
  55. package/dist/badge.js +89 -0
  56. package/dist/badge.js.map +1 -0
  57. package/dist/class-map-DpvLRi0h.js +11 -0
  58. package/dist/class-map-DpvLRi0h.js.map +1 -0
  59. package/dist/clock.js +70 -0
  60. package/dist/clock.js.map +1 -0
  61. package/dist/custom-elements-jsdocs.json +656 -0
  62. package/dist/directive-BKuZRRPO.js +9 -0
  63. package/dist/directive-BKuZRRPO.js.map +1 -0
  64. package/dist/divider.js +123 -0
  65. package/dist/divider.js.map +1 -0
  66. package/dist/{component/icon.js → icon.js} +20 -101
  67. package/dist/icon.js.map +1 -0
  68. package/dist/index.js +11 -67
  69. package/dist/index.js.map +1 -1
  70. package/dist/peacock-loader.js +21 -12
  71. package/dist/peacock-loader.js.map +1 -1
  72. package/dist/{directive-CKEA2P55.js → property-D4Kn9TsY.js} +6 -13
  73. package/dist/property-D4Kn9TsY.js.map +1 -0
  74. package/dist/src/avatar/avatar.d.ts +19 -0
  75. package/dist/src/avatar/p-avatar.d.ts +0 -7
  76. package/dist/src/badge/badge.d.ts +15 -1
  77. package/dist/src/badge/p-badge.d.ts +0 -5
  78. package/dist/src/clock/clock.css.d.ts +1 -0
  79. package/dist/src/clock/clock.d.ts +27 -0
  80. package/dist/src/clock/index.d.ts +1 -0
  81. package/dist/src/divider/divider.css.d.ts +1 -0
  82. package/dist/src/divider/divider.d.ts +28 -0
  83. package/dist/src/divider/index.d.ts +1 -0
  84. package/dist/src/icon/icon.d.ts +21 -1
  85. package/dist/src/icon/p-icon.d.ts +0 -7
  86. package/dist/src/index.d.ts +2 -0
  87. package/dist/src/utils.d.ts +1 -0
  88. package/dist/state-CxzmLNIi.js +10 -0
  89. package/dist/state-CxzmLNIi.js.map +1 -0
  90. package/dist/styleMixins.css-CivfMYtB.js +17 -0
  91. package/dist/styleMixins.css-CivfMYtB.js.map +1 -0
  92. package/dist/tsconfig.tsbuildinfo +1 -1
  93. package/dist/utils-_5no4mk7.js +128 -0
  94. package/dist/utils-_5no4mk7.js.map +1 -0
  95. package/package.json +8 -8
  96. package/readme.md +5 -17
  97. package/rollup.config.js +71 -37
  98. package/scratch.mjs +0 -0
  99. package/src/avatar/avatar.css.ts +1 -1
  100. package/src/avatar/avatar.ts +19 -0
  101. package/src/avatar/p-avatar.ts +0 -7
  102. package/src/badge/badge.css.ts +5 -4
  103. package/src/badge/badge.ts +30 -8
  104. package/src/badge/demo/index.html +9 -1
  105. package/src/badge/p-badge.ts +0 -5
  106. package/src/clock/clock.css.ts +12 -0
  107. package/src/clock/clock.ts +57 -0
  108. package/src/clock/demo/index.html +26 -0
  109. package/src/clock/index.ts +1 -0
  110. package/src/divider/demo/index.html +58 -0
  111. package/src/divider/divider.css.ts +58 -0
  112. package/src/divider/divider.ts +65 -0
  113. package/src/divider/index.ts +1 -0
  114. package/src/icon/icon.ts +21 -1
  115. package/src/icon/p-icon.ts +0 -7
  116. package/src/index.ts +2 -0
  117. package/src/peacock-loader.ts +12 -3
  118. package/src/utils.ts +43 -0
  119. package/assets/tokens.css +0 -522
  120. package/copyDesignFiles.js +0 -11
  121. package/custom-elements.md +0 -192
  122. package/dist/avatar-GQwWRGRw.js +0 -418
  123. package/dist/avatar-GQwWRGRw.js.map +0 -1
  124. package/dist/avatar-jfcIDB8G.js +0 -424
  125. package/dist/avatar-jfcIDB8G.js.map +0 -1
  126. package/dist/component/avatar.js.map +0 -1
  127. package/dist/component/icon.js.map +0 -1
  128. package/dist/directive-CKEA2P55.js.map +0 -1
  129. package/dist/utils-CSwoJIcG.js +0 -171
  130. package/dist/utils-CSwoJIcG.js.map +0 -1
  131. package/dist/web-types.json +0 -78
  132. package/readme-gen.mjs +0 -24
@@ -1 +1 @@
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
+ {"version":3,"file":"avatar.css.js","sourceRoot":"","sources":["../../../src/avatar/avatar.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;;;;;;;;;;;;;;;;;;;;;;;;;MAyBnB,aAAa,CAAC,uBAAuB,CAAC;;;;;;;;;;;;CAY3C,CAAC","sourcesContent":["import { css } 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,4 +1,23 @@
1
1
  import { LitElement } from 'lit';
2
+ /**
3
+ * @label Avatar
4
+ * @tag p-avatar
5
+ * @rawTag avatar
6
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
7
+ *
8
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
9
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
10
+ * @cssprop --avatar-size - Controls the size of the avatar.
11
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
12
+ *
13
+ *
14
+ * @example
15
+ * ```html
16
+ * <p-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.webp"></p-avatar>
17
+ * ```
18
+ *
19
+ * @tags display
20
+ */
2
21
  export declare class Avatar extends LitElement {
3
22
  static styles: import("lit").CSSResult[];
4
23
  name: string;
@@ -3,6 +3,25 @@ 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
+ * @label Avatar
8
+ * @tag p-avatar
9
+ * @rawTag avatar
10
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
11
+ *
12
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
13
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
14
+ * @cssprop --avatar-size - Controls the size of the avatar.
15
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
16
+ *
17
+ *
18
+ * @example
19
+ * ```html
20
+ * <p-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.webp"></p-avatar>
21
+ * ```
22
+ *
23
+ * @tags display
24
+ */
6
25
  export class Avatar extends LitElement {
7
26
  constructor() {
8
27
  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,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"]}
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;;;;;;;;;;;;;;;;;;GAkBG;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 * @label Avatar\n * @tag p-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\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 *\n * @example\n * ```html\n * <p-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.webp\"></p-avatar>\n * ```\n *\n * @tags display\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,10 +1,3 @@
1
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
2
  export declare class PAvatar extends Avatar {
10
3
  }
@@ -1,13 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { customElement } from 'lit/decorators.js';
3
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
4
  let PAvatar = class PAvatar extends Avatar {
12
5
  };
13
6
  PAvatar = __decorate([
@@ -1 +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"]}
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;AAG9B,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@customElement('p-avatar')\nexport class PAvatar extends Avatar {}\n"]}
@@ -15,8 +15,9 @@ export const styles = css `
15
15
  align-items: center;
16
16
  background-color: var(--badge-color);
17
17
  border-radius: var(--shape-corner-full);
18
+ box-sizing: border-box;
18
19
 
19
- &.has-content {
20
+ &.slot-has-content {
20
21
  height: 1rem;
21
22
  min-width: 1rem;
22
23
  padding-inline: var(--spacing-050);
@@ -24,9 +25,9 @@ export const styles = css `
24
25
  color: var(--color-on-error);
25
26
  }
26
27
 
27
- &:not(.has-content) {
28
- height: 6px;
29
- width: 6px;
28
+ &:not(.slot-has-content) {
29
+ height: 0.375rem;
30
+ width: 0.375rem;
30
31
  }
31
32
  }
32
33
  `;
@@ -1 +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"]}
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;;;;;;;;;;;;;;;;;;;;;QAqBjB,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 box-sizing: border-box;\n\n &.slot-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(.slot-has-content) {\n height: 0.375rem;\n width: 0.375rem;\n }\n }\n`;\n"]}
@@ -1,9 +1,23 @@
1
1
  import { LitElement } from 'lit';
2
+ /**
3
+ * @label Badge
4
+ * @tag p-badge
5
+ * @rawTag badge
6
+ * @summary The badge component is used to display a small amount of information to the user.
7
+ *
8
+ * @cssprop --badge-color - Controls the color of the badge.
9
+ *
10
+ * @example
11
+ * ```html
12
+ * <p-badge>1</p-badge>
13
+ * ```
14
+ * @tags display
15
+ */
2
16
  export declare class Badge extends LitElement {
3
- #private;
4
17
  static styles: import("lit").CSSResult[];
5
18
  name: string;
6
19
  src?: string;
7
20
  slotHasContent: boolean;
21
+ firstUpdated(): void;
8
22
  render(): import("lit-html").TemplateResult<1>;
9
23
  }
@@ -1,29 +1,46 @@
1
- var _Badge_instances, _Badge_handleSlotChange;
2
- import { __classPrivateFieldGet, __decorate } from "tslib";
1
+ import { __decorate } from "tslib";
3
2
  import { html, LitElement } from 'lit';
4
3
  import { property, state } from 'lit/decorators.js';
5
4
  import { classMap } from 'lit/directives/class-map.js';
6
5
  import { styles } from './badge.css.js';
6
+ import { observerSlotChangesWithCallback } from '../utils.js';
7
+ /**
8
+ * @label Badge
9
+ * @tag p-badge
10
+ * @rawTag badge
11
+ * @summary The badge component is used to display a small amount of information to the user.
12
+ *
13
+ * @cssprop --badge-color - Controls the color of the badge.
14
+ *
15
+ * @example
16
+ * ```html
17
+ * <p-badge>1</p-badge>
18
+ * ```
19
+ * @tags display
20
+ */
7
21
  export class Badge extends LitElement {
8
22
  constructor() {
9
23
  super(...arguments);
10
- _Badge_instances.add(this);
11
24
  this.name = '';
12
25
  this.slotHasContent = false;
13
26
  }
27
+ firstUpdated() {
28
+ observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
29
+ this.slotHasContent = hasContent;
30
+ this.requestUpdate();
31
+ });
32
+ }
14
33
  render() {
15
34
  return html `<div
16
- class=${classMap({ badge: true, 'has-content': this.slotHasContent })}
35
+ class=${classMap({
36
+ badge: true,
37
+ 'slot-has-content': this.slotHasContent,
38
+ })}
17
39
  >
18
- <slot @slotchange=${__classPrivateFieldGet(this, _Badge_instances, "m", _Badge_handleSlotChange)}></slot>
40
+ <slot></slot>
19
41
  </div>`;
20
42
  }
21
43
  }
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
44
  Badge.styles = [styles];
28
45
  __decorate([
29
46
  property({ type: String, reflect: true })
@@ -1 +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"]}
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;AACxC,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAG6C,SAAI,GAAW,EAAE,CAAC;QAK7D,mBAAc,GAAG,KAAK,CAAC;IAsBzB,CAAC;IApBC,YAAY;QACV,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,CAAC,EAAE;YACX,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;YACjC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;WAGG,CAAC;IACV,CAAC;;AA5BM,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';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Badge\n * @tag p-badge\n * @rawTag badge\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 * @example\n * ```html\n * <p-badge>1</p-badge>\n * ```\n * @tags display\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 firstUpdated() {\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n }\n\n render() {\n return html`<div\n class=${classMap({\n badge: true,\n 'slot-has-content': this.slotHasContent,\n })}\n >\n <slot></slot>\n </div>`;\n }\n}\n"]}
@@ -1,8 +1,3 @@
1
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
2
  export declare class PBadge extends Badge {
8
3
  }
@@ -1,11 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { customElement } from 'lit/decorators.js';
3
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
4
  let PBadge = class PBadge extends Badge {
10
5
  };
11
6
  PBadge = __decorate([
@@ -1 +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
+ {"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;AAG5B,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@customElement('p-badge')\nexport class PBadge extends Badge {}\n"]}
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
@@ -0,0 +1,12 @@
1
+ import { css } from 'lit';
2
+ import { getTypography } from '../styleMixins.css.js';
3
+ export const styles = css `
4
+ :host {
5
+ display: inline-block;
6
+ }
7
+
8
+ .current-time {
9
+ ${getTypography('body-medium')}
10
+ }
11
+ `;
12
+ //# sourceMappingURL=clock.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"clock.css.js","sourceRoot":"","sources":["../../../src/clock/clock.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;;;;;;MAMnB,aAAa,CAAC,aAAa,CAAC;;CAEjC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n .current-time {\n ${getTypography('body-medium')}\n }\n`;\n"]}
@@ -0,0 +1,27 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * @label Clock
4
+ * @tag p-clock
5
+ * @rawTag clock
6
+ *
7
+ * @summary Displays the current time in a given timezone.
8
+ * @overview
9
+ * - Clocks are used to display the current time in a specified timezone.
10
+ * - They can be displayed in various formats, including 12-hour and 24-hour time.
11
+ *
12
+ * @example
13
+ * ```html
14
+ * <p-clock></p-clock>
15
+ * ```
16
+ * @tags display
17
+ */
18
+ export declare class Clock extends LitElement {
19
+ static styles: import("lit").CSSResult[];
20
+ timezone?: string;
21
+ currentTime: string;
22
+ private _timerId;
23
+ connectedCallback(): void;
24
+ disconnectedCallback(): void;
25
+ __updateCurrentTime(): void;
26
+ render(): import("lit-html").TemplateResult<1>;
27
+ }
@@ -0,0 +1,58 @@
1
+ import { __decorate } from "tslib";
2
+ import { html, LitElement } from 'lit';
3
+ import { property, state } from 'lit/decorators.js';
4
+ import { styles } from './clock.css.js';
5
+ /**
6
+ * @label Clock
7
+ * @tag p-clock
8
+ * @rawTag clock
9
+ *
10
+ * @summary Displays the current time in a given timezone.
11
+ * @overview
12
+ * - Clocks are used to display the current time in a specified timezone.
13
+ * - They can be displayed in various formats, including 12-hour and 24-hour time.
14
+ *
15
+ * @example
16
+ * ```html
17
+ * <p-clock></p-clock>
18
+ * ```
19
+ * @tags display
20
+ */
21
+ export class Clock extends LitElement {
22
+ constructor() {
23
+ super(...arguments);
24
+ // `currentTime` is decorated with `@State()`,
25
+ // as we need to trigger a rerender when its
26
+ // value changes to show the latest time
27
+ this.currentTime = '';
28
+ }
29
+ connectedCallback() {
30
+ super.connectedCallback();
31
+ this.__updateCurrentTime();
32
+ this._timerId = setInterval(() => {
33
+ this.__updateCurrentTime();
34
+ }, 1000);
35
+ }
36
+ disconnectedCallback() {
37
+ if (this._timerId) {
38
+ clearInterval(this._timerId);
39
+ }
40
+ super.disconnectedCallback();
41
+ }
42
+ __updateCurrentTime() {
43
+ this.currentTime = new Date().toLocaleTimeString('en-US', {
44
+ timeZone: this.timezone,
45
+ });
46
+ }
47
+ render() {
48
+ return html `<div class="current-time">${this.currentTime}</div>`;
49
+ }
50
+ }
51
+ Clock.styles = [styles];
52
+ __decorate([
53
+ property()
54
+ ], Clock.prototype, "timezone", void 0);
55
+ __decorate([
56
+ state()
57
+ ], Clock.prototype, "currentTime", void 0);
58
+ //# sourceMappingURL=clock.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"clock.js","sourceRoot":"","sources":["../../../src/clock/clock.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,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAKE,8CAA8C;QAC9C,4CAA4C;QAC5C,wCAAwC;QAC/B,gBAAW,GAAW,EAAE,CAAC;IA4BpC,CAAC;IAxBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC;QACD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,QAAQ,CAAC;IACnE,CAAC;;AAlCM,YAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEb;IAAX,QAAQ,EAAE;uCAAmB;AAKrB;IAAR,KAAK,EAAE;0CAA0B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { styles } from './clock.css.js';\n\n/**\n * @label Clock\n * @tag p-clock\n * @rawTag clock\n *\n * @summary Displays the current time in a given timezone.\n * @overview\n * - Clocks are used to display the current time in a specified timezone.\n * - They can be displayed in various formats, including 12-hour and 24-hour time.\n *\n * @example\n * ```html\n * <p-clock></p-clock>\n * ```\n * @tags display\n */\nexport class Clock extends LitElement {\n static styles = [styles];\n\n @property() timezone?: string;\n\n // `currentTime` is decorated with `@State()`,\n // as we need to trigger a rerender when its\n // value changes to show the latest time\n @state() currentTime: string = '';\n\n private _timerId: any;\n\n connectedCallback() {\n super.connectedCallback();\n this.__updateCurrentTime();\n this._timerId = setInterval(() => {\n this.__updateCurrentTime();\n }, 1000);\n }\n\n disconnectedCallback() {\n if (this._timerId) {\n clearInterval(this._timerId);\n }\n super.disconnectedCallback();\n }\n\n __updateCurrentTime() {\n this.currentTime = new Date().toLocaleTimeString('en-US', {\n timeZone: this.timezone,\n });\n }\n\n render() {\n return html`<div class=\"current-time\">${this.currentTime}</div>`;\n }\n}\n"]}
@@ -0,0 +1 @@
1
+ export { Clock } from './clock.js';
@@ -0,0 +1,2 @@
1
+ export { Clock } from './clock.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/clock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { Clock } from './clock.js';\n"]}
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
@@ -0,0 +1,58 @@
1
+ import { css } from 'lit';
2
+ export const styles = css `
3
+ :host {
4
+ display: block;
5
+
6
+ --divider-color: var(--color-outline-variant);
7
+ --divider-padding: var(--spacing-200);
8
+ }
9
+
10
+ .divider {
11
+ display: flex;
12
+ margin: 0;
13
+ @include get-typography(body-small-emphasized);
14
+ color: var(--divider-color);
15
+
16
+ &:not(.vertical) {
17
+ width: 100%;
18
+ padding: var(--divider-padding) 0;
19
+ align-items: center;
20
+ justify-content: center;
21
+
22
+ .line {
23
+ width: 100%;
24
+ border-top: 1px solid var(--divider-color);
25
+ }
26
+
27
+ &.slot-has-content .slot-container {
28
+ padding: 0 var(--spacing-200);
29
+ }
30
+ }
31
+
32
+ &.vertical {
33
+ height: 100%;
34
+ padding: 0 var(--divider-padding);
35
+ flex-direction: column;
36
+ align-items: center;
37
+ justify-content: center;
38
+
39
+ .line {
40
+ height: 100%;
41
+ border-right: 1px solid var(--divider-color);
42
+ }
43
+
44
+ &.slot-has-content .slot-container {
45
+ padding: var(--spacing-200) 0;
46
+ }
47
+ }
48
+ }
49
+
50
+ :host(:not([vertical])) {
51
+ width: auto;
52
+ }
53
+
54
+ :host([vertical]) {
55
+ height: auto;
56
+ }
57
+ `;
58
+ //# sourceMappingURL=divider.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"divider.css.js","sourceRoot":"","sources":["../../../src/divider/divider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n\n --divider-color: var(--color-outline-variant);\n --divider-padding: var(--spacing-200);\n }\n\n .divider {\n display: flex;\n margin: 0;\n @include get-typography(body-small-emphasized);\n color: var(--divider-color);\n\n &:not(.vertical) {\n width: 100%;\n padding: var(--divider-padding) 0;\n align-items: center;\n justify-content: center;\n\n .line {\n width: 100%;\n border-top: 1px solid var(--divider-color);\n }\n\n &.slot-has-content .slot-container {\n padding: 0 var(--spacing-200);\n }\n }\n\n &.vertical {\n height: 100%;\n padding: 0 var(--divider-padding);\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n .line {\n height: 100%;\n border-right: 1px solid var(--divider-color);\n }\n\n &.slot-has-content .slot-container {\n padding: var(--spacing-200) 0;\n }\n }\n }\n\n :host(:not([vertical])) {\n width: auto;\n }\n\n :host([vertical]) {\n height: auto;\n }\n`;\n"]}
@@ -0,0 +1,28 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * @label Divider
4
+ * @tag p-divider
5
+ * @rawTag divider
6
+ *
7
+ * @summary The divider component is used to visually separate content.
8
+ * @overview
9
+ * - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.
10
+ * - They can be oriented either vertically or horizontally, depending on the layout requirements.
11
+ *
12
+ * @cssprop --divider-color - Controls the color of the divider.
13
+ * @cssprop --divider-padding - Controls the padding of the divider.
14
+ *
15
+ * @example
16
+ * ```html
17
+ * <p-divider style="width: 12rem;">or</p-divider>
18
+ * ```
19
+ * @tags display
20
+ */
21
+ export declare class Divider extends LitElement {
22
+ #private;
23
+ static styles: import("lit").CSSResult[];
24
+ vertical: boolean;
25
+ slotHasContent: boolean;
26
+ firstUpdated(): void;
27
+ render(): import("lit-html").TemplateResult<1>;
28
+ }
@@ -0,0 +1,68 @@
1
+ var _Divider_instances, _Divider_handleSlotChange;
2
+ import { __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 './divider.css.js';
7
+ import { observerSlotChangesWithCallback } from '../utils.js';
8
+ /**
9
+ * @label Divider
10
+ * @tag p-divider
11
+ * @rawTag divider
12
+ *
13
+ * @summary The divider component is used to visually separate content.
14
+ * @overview
15
+ * - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.
16
+ * - They can be oriented either vertically or horizontally, depending on the layout requirements.
17
+ *
18
+ * @cssprop --divider-color - Controls the color of the divider.
19
+ * @cssprop --divider-padding - Controls the padding of the divider.
20
+ *
21
+ * @example
22
+ * ```html
23
+ * <p-divider style="width: 12rem;">or</p-divider>
24
+ * ```
25
+ * @tags display
26
+ */
27
+ export class Divider extends LitElement {
28
+ constructor() {
29
+ super(...arguments);
30
+ _Divider_instances.add(this);
31
+ this.vertical = false;
32
+ this.slotHasContent = false;
33
+ }
34
+ firstUpdated() {
35
+ observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
36
+ this.slotHasContent = hasContent;
37
+ this.requestUpdate();
38
+ });
39
+ }
40
+ render() {
41
+ return html `<div
42
+ class=${classMap({
43
+ divider: true,
44
+ vertical: this.vertical,
45
+ 'slot-has-content': this.slotHasContent,
46
+ })}
47
+ >
48
+ <div class="line"></div>
49
+ <div class="slot-container">
50
+ <slot></slot>
51
+ </div>
52
+ <div class="line"></div>
53
+ </div>`;
54
+ }
55
+ }
56
+ _Divider_instances = new WeakSet(), _Divider_handleSlotChange = function _Divider_handleSlotChange(event) {
57
+ const slot = event.target;
58
+ // Check assignedElements length
59
+ this.slotHasContent = slot.assignedNodes({ flatten: true }).length > 0;
60
+ };
61
+ Divider.styles = [styles];
62
+ __decorate([
63
+ property({ type: Boolean, reflect: true })
64
+ ], Divider.prototype, "vertical", void 0);
65
+ __decorate([
66
+ state()
67
+ ], Divider.prototype, "slotHasContent", void 0);
68
+ //# sourceMappingURL=divider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.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,kBAAkB,CAAC;AAC1C,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;IAAvC;;;QAG8C,aAAQ,GAAG,KAAK,CAAC;QAG7D,mBAAc,GAAG,KAAK,CAAC;IAiCzB,CAAC;IA/BC,YAAY;QACV,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,CAAC,EAAE;YACX,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;YACjC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,QAAQ,CAAC;YACf,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;;;;;WAOG,CAAC;IACV,CAAC;;mGAEiB,KAAsB;IACtC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;AACzE,CAAC;AArCM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEmB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAkB;AAG7D;IADC,KAAK,EAAE;+CACe","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './divider.css.js';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Divider\n * @tag p-divider\n * @rawTag divider\n *\n * @summary The divider component is used to visually separate content.\n * @overview\n * - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.\n * - They can be oriented either vertically or horizontally, depending on the layout requirements.\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <p-divider style=\"width: 12rem;\">or</p-divider>\n * ```\n * @tags display\n */\nexport class Divider extends LitElement {\n static styles = [styles];\n\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n @state()\n slotHasContent = false;\n\n firstUpdated() {\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n }\n\n render() {\n return html`<div\n class=${classMap({\n divider: true,\n vertical: this.vertical,\n 'slot-has-content': this.slotHasContent,\n })}\n >\n <div class=\"line\"></div>\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n <div class=\"line\"></div>\n </div>`;\n }\n\n #handleSlotChange(event: { target: any }) {\n const slot = event.target;\n // Check assignedElements length\n this.slotHasContent = slot.assignedNodes({ flatten: true }).length > 0;\n }\n}\n"]}
@@ -0,0 +1 @@
1
+ export { Divider } from './divider.js';
@@ -0,0 +1,2 @@
1
+ export { Divider } from './divider.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { Divider } from './divider.js';\n"]}
@@ -1,9 +1,29 @@
1
1
  import { LitElement } from 'lit';
2
+ /**
3
+ * @label Icon
4
+ * @tag p-icon
5
+ * @rawTag icon
6
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
7
+ * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
8
+ *
9
+ * @cssprop --icon-color - Controls the color of the icon.
10
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
11
+ *
12
+ * @example
13
+ * ```html
14
+ * <p-icon name="home"></p-icon>
15
+ * ```
16
+ *
17
+ */
2
18
  export declare class Icon extends LitElement {
3
19
  static styles: import("lit").CSSResult[];
20
+ /**
21
+ * The identifier for the icon.
22
+ * This name corresponds to a specific SVG asset in the icon set.
23
+ */
4
24
  name?: string;
5
25
  src?: string;
6
- provider?: 'material-symbols' | 'carbon';
26
+ provider: 'material-symbols' | 'carbon';
7
27
  private svgContent;
8
28
  private loading;
9
29
  private error;
@@ -5,6 +5,22 @@ 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
+ * @label Icon
10
+ * @tag p-icon
11
+ * @rawTag icon
12
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
13
+ * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
14
+ *
15
+ * @cssprop --icon-color - Controls the color of the icon.
16
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
17
+ *
18
+ * @example
19
+ * ```html
20
+ * <p-icon name="home"></p-icon>
21
+ * ```
22
+ *
23
+ */
8
24
  export class Icon extends LitElement {
9
25
  constructor() {
10
26
  super(...arguments);