@covalent/components 0.0.0-COVALENT

package/src/full-screen-dialog/full-screen-dialog.stories.js

@@ -0,0 +1,172 @@
+import './full-screen-dialog';
+import '../dialog/dialog';
+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/Full-screen dialog',
+  argTypes: {},
+  args: {
+    helpOpen: false,
+    helpResizable: false,
+    open: false,
+    escapeKeyAction: 'close',
+  },
+};
+
+const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#dialog-button');
+      const helpToggleButton = document.body.querySelector('.help-toggle');
+      const fullscreenCloseButton = document.body.querySelector(
+        '.full-screen-dialog-close'
+      );
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog1');
+        dialog.open = true;
+      });
+
+      helpToggleButton.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog1');
+        dialog.helpOpen = !dialog.helpOpen;
+      });
+
+      fullscreenCloseButton.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog1');
+        dialog.open = false;
+      });
+    },
+    { once: true }
+  );
+
+  return `
+<cv-button id="dialog-button" raised>Open full-screen dialog</cv-button>
+<cv-full-screen-dialog id="dialog1"  scrimClickAction="" ${
+    open ? ' open' : ''
+  } escapeKeyAction="${escapeKeyAction}"${
+    helpResizable ? ' helpResizable' : ''
+  }${helpOpen ? ' helpOpen' : ''}>
+    <!-- Content to be rendered in the full-screen dialog 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-icon-button icon="close" class="full-screen-dialog-close"
+            slot="actionItems"></cv-icon-button>
+    </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>
+        </div>
+    </div>
+</cv-full-screen-dialog>`;
+};
+
+export const Basic = Template.bind({});

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

