@redvars/peacock 3.5.0 → 3.6.0

package/src/banner/banner.scss

@@ -4,12 +4,6 @@
 
 :host {
   display: block;
-
-  --banner-container-color: var(--color-tertiary-container);
-  --banner-label-text-color: var(--color-on-tertiary-container);
-  --banner-description-text-color: var(--color-on-tertiary-container);
-  --banner-icon-color: var(--color-on-tertiary-container);
-  --banner-border-radius: var(--shape-corner-small);
 }
 
 .banner {
@@ -17,7 +11,7 @@
   background: var(--banner-container-color);
   border-radius: var(--banner-border-radius);
   display: grid;
-  gap: var(--spacing-200);
+  gap: var(--spacing-100);
   grid-template-columns: auto 1fr;
   padding: var(--spacing-200);
 }
@@ -27,31 +21,32 @@
   color: var(--banner-icon-color);
   display: inline-flex;
   justify-content: center;
-  min-width: 1.5rem;
-  padding-top: 0.1rem;
+  --icon-size: 1.5rem;
 }
 
 .banner-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-050);
-}
+  .banner-label {
+    display: inline;
+    @include mixin.get-typography(label-large);
+    color: var(--banner-label-text-color);
+    margin-inline-end: var(--spacing-050);
+  }
 
-.banner-label {
-  @include mixin.get-typography(label-large);
-  color: var(--banner-label-text-color);
+  .banner-description {
+    display: inline;
+    @include mixin.get-typography(body-medium);
+    color: var(--banner-description-text-color);
+  }
 }
 
-.banner-description {
-  @include mixin.get-typography(body-medium);
-  color: var(--banner-description-text-color);
-}
 
