@aquera/nile-elements 0.0.31 → 0.0.33

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -29,7 +29,7 @@ export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
-export { NileLink} from './nile-link';
+export { NileLink } from './nile-link';
 export { NileButtonToggleGroup } from './nile-button-toggle-group';
 export { NileButtonToggle } from './nile-button-toggle';
 export { NileSwitcher } from './nile-switcher';
@@ -39,4 +39,8 @@ export { NileErrorNotification } from './nile-error-notification';
 export { NileTabGroup } from './nile-tab-group';
 export { NileTab } from './nile-tab';
 export { NileTabPanel } from './nile-tab-panel';
+export { NileCodeEditor } from './nile-code-editor';
 export { NileToast } from './nile-toast';
+export { NileBreadcrumb } from './nile-breadcrumb';
+export { NileBreadcrumbItem } from './nile-breadcrumb-item';
+export { NileCard } from './nile-card';

package/src/nile-breadcrumb/index.ts

@@ -0,0 +1 @@
+export {NileBreadcrumb} from './nile-breadcrumb';

package/src/nile-breadcrumb/nile-breadcrumb.css.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Breadcrumb CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+export default [styles];

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-breadcrumb.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile BreadCrumb component.
+ *
+ * @tag nile-breadcrumb
+ *
+ */
+@customElement('nile-breadcrumb')
+export class NileBreadcrumb extends NileElement {
+  /**
+   * The styles for Breadcrumb
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this.changeLastItem();
+    });
+  }
+
+  private changeLastItem() {
+    const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
+    const itemslength = items.length;
+    const lastItem = items[itemslength - 1];
+    lastItem.isLast = true;
+  }
+
+  private handleRemoveClick(event: any) {
+    this.emit('nile-click', { value: event.target.innerText });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <slot
+        @nile-click-item=${this.handleRemoveClick}
+        class="breadcrumb"
+      ></slot>
+    `;
+  }
+  
+  /* #endregion */
+}
+
+export default NileBreadcrumb;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-breadcrumb': NileBreadcrumb;
+  }
+}

package/src/nile-breadcrumb-item/index.ts

@@ -0,0 +1 @@
+export {NileBreadcrumbItem} from './nile-breadcrumb-item';

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Breadcrumb-item CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-font-size-small);
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular);
+    line-height:16.8px;
+    letter-spacing: 0.2px;
+  }
+
+  .nile-breadcrumb-item__arrow {
+    margin: 0 8px;
+  }
+
+  .nile-breadcrumb-item__arrow-hidden {
+    display: none;
+  }
+
+  .nile-breadcrumb-item__slot-text {
+    color: var(--nile-colors-dark-500);
+  }
+
+  .nile-breadcrumb-item__slot-text:hover {
+    color: var(--nile-colors-primary-600);
+    cursor: pointer;
+  }
+
+  .nile-breadcrumb-item__last-slot-text {
+    color: #026e78;
+  }
+`;
+
+export default [styles];

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-breadcrumb-item.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile BreadCrumb Item component.
+ *
+ * @tag nile-breadcrumb-item
+ *
+ */
+@customElement('nile-breadcrumb-item')
+export class NileBreadcrumbItem extends NileElement {
+  /**
+   * The styles for BreadcrumbItem
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @state() private isLast = false;
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  private handleClick() {
+    if (this.isLast) {
+      return;
+    }
+    this.emit('nile-click-item');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <slot
+        class=${classMap({
+          'nile-breadcrumb-item__slot-text': !this.isLast,
+          'nile-breadcrumb-item__last-slot-text': this.isLast,
+        })}
+        @click=${this.handleClick}
+      ></slot>
+      <nile-icon
+        name="arrowright"
+        aria-label="arrowright"
+        color="var(--nile-colors-dark-500)"
+        class=${classMap({
+          'nile-breadcrumb-item__arrow': true,
+          'nile-breadcrumb-item__arrow-hidden': this.isLast,
+        })}
+        size="14"
+      ></nile-icon>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileBreadcrumbItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-breadcrumb-item': NileBreadcrumbItem;
+  }
+}

package/src/nile-card/index.ts

@@ -0,0 +1 @@
+export { NileCard } from './nile-card';

package/src/nile-card/nile-card.css.ts

@@ -0,0 +1,73 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Card CSS
+ */
+export const styles = css`
+
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --border-color: var(--nile-colors-neutral-400);
+    --border-radius: 8px;
+    --border-width: 1px;
+    --padding: 18px;
+    --footer-padding: 9px 18px;
+;
+
+    display: inline-block;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--nile-colors-white-base);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .card__body {
+    display: block;
+    padding: var(--padding);
+  }
+
+  .card--has-footer {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    border-bottom: none;
+  }
+
+   .card__footer {
+    display: block;
+    border-top: solid var(--border-width) var(--border-color);
+    padding: var(--footer-padding);
+    border: 1px solid var(--nile-colors-neutral-500);
+    background: var(--nile-colors-neutral-100);
+    border-radius:  0 0 4px 4px;
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+
+`;
+
+export default [styles];

package/src/nile-card/nile-card.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-card.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../internal/slot';
+import NileElements from '../internal/nile-element';
+import { CSSResultGroup } from 'lit';
+
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-card
+ *
+ */
+@customElement('nile-card')
+export class NileCard extends NileElements {
+
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'footer');
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          card: true,
+          'card--has-footer': this.hasSlotController.test('footer'),
+        })}
+      >
+        <slot part="body" class="card__body"></slot>
+      </div>
+      <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+    `;
+  }
+}
+
+
+export default NileCard;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-card': NileCard;
+  }
+}

