@redvars/peacock 3.2.10 → 3.3.1

package/dist/peacock-loader.js

@@ -1,16 +1,16 @@
-import { A as Accordion, j as Image, e as Container, g as EmptyState, m as Spinner, n as Switch, c as BreadcrumbItem, b as Breadcrumb, q as Tooltip, p as TimePicker, D as DatePicker, o as Textarea, N as NumberField, F as Field, k as Input, S as Skeleton, d as CircularProgress, L as LinearProgress, T as Tag, C as Chip, l as Link, R as Ripple, E as Elevation, f as Divider, i as IconButton, B as Badge, a as Avatar, h as FocusRing, I as Icon } from './image-v3BujlY5.js';
-import { s as spread, B as Button } from './button-DaL4va7Q.js';
-import { ButtonGroup } from './button-group.js';
-import { i, _ as __decorate, n, a as i$1, w, b } from './PeacockComponent-CxJc63xj.js';
-import { r } from './state-B09bP3XH.js';
-import { e } from './dispatch-event-utils-vbdiOSeC.js';
-import { e as e$1 } from './class-map-BvQRv7eW.js';
+import { z as TreeView, A as Accordion, P as Pagination, s as Table, m as Slider, i as Image, e as Container, o as SubMenu, l as MenuItem, M as Menu, g as EmptyState, n as Spinner, p as Switch, c as BreadcrumbItem, b as Breadcrumb, x as Tooltip, w as TimePicker, D as DatePicker, v as Textarea, N as NumberField, j as Input, F as Field, S as Skeleton, d as CircularProgress, L as LinearProgress, u as Tag, C as Chip, k as Link, r as TabPanel, T as Tab, q as TabGroup, t as Tabs, R as Ripple, E as Elevation, f as Divider, B as Badge, a as Avatar, h as FocusRing, I as Icon } from './tree-view-CLolVlU0.js';
+import { s as spread, B as Button } from './button-trIfcqC7.js';
+import { B as ButtonGroup, I as IconButton } from './button-group-DA7xoziD.js';
+import { i, _ as __decorate, n, a as i$1, w, b } from './IndividualComponent-tDnXrOLV.js';
+import { r, e as e$1 } from './class-map-hJdvjl-W.js';
+import { e } from './query-QBcUV-L_.js';
 import './directive-Cuw6h7YA.js';
-import './unsafe-html-B-dV3Jps.js';
-import './style-map-B8xgVEc9.js';
-import './observe-theme-change-NneLARW8.js';
+import './unsafe-html-CV6Je6HL.js';
+import './dispatch-event-utils-B4odODQf.js';
+import './style-map-CfNHEkQp.js';
+import './observe-theme-change-BISF-Gl5.js';
 
-var css_248z$3 = i`* {
+var css_248z = i`* {
   box-sizing: border-box;
 }
 
@@ -244,29 +244,26 @@ var css_248z$3 = i`* {
 
 /**
  * @label Checkbox
- * @tag base-checkbox
+ * @tag wc-checkbox
  * @rawTag checkbox
- *
  * @summary Captures boolean input with an optional indeterminate mode.
  * @overview
  * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
  * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
- *
  * @cssprop --checkbox-size: Size of the checkbox container.
  * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
  * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
  * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
  * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
- *
  * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
  * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
  * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
+ * @tags input, form
  *
  * @example
  * ```html