@@ -0,0 +1,84 @@
+import { css, html, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './full-screen-dialog.scss?inline';
+import CovalentDialog from '../dialog/dialog';
+import '../focused-page/focused-page';
+
+/**
+ * Full-screen Dialog
+ *
+ * @slot - This element has a slot
+ */
+
+@customElement('cv-full-screen-dialog')
+export class CovalentFullscreenDialog extends CovalentDialog {
+  static override styles = [
+    css`
+      ${unsafeCSS(CovalentDialog.styles)} ${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;
+
+  /**
+   * Since the default, action slots of mdc-dialog have been replaced with the focused page component,
+   * override this method to return focused page as the initial focus element
+   */
+  protected override getInitialFocusEl(): HTMLElement | null {
+    const initFocusSelector = `[${this.initialFocusAttribute}]`;
+
+    // only search light DOM. This typically handles all the cases
+    const lightDomQs = this.querySelector(initFocusSelector);
+
+    if (lightDomQs) {
+      return lightDomQs as HTMLElement;
+    }
+
+    const focusedPage = this.renderRoot.querySelector('cv-focused-page');
+    return focusedPage;
+  }
+
+  protected override render(): TemplateResult<1> {
+    return html` <div
+      class="mdc-dialog"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="title"
+      aria-describedby="content"
+    >
+      <div class="mdc-dialog__container">
+        <div class="mdc-dialog__surface">
+          <div id="content" class="mdc-dialog__content">
+            <cv-focused-page
+              .helpOpen="${this.helpOpen}"
+              .helpResizable="${this.helpResizable}"
+              .hideTopBorder="${true}"
+            >
+              <slot></slot>
+              <slot name="help" slot="help"> </slot>
+            </cv-focused-page>
+          </div>
+        </div>
+      </div>
+      <div class="mdc-dialog__scrim"></div>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-full-screen-dialog': CovalentFullscreenDialog;
+  }
+}
+
+export default CovalentFullscreenDialog;

package/src/icon/_icon-list.ts

@@ -0,0 +1,316 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import * as iconList from '../../../icons/material-codepoints.json';
+
+export const MAT_ICON_LIST = Object.keys(iconList);
+
+export const COV_ICON_LIST = [
+  'advanced_sql',
+  'advanced_sql_outlined',
+  'alias_arrow',
+  'alias_arrow_outlined',
+  'api',
+  'api_outlined',
+  'api_ondark',
+  'application',
+  'application_outlined',
+  'attribution',
+  'attribution_outlined',
+  'auto_refresh_off',
+  'auto_refresh_off_outlined',
+  'auto_refresh_on',
+  'auto_refresh_on_outlined',
+  'autorefresh_pause',
+  'autorefresh_pause_outlined',
+  'autorenew_on',
+  'autorenew_on_outlined',
+  'autorenew_off',
+  'autorenew_off_outlined',
+  'branch',
+  'branch_outlined',
+  'bucket',
+  'bucket_outlined',
+  'cluster_analysis',
+  'cluster_analysis_outlined',
+  'code_deployed',
+  'code_deployed_outlined',
+  'code_deployed_retired',
+  'code_deployed_retired_outlined',
+  'code_fork',
+  'code_fork_outlined',
+  'column',
+  'column_outlined',
+  'compute_cluster',
+  'compute_cluster_outlined',
+  'compute_cluster_group',
+  'compute_cluster_group_outlined',
+  'compute_groups',
+  'compute_groups_outlined',
+  'compute_profile',
+  'compute_profile_outlined',
+  'compute_profile_dark',
+  'compute_profile_light',
+  'connected_identity',
+  'connected_identity_outlined',
+  'created_document',
+  'created_document_outlined',
+  'data_management',
+  'data_management_outlined',
+  'data_preparation',
+  'data_preparation_outlined',
+  'data_protection',
+  'data_protection_outlined',
+  'data_sharing',
+  'data_sharing_outlined',
+  'data_source',
+  'data_source_outlined',
+  'data_source_type_amazon',
+  'data_source_type_amazon_outlined',
+  'data_source_type_azure',
+  'data_source_type_azure_outlined',
+  'data_source_type_cloudera',
+  'data_source_type_cloudera_outlined',
+  'data_source_type_hdinsight',
+  'data_source_type_hdinsight_outlined',
+  'data_source_type_microsoft',
+  'data_source_type_microsoft_outlined',
+  'data_source_type_teradata',
+  'data_source_type_teradata_outlined',
+  'data_transformation_services',
+  'data_transformation_services_outlined',
+  'database',
+  'database_outlined',
+  'database_changed',
+  'database_changed_outlined',
+  'database_edit',
+  'database_edit_outlined',
+  'database_foreign',
+  'database_foreign_outlined',
+  'database_lab',
+  'database_lab_outlined',
+  'database_none',
+  'database_none_outlined',
+  'database_search',
+  'database_search_outlined',
+  'database_synced',
+  'database_synced_outlined',
+  'database_unreachable',
+  'database_unreachable_outlined',
+  'disconnect',
+  'dock_right',
+  'dock_right_outlined',
+  'engine',
+  'engine_outlined',
+  'engine_sql',
+  'engine_sql_outlined',
+  'file',
+  'file_outlined',
+  'file_changed',
+  'file_changed_outlined',
+  'file_edit',
+  'file_edit_outlined',
+  'file_foreign',
+  'file_foreign_outlined',
+  'file_lab',
+  'file_lab_outlined',
+  'file_search',
+  'file_search_outlined',
+  'file_synced',
+  'file_synced_outlined',
+  'filter_clear',
+  'filter_clear_outlined',
+  'formula',
+  'formula_outlined',
+  'lab',
+  'lab_outlined',
+  'loader_dots',
+  'machine_learning',
+  'machine_learning_outlined',
+  'machine_learning_ondark',
+  'managed_services',
+  'managed_services_outlined',
+  'merge',
+  'merge_outlined',
+  'model',
+  'model_outlined',
+  'model_ondark',
+  'model_configuration',
+  'model_configuration_outlined',
+  'model_configuration_ondark',
+  'no_results',
+  'no_results_outlined',
+  'node_branch',
+  'node_merge',
+  'node_notification',
+  'node_notification_outlined',
+  'node_notification_ondark',
+  'nos',
+  'nos_outlined',
+  'object_browser_view',
+  'object_browser_view_outlined',
+  'object_storage',
+  'object_storage_outlined',
+  'object_storage_ondark',
+  'operations',
+  'operations_outlined',
+  'operators_divide',
+  'operators_divide_outlined',
+  'operators_equals',
+  'operators_equals_outlined',
+  'operators_greater_than',
+  'operators_greater_than_outlined',
+  'operators_greater_than_or_equal',
+  'operators_greater_than_or_equal_outlined',
+  'operators_less_than',
+  'operators_less_than_outlined',
+  'operators_less_than_or_equal',
+  'operators_less_than_or_equal_outlined',
+  'operators_multiply',
+  'operators_multiply_outlined',
+  'operators_not_equal',
+  'operators_not_equal_outlined',
+  'operators_parentheses',
+  'operators_parentheses_outlined',
+  'operators_parenthesis_left',
+  'operators_parenthesis_left_outlined',
+  'operators_parenthesis_right',
+  'operators_parenthesis_right_outlined',
+  'operators_subtract',
+  'operators_subtract_outlined',
+  'pinned',
+  'pin_outlined',
+  'placeholder',
+  'placeholder_outlined',
+  'primary_cluster',
+  'primary_cluster_outlined',
+  'product_analyst',
+  'product_analyst_outlined',
+  'product_appcenter',
+  'product_appcenter_outlined',
+  'product_console',
+  'product_console_outlined',
+  'product_cx',
+  'product_cx_outlined',
+  'product_editor',
+  'product_editor_outlined',
+  'product_jupyterhub',
+  'product_jupyterhub_outlined',
+  'product_modelops',
+  'product_modelops_outlined',
+  'product_outbound_campaign_manager',
+  'product_outbound_campaign_manager_outlined',
+  'product_querygrid',
+  'product_querygrid_outlined',
+  'product_streams',
+  'product_streams_outlined',
+  'product_vantage',
+  'product_vantage_outlined',
+  'product_viewpoint',
+  'product_viewpoint_outlined',
+  'professional_services',
+  'professional_services_outlined',
+  'report',
+  'report_outlined',
+  'resize_northeast',
+  'resize_northeast_outlined',
+  'resize_northwest',
+  'resize_northwest_outlined',
+  'resize_southeast',
+  'resize_southeast_outlined',
+  'resize_southwest',
+  'resize_southwest_outlined',
+  'row',
+  'row_outlined',
+  'rules',
+  'rules_outlined',
+  'rules_ondark',
+  'rules_insert',
+  'rules_insert_outlined',
+  'rules_insert_ondark',
+  'rules_select',
+  'rules_select_outlined',
+  'rules_select_ondark',
+  'sankey',
+  'sankey_outlined',
+  'script',
+  'script_outlined',
+  'script_ondark',
+  'script_macro',
+  'script_macro_ondark',
+  'script_management',
+  'script_management_outlined',
+  'script_sql',
+  'script_sql_outlined',
+  'script_sql_ondark',
+  'script_stored_procedure',
+  'script_stored_procedure_outlined',
+  'script_stored_procedure_ondark',
+  'segmentation',
+  'segmentation_outlined',
+  'server',
+  'server_outlined',
+  'server_changed',
+  'server_changed_outlined',
+  'server_edit',
+  'server_edit_outlined',
+  'server_foreign',
+  'server_foreign_outlined',
+  'server_lab',
+  'server_lab_outlined',
+  'server_search',
+  'server_search_outlined',
+  'server_synced',
+  'server_synced_outlined',
+  'server_workspace',
+  'server_workspace_outlined',
+  'sftp',
+  'sftp_outlined',
+  'sftp_ondark',
+  'slack',
+  'state_cancelled',
+  'state_cancelled_outlined',
+  'state_caution',
+  'state_caution_outlined',
+  'state_changed',
+  'state_changed_outlined',
+  'state_negative',
+  'state_negative_outlined',
+  'state_paused',
+  'state_paused_outlined',
+  'state_positive',
+  'state_positive_outlined',
+  'table',
+  'table_outlined',
+  'table_changed',
+  'table_changed_outlined',
+  'table_edit',
+  'table_edit_outlined',
+  'table_foreign',
+  'table_foreign_outlined',
+  'table_lab',
+  'table_lab_outlined',
+  'table_search',
+  'table_search_outlined',
+  'table_synced',
+  'table_synced_outlined',
+  'teradata',
+  'teradata_outlined',
+  'teradata_nocircle',
+  'teradata_nobackground',
+  'teradata_nobackground_outlined',
+  'text_analysis',
+  'text_analysis_outlined',
+  'undock',
+  'undock_outlined',
+  'user_defined_function',
+  'user_defined_function_outlined',
+  'variable',
+  'variable_outlined',
+  'variable_ondark',
+  'view_sankey',
+  'wand',
+  'wand_outlined',
+  'workflow',
+  'workflow_outlined',
+];
+
+export default COV_ICON_LIST;

package/src/icon/icon-demo.scss

@@ -0,0 +1,25 @@
+:host {
+  --mdc-icon-font: 'covalent-icons';
+}
+
+.icon-grid {
+  display: flex;
+  flex-wrap: wrap; /* Enables wrapping to new rows */
+  gap: 24px; /* Space between items */
+  justify-content: start; /* Align items to the left */
+}
+
+.icon-container {
+  margin: 20px 5px;
+  text-align: center;
+  width: 200px;
+
+  cv-icon {
+    margin-bottom: 16px;
+    font-size: 24px;
+  }
+}
+
+.wrap {
+  word-wrap: break-word;
+}

package/src/icon/icon-demo.ts

@@ -0,0 +1,37 @@
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import COV_ICON_LIST from './_icon-list';
+import styles from './icon-demo.scss?inline';
+import './icon';
+import '../typography/typography';
+
+@customElement('cv-icon-demo')
+export class CovalentIconDemo extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  render() {
+    return html`<div class="icon-grid">
+      ${COV_ICON_LIST.map(
+        (icon) =>
+          html`<div class="icon-container">
+            <cv-icon>${icon}</cv-icon>
+            <cv-typography scale="caption">
+              <div class="wrap">${icon}</div>
+            </cv-typography>
+          </div>`
+      )}
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-demo': CovalentIconDemo;
+  }
+}
+
+export default CovalentIconDemo;

package/src/icon/icon.spec.ts

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