@redvars/peacock 3.1.1 → 3.1.2

package/dist/badge.js

@@ -0,0 +1,89 @@
+import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
+import { r } from './state-CxzmLNIi.js';
+import { e } from './class-map-DpvLRi0h.js';
+import { g as getTypography } from './styleMixins.css-CivfMYtB.js';
+import { o as observerSlotChangesWithCallback } from './utils-_5no4mk7.js';
+import './directive-BKuZRRPO.js';
+
+const styles = i `
+  :host {
+    display: inline-block;
+    --badge-color: var(--global-badge-color);
+  }
+
+  .badge {
+    pointer-events: none;
+    z-index: var(--z-index-badge);
+    color: var(--color-white);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--badge-color);
+    border-radius: var(--shape-corner-full);
+    box-sizing: border-box;
+
+    &.slot-has-content {
+      height: 1rem;
+      min-width: 1rem;
+      padding-inline: var(--spacing-050);
+      ${getTypography('label-small')};
+      color: var(--color-on-error);
+    }
+
+    &:not(.slot-has-content) {
+      height: 0.375rem;
+      width: 0.375rem;
+    }
+  }
+`;
+
+/**
+ * @label Badge
+ * @tag p-badge
+ * @rawTag badge
+ * @summary The badge component is used to display a small amount of information to the user.
+ *
+ * @cssprop --badge-color - Controls the color of the badge.
+ *
+ * @example
+ * ```html
+ * <p-badge>1</p-badge>
+ * ```
+ * @tags display
+ */
+class Badge extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.slotHasContent = false;
+    }
+    firstUpdated() {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    render() {
+        return b `<div
+      class=${e({
+            badge: true,
+            'slot-has-content': this.slotHasContent,
+        })}
+    >
+      <slot></slot>
+    </div>`;
+    }
+}
+Badge.styles = [styles];
+__decorate([
+    n({ type: String, reflect: true })
+], Badge.prototype, "name", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Badge.prototype, "src", void 0);
+__decorate([
+    r()
+], Badge.prototype, "slotHasContent", void 0);
+
+export { Badge };
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +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;;;;"}

package/dist/class-map-DpvLRi0h.js

@@ -0,0 +1,11 @@
+import { E } from './property-D4Kn9TsY.js';
+import { e as e$1, i, t } from './directive-BKuZRRPO.js';
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */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}});
+
+export { e };
+//# sourceMappingURL=class-map-DpvLRi0h.js.map

package/dist/class-map-DpvLRi0h.js.map

@@ -0,0 +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

@@ -0,0 +1,70 @@
+import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
+import { r } from './state-CxzmLNIi.js';
+import { g as getTypography } from './styleMixins.css-CivfMYtB.js';
+
+const styles = i `
+  :host {
+    display: inline-block;
+  }
+
+  .current-time {
+    ${getTypography('body-medium')}
+  }
+`;
+
+/**
+ * @label Clock
+ * @tag p-clock
+ * @rawTag clock
+ *
+ * @summary Displays the current time in a given timezone.
+ * @overview
+ *  - Clocks are used to display the current time in a specified timezone.
+ *  - They can be displayed in various formats, including 12-hour and 24-hour time.
+ *
+ * @example
+ * ```html
+ * <p-clock></p-clock>
+ * ```
+ * @tags display
+ */
+class Clock extends i$1 {
+    constructor() {
+        super(...arguments);
+        // `currentTime` is decorated with `@State()`,
+        // as we need to trigger a rerender when its
+        // value changes to show the latest time
+        this.currentTime = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.__updateCurrentTime();
+        this._timerId = setInterval(() => {
+            this.__updateCurrentTime();
+        }, 1000);
+    }
+    disconnectedCallback() {
+        if (this._timerId) {
+            clearInterval(this._timerId);
+        }
+        super.disconnectedCallback();
+    }
+    __updateCurrentTime() {
+        this.currentTime = new Date().toLocaleTimeString('en-US', {
+            timeZone: this.timezone,
+        });
+    }
+    render() {
+        return b `<div class="current-time">${this.currentTime}</div>`;
+    }
+}
+Clock.styles = [styles];
+__decorate([
+    n()
+], Clock.prototype, "timezone", void 0);
+__decorate([
+    r()
+], Clock.prototype, "currentTime", void 0);
+
+export { Clock };
+//# sourceMappingURL=clock.js.map

package/dist/clock.js.map

@@ -0,0 +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;;;;"}