@covalent/components 0.0.0-COVALENT

package/src/expansion-panel/expansion-panel.ts

@@ -0,0 +1,94 @@
+import { LitElement, html } from 'lit';
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+} from 'lit/decorators.js';
+import { CovalentExpansionPanelItem } from './expansion-panel-item';
+
+@customElement('cv-expansion-panel')
+export class CovalentExpansionPanel extends LitElement {
+  @property({ type: Boolean, reflect: true }) noSurface = false;
+  @property({ type: String }) titleWidth = '150px';
+  @queryAssignedElements() panelItems!: CovalentExpansionPanelItem[];
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="content">
+          <slot id="mainSlot"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private _handleToggle = (e: CustomEvent): void => {
+    const toggledPanelIndex = e.detail.index;
+    const panel = this.panelItems[toggledPanelIndex];
+    const open = panel.open;
+
+    // close the currently open panel if there is one
+    this.panelItems.forEach((item) => {
+      item.resetPanel();
+    });
+
+    if (open) {
+      panel.open = true;
+      this.panelItems.forEach((item) => {
+        // Format the panel above and below the opened panel
+        if (item.index == toggledPanelIndex - 1) {
+          if (item.index == 0) {
+            // if this is the top panel
+            item.separateSinglePanel = true;
+          } else {
+            item.aboveOpenInnerPanel = true;
+          }
+        } else if (item.index == toggledPanelIndex + 1) {
+          if (item.index == this.panelItems.length - 1) {
+            item.separateSinglePanel = true;
+          }
+          item.belowOpenInnerPanel = true;
+        }
+      });
+    }
+  };
+
+  firstUpdated() {
+    window.addEventListener('cv-expansionPanel-togglePanel', (e) =>
+      this._handleToggle(<CustomEvent>e),
+    );
+
+    this.style.setProperty(
+      '--cv-expansion-panel-item-title-width',
+      this.titleWidth,
+    );
+
+    if (this.noSurface) {
+      this.style.setProperty('--cv-theme-surface-container', 'transparent');
+    }
+
+    if (this.panelItems.length == 1) {
+      this.panelItems[0].isSinglePanel = true;
+    } else {
+      // set index and type of each panel
+      let i = 0;
+      this.panelItems.forEach((item) => {
+        if (i == 0) {
+          item.isTopPanel = true;
+        } else if (i == this.panelItems.length - 1) {
+          item.isBottomPanel = true;
+        } else {
+          item.isInnerPanel = true;
+        }
+        item.index = i;
+        i++;
+      });
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-expansion-panel': CovalentExpansionPanel;
+  }
+}

package/src/focused-page/focused-page.scss

@@ -0,0 +1,113 @@
+:host {
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.action-items {
+  padding: 0.5rem 0.75rem;
+  text-align: right;
+}
+
+.content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  max-height: 100vh;
+  overflow: auto;
+  transition: visibility 0.3s ease;
+}
+
+.fullscreen-container {
+  border-top: 4px solid var(--cv-theme-tertiary);
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  &:not(.help-open) .help-panel {
+    width: 0;
+
+    .resize-handle {
+      display: none;
+    }
+  }
+}
+
+.fullscreen-container.hide-border {
+  border: none;
+}
+
+.help {
+  --mdc-theme-surface: var(--cv-theme-surface-container-low);
+
+  box-sizing: border-box;
+  flex: 1;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.help-panel {
+  background: var(--cv-theme-surface-container-low);
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  max-width: 100%;
+  position: relative;
+  resize: none;
+  transition: width 200ms;
+  width: var(--cv-focused-page-help-width, 320px);
+  z-index: 5;
+
+  .resize-handle {
+    cursor: ew-resize;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s ease;
+    user-select: none;
+    width: 8px;
+    z-index: 9;
+
+    &::before {
+      background-color: var(--mdc-theme-primary);
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transform: translateX(-50%);
+      width: 2px;
+    }
+  }
+
+  .resize-handle:hover,
+  &.resizing .resize-handle {
+    opacity: 1;
+  }
+}
+
+.main {
+  box-sizing: border-box;
+  flex: 1;
+  height: 100%;
+}
+
+@media only screen and (max-width: 479.98px) {
+  .help-open .help-panel {
+    width: 100%;
+    z-index: 100;
+  }
+}
+
+@media only screen and (max-width: 959.98px) {
+  .help-open .help-panel {
+    box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 15%),
+      0 4px 4px 0 rgba(0, 0, 0, 30%);
+    height: 100%;
+    position: absolute;
+    right: 0;
+  }
+}

package/src/focused-page/focused-page.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentFocusedPage } from './focused-page';
+
+describe('Covalent Focused Page', () => {
+  it('should work', () => {
+    expect(new CovalentFocusedPage()).toBeDefined();
+  });
+});

