@redvars/peacock 3.8.1 → 3.8.2

package/dist/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sources":["../../src/svg/svg.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';\nimport { fetchSVG } from '../icon/datasource.js';\n\nimport styles from './svg.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label SVG\n * @tag wc-svg\n * @rawTag svg\n * @summary An SVG component with lazy loading and optional preview support.\n * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.\n *\n * @cssprop --svg-color - Controls the fill color of the SVG.\n * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <wc-svg src=\"/icons/my-icon.svg\" image-title=\"My icon\"></wc-svg>\n * ```\n */\n@IndividualComponent\nexport class Svg extends LitElement {\n  static styles = [styles];\n\n  /** URL of the SVG asset to fetch and render inline. */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Accessible title / alt text for the SVG. */\n  @property({ attribute: 'image-title' }) imageTitle = '';\n\n  /** Enable click-to-preview lightbox. */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** True once the element has entered the viewport and the SVG fetch has been initiated. */\n  @state() private _loaded = false;\n\n  /** True when the lightbox preview overlay is visible. */\n  @state() private _previewOpen = false;\n\n  /** Sanitized inline SVG markup ready for rendering. */\n  @state() private _svgContent: string = '';\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Monotonically incrementing token used to discard stale fetch results. */\n  private _fetchId = 0;\n\n  /** IntersectionObserver that triggers the SVG fetch when the element enters the viewport. */\n  private _intersectionObserver: IntersectionObserver | null = null;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._intersectionObserver?.disconnect();\n  }\n\n  firstUpdated() {\n    this._setupIntersectionObserver();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('src')) {\n      // Reset lazy-load state so the new src is fetched when visible\n      this._loaded = false;\n      this._svgContent = '';\n      this._setupIntersectionObserver();\n    }\n  }\n\n  private _setupIntersectionObserver() {\n    this._intersectionObserver?.disconnect();\n\n    const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');\n    if (!wrapper) return;\n\n    this._intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].isIntersecting) {\n          this._loaded = true;\n          this._intersectionObserver?.disconnect();\n          this._fetchSvg();\n        }\n      },\n      { rootMargin: '200px' },\n    );\n\n    this._intersectionObserver.observe(wrapper);\n  }\n\n  private async _fetchSvg() {\n    if (!this.src) return;\n\n    this._fetchId += 1;\n    const currentId = this._fetchId;\n\n    try {\n      const raw = await fetchSVG(this.src);\n      if (currentId !== this._fetchId) return;\n\n      this._svgContent = raw ? sanitizeSvg(raw) : '';\n    } catch {\n      if (currentId === this._fetchId) {\n        this._svgContent = '';\n      }\n    }\n  }\n\n  private _handleClick() {\n    if (this.preview) {\n      this._previewOpen = true;\n      // Move focus into the dialog after render\n      this.updateComplete.then(() => {\n        const closeBtn =\n          this.shadowRoot?.querySelector<HTMLElement>('.preview-close');\n        closeBtn?.focus();\n      });\n    }\n  }\n\n  private _closePreview(e: Event) {\n    e.stopPropagation();\n    const wasOpen = this._previewOpen;\n    this._previewOpen = false;\n    if (wasOpen) {\n      // Return focus to the trigger\n      const trigger =\n        this.shadowRoot?.querySelector<HTMLElement>('.svg-content');\n      trigger?.focus();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"svg-wrapper\">\n        ${this._loaded && this._svgContent\n          ? html`<div\n              class=\"svg-content ${this.preview ? 'clickable' : ''}\"\n              role=${this.imageTitle ? 'img' : 'presentation'}\n              aria-label=${this.imageTitle || ''}\n              @click=${this._handleClick}\n            >\n              ${unsafeSVG(this._svgContent)}\n            </div>`\n          : html`<span class=\"placeholder\" aria-hidden=\"true\"></span>`}\n      </div>\n\n      <div\n        class=\"preview-overlay ${this._previewOpen ? 'open' : ''}\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=${this.imageTitle\n          ? `Preview: ${this.imageTitle}`\n          : 'SVG preview'}\n        @click=${this._closePreview}\n        @keydown=${(e: KeyboardEvent) =>\n          e.key === 'Escape' && this._closePreview(e)}\n      >\n        <button\n          class=\"preview-close\"\n          aria-label=\"Close preview\"\n          @click=${this._closePreview}\n        >\n          &#x2715;\n        </button>\n        <div\n          class=\"preview-content\"\n          @click=${(e: Event) => e.stopPropagation()}\n        >\n          ${unsafeSVG(this._svgContent)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","unsafeSVG","styles","property","state"],"mappings":"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"}