-.banner-content.inline {
-  flex-direction: row;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 0.25em;
+// Default styles for the banner and content. These will be overridden by the variant-specific styles below.
+:host {
+  --banner-container-color: var(--color-tertiary-container);
+  --banner-label-text-color: var(--color-on-tertiary-container);
+  --banner-description-text-color: var(--color-on-tertiary-container);
+  --banner-icon-color: var(--color-on-tertiary-container);
+  --banner-border-radius: var(--shape-corner-small);
 }
 
 .banner.info,

package/src/banner/banner.ts

@@ -69,12 +69,6 @@ export class Banner extends LitElement {
   @property({ type: String })
   description = '';
 
-  /**
-   * When true, label and description are rendered on a single line.
-   */
-  @property({ type: Boolean, reflect: true })
-  inline = false;
-
   private get resolvedLabel() {
     return this.label || VARIANT_LABELS[this.variant];
   }
@@ -92,7 +86,7 @@ export class Banner extends LitElement {
           </slot>
         </div>
 
-        <div class=${classMap({ 'banner-content': true, [this.variant]: true, inline: this.inline })}>
+        <div class=${classMap({ 'banner-content': true, [this.variant]: true })}>
           <div class="banner-label">
             <slot name="label">${this.resolvedLabel}:</slot>
           </div>

package/src/button/BaseButton.ts

@@ -1,81 +1,21 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
-import BaseHyperlink from '@/__base_element/BaseHyperlink.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
 
-export class BaseButton extends BaseHyperlink(LitElement) {
-  protected static readonly DISABLED_REASON_ID = 'disabled-reason';
-
-  @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
-    'button';
-
-  /**
-   * Type is preset of color and variant. Type will be only applied.
-   *
-   */
-  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
-
-  /**
-   * The visual style of the button.
-   *
-   *  Possible variant values:
-   * `"filled"` is a filled button.
-   * `"outlined"` is an outlined button.
-   * `"text"` is a transparent button.
-   * `"tonal"` is a light color button.
-   * `"elevated"` is elevated button
-   */
-  @property() variant:
-    | 'elevated'
-    | 'filled'
-    | 'tonal'
-    | 'outlined'
-    | 'text'
-    | 'neo' = 'filled';
-
-  /**
-   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
-   */
-  @property({ reflect: true }) color:
-    | 'primary'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'surface'
-    | 'on-surface' = 'primary';
-
-  /**
-   * Button size.
-   * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-   */
-  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
-
-  /**
-   * If true, the user cannot interact with the button. Defaults to `false`.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false;
 
-  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-  /**
-   * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
-  softDisabled: boolean = false;
+export class BaseButton extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+  protected static readonly DISABLED_REASON_ID = 'disabled-reason';
 
-  /**
-   * If button is disabled, the reason why it is disabled.
-   */
-  @property({ attribute: 'disabled-reason' })
-  disabledReason: string = '';
   
+  color?: string;
 
-  @property({ reflect: true })
-  configAria?: { [key: string]: any };
+  variant?: string;
 
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
   
-
   @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
   @property({ type: Boolean, reflect: true }) selected: boolean = false;
@@ -95,14 +35,6 @@ export class BaseButton extends BaseHyperlink(LitElement) {
 
   @query('.button') readonly buttonElement!: HTMLElement | null;
 
-  override focus() {
-    this.buttonElement?.focus();
-  }
-
-  override blur() {
-    this.buttonElement?.blur();
-  }
-
   override connectedCallback() {
     super.connectedCallback();
     this.addEventListener('click', this.__dispatchClickWithThrottle);
@@ -157,33 +89,12 @@ export class BaseButton extends BaseHyperlink(LitElement) {
     dispatchActivationClick(this.buttonElement);
   };
 
-  __convertTypeToVariantAndColor() {
-    if (this.type === 'primary') {
-      this.color = 'primary';
-      this.variant = 'filled';
-    } else if (this.type === 'secondary') {
-      this.color = 'surface';
-      this.variant = 'filled';
-    } else if (this.type === 'tertiary') {
-      this.color = 'primary';
-      this.variant = 'text';
-    } else if (this.type === 'danger') {
-      this.color = 'danger';
-      this.variant = 'filled';
-    }
-  }
-
-  protected get __disabledReasonID(): string | undefined {
-    return this.disabled && this.disabledReason
-      ? BaseButton.DISABLED_REASON_ID
-      : undefined;
-  }
+  
 
-  __renderDisabledReason() {
-    const disabledReasonID = this.__disabledReasonID;
-    if (disabledReasonID)
+  __renderDisabledReason(softDisabled: boolean) {
+    if (softDisabled)
       return html`<div
-        id=${disabledReasonID}
+        id=${BaseButton.DISABLED_REASON_ID}
         role="tooltip"
         aria-label=${this.disabledReason}
         class="screen-reader-only"

package/src/button/button/button-sizes.scss

@@ -67,11 +67,13 @@
   letter-spacing: 0 !important;
 }
 
-:host([size='xl']) {
+:host([size='xl']),
+:host([size='extra-large']) {
   --button-height: 8.5rem;
 }
 
-:host([size='xl']) .button {
+:host([size='xl']) .button,
+:host([size='extra-large']) .button {
   --_button-icon-size: 2.5rem;
   --_button_container-padding: 4rem;
 

package/src/button/button/button.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button.scss';
 import colorStyles from './button-colors.scss';
@@ -56,8 +57,6 @@ import { BaseButton } from '../BaseButton.js';
 export class Button extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
-  #tabindex?: number = 0;
-
   /**
    * Icon alignment.
    * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
@@ -65,6 +64,53 @@ export class Button extends BaseButton {
   @property({ attribute: 'icon-align' })
   iconAlign: 'start' | 'end' = 'end';
 
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
+  /**
+     * Type is preset of color and variant. Type will be only applied.
+     *
+     */
+    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
+  
+    /**
+     * The visual style of the button.
+     *
+     *  Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"text"` is a transparent button.
+     * `"tonal"` is a light color button.
+     * `"elevated"` is elevated button
+     */
+    @property() variant:
+      | 'elevated'
+      | 'filled'
+      | 'tonal'
+      | 'outlined'
+      | 'text'
+      | 'neo' = 'filled';
+  
+    /**
+     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+     */
+    @property({ reflect: true }) color:
+      | 'primary'
+      | 'success'
+      | 'danger'
+      | 'warning'
+      | 'surface'
+      | 'on-surface' = 'primary';
+
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
+
   @state()
   private slotHasContent = false;
 
@@ -76,18 +122,6 @@ export class Button extends BaseButton {
     this.buttonElement?.blur();
   }
 
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  override disconnectedCallback() {
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
-    super.disconnectedCallback();
-  }
-
   override firstUpdated() {
     this.__dispatchClickWithThrottle = throttle(
       this.__dispatchClick,
@@ -104,6 +138,22 @@ export class Button extends BaseButton {
     this.__convertTypeToVariantAndColor();
   }
 
+  __convertTypeToVariantAndColor() {
+    if (this.type === 'primary') {
+      this.color = 'primary';
+      this.variant = 'filled';
+    } else if (this.type === 'secondary') {
+      this.color = 'surface';
+      this.variant = 'filled';
+    } else if (this.type === 'tertiary') {
+      this.color = 'primary';
+      this.variant = 'text';
+    } else if (this.type === 'danger') {
+      this.color = 'danger';
+      this.variant = 'filled';
+    }
+  }
+
   override render() {
     const isLink = this.__isLink();
 
@@ -124,14 +174,15 @@ export class Button extends BaseButton {
       return html`<button
           class=${classMap(cssClasses)}
           id="button"
-          tabindex=${this.#tabindex}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -142,16 +193,19 @@ export class Button extends BaseButton {
     return html`<a
         class=${classMap(cssClasses)}
         id="button"
-        tabindex=${this.#tabindex}
         href=${this.href}
         target=${this.target}
-          @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
+
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -161,7 +215,7 @@ export class Button extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -177,7 +231,7 @@ export class Button extends BaseButton {
         <slot name="icon"></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
 }

package/src/button/button-group/button-group.ts

@@ -17,8 +17,8 @@ import { BaseButton } from '../BaseButton.js';
  * @example
  * ```html
  * <wc-button-group variant="connected">
- *  <wc-icon-button name="home" toggle selected></wc-icon-button>
- *  <wc-icon-button name="alarm" toggle></wc-icon-button>
+ *  <wc-icon-button toggle selected><wc-icon name="home"></wc-icon></wc-icon-button>
+ *  <wc-icon-button toggle><wc-icon name="alarm"></wc-icon></wc-icon-button>
  * </wc-button-group>
  * ```
  *

package/src/button/icon-button/icon-button.ts

@@ -1,13 +1,13 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from '../button/button.scss';
 import colorStyles from '../button/button-colors.scss';
 import sizeStyles from './icon-button-sizes.scss';
 import { spread } from '@/__directive/spread.js';
 import { throttle } from '@/__utils/throttle.js';
 import { BaseButton } from '../BaseButton.js';
-import { IconProvider } from '../../icon/icon.js';
 
 /**
  * @label Icon Button
@@ -48,20 +48,59 @@ import { IconProvider } from '../../icon/icon.js';
  *
  * @example
  * ```html
- * <wc-icon-button name="home"></wc-icon-button>
+ * <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
  * ```
  * @tags display
  */
 export class IconButton extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
-  #tabindex?: number = 0;
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
-  @property({ type: String, reflect: true }) name?: string;
-
-  @property({ type: String, reflect: true }) src?: string;
+  /**
+     * Type is preset of color and variant. Type will be only applied.
+     *
+     */
+    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
+  
+    /**
+     * The visual style of the button.
+     *
+     *  Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"text"` is a transparent button.
+     * `"tonal"` is a light color button.
+     * `"elevated"` is elevated button
+     */
+    @property() variant:
+      | 'elevated'
+      | 'filled'
+      | 'tonal'
+      | 'outlined'
+      | 'text'
+      | 'neo' = 'filled';
+  
+    /**
+     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+     */
+    @property({ reflect: true }) color:
+      | 'primary'
+      | 'success'
+      | 'danger'
+      | 'warning'
+      | 'surface'
+      | 'on-surface' = 'primary';
 
-  @property({ type: String }) provider: IconProvider = 'material-symbols';
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
 
   override focus() {
     this.buttonElement?.focus();
@@ -70,18 +109,6 @@ export class IconButton extends BaseButton {
   override blur() {
     this.buttonElement?.blur();
   }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  override disconnectedCallback() {
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
-    super.disconnectedCallback();
-  }
   
   override firstUpdated() {
     this.__dispatchClickWithThrottle = throttle(
@@ -91,6 +118,22 @@ export class IconButton extends BaseButton {
     this.__convertTypeToVariantAndColor();
   }
 
+  __convertTypeToVariantAndColor() {
+    if (this.type === 'primary') {
+      this.color = 'primary';
+      this.variant = 'filled';
+    } else if (this.type === 'secondary') {
+      this.color = 'surface';
+      this.variant = 'filled';
+    } else if (this.type === 'tertiary') {
+      this.color = 'primary';
+      this.variant = 'text';
+    } else if (this.type === 'danger') {
+      this.color = 'danger';
+      this.variant = 'filled';
+    }
+  }
+
   override render() {
     const isLink = this.__isLink();
 
@@ -109,14 +152,15 @@ export class IconButton extends BaseButton {
       return html`<button
           class=${classMap(cssClasses)}
           id="button"
-          tabindex=${this.#tabindex}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+          
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -127,16 +171,18 @@ export class IconButton extends BaseButton {
     return html`<a
         class=${classMap(cssClasses)}
         id="button"
-        tabindex=${this.#tabindex}
         href=${this.href}
         target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
+        
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -146,7 +192,7 @@ export class IconButton extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -155,14 +201,10 @@ export class IconButton extends BaseButton {
       <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
-        <wc-icon
-          name=${this.name}
-          src=${this.src}
-          provider=${this.provider}
-        ></wc-icon>
+        <slot></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
 }

package/src/calendar/base-event.ts

@@ -0,0 +1,49 @@
+import { startOfDay, endOfDay } from './utils.js';
+
+export class BaseEvent {
+  gid: string;
+  start: Date;
+  end: Date;
+
+  constructor(start: Date, end: Date) {
+    this.gid = crypto.randomUUID();
+    this.start = start;
+    this.end = end;
+  }
+
+  length(): number {
+    return this.end.valueOf() - this.start.valueOf();
+  }
+
+  isOverlapping(event: BaseEvent): boolean {
+    let totalLength: number;
+    if (this.start.valueOf() <= event.start.valueOf()) {
+      totalLength = event.end.valueOf() - this.start.valueOf();
+    } else {
+      totalLength = this.end.valueOf() - event.start.valueOf();
+    }
+    return this.length() + event.length() >= totalLength;
+  }
+
+  isOverlappingWithoutTime(event: BaseEvent): boolean {
+    const thisStartDay = startOfDay(this.start);
+    const eventStartDay = startOfDay(event.start);
+    const thisEndDay = endOfDay(this.end);
+    const eventEndDay = endOfDay(event.end);
+
+    let totalLength: number;
+    if (thisStartDay.valueOf() <= eventStartDay.valueOf()) {
+      totalLength = eventEndDay.valueOf() - thisStartDay.valueOf();
+    } else {
+      totalLength = thisEndDay.valueOf() - eventStartDay.valueOf();
+    }
+    return this.length() + event.length() >= totalLength;
+  }
+
+  isOverlappingWithDate(date: Date): boolean {
+    return (
+      this.start.valueOf() <= date.valueOf() &&
+      this.end.valueOf() >= date.valueOf()
+    );
+  }
+}