@redvars/peacock 3.2.9 → 3.3.0

package/src/number-counter/number-counter.ts

@@ -1,29 +1,31 @@
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import PeacockComponent from 'src/PeacockComponent.js';
+import IndividualComponent from 'src/IndividualComponent.js';
 import styles from './number-counter.scss';
 
 /**
  * @label Number Counter
- * @tag number-counter
+ * @tag wc-number-counter
  * @rawTag number-counter
  * @summary Displays a number with commas for thousands.
  *
  * @example
  * ```html
- * <number-counter value="123456789"></number-counter>
+ * <wc-number-counter id="number-counter" value="123456789"></wc-number-counter>
  * <script>
- *     const $counter = document.querySelector('number-counter');
- *
- *     setInterval(() => {
- *         $counter.value = $counter.value + parseInt(Math.floor(Math.random() * 1000));
- *     }, 1000);
+ *   customElements.whenDefined('wc-number-counter').then(() => {
+      const $counter = document.querySelector('#number-counter');
+
+      setInterval(() => {
+        $counter.value = $counter.value + Math.floor(Math.random() * 1000);
+      }, 1000);
+    });
  * </script>
  * ```
  * @tags display
  */
-@PeacockComponent
+@IndividualComponent
 export class NumberCounter extends LitElement {
   static styles = [styles];
 

package/src/number-field/number-field.ts

@@ -15,7 +15,7 @@ import { spread } from '../spread.js';
  *
  * @example
  * ```html
- * <number-field label="Age" placeholder="Enter your age"></number-field>
+ * <wc-number-field label="Age" placeholder="Enter your age"></wc-number-field>
  * ```
  */
 export class NumberField extends BaseInput {
@@ -150,7 +150,7 @@ export class NumberField extends BaseInput {
     };
 
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -166,13 +166,13 @@ export class NumberField extends BaseInput {
         class=${classMap(classes)}
       >
         ${this.stepper && !this.disabled
-          ? html`<icon-button
+          ? html`<wc-icon-button
               class="stepper"
               name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></icon-button>`
+            ></wc-icon-button>`
           : nothing}
 
         <slot name="start" slot="field-start"></slot>
@@ -201,15 +201,15 @@ export class NumberField extends BaseInput {
         <slot name="end" slot="field-end"></slot>
 
         ${this.stepper && !this.disabled
-          ? html`<icon-button
+          ? html`<wc-icon-button
               class="stepper"
               variant="text"
               name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></icon-button>`
+            ></wc-icon-button>`
           : nothing}
-      </base-field>
+      </wc-field>
     `;
   }
 }

package/src/peacock-loader.ts

@@ -24,14 +24,14 @@ import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
 import { MenuList } from './menu/menu-list/menu-list.js';
 
-import { Accordion } from './accordion/accordion/accordion.js';
+import { Accordion } from './accordion/accordion.js';
 import { Link } from './link/link.js';
 import { Tag } from './chip/tag/tag.js';
 import { Chip } from './chip/chip/chip.js';
 import { LinearProgress } from './progress/linear-progress/linear-progress.js';
 import { CircularProgress } from './progress/circular-progress/circular-progress.js';
 
-import { Tooltip } from './popover/tooltip/tooltip.js';
+import { Tooltip } from './tooltip/tooltip.js';
 import { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 
 import { Skeleton } from './skeleton/skeleton.js';
@@ -43,6 +43,11 @@ import { Image } from './image/image.js';
 
 import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
 import { loadCSS } from './CssLoader.js';
+import { TabGroup } from './tabs/tab-group.js';
+import { Tabs } from './tabs/tabs.js';
+import { Tab } from './tabs/tab.js';
+import { TabPanel } from './tabs/tab-panel.js';
+import { Slider } from './slider/slider.js';
 
 
 const distDirectory = `${import.meta.url}/..`;
@@ -70,126 +75,148 @@ document.adoptedStyleSheets = styleSheets;
 
 const loaderConfig: 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-base-menu': {
       CustomElementClass: Menu,
     },
-    'menu-item': {
+    'wc-menu-item': {
       CustomElementClass: MenuItem,
     },
-    'menu-list': {
+    'wc-menu-list': {
       CustomElementClass: MenuList,
     },
-    'base-container': {
+    'wc-container': {
       CustomElementClass: Container
     },
-    'base-image': {
+    'wc-image': {
       CustomElementClass: Image
+    },
+    'wc-slider': {
+      CustomElementClass: Slider
+    },
+    'wc-chart-doughnut': {
+      importPath: `${distDirectory}/chart-doughnut.js`,
+    },
+    'wc-chart-pie': {
+      importPath: `${distDirectory}/chart-pie.js`,
     }
   },
 };

package/src/popover/index.ts

@@ -1 +1 @@
-export { Tooltip } from './tooltip/tooltip.js';
+export { Tooltip } from '../tooltip/tooltip.js';

package/src/progress/circular-progress/circular-progress.scss

@@ -79,7 +79,7 @@
       flex: 1;
     }
     .progress-helper {
-      text-align: right;
+      text-align: start;
     }
   }
 }

package/src/progress/circular-progress/circular-progress.ts

@@ -6,14 +6,14 @@ import { BaseProgress } from '../base-progress.js';
 
 /**
  * @label Circular Progress
- * @tag circular-progress
+ * @tag wc-circular-progress
  * @rawTag circular-progress
- *
  * @summary A circular progress indicator is a visual representation of progress toward a specific goal.
+ * @tags display
  *
  * @example
  * ```html
- * <circular-progress value="30"></circular-progress>
+ * <wc-circular-progress value="30"></wc-circular-progress>
  * ```
  */
 export class CircularProgress extends BaseProgress {

package/src/progress/linear-progress/linear-progress.ts

@@ -6,14 +6,14 @@ import { BaseProgress } from '../base-progress.js';
 
 /**
  * @label Linear Progress
- * @tag linear-progress
+ * @tag wc-linear-progress
  * @rawTag linear-progress
- *
  * @summary A linear progress indicator is a visual representation of progress toward a specific goal.
+ * @tags display
  *
  * @example
  * ```html
- * <linear-progress value="30" style="width:10rem"></linear-progress>
+ * <wc-linear-progress value="30" style="width:10rem"></wc-linear-progress>
  * ```
  */
 export class LinearProgress extends BaseProgress {