package/src/nile-code-editor/extensionSetup.ts

@@ -0,0 +1,125 @@
+import {
+  KeyBinding,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  drawSelection,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  highlightActiveLine,
+  keymap,
+} from '@codemirror/view';
+import { EditorState, Extension } from '@codemirror/state';
+import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import {
+  closeBrackets,
+  autocompletion,
+  closeBracketsKeymap,
+  completionKeymap,
+} from '@codemirror/autocomplete';
+import {
+  foldGutter,
+  indentOnInput,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  bracketMatching,
+  indentUnit,
+  foldKeymap,
+} from '@codemirror/language';
+
+import { lintKeymap } from '@codemirror/lint';
+
+export interface BasicSetupOptions extends MinimalSetupOptions {
+  lineNumbers?: boolean;
+  highlightActiveLineGutter?: boolean;
+  foldGutter?: boolean;
+  dropCursor?: boolean;
+  allowMultipleSelections?: boolean;
+  indentOnInput?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  autocompletion?: boolean;
+  rectangularSelection?: boolean;
+  crosshairCursor?: boolean;
+  highlightActiveLine?: boolean;
+  highlightSelectionMatches?: boolean;
+  closeBracketsKeymap?: boolean;
+  searchKeymap?: boolean;
+  foldKeymap?: boolean;
+  completionKeymap?: boolean;
+  lintKeymap?: boolean;
+  tabSize?: number;
+}
+
+export const isValidSetup = (item: any) => {
+  return typeof item === 'undefined' || item;
+};
+
+export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
+  const { crosshairCursor: initCrosshairCursor = false } = options;
+  let keymaps: KeyBinding[] = [];
+  isValidSetup(options.defaultKeymap) && keymaps.push(...defaultKeymap);
+  isValidSetup(options.closeBracketsKeymap) &&
+    keymaps.push(...closeBracketsKeymap);
+  isValidSetup(options.searchKeymap) && keymaps.push(...searchKeymap);
+  isValidSetup(options.historyKeymap) && keymaps.push(...historyKeymap);
+  isValidSetup(options.foldKeymap) && keymaps.push(...foldKeymap);
+  isValidSetup(options.lintKeymap) && keymaps.push(...lintKeymap);
+  const extensions: Extension[] = [];
+  isValidSetup(options.lineNumbers) && extensions.push(lineNumbers());
+  isValidSetup(options.highlightActiveLineGutter) &&
+    extensions.push(highlightActiveLineGutter());
+  isValidSetup(options.highlightSpecialChars) &&
+    extensions.push(highlightSpecialChars());
+  isValidSetup(options.history) && extensions.push(history());
+  isValidSetup(options.foldGutter) && extensions.push(foldGutter());
+  isValidSetup(options.drawSelection) && extensions.push(drawSelection());
+  isValidSetup(options.dropCursor) && extensions.push(dropCursor());
+  isValidSetup(options.allowMultipleSelections) &&
+    extensions.push(EditorState.allowMultipleSelections.of(true));
+  isValidSetup(options.indentOnInput) && extensions.push(indentOnInput());
+  isValidSetup(options.syntaxHighlighting) &&
+    extensions.push(
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true })
+    );
+  isValidSetup(options.bracketMatching) && extensions.push(bracketMatching());
+  isValidSetup(options.closeBrackets) && extensions.push(closeBrackets());
+  isValidSetup(options.autocompletion) && extensions.push(autocompletion());
+  isValidSetup(options.rectangularSelection) &&
+    extensions.push(rectangularSelection());
+  isValidSetup(options.crosshairCursor) && extensions.push(crosshairCursor());
+  isValidSetup(options.highlightActiveLine) &&
+    extensions.push(highlightActiveLine());
+  isValidSetup(options.highlightSelectionMatches) &&
+    extensions.push(highlightSelectionMatches());
+  if (options.tabSize && typeof options.tabSize === 'number')
+    extensions.push(indentUnit.of(' '.repeat(options.tabSize)));
+  return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
+};
+
+export interface MinimalSetupOptions {
+  highlightSpecialChars?: boolean;
+  history?: boolean;
+  drawSelection?: boolean;
+  syntaxHighlighting?: boolean;
+  defaultKeymap?: boolean;
+  historyKeymap?: boolean;
+}
+
+export const minimalSetup = (options: MinimalSetupOptions = {}) => {
+  let keymaps: KeyBinding[] = [];
+  isValidSetup(options.defaultKeymap) && keymaps.push(...defaultKeymap);
+  isValidSetup(options.historyKeymap) && keymaps.push(...historyKeymap);
+  const extensions: Extension[] = [];
+  isValidSetup(options.highlightSpecialChars) &&
+    extensions.push(highlightSpecialChars());
+  isValidSetup(options.history) && extensions.push(history());
+  isValidSetup(options.drawSelection) && extensions.push(drawSelection());
+  isValidSetup(options.syntaxHighlighting) &&
+    extensions.push(
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true })
+    );
+  return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
+};