package/dist/tab-group.js

@@ -0,0 +1,188 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { Tabs } from './tabs.js';
+import { TabPanel } from './tab-panel.js';
+import './property-B49QQ8pS.js';
+import './tab.js';
+import './state-DkTK9EGF.js';
+import './query-CHb9Ft_d.js';
+import './base-Cl6v8-BZ.js';
+import './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+import './dispatch-event-utils-CuEqjlPT.js';
+import './observe-slot-change-DPxaZrZF.js';
+import './throttle-C7ZAPqtu.js';
+import './is-link-Dk2OV3PM.js';
+import './spread-B5cgadZl.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}`;
+
+/**
+ * @label Tab Group
+ * @tag wc-tab-group
+ * @rawTag tab-group
+ *
+ * @summary The tab group component is used to display multiple panels of content in a container.
+ * @overview
+ * <p>The tab group component allows users to switch between different views or content sections.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab-group>
+ *
+ *   <wc-tabs>
+ *    <wc-tab selected >Tab 1</wc-tab>
+ *    <wc-tab>Tab 2</wc-tab>
+ *   </wc-tabs>
+ *
+ *   <wc-tab-panel>Panel 1</wc-tab-panel>
+ *   <wc-tab-panel>Panel 2</wc-tab-panel>
+ * </wc-tab-group>
+ * ```
+ * @tags navigation
+ */
+let TabGroup = class TabGroup extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.onTabClick = (event) => {
+            const custom = event;
+            event.stopPropagation();
+            const targetValue = custom.detail?.target || custom.detail?.value;
+            if (targetValue) {
+                this.selectTab(targetValue);
+            }
+            else if (typeof custom.detail?.index === 'number') {
+                this.selectTabByIndex(custom.detail.index);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('tab-click', this.onTabClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('tab-click', this.onTabClick);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.initializeTabs();
+    }
+    selectTab(target) {
+        const tabs = this.getTabs();
+        for (const tab of tabs) {
+            tab.active = false;
+            tab.selected = false;
+            tab.classList.remove('previous-tab', 'next-tab');
+        }
+        let selectedIndex = -1;
+        tabs.forEach((tab, index) => {
+            const t = tab.getAttribute('target') || tab.getAttribute('value');
+            if (t === target) {
+                selectedIndex = index;
+            }
+        });
+        if (selectedIndex >= 0) {
+            const selectedTab = tabs[selectedIndex];
+            selectedTab.active = true;
+            selectedTab.selected = true;
+            if (tabs[selectedIndex - 1]) {
+                tabs[selectedIndex - 1].classList.add('previous-tab');
+            }
+            if (tabs[selectedIndex + 1]) {
+                tabs[selectedIndex + 1].classList.add('next-tab');
+            }
+        }
+        const panels = this.getTabPanels();
+        for (const panel of panels) {
+            const panelValue = panel.getAttribute('value');
+            panel.active = panelValue === target;
+        }
+    }
+    selectTabByIndex(index) {
+        const tabs = this.getTabs();
+        for (const tab of tabs) {
+            tab.active = false;
+            tab.selected = false;
+            tab.classList.remove('previous-tab', 'next-tab');
+        }
+        if (index >= 0 && index < tabs.length) {
+            tabs[index].active = true;
+            tabs[index].selected = true;
+            if (tabs[index - 1])
+                tabs[index - 1].classList.add('previous-tab');
+            if (tabs[index + 1])
+                tabs[index + 1].classList.add('next-tab');
+        }
+        const panels = this.getTabPanels();
+        for (let i = 0; i < panels.length; i += 1) {
+            const panel = panels[i];
+            panel.active = i === index;
+        }
+    }
+    getTabs() {
+        return Array.from(this.querySelectorAll(':scope > wc-tabs wc-tab'));
+    }
+    getTabPanels() {
+        return Array.from(this.querySelectorAll(':scope > wc-tab-panel'));
+    }
+    getTabList() {
+        return this.querySelector(':scope > wc-tabs');
+    }
+    tabsHaveTarget() {
+        return !!this.querySelector(':scope > wc-tabs wc-tab[target]');
+    }
+    initializeTabs() {
+        const tabs = Array.from(this.getTabs());
+        if (!this.tabsHaveTarget()) {
+            // No target/value attributes — use index-based activation
+            const selectedIndex = tabs.findIndex(tab => tab.hasAttribute('active') ||
+                tab.active ||
+                tab.hasAttribute('selected') ||
+                tab.selected);
+            this.selectTabByIndex(selectedIndex >= 0 ? selectedIndex : 0);
+        }
+        else {
+            const selectedTab = tabs.find(tab => tab.hasAttribute('active') ||
+                tab.active ||
+                tab.hasAttribute('selected') ||
+                tab.selected);
+            if (selectedTab) {
+                const selectedTarget = selectedTab.getAttribute('target');
+                if (selectedTarget)
+                    this.selectTab(selectedTarget);
+            }
+            else if (tabs.length > 0) {
+                const firstTarget = tabs[0].getAttribute('target');
+                if (firstTarget)
+                    this.selectTab(firstTarget);
+            }
+        }
+    }
+    render() {
+        return b `<slot></slot>`;
+    }
+};
+TabGroup.styles = [css_248z];
+TabGroup.Tabs = Tabs;
+TabGroup.TabPanel = TabPanel;
+TabGroup = __decorate([
+    IndividualComponent
+], TabGroup);
+
+export { TabGroup };
+//# sourceMappingURL=tab-group.js.map

package/dist/tab-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.js","sources":["../../src/tabs/tab-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tab-group.scss';\nimport { Tabs } from './tabs.js';\nimport { TabPanel } from './tab-panel.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab Group\n * @tag wc-tab-group\n * @rawTag tab-group\n *\n * @summary The tab group component is used to display multiple panels of content in a container.\n * @overview\n * <p>The tab group component allows users to switch between different views or content sections.</p>\n *\n * @example\n * ```html\n * <wc-tab-group>\n * \n *   <wc-tabs>\n *    <wc-tab selected >Tab 1</wc-tab>\n *    <wc-tab>Tab 2</wc-tab>\n *   </wc-tabs>\n * \n *   <wc-tab-panel>Panel 1</wc-tab-panel>\n *   <wc-tab-panel>Panel 2</wc-tab-panel>\n * </wc-tab-group>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class TabGroup extends LitElement {\n  static styles = [styles];\n\n  static Tabs = Tabs;\n\n  static TabPanel = TabPanel;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('tab-click', this.onTabClick);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('tab-click', this.onTabClick);\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this.initializeTabs();\n  }\n\n  private onTabClick = (event: Event) => {\n    const custom = event as CustomEvent;\n    event.stopPropagation();\n    const targetValue = custom.detail?.target || custom.detail?.value;\n    if (targetValue) {\n      this.selectTab(targetValue);\n    } else if (typeof custom.detail?.index === 'number') {\n      this.selectTabByIndex(custom.detail.index);\n    }\n  };\n\n  selectTab(target: string) {\n    const tabs = this.getTabs();\n    for (const tab of tabs) {\n      (tab as any).active = false;\n      (tab as any).selected = false;\n      tab.classList.remove('previous-tab', 'next-tab');\n    }\n\n    let selectedIndex = -1;\n    tabs.forEach((tab: HTMLElement, index: number) => {\n      const t = tab.getAttribute('target') || tab.getAttribute('value');\n      if (t === target) {\n        selectedIndex = index;\n      }\n    });\n\n    if (selectedIndex >= 0) {\n      const selectedTab = tabs[selectedIndex];\n      (selectedTab as any).active = true;\n      (selectedTab as any).selected = true;\n      if (tabs[selectedIndex - 1]) {\n        tabs[selectedIndex - 1].classList.add('previous-tab');\n      }\n      if (tabs[selectedIndex + 1]) {\n        tabs[selectedIndex + 1].classList.add('next-tab');\n      }\n    }\n\n    const panels = this.getTabPanels();\n    for (const panel of panels) {\n      const panelValue = panel.getAttribute('value');\n      (panel as any).active = panelValue === target;\n    }\n  }\n\n  selectTabByIndex(index: number) {\n    const tabs = this.getTabs();\n    for (const tab of tabs) {\n      (tab as any).active = false;\n      (tab as any).selected = false;\n      tab.classList.remove('previous-tab', 'next-tab');\n    }\n\n    if (index >= 0 && index < tabs.length) {\n      (tabs[index] as any).active = true;\n      (tabs[index] as any).selected = true;\n      if (tabs[index - 1]) tabs[index - 1].classList.add('previous-tab');\n      if (tabs[index + 1]) tabs[index + 1].classList.add('next-tab');\n    }\n\n    const panels = this.getTabPanels();\n    for (let i = 0; i < panels.length; i += 1) {\n      const panel = panels[i];\n      (panel as any).active = i === index;\n    }\n  }\n\n  private getTabs(): HTMLElement[] {\n    return Array.from(this.querySelectorAll(':scope > wc-tabs wc-tab'));\n  }\n\n  private getTabPanels(): HTMLElement[] {\n    return Array.from(this.querySelectorAll(':scope > wc-tab-panel'));\n  }\n\n  private getTabList(): HTMLElement | null {\n    return this.querySelector(':scope > wc-tabs');\n  }\n\n  private tabsHaveTarget(): boolean {\n    return !!this.querySelector(':scope > wc-tabs wc-tab[target]');\n  }\n\n  private initializeTabs() {\n    const tabs = Array.from(this.getTabs());\n    if (!this.tabsHaveTarget()) {\n      // No target/value attributes — use index-based activation\n      const selectedIndex = tabs.findIndex(\n        tab =>\n          tab.hasAttribute('active') ||\n          (tab as any).active ||\n          tab.hasAttribute('selected') ||\n          (tab as any).selected,\n      );\n      this.selectTabByIndex(selectedIndex >= 0 ? selectedIndex : 0);\n    } else {\n      const selectedTab = tabs.find(\n        tab =>\n          tab.hasAttribute('active') ||\n          (tab as any).active ||\n          tab.hasAttribute('selected') ||\n          (tab as any).selected,\n      );\n      if (selectedTab) {\n        const selectedTarget = selectedTab.getAttribute('target');\n        if (selectedTarget) this.selectTab(selectedTarget);\n      } else if (tabs.length > 0) {\n        const firstTarget = tabs[0].getAttribute('target');\n        if (firstTarget) this.selectTab(firstTarget);\n      }\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":"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"}

package/dist/tab-panel.js

@@ -0,0 +1,61 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: none;
+  flex: 1;
+}
+
+:host([active]) {
+  display: block;
+}`;
+
+/**
+ * @label Tab Panel
+ * @tag wc-tab-panel
+ * @rawTag tab-panel
+ *
+ * @summary Content panel for tabs.
+ * @overview
+ * <p>TabPanel contains the content associated with a tab.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab-panel>Content for this tab</wc-tab-panel>
+ * ```
+ * @tags navigation
+ */
+let TabPanel = class TabPanel extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
+    render() {
+        return b `<slot></slot>`;
+    }
+};
+TabPanel.styles = [css_248z];
+__decorate([
+    n({ reflect: true })
+], TabPanel.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], TabPanel.prototype, "active", void 0);
+TabPanel = __decorate([
+    IndividualComponent
+], TabPanel);
+
+export { TabPanel };
+//# sourceMappingURL=tab-panel.js.map

package/dist/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tab-panel.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './tab-panel.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Tab Panel\n * @tag wc-tab-panel\n * @rawTag tab-panel\n *\n * @summary Content panel for tabs.\n * @overview\n * <p>TabPanel contains the content associated with a tab.</p>\n *\n * @example\n * ```html\n * <wc-tab-panel>Content for this tab</wc-tab-panel>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class TabPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true }) value?: string;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;AAcG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQA,GAAU,CAAA;AAAjC,IAAA,WAAA,GAAA;;QAKuC,IAAA,CAAA,MAAM,GAAG,KAAK;IAK5D;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,aAAA,CAAe;IAC5B;;AARO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEK,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEA,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AALhD,QAAQ,GAAA,UAAA,CAAA;IADpB;AACY,CAAA,EAAA,QAAQ,CAUpB;;;;"}