package/src/focused-page/focused-page.stories.js

@@ -0,0 +1,167 @@
+import './focused-page';
+import '../button/button';
+import '../toolbar/toolbar';
+import '../icon-button/icon-button';
+import '../icon-button-toggle/icon-button-toggle';
+import '../icon-radio/icon-radio-toggle';
+import '../typography/typography';
+import '../icon/icon';
+
+export default {
+  title: 'Components/Focused page',
+  argTypes: {},
+  args: {
+    helpOpen: false,
+    helpResizable: false,
+    hideTopBorder: false,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = ({ helpOpen, helpResizable, hideTopBorder }) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const helpToggleButton = document.body.querySelector('.help-toggle');
+
+      helpToggleButton.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#focused-page');
+        dialog.helpOpen = !dialog.helpOpen;
+      });
+    },
+    { once: true }
+  );
+
+  return `
+<cv-focused-page id="focused-page" scrimClickAction="" ${
+    helpResizable ? ' helpResizable' : ''
+  }${helpOpen ? ' helpOpen' : ''}${hideTopBorder ? ' hideTopBorder' : ''}>
+    <!-- Content to be rendered in the focused page component -->
+    <!-- Replace with any content as desired -->
+    
+    <cv-toolbar>
+        <span slot="title">
+            Connect data source
+        </span>
+        <cv-icon-button-toggle onIcon="help" offIcon="help" class="help-toggle"
+            slot="actionItems"></cv-icon-button-toggle>
+    </cv-toolbar>
+    <div style="display:flex; gap: 3rem; flex-wrap: wrap; padding: 2rem 1rem 1.5rem; max-width: 1200px">
+        <div>
+            <div style="display:flex;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Select model
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Select the industry data model for your organization
+                    </cv-typography>
+                </div>
+            </div>
+            <div style="display:flex; margin-top: 1rem;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Review details
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Preview the selected model and sample schema
+                    </cv-typography>
+                </div>
+            </div>
+            <div style="display:flex; margin-top: 1rem;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Install
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Acknowledge creation of database and install
+                    </cv-typography>
+                </div>
+            </div>
+        </div>
+        <div
+            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; flex: 1">
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+        </div>
+    </div>
+    <!-- Content rendered in the help section of the component -->
+    <!-- Replace with any content as desired -->
+    <div slot="help">
+        <cv-toolbar sticky>
+            <span slot="title" style="padding-left: 4px;">Help</span>
+            <cv-icon-button slot="actionItems" icon="undock" covalent-icons></cv-icon-button>
+        </cv-toolbar>
+        <div style="padding: 16px">
+            <cv-typography scale="headline5">
+                Ultricies nunc massa, id ut felis sed varius accumsan platea.
+            </cv-typography>
+            <br />
+            <cv-typography scale="body1">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+                tincidunt lectus risus, id aliquet mi congue sed.
+            </cv-typography>
+            <br />
+            <cv-typography scale="body1">
+                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+                pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin
+                laoreet urna aliquet eget.
+            </cv-typography>
+            <br />
+            <cv-typography scale="body1">
+                Phasellus porta sed libero vel vulputate. Quisque non nisl sem.
+                Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie
+                eros quis nisi pretium,
+            </cv-typography>
+            <br />
+            <cv-typography scale="body1">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+                tincidunt lectus risus, id aliquet mi congue sed.
+            </cv-typography>
+            <br />
+            <cv-typography scale="body1">
+                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+                pouere cubilia curae; Phasellus tincidunt eros arcu, sollicitudin
+                laoreet urna aliquet eget.
+            </cv-typography>
+            <br />
+            <cv-typography scale="body1">
+                Phasellus porta sed libero vel vulputate. Quisque non nisl sem.
+                Pellentesque nec pretium magna, et vestibulum neque. Mauris molestie
+                eros quis nisi pretium,
+            </cv-typography>
+        </div>
+    </div>
+</cv-focused-page>`;
+};
+
+export const Basic = Template.bind({});