package/src/nile-code-editor/index.ts

@@ -0,0 +1 @@
+export { NileCodeEditor } from './nile-code-editor';

package/src/nile-code-editor/nile-code-editor.css.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * CodeEditor CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .code-mirror {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row-reverse;
+    gap: 0.6rem;
+  }
+
+  .cm-editor {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  .ͼ1.cm-focused {
+    outline: none;
+  }
+
+  .code-editor__icon__container {
+    cursor: pointer;
+  }
+
+  .code-editor__icon__container {
+    padding-right: 5px;
+  }
+`;
+
+export default [styles];

package/src/nile-code-editor/nile-code-editor.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, query } from 'lit/decorators.js';
+import { styles } from './nile-code-editor.css';
+import { EditorView } from 'codemirror';
+import { ViewUpdate } from '@codemirror/view';
+import { EditorState, Compartment } from '@codemirror/state';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+import { autocompletion } from '@codemirror/autocomplete';
+import { CompletionContext } from '@codemirror/autocomplete';
+import NileElement from '../internal/nile-element';
+import { basicSetup } from './extensionSetup';
+
+// Choose the appropriate mode for your use case
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-code-editor
+ *
+ */
+@customElement('nile-code-editor')
+export class NileCodeEditor extends NileElement {
+  @query('.code-mirror') codeEditor: HTMLInputElement;
+  @property({ type: Boolean }) multiline: true;
+  @property({ type: String }) value: true;
+  @property({ type: String }) customOptions: any;
+  @property({ type: String }) showLineNumbers: any;
+
+  /**
+   * The styles for CodeEditor
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+  }
+
+  view: EditorView;
+
+  convertToSingleLine(code: any) {
+    // Remove line breaks and unnecessary whitespace
+    return code.replace(/\s+/g, ' ').trim();
+  }
+  lineNumbersComp = new Compartment();
+
+  updated() {
+    const customAutoCompletions = javascriptLanguage.data.of({
+      autocomplete: this.customOptions,
+    });
+    let startState = EditorState.create({
+      doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
+      extensions: [
+        basicSetup({
+          lineNumbers: !!this.showLineNumbers,
+          foldGutter: !this.multiline ? false : true,
+        }),
+        customAutoCompletions,
+        autocompletion(),
+        javascript(),
+        !this.multiline ? this.restrictSingleLine() : [],
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            this.emitValues(this.view.state.doc.toString());
+          }
+        }),
+      ],
+    });
+
+    this.view = new EditorView({
+      state: startState,
+      parent: this.codeEditor,
+    });
+  }
+
+  emitValues(value: string) {
+    this.emit('nile-change', { value: value });
+  }
+
+  expandCodeEditor() {
+    this.emit('nile-expand', { expand: true });
+  }
+
+  restrictSingleLine() {
+    return EditorState.transactionFilter.of(tr =>
+      tr.newDoc.lines > 1 ? [] : tr
+    );
+  }
+  public render(): TemplateResult {
+    return html`<div class="code-mirror">
+      ${!this.multiline
+        ? html`<nile-icon
+            name="fullscreenshrink"
+            class="code-editor__icon__container"
+            size="16"
+            color="black"
+            @click="${(e: CustomEvent) => this.expandCodeEditor()}"
+          ></nile-icon>`
+        : ''}
+    </div>`;
+  }
+
+  /* #endregion */
+}
+
+export default NileCodeEditor;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-code-editor': NileCodeEditor;
+  }
+}