@redvars/peacock 3.1.0 → 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.
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js +3 -3
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.d.ts +16 -3
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js +16 -3
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.d.ts +3 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js +10 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js +34 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.d.ts +23 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js +54 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.js +2 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.d.ts +3 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js +10 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.js +12 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.d.ts +27 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js +58 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.js +2 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.js +58 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.d.ts +28 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js +68 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.js +2 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.d.ts +15 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js +10 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.d.ts +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js +4 -4
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.d.ts +5 -2
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js +5 -2
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.d.ts +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.js +2 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.d.ts +2 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.js +36 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.d.ts +12 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.js +18 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js +41 -2
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.d.ts +9 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.js +46 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.d.ts +2 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.js +70 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.js.map +1 -0
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.d.ts +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js +32 -7
- package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js.map +1 -1
- package/.rollup.cache/E/git/redvars/peacock/components/dist/tsconfig.tsbuildinfo +1 -1
- package/bin/typedoc-gen.mjs +64 -0
- package/custom-elements-manifest.config.mjs +8 -21
- package/demo/index.html +21 -9
- package/demo/int.html +2 -0
- package/dist/assets/styles/tokens.css +8 -1
- package/dist/{component/avatar.js → avatar.js} +23 -13
- package/dist/avatar.js.map +1 -0
- package/dist/badge.js +89 -0
- package/dist/badge.js.map +1 -0
- package/dist/class-map-DpvLRi0h.js +11 -0
- package/dist/class-map-DpvLRi0h.js.map +1 -0
- package/dist/clock.js +70 -0
- package/dist/clock.js.map +1 -0
- package/dist/custom-elements-jsdocs.json +656 -0
- package/dist/directive-BKuZRRPO.js +9 -0
- package/dist/directive-BKuZRRPO.js.map +1 -0
- package/dist/divider.js +123 -0
- package/dist/divider.js.map +1 -0
- package/dist/{component/Icon.js → icon.js} +15 -9
- package/dist/icon.js.map +1 -0
- package/dist/index.js +11 -88
- package/dist/index.js.map +1 -1
- package/dist/peacock-loader.js +141 -3
- package/dist/peacock-loader.js.map +1 -1
- package/dist/property-D4Kn9TsY.js +63 -0
- package/dist/property-D4Kn9TsY.js.map +1 -0
- package/dist/src/avatar/avatar.d.ts +16 -3
- package/dist/src/avatar/p-avatar.d.ts +3 -0
- package/dist/src/badge/badge.css.d.ts +1 -0
- package/dist/src/badge/badge.d.ts +23 -0
- package/dist/src/badge/index.d.ts +1 -0
- package/dist/src/badge/p-badge.d.ts +3 -0
- package/dist/src/clock/clock.css.d.ts +1 -0
- package/dist/src/clock/clock.d.ts +27 -0
- package/dist/src/clock/index.d.ts +1 -0
- package/dist/src/divider/divider.css.d.ts +1 -0
- package/dist/src/divider/divider.d.ts +28 -0
- package/dist/src/divider/index.d.ts +1 -0
- package/dist/src/icon/icon.d.ts +15 -1
- package/dist/src/icon/p-icon.d.ts +1 -1
- package/dist/src/index.d.ts +5 -2
- package/dist/src/link/link.css.d.ts +2 -0
- package/dist/src/styleMixins.css.d.ts +9 -0
- package/dist/src/text/text.css.d.ts +2 -0
- package/dist/src/utils.d.ts +1 -1
- package/dist/state-CxzmLNIi.js +10 -0
- package/dist/state-CxzmLNIi.js.map +1 -0
- package/dist/styleMixins.css-CivfMYtB.js +17 -0
- package/dist/styleMixins.css-CivfMYtB.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{src/utils.js → utils-_5no4mk7.js} +37 -10
- package/dist/utils-_5no4mk7.js.map +1 -0
- package/package.json +17 -9
- package/readme.md +178 -0
- package/rollup.config.js +72 -34
- package/scratch.mjs +0 -0
- package/src/avatar/avatar.css.ts +3 -3
- package/src/avatar/avatar.ts +16 -3
- package/src/avatar/demo/index.html +2 -2
- package/src/avatar/p-avatar.ts +5 -0
- package/src/badge/badge.css.ts +34 -0
- package/src/badge/badge.ts +51 -0
- package/src/badge/demo/index.html +62 -0
- package/src/badge/index.ts +1 -0
- package/src/badge/p-badge.ts +5 -0
- package/src/clock/clock.css.ts +12 -0
- package/src/clock/clock.ts +57 -0
- package/src/clock/demo/index.html +26 -0
- package/src/clock/index.ts +1 -0
- package/src/divider/demo/index.html +58 -0
- package/src/divider/divider.css.ts +58 -0
- package/src/divider/divider.ts +65 -0
- package/src/divider/index.ts +1 -0
- package/src/icon/demo/index.html +4 -4
- package/src/icon/icon.ts +16 -2
- package/src/icon/p-icon.ts +1 -1
- package/src/index.ts +5 -2
- package/src/link/link.css.ts +36 -0
- package/src/peacock-loader.ts +49 -2
- package/src/styleMixins.css.ts +55 -0
- package/src/styles.d.ts +11 -0
- package/src/text/text.css.ts +76 -0
- package/src/utils.ts +42 -7
- package/tsconfig.json +1 -1
- package/README.md +0 -46
- package/custom-elements.md +0 -268
- package/demo/tokens.css +0 -510
- package/dist/component/Icon.js.map +0 -1
- package/dist/component/avatar.js.map +0 -1
- package/dist/icon-1wpxQtrZ.js +0 -341
- package/dist/icon-1wpxQtrZ.js.map +0 -1
- package/dist/src/LoaderUtils.js +0 -81
- package/dist/src/LoaderUtils.js.map +0 -1
- package/dist/src/avatar/avatar.css.js +0 -41
- package/dist/src/avatar/avatar.css.js.map +0 -1
- package/dist/src/avatar/avatar.js +0 -49
- package/dist/src/avatar/avatar.js.map +0 -1
- package/dist/src/avatar/index.js +0 -2
- package/dist/src/avatar/index.js.map +0 -1
- package/dist/src/icon/datasource.js +0 -20
- package/dist/src/icon/datasource.js.map +0 -1
- package/dist/src/icon/icon.css.js +0 -22
- package/dist/src/icon/icon.css.js.map +0 -1
- package/dist/src/icon/icon.js +0 -124
- package/dist/src/icon/icon.js.map +0 -1
- package/dist/src/icon/index.js +0 -2
- package/dist/src/icon/index.js.map +0 -1
- package/dist/src/icon/p-icon.js +0 -15
- package/dist/src/icon/p-icon.js.map +0 -1
- package/dist/src/index.js +0 -3
- package/dist/src/index.js.map +0 -1
- package/dist/src/peacock-loader.js +0 -16
- package/dist/src/peacock-loader.js.map +0 -1
- package/dist/src/utils.js.map +0 -1
- package/dist/test/icon.test.js +0 -14
- package/dist/test/icon.test.js.map +0 -1
- package/dist/utils-CSwoJIcG.js +0 -171
- package/dist/utils-CSwoJIcG.js.map +0 -1
- package/readme-gen.mjs +0 -11
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.css.ts","../../src/avatar/avatar.ts"],"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","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"],"names":["css","LitElement","html","classMap","property"],"mappings":";;;;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;MAyBnB,aAAa,CAAC,uBAAuB,CAAC;;;;;;;;;;;;CAY3C;;ACnCD;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,MAAO,SAAQC,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;IAwB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AAzBO,MAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CE,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;;;;"}
|
package/dist/badge.js
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
|
|
2
|
+
import { r } from './state-CxzmLNIi.js';
|
|
3
|
+
import { e } from './class-map-DpvLRi0h.js';
|
|
4
|
+
import { g as getTypography } from './styleMixins.css-CivfMYtB.js';
|
|
5
|
+
import { o as observerSlotChangesWithCallback } from './utils-_5no4mk7.js';
|
|
6
|
+
import './directive-BKuZRRPO.js';
|
|
7
|
+
|
|
8
|
+
const styles = i `
|
|
9
|
+
:host {
|
|
10
|
+
display: inline-block;
|
|
11
|
+
--badge-color: var(--global-badge-color);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.badge {
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
z-index: var(--z-index-badge);
|
|
17
|
+
color: var(--color-white);
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
background-color: var(--badge-color);
|
|
22
|
+
border-radius: var(--shape-corner-full);
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
|
|
25
|
+
&.slot-has-content {
|
|
26
|
+
height: 1rem;
|
|
27
|
+
min-width: 1rem;
|
|
28
|
+
padding-inline: var(--spacing-050);
|
|
29
|
+
${getTypography('label-small')};
|
|
30
|
+
color: var(--color-on-error);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:not(.slot-has-content) {
|
|
34
|
+
height: 0.375rem;
|
|
35
|
+
width: 0.375rem;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* @label Badge
|
|
42
|
+
* @tag p-badge
|
|
43
|
+
* @rawTag badge
|
|
44
|
+
* @summary The badge component is used to display a small amount of information to the user.
|
|
45
|
+
*
|
|
46
|
+
* @cssprop --badge-color - Controls the color of the badge.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```html
|
|
50
|
+
* <p-badge>1</p-badge>
|
|
51
|
+
* ```
|
|
52
|
+
* @tags display
|
|
53
|
+
*/
|
|
54
|
+
class Badge extends i$1 {
|
|
55
|
+
constructor() {
|
|
56
|
+
super(...arguments);
|
|
57
|
+
this.name = '';
|
|
58
|
+
this.slotHasContent = false;
|
|
59
|
+
}
|
|
60
|
+
firstUpdated() {
|
|
61
|
+
observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
|
|
62
|
+
this.slotHasContent = hasContent;
|
|
63
|
+
this.requestUpdate();
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
render() {
|
|
67
|
+
return b `<div
|
|
68
|
+
class=${e({
|
|
69
|
+
badge: true,
|
|
70
|
+
'slot-has-content': this.slotHasContent,
|
|
71
|
+
})}
|
|
72
|
+
>
|
|
73
|
+
<slot></slot>
|
|
74
|
+
</div>`;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
Badge.styles = [styles];
|
|
78
|
+
__decorate([
|
|
79
|
+
n({ type: String, reflect: true })
|
|
80
|
+
], Badge.prototype, "name", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
n({ type: String, reflect: true })
|
|
83
|
+
], Badge.prototype, "src", void 0);
|
|
84
|
+
__decorate([
|
|
85
|
+
r()
|
|
86
|
+
], Badge.prototype, "slotHasContent", void 0);
|
|
87
|
+
|
|
88
|
+
export { Badge };
|
|
89
|
+
//# sourceMappingURL=badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.js","sources":["../../src/badge/badge.css.ts","../../src/badge/badge.ts"],"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","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"],"names":["css","LitElement","html","classMap","property","state"],"mappings":";;;;;;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;QAqBjB,aAAa,CAAC,aAAa,CAAC,CAAA;;;;;;;;;CASnC;;AC3BD;;;;;;;;;;;;;AAaG;AACG,MAAO,KAAM,SAAQC,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;QAK5D,IAAA,CAAA,cAAc,GAAG,KAAK;IAsBxB;IApBE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;WAGG;IACT;;AA5BO,KAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAGxD,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { E } from './property-D4Kn9TsY.js';
|
|
2
|
+
import { e as e$1, i, t } from './directive-BKuZRRPO.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @license
|
|
6
|
+
* Copyright 2018 Google LLC
|
|
7
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
8
|
+
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
|
|
9
|
+
|
|
10
|
+
export { e };
|
|
11
|
+
//# sourceMappingURL=class-map-DpvLRi0h.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"class-map-DpvLRi0h.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
|
package/dist/clock.js
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
|
|
2
|
+
import { r } from './state-CxzmLNIi.js';
|
|
3
|
+
import { g as getTypography } from './styleMixins.css-CivfMYtB.js';
|
|
4
|
+
|
|
5
|
+
const styles = i `
|
|
6
|
+
:host {
|
|
7
|
+
display: inline-block;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.current-time {
|
|
11
|
+
${getTypography('body-medium')}
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* @label Clock
|
|
17
|
+
* @tag p-clock
|
|
18
|
+
* @rawTag clock
|
|
19
|
+
*
|
|
20
|
+
* @summary Displays the current time in a given timezone.
|
|
21
|
+
* @overview
|
|
22
|
+
* - Clocks are used to display the current time in a specified timezone.
|
|
23
|
+
* - They can be displayed in various formats, including 12-hour and 24-hour time.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```html
|
|
27
|
+
* <p-clock></p-clock>
|
|
28
|
+
* ```
|
|
29
|
+
* @tags display
|
|
30
|
+
*/
|
|
31
|
+
class Clock extends i$1 {
|
|
32
|
+
constructor() {
|
|
33
|
+
super(...arguments);
|
|
34
|
+
// `currentTime` is decorated with `@State()`,
|
|
35
|
+
// as we need to trigger a rerender when its
|
|
36
|
+
// value changes to show the latest time
|
|
37
|
+
this.currentTime = '';
|
|
38
|
+
}
|
|
39
|
+
connectedCallback() {
|
|
40
|
+
super.connectedCallback();
|
|
41
|
+
this.__updateCurrentTime();
|
|
42
|
+
this._timerId = setInterval(() => {
|
|
43
|
+
this.__updateCurrentTime();
|
|
44
|
+
}, 1000);
|
|
45
|
+
}
|
|
46
|
+
disconnectedCallback() {
|
|
47
|
+
if (this._timerId) {
|
|
48
|
+
clearInterval(this._timerId);
|
|
49
|
+
}
|
|
50
|
+
super.disconnectedCallback();
|
|
51
|
+
}
|
|
52
|
+
__updateCurrentTime() {
|
|
53
|
+
this.currentTime = new Date().toLocaleTimeString('en-US', {
|
|
54
|
+
timeZone: this.timezone,
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
render() {
|
|
58
|
+
return b `<div class="current-time">${this.currentTime}</div>`;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
Clock.styles = [styles];
|
|
62
|
+
__decorate([
|
|
63
|
+
n()
|
|
64
|
+
], Clock.prototype, "timezone", void 0);
|
|
65
|
+
__decorate([
|
|
66
|
+
r()
|
|
67
|
+
], Clock.prototype, "currentTime", void 0);
|
|
68
|
+
|
|
69
|
+
export { Clock };
|
|
70
|
+
//# sourceMappingURL=clock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clock.js","sources":["../../src/clock/clock.css.ts","../../src/clock/clock.ts"],"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","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"],"names":["css","LitElement","html","property","state"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;MAMnB,aAAa,CAAC,aAAa,CAAC;;CAEjC;;ACPD;;;;;;;;;;;;;;;AAeG;AACG,MAAO,KAAM,SAAQC,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;;;;QAQW,IAAA,CAAA,WAAW,GAAW,EAAE;IA4BnC;IAxBE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,mBAAmB,EAAE;AAC1B,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;YAC/B,IAAI,CAAC,mBAAmB,EAAE;QAC5B,CAAC,EAAE,IAAI,CAAC;IACV;IAEA,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC9B;QACA,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAEA,mBAAmB,GAAA;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,IAAI,CAAC,WAAW,QAAQ;IAClE;;AAlCO,KAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAKrB,UAAA,CAAA;AAAR,IAAAC,CAAK;AAA4B,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;;;;"}
|