package/src/focused-page/focused-page.ts

@@ -0,0 +1,201 @@
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+  unsafeCSS,
+} from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import styles from './focused-page.scss?inline';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * Focused page
+ *
+ * @slot - This element has a slot
+ */
+
+@customElement('cv-focused-page')
+export class CovalentFocusedPage extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  /**
+   * Whether the help section is open or not
+   */
+  @property({ type: Boolean, reflect: true })
+  helpOpen = false;
+
+  /**
+   * Whether the help section is resizable
+   */
+  @property({ type: Boolean, reflect: true })
+  helpResizable = false;
+
+  /**
+   * Whether the top border is hidden
+   */
+  @property({ type: Boolean, reflect: true })
+  hideTopBorder = false;
+
+  /**
+   * DOM element of the container div
+   */
+  @query('.fullscreen-container')
+  container!: HTMLDivElement;
+
+  /**
+   * DOM element of the help panel
+   */
+  @query('#help-panel')
+  helpPanel!: HTMLElement;
+
+  /**
+   * DOM element of the resize handler
+   */
+  @query('.resize-handle')
+  resizeHandle!: HTMLElement;
+
+  /**
+   * Whether the help section is being resized
+   */
+  private _isResizing = false;
+
+  constructor() {
+    super();
+    this._resizerMouseMove = this._resizerMouseMove.bind(this);
+    this._resizerMouseUp = this._resizerMouseUp.bind(this);
+    this._startResizing = this._startResizing.bind(this);
+    this.resetHelpPanelWidth = this.resetHelpPanelWidth.bind(this);
+  }
+
+  protected firstUpdated(): void {
+    this.openHelpPanel();
+  }
+
+  openHelpPanel(): void {
+    // Set width of the help panel
+    const savedWidth =
+      parseInt(localStorage.getItem('focusedPageHelpWidth') || '') || 320;
+    this.setHelpPanelWidth(this.helpOpen ? `${savedWidth}px` : '0');
+  }
+
+  closeHelpPanel() {
+    this.setHelpPanelWidth('0');
+    this.helpOpen = false;
+  }
+
+  resetHelpPanelWidth() {
+    this.setHelpPanelWidth('320px');
+    localStorage.setItem('focusedPageHelpWidth', `320`);
+  }
+
+  setHelpPanelWidth(width: string) {
+    this.container?.style.setProperty('--cv-focused-page-help-width', width);
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('helpOpen')) {
+      if (this.helpOpen) {
+        this.openHelpPanel();
+      } else {
+        this.closeHelpPanel();
+      }
+    }
+  }
+
+  // Called when the resize handler is dragged to resize the help panel
+  private _resizerMouseMove(e: MouseEvent): void {
+    if (!this.container || !this.helpPanel || !this._isResizing) return;
+    const viewportWidth = window.innerWidth;
+
+    const containerRect = this.container.getBoundingClientRect();
+    let newWidth;
+
+    if (viewportWidth < 960) {
+      // Calculate new width based on absolute positioning
+      const helpPanelRect = this.helpPanel.getBoundingClientRect();
+      newWidth = helpPanelRect.right - e.clientX;
+    } else {
+      // Calculate new width based on normal positioning
+      newWidth = containerRect.right - e.clientX;
+    }
+
+    if (
+      viewportWidth < 960 &&
+      newWidth > 320 &&
+      newWidth < viewportWidth - 40
+    ) {
+      this.setHelpPanelWidth(`${newWidth}px`);
+      localStorage.setItem('focusedPageHelpWidth', `${newWidth}`);
+    } else if (newWidth > 320 && newWidth < containerRect.width - 600) {
+      this.setHelpPanelWidth(`${newWidth}px`);
+      localStorage.setItem('focusedPageHelpWidth', `${newWidth}`);
+    }
+  }
+
+  // Called when dragging is finished (i.e. mouse up event on resize handler)
+  private _resizerMouseUp(): void {
+    this._isResizing = false;
+    this.helpPanel.classList.remove('resizing');
+    this.helpPanel.style.transition = 'width 200ms';
+    document.removeEventListener('mouseup', this._resizerMouseUp);
+    document.removeEventListener('mousemove', this._resizerMouseMove);
+  }
+
+  // Called when dragging starts (i.e. mouse down event on resize handler)
+  private _startResizing(e: MouseEvent): void {
+    if (e.target !== this.resizeHandle) return;
+    this._isResizing = true;
+    this.helpPanel.classList.add('resizing');
+    this.helpPanel.style.transition = 'none';
+    document.addEventListener('mouseup', this._resizerMouseUp);
+    document.addEventListener('mousemove', this._resizerMouseMove);
+  }
+
+  protected render(): TemplateResult<1> {
+    const classes = {
+      'fullscreen-container': true,
+      'help-open': this.helpOpen,
+      'hide-border': this.hideTopBorder,
+    };
+    const helpClasses = {
+      'help-panel': true,
+      'help-resizable': this.helpResizable,
+    };
+    return html`<div class="${classMap(classes)}">
+      <div class="content">
+        <section class="main">
+          <slot></slot>
+        </section>
+      </div>
+      <aside
+        class="${classMap(helpClasses)}"
+        id="help-panel"
+        @mousedown="${(e: MouseEvent) => this._startResizing(e)}"
+      >
+        ${this.helpResizable
+          ? html`<div
+              class="resize-handle"
+              @dblclick="${() => this.helpOpen && this.resetHelpPanelWidth()}"
+            ></div>`
+          : nothing}
+        <div class="help"><slot name="help"></slot></div>
+      </aside>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-focused-page': CovalentFocusedPage;
+  }
+}
+
+export default CovalentFocusedPage;

package/src/formfield/formfield.scss

@@ -0,0 +1,8 @@
+@use '@material/rtl';
+
+::slotted(cv-switch) {
+  margin-right: 10px;
+  @include rtl.rtl {
+    margin-left: 10px;
+  }
+}

package/src/formfield/formfield.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentFormfield } from './formfield';
+
+describe('Form field', () => {
+  it('should work', () => {
+    expect(new CovalentFormfield()).toBeDefined();
+  });
+});

package/src/formfield/formfield.ts

@@ -0,0 +1,24 @@
+import { css, unsafeCSS } from 'lit';
+import { FormfieldBase } from '@material/mwc-formfield/mwc-formfield-base';
+import { styles as baseStyles } from '@material/mwc-formfield/mwc-formfield.css';
+import styles from './formfield.scss?inline';
+
+import { customElement } from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-formfield': CovalentFormfield;
+  }
+}
+
+@customElement('cv-formfield')
+export class CovalentFormfield extends FormfieldBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+    baseStyles,
+  ];
+}
+
+export default CovalentFormfield

package/src/full-screen-dialog/full-screen-dialog.scss

@@ -0,0 +1,37 @@
+:host {
+  --cv-dialog-border-radius: 0;
+  --cv-dialog-horizontal-padding: 0;
+  --cv-dialog-vertical-padding: 0;
+  --mdc-dialog-scrim-color: transparent;
+  --mdc-dialog-min-width: 100vw;
+  --mdc-dialog-max-width: 100vw;
+  --mdc-dialog-min-height: 100vh;
+  --mdc-dialog-max-height: 100vh;
+}
+
+.mdc-dialog .mdc-dialog__container {
+  opacity: 1;
+  transform: translateX(100%);
+  transition: transform 300ms ease;
+}
+
+.mdc-dialog--opening {
+  .mdc-dialog__container {
+    transform: translateX(100%);
+  }
+}
+
+.mdc-dialog--open {
+  .mdc-dialog__container {
+    transform: translateX(0);
+    transition: transform 300ms ease;
+  }
+}
+
+.mdc-dialog--closing {
+  .mdc-dialog__container {
+    opacity: 1;
+    transform: translateX(100%);
+    transition: transform 300ms ease;
+  }
+}

package/src/full-screen-dialog/full-screen-dialog.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentFullscreenDialog } from './full-screen-dialog';
+
+describe('Covalent Fullscreen Dialog', () => {
+  it('should work', () => {
+    expect(new CovalentFullscreenDialog()).toBeDefined();
+  });
+});