- * <base-checkbox label="Accept terms"></base-checkbox>
+ * <wc-checkbox label="Accept terms"></wc-checkbox>
  * ```
- * @tags input, form
  */
 class Checkbox extends i$1 {
     constructor() {
@@ -483,7 +480,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$3];
+Checkbox.styles = [css_248z];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -530,444 +527,6 @@ __decorate([
     e('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-class Menu extends i$1 {
-    constructor() {
-        super();
-        this.open = false;
-        // Position: 'bottom-start' | 'bottom-end' | etc. (Simplified here to generic dropdown)
-        this.align = 'start';
-        this._boundClickOutside = this._handleClickOutside.bind(this);
-    }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.connectedCallback();
-        window.addEventListener('click', this._boundClickOutside);
-        // Listen for menu-item clicks bubbling up
-        this.addEventListener('click', this._handleItemClick);
-    }
-    disconnectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.disconnectedCallback();
-        window.removeEventListener('click', this._boundClickOutside);
-        this.removeEventListener('click', this._handleItemClick);
-    }
-    _handleClickOutside(e) {
-        if (!this.open)
-            return;
-        const path = e.composedPath();
-        if (!path.includes(this)) {
-            this.open = false;
-        }
-    }
-    _handleItemClick(e) {
-        const target = e.target;
-        // Check if the clicked element is a menu-item
-        if (target.tagName.toLowerCase() === 'menu-item') {
-            // Dispatch custom event with value
-            const value = target.value;
-            this.dispatchEvent(new CustomEvent('menu-selected', {
-                detail: { value },
-                bubbles: true,
-                composed: true,
-            }));
-            this.open = false;
-        }
-    }
-    _toggleMenu(e) {
-        e.stopPropagation(); // Prevent immediate closing via window listener
-        this.open = !this.open;
-    }
-    render() {
-        return b `
-      <div class="trigger" @click="${this._toggleMenu}">
-        <slot name="trigger"></slot>
-      </div>
-
-      <div class="menu-wrapper">
-        <!-- We expect a menu-list to be passed here -->
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-Menu.styles = i `
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    .trigger {
-      cursor: pointer;
-      display: inline-block;
-    }
-
-    .menu-wrapper {
-      position: absolute;
-      top: 100%;
-      z-index: 10;
-      opacity: 0;
-      transform: scale(0.95);
-      transform-origin: top left;
-      transition:
-        opacity 0.1s ease-out,
-        transform 0.1s ease-out;
-      pointer-events: none; /* Prevent clicking when hidden */
-      margin-top: 4px; /* Slight gap */
-    }
-
-    :host([open]) .menu-wrapper {
-      opacity: 1;
-      transform: scale(1);
-      pointer-events: auto;
-    }
-
-    /* Alignment logic */
-    :host([align='end']) .menu-wrapper {
-      right: 0;
-      transform-origin: top right;
-    }
-    :host([align='start']) .menu-wrapper {
-      left: 0;
-      transform-origin: top left;
-    }
-  `;
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Menu.prototype, "open", void 0);
-__decorate([
-    n({ type: String })
-], Menu.prototype, "align", void 0);
-__decorate([
-    e('.menu-wrapper')
-], Menu.prototype, "menuWrapper", void 0);
-
-var css_248z$2 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  padding-inline: var(--spacing-050);
-}
-
-.menu-item {
-  position: relative;
-  height: 3rem;
-  display: flex;
-  align-items: center;
-  padding-inline: 0.75rem;
-  outline: 0;
-  text-decoration: none;
-  font-family: var(--typography-label-large-font-family) !important;
-  font-size: var(--typography-label-large-font-size) !important;
-  font-weight: var(--typography-label-large-font-weight) !important;
-  line-height: var(--typography-label-large-line-height) !important;
-  letter-spacing: var(--typography-label-large-letter-spacing) !important;
-}
-.menu-item .menu-item-content {
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  width: 100%;
-  gap: var(--spacing-100);
-  color: var(--_label-text-color);
-  opacity: var(--_label-text-opacity, 1);
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_label-text-color);
-}
-.menu-item .menu-item-content .slot-container {
-  flex: 1;
-}
-.menu-item .background {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  pointer-events: none;
-}
-.menu-item {
-  /*
-   Background layers
-  */
-}
-.menu-item .focus-ring {
-  z-index: 2;
-  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
-}
-.menu-item .ripple {
-  --ripple-state-opacity: var(--_container-state-opacity, 0);
-  --ripple-pressed-color: var(--_container-state-color);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-}
-
-.menu-item {
-  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-extra-small));
-  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-extra-small));
-  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-extra-small));
-  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-extra-small));
-  --_container-corner-shape-variant: none;
-  --_label-text-color: var(--menu-item-label-color);
-  --_container-state-color: var(--_label-text-color);
-}
-.menu-item:hover:not(:where(.disabled, .selected)) {
-  --_container-state-opacity: 0.08;
-}
-.menu-item.selected {
-  --_container-color: var(--menu-item-container-selected-color);
-  --_label-text-color: var(--menu-item-label-selected-color);
-  --_container-shape-start-start: var(--shape-corner-large);
-  --_container-shape-start-end: var(--shape-corner-large);
-  --_container-shape-end-start: var(--shape-corner-large);
-  --_container-shape-end-end: var(--shape-corner-large);
-  --_container-corner-shape-variant: none;
-}
-.menu-item.disabled {
-  cursor: not-allowed;
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-}
-.menu-item.disabled .ripple {
-  display: none;
-}`;
-
-var css_248z$1 = i`:host-context(menu-list[variant=standard]) {
-  --menu-item-label-color: var(--color-on-surface-variant);
-  --menu-item-label-selected-color: var(--color-on-tertiary-container);
-  --menu-item-container-selected-color: var(--color-tertiary-container);
-}
-
-:host-context(menu-list[variant=vibrant]) {
-  --menu-item-label-color: var(--color-on-tertiary-container);
-  --menu-item-label-selected-color: var(--color-on-tertiary);
-  --menu-item-container-selected-color: var(--color-tertiary);
-}`;
-
-class MenuItem extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.value = '';
-        this.selected = false;
-        /**
-        * Sets or retrieves the window or frame at which to target content.
-        */
-        this.target = '_self';
-        this.variant = 'standard';
-    }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.connectedCallback();
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'menuitem');
-        }
-    }
-    // Handle keyboard activation (Enter/Space)
-    _handleKeyDown(e) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            this.click();
-        }
-    }
-    __isLink() {
-        return !!this.href;
-    }
-    focus() {
-        this.menuItemElement?.focus();
-    }
-    blur() {
-        this.menuItemElement?.blur();
-    }
-    render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            'menu-item': true,
-            disabled: this.disabled,
-            selected: this.selected,
-        };
-        if (isLink) {
-            return b `<a
-        class=${e$1(cssClasses)}
-        href=${this.href}
-        target=${this.target}
-      >
-        ${this.renderContent()}
-      </a>
-    `;
-        }
-        return b `<div
-        class=${e$1(cssClasses)}
-        tabindex=${!this.disabled ? 0 : -1}
-        @keydown="${this._handleKeyDown}"
-      >
-        ${this.renderContent()}
-      </div>
-    `;
-    }
-    renderContent() {
-        return b `
-      <focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></focus-ring>
-      <div class="background"></div>
-      <base-ripple class="ripple"></base-ripple>
-
-      <div class="menu-item-content">
-        <slot name="leading-icon"></slot>
-        <div class="slot-container">
-          <slot></slot>
-        </div>
-        <slot
-          name="trailing-supporting-text"
-        ></slot>
-      </div>
-    `;
-    }
-}
-MenuItem.styles = [css_248z$2, css_248z$1];
-__decorate([
-    n({ type: Boolean, reflect: true })
-], MenuItem.prototype, "disabled", void 0);
-__decorate([
-    n({ type: String })
-], MenuItem.prototype, "value", void 0);
-__decorate([
-    n({ type: Boolean })
-], MenuItem.prototype, "selected", void 0);
-__decorate([
-    n({ reflect: true })
-], MenuItem.prototype, "href", void 0);
-__decorate([
-    n()
-], MenuItem.prototype, "target", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], MenuItem.prototype, "variant", void 0);
-__decorate([
-    e('.menu-item')
-], MenuItem.prototype, "menuItemElement", void 0);
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-.menu-list {
-  display: flex;
-  position: relative;
-  min-width: 112px;
-  padding-block: var(--spacing-050);
-}
-.menu-list .menu-list-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-050);
-  z-index: 1;
-  width: 100%;
-}
-.menu-list .menu-list-content ::slotted(:first-child) {
-  --menu-item-container-shape-start-start: var(--shape-corner-medium);
-  --menu-item-container-shape-start-end: var(--shape-corner-medium);
-}
-.menu-list .menu-list-content ::slotted(:last-child) {
-  --menu-item-container-shape-end-start: var(--shape-corner-medium);
-  --menu-item-container-shape-end-end: var(--shape-corner-medium);
-}
-.menu-list .menu-list-content ::slotted(base-divider) {
-  --divider-spacing: var(--spacing-100);
-  padding-inline: var(--spacing-050);
-}
-.menu-list .background {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  pointer-events: none;
-}
-.menu-list .elevation {
-  --elevation-level: 2;
-  transition-duration: 280ms;
-  --elevation-container-shape-start-start: var(--_container-shape-start-start);
-  --elevation-container-shape-start-end: var(--_container-shape-start-end);
-  --elevation-container-shape-end-start: var(--_container-shape-end-start);
-  --elevation-container-shape-end-end: var(--_container-shape-end-end);
-  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
-}
-
-.menu-list {
-  --_container-shape-start-start: var(--shape-corner-large);
-  --_container-shape-start-end: var(--shape-corner-large);
-  --_container-shape-end-start: var(--shape-corner-large);
-  --_container-shape-end-end: var(--shape-corner-large);
-}
-.menu-list.variant-standard {
-  --_container-color: var(--color-surface-container);
-}
-.menu-list.variant-vibrant {
-  --_container-color: var(--color-tertiary-container);
-}`;
-
-class MenuList extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.variant = 'standard';
-    }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.connectedCallback();
-        this.setAttribute('role', 'menu');
-    }
-    render() {
-        return b `<div
-      class=${e$1({
-            'menu-list': true,
-            [`variant-${this.variant}`]: true,
-        })}
-    >
-      <div class="background"></div>
-      <base-elevation class="elevation"></base-elevation>
-
-      <div class="menu-list-content">
-        <slot></slot>
-      </div>
-    </div>`;
-    }
-}
-MenuList.styles = [css_248z];
-__decorate([
-    n({ type: String, reflect: true })
-], MenuList.prototype, "variant", void 0);
-
 class LoaderUtils {
     constructor(loaderConfig) {
         this._loaderConfig = loaderConfig;
@@ -1094,127 +653,160 @@ document.adoptedStyleSheets = styleSheets;
 */
 const loaderConfig = {
     components: {
-        'base-icon': {
+        'wc-icon': {
             CustomElementClass: Icon,
             // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
         },
-        'focus-ring': {
+        'wc-focus-ring': {
             CustomElementClass: FocusRing,
         },
-        'base-avatar': {
+        'wc-avatar': {
             CustomElementClass: Avatar,
         },
-        'base-badge': {
+        'wc-badge': {
             CustomElementClass: Badge,
         },
-        'base-button': {
+        'wc-button': {
             CustomElementClass: Button,
         },
-        'icon-button': {
+        'wc-icon-button': {
             CustomElementClass: IconButton,
         },
-        'button-group': {
+        'wc-button-group': {
             CustomElementClass: ButtonGroup,
         },
-        'base-divider': {
+        'wc-divider': {
             CustomElementClass: Divider,
         },
-        'base-elevation': {
+        'wc-elevation': {
             CustomElementClass: Elevation,
         },
-        'base-clock': {
+        'wc-clock': {
             importPath: `${distDirectory}/clock.js`,
         },
-        'base-ripple': {
+        'wc-ripple': {
             CustomElementClass: Ripple,
         },
-        'base-accordion': {
+        'wc-accordion': {
             CustomElementClass: Accordion,
         },
-        'accordion-item': {
+        'wc-accordion-item': {
             CustomElementClass: Accordion.Item,
         },
-        'base-link': {
+        'wc-tabs': {
+            CustomElementClass: Tabs,
+        },
+        'wc-tab-group': {
+            CustomElementClass: TabGroup,
+        },
+        'wc-tab': {
+            CustomElementClass: Tab,
+        },
+        'wc-tab-panel': {
+            CustomElementClass: TabPanel,
+        },
+        'wc-link': {
             CustomElementClass: Link,
         },
-        'base-chip': {
+        'wc-chip': {
             CustomElementClass: Chip,
         },
-        'base-tag': {
+        'wc-tag': {
             CustomElementClass: Tag,
         },
-        'linear-progress': {
+        'wc-linear-progress': {
             CustomElementClass: LinearProgress,
         },
-        'circular-progress': {
+        'wc-circular-progress': {
             CustomElementClass: CircularProgress,
         },
-        'base-skeleton': {
+        'wc-skeleton': {
             CustomElementClass: Skeleton,
         },
-        'input-field': {
-            CustomElementClass: Input,
-        },
-        'base-field': {
+        'wc-field': {
             CustomElementClass: Field,
         },
-        'number-field': {
+        'wc-input': {
+            CustomElementClass: Input,
+        },
+        'wc-number-field': {
             CustomElementClass: NumberField,
         },
-        'textarea-field': {
+        'wc-textarea': {
             CustomElementClass: Textarea,
         },
-        'date-picker': {
+        'wc-date-picker': {
             CustomElementClass: DatePicker,
         },
-        'time-picker': {
+        'wc-time-picker': {
             CustomElementClass: TimePicker,
         },
-        'base-tooltip': {
+        'wc-tooltip': {
             CustomElementClass: Tooltip,
         },
-        'number-counter': {
+        'wc-number-counter': {
             importPath: `${distDirectory}/number-counter.js`,
         },
-        'code-editor': {
+        'wc-code-editor': {
             importPath: `${distDirectory}/code-editor.js`,
         },
-        'code-highlighter': {
+        'wc-code-highlighter': {
             importPath: `${distDirectory}/code-highlighter.js`,
         },
-        'base-breadcrumb': {
+        'wc-breadcrumb': {
             CustomElementClass: Breadcrumb,
         },
-        'breadcrumb-item': {
+        'wc-breadcrumb-item': {
             CustomElementClass: BreadcrumbItem,
         },
-        'base-switch': {
+        'wc-switch': {
             CustomElementClass: Switch,
         },
-        'base-checkbox': {
+        'wc-checkbox': {
             CustomElementClass: Checkbox,
         },
-        'base-spinner': {
+        'wc-spinner': {
             CustomElementClass: Spinner,
         },
-        'empty-state': {
+        'wc-empty-state': {
             CustomElementClass: EmptyState,
         },
-        'base-menu': {
+        'wc-menu': {
             CustomElementClass: Menu,
         },
-        'menu-item': {
+        'wc-menu-item': {
             CustomElementClass: MenuItem,
         },
-        'menu-list': {
-            CustomElementClass: MenuList,
+        'wc-sub-menu': {
+            CustomElementClass: SubMenu,
         },
-        'base-container': {
-            CustomElementClass: Container
+        'wc-container': {
+            CustomElementClass: Container,
+        },
+        'wc-image': {
+            CustomElementClass: Image,
+        },
+        'wc-slider': {
+            CustomElementClass: Slider,
+        },
+        'wc-table': {
+            CustomElementClass: Table,
+        },
+        'wc-pagination': {
+            CustomElementClass: Pagination,
+        },
+        'wc-tree-view': {
+            CustomElementClass: TreeView,
+        },
+        'wc-tree-node': {
+            CustomElementClass: TreeView.Node,
+        },
+        'wc-chart-doughnut': {
+            importPath: `${distDirectory}/chart-doughnut.js`,
+        },
+        'wc-chart-pie': {
+            importPath: `${distDirectory}/chart-pie.js`,
         },
-        'base-image': {
-            CustomElementClass: Image
-        }
     },
 };
 new LoaderUtils(loaderConfig).start();