@aquera/nile-elements 0.0.5-8 → 0.0.6-1

package/package.json

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

package/src/index.ts

@@ -29,4 +29,5 @@ 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 { NileSwitcher } from './nile-switcher';

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

@@ -146,7 +146,7 @@ export const styles = css`
   .button--standard.button--tertiary {
     background-color: var(--nile-colors-white-base);
     border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
     box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
   }
 
@@ -218,7 +218,7 @@ export const styles = css`
   }
 
   .button--outline.button--secondary:active:not(.button--disabled) {
-    border-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-neutral-700);
     color: var(--nile-colors-white-base);
   }
 

package/src/nile-button/nile-button.ts

@@ -167,11 +167,13 @@ export class NileButton extends NileElement implements NileFormControl {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('click', this.handleHostClick);
+    this.emit('nile-destroy');
   }
 
   firstUpdated() {

package/src/nile-calendar/nile-calendar.ts

@@ -180,6 +180,12 @@ export class NileCalendar extends NileElement {
         this.currentYear = this.value.getFullYear();
       }
     }
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private getDaysArray(year: number, month: number): number[] {

package/src/nile-checkbox/nile-checkbox.ts

@@ -165,6 +165,12 @@ export class NileCheckbox extends NileElement {
   connectedCallback() {
     super.connectedCallback();
     this.updateHostClass();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>) {

package/src/nile-chip/nile-chip.ts

@@ -126,6 +126,12 @@ export class NileChip extends NileElement {
           option => !this.value.includes(option)
         );
     }
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private handleSelect(event: CustomEvent<CustomEventDetail>) {

package/src/nile-date-picker/nile-date-picker.ts

@@ -183,10 +183,13 @@ export class NileDatePicker extends NileElement {
         this.currentYear = this.value.getFullYear();
       }
     }
+    this.emit('nile-init');
   }
 
-
-
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
 
   /* #endregion */
 

package/src/nile-dropdown/nile-dropdown.ts

@@ -118,6 +118,7 @@ export class NileDropdown extends NileElement {
     if (!this.containingElement) {
       this.containingElement = this;
     }
+    this.emit('nile-init');
   }
 
   firstUpdated() {
@@ -134,6 +135,7 @@ export class NileDropdown extends NileElement {
     super.disconnectedCallback();
     this.removeOpenListeners();
     this.hide();
+    this.emit('nile-destroy');
   }
 
   focusOnTrigger() {

package/src/nile-icon/icons/svg/index.ts

@@ -321,6 +321,7 @@ export { default as sortup } from './sortup';
 export { default as stop } from './stop';
 export { default as storybook } from './storybook';
 export { default as string } from './string';
+export { default as stringinput } from './stringinput';
 export { default as support } from './support';
 export { default as swap } from './swap';
 export { default as sync } from './sync';

package/src/nile-icon/icons/svg/stringinput.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMTg3NSAxLjMxMjVIMTAuNVYwLjQzNzVIN1YxLjMxMjVIOC4zMTI1VjEyLjY4NzVIN1YxMy41NjI1SDEwLjVWMTIuNjg3NUg5LjE4NzVWMS4zMTI1Wk0xLjMxMjUgMy4wNjI1SDdWMy45Mzc1SDIuMTg3NVYxMC4wNjI1SDdWMTAuOTM3NUgxLjMxMjVWMy4wNjI1Wk0xMS44MTI1IDMuOTM3NUgxMC41VjMuMDYyNUgxMi42ODc1VjEwLjkzNzVIMTAuNVYxMC4wNjI1SDExLjgxMjVWMy45Mzc1Wk00LjYyMjAyIDcuMjIzMjFDNC43NTA5OSA3LjEzOTg4IDQuOTc4MTcgNy4wOTgyMSA1LjMwMzU3IDcuMDk4MjFINS42NTE3OVY3LjE1Nzc0QzUuNjUxNzkgNy40NjkyNSA1LjU4ODI5IDcuNzEyMyA1LjQ2MTMxIDcuODg2OUM1LjMzNDMzIDguMDU5NTIgNS4xNTU3NSA4LjE0NTgzIDQuOTI1NiA4LjE0NTgzQzQuNzcyODIgOC4xNDU4MyA0LjY1MTc5IDguMTAxMTkgNC41NjI1IDguMDExOUM0LjQ3MzIxIDcuOTIyNjIgNC40Mjg1NyA3LjgwMjU4IDQuNDI4NTcgNy42NTE3OUM0LjQyODU3IDcuNDQ5NCA0LjQ5MzA2IDcuMzA2NTUgNC42MjIwMiA3LjIyMzIxWk02LjUxNzg2IDguNjYzNjlWNi43NjE5QzYuNTE3ODYgNi4xOTQ0NCA2LjQwNzc0IDUuODAwNiA2LjE4NzUgNS41ODAzNkM1Ljk2OTI1IDUuMzYwMTIgNS41ODkyOSA1LjI1IDUuMDQ3NjIgNS4yNUM0LjgyNTQgNS4yNSA0LjYxNTA4IDUuMjY4ODUgNC40MTY2NyA1LjMwNjU1QzQuMjE4MjUgNS4zNDQyNSA0LjAyMjgyIDUuNDAyNzggMy44MzAzNiA1LjQ4MjE0VjYuMjI2MTlDNC4wNDI2NiA2LjExMTExIDQuMjQ2MDMgNi4wMjc3OCA0LjQ0MDQ4IDUuOTc2MTlDNC42MzY5IDUuOTIyNjIgNC44MzkyOSA1Ljg5NTgzIDUuMDQ3NjIgNS44OTU4M0M1LjI0NjAzIDUuODk1ODMgNS4zOTU4MyA1LjkzMjU0IDUuNDk3MDIgNi4wMDU5NUM1LjYwMDIgNi4wNzczOCA1LjY1MTc5IDYuMTgzNTMgNS42NTE3OSA2LjMyNDRWNi40NzAyNEg1LjA0NzYyQzQuNTE5ODQgNi40NzAyNCA0LjEyOTk2IDYuNTYzNDkgMy44Nzc5OCA2Ljc1QzMuNjI1OTkgNi45MzQ1MiAzLjUgNy4yMjEyMyAzLjUgNy42MTAxMkMzLjUgNy45NjkyNSAzLjYwNTE2IDguMjQ5MDEgMy44MTU0OCA4LjQ0OTRDNC4wMjc3OCA4LjY0OTggNC4zMjM0MSA4Ljc1IDQuNzAyMzggOC43NUM0LjkwMDc5IDguNzUgNS4wODIzNCA4LjcxMDMyIDUuMjQ3MDIgOC42MzA5NUM1LjQxMTcxIDguNTUxNTkgNS41NDY2MyA4LjQzODQ5IDUuNjUxNzkgOC4yOTE2N1Y4LjY2MzY5SDYuNTE3ODZaIiBmaWxsPSIjMDA1RUE2Ii8+PC9zdmc+";

package/src/nile-input/nile-input.ts

@@ -218,6 +218,17 @@ export class NileInput extends NileElement implements NileFormControl {
   // can be set before the component is rendered.
   //
 
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
   /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
   get valueAsDate() {
     const input = document.createElement('input');

package/src/nile-link/nile-link.ts

@@ -48,11 +48,13 @@ export class NileLink extends NileElement {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('click', this.handleHostClick);
+    this.emit('nile-destroy');
   }
 
   private handleHostClick(event: MouseEvent) {

package/src/nile-radio/nile-radio.ts

@@ -56,10 +56,12 @@ export class NileRadio extends NileElement {
 
     this.setInitialAttributes();
     this.addEventListeners();
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     this.removeEventListeners();
+    this.emit('nile-destroy');
   }
 
   private addEventListeners() {

package/src/nile-radio-group/nile-radio-group.ts

@@ -74,6 +74,12 @@ export class NileRadioGroup extends NileElement {
     super.connectedCallback();
     this.defaultValue = this.value;
     this.handleInitialDisabledState();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private getAllRadios() {

package/src/nile-select/nile-select.ts

@@ -240,6 +240,12 @@ export class NileSelect extends NileElement implements NileFormControl {
 
     // Because this is a form control, it shouldn't be opened initially
     this.open = false;
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private addOpenListeners() {

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -1,9 +1,10 @@
 import { CSSResultGroup } from 'lit';
 import { LitElement, html, property, customElement } from 'lit-element';
 import styles from './nile-slide-toggle.css';
+import NileElement from '../internal/nile-element';
 
 @customElement('nile-slide-toggle')
-export class NileSlideToggle extends LitElement {
+export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
   @property({ type: String }) label = '';
@@ -13,6 +14,18 @@ export class NileSlideToggle extends LitElement {
 
   @property({ attribute: 'error-message' }) errorMessage = '';
 
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+
   toggleValue() {
     this.isChecked = !this.isChecked;
     this.dispatchEvent(

package/src/nile-switcher/index.ts

@@ -0,0 +1 @@
+export { NileSwitcher } from './nile-switcher';

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

@@ -0,0 +1,37 @@
+/**
+ * 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';
+
+/**
+ * FieldGenerator CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .pointer-cursor {
+    cursor: pointer;
+  }
+  .input-container {
+    display: flex;
+  }
+
+  .input-container > :first-child {
+    width: 100%;
+    padding-right: 12px;
+  }
+  .flex-start {
+    align-items: flex-start;
+    padding-top: 10px;
+  }
+`;
+
+export default [styles];

package/src/nile-switcher/nile-switcher.ts

@@ -0,0 +1,185 @@
+/**
+ * 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 { html, property, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-switcher.css';
+import NileElement from '../internal/nile-element';
+import { CSSResultGroup } from 'lit';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * @summary Allows you to switch between nile elements
+
+ * @dependency nile-icon
+ * @dependency nile-input
+ * @dependency nile-checkbox
+ * @dependency nile-dropdown
+ * @dependency nile-textarea
+ *
+ 
+ * @event nile-change - Emitted when the control's value changes.
+ */
+
+export interface switchconfig {
+  toggleSwitch: boolean;
+  defaultInput: switchInputType;
+  switchInput: switchInputType;
+}
+
+export interface switchInputType {
+  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  value?: String | boolean;
+  label?: String;
+  placeholder?: string;
+  options?: Array<any>;
+  multiple?: boolean;
+}
+
+@customElement('nile-switcher')
+export class NileSwitcher extends NileElement {
+  /**
+   * The styles for nile switcher
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  static styles: CSSResultGroup = styles;
+  @property() nileSwitchConfig: switchconfig;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  renderNileText(defaultInput: switchInputType) {
+    const { value, label, placeholder } = defaultInput;
+    return html`<nile-input
+      .value=${value}
+      .label=${label}
+      .placeholder=${placeholder}
+      @nile-input=${this.handleChange}
+    ></nile-input>`;
+  }
+
+  renderNileTextArea(switchInput: switchInputType) {
+    const { value } = switchInput;
+    return html`<nile-textarea
+      .value=${value}
+      @nile-input=${this.handleChange}
+    ></nile-textarea>`;
+  }
+
+  renderNileCheckBox(defaultInput: switchInputType) {
+    const { value, label } = defaultInput;
+
+    return html`<nile-checkbox
+      .checked=${value}
+      .label=${label}
+      @valueChange="${this.handleChangeCheckbox}"
+    ></nile-checkbox>`;
+  }
+
+  handleChange(event: CustomEvent) {
+    this.emit('nile-change', { value: event.detail.value });
+  }
+
+  handleChangeCheckbox(event: CustomEvent) {
+    this.emit('nile-change', { value: event.detail.checked });
+  }
+
+  renderDropdown(defaultInput: switchInputType) {
+    const { options, multiple, placeholder } = defaultInput;
+    return html`<nile-select
+      .placeholder=${placeholder}
+      .multiple="${multiple}"
+      @nile-change="${this.handleChange}"
+    >
+      ${options &&
+      options.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
+    </nile-select>`;
+  }
+
+  renderIcon() {
+    const icon = !this.nileSwitchConfig.toggleSwitch
+      ? 'header-functions'
+      : 'stringinput';
+    return html`<nile-icon
+      size="14"
+      class=${classMap({
+        'pointer-cursor': true,
+        'flex-start': icon === 'stringinput',
+      })}
+      .name=${icon}
+      color="#005EA6"
+      @click=${this.toggleField}
+    ></nile-icon>`;
+  }
+
+  toggleField() {
+    this.nileSwitchConfig = {
+      ...this.nileSwitchConfig,
+      toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
+    };
+  }
+
+  singleFieldSwitcher(
+    defaultInput: switchInputType,
+    switchInput: switchInputType,
+    toggleField: boolean
+  ) {
+    const defaultInputType = defaultInput.inputType;
+    const switchInputType = switchInput.inputType;
+    return html`
+      ${!toggleField
+        ? choose(
+            defaultInputType,
+            [
+              ['text', () => this.renderNileText(defaultInput)],
+              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
+              [
+                'dropdown',
+                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+              ],
+            ],
+            () => this.renderNileText(defaultInput)
+          )
+        : choose(
+            switchInputType,
+            [['text-area', () => this.renderNileTextArea(switchInput)]],
+
+            () => this.renderNileTextArea(switchInput)
+          )}
+      ${this.renderIcon()}
+    `;
+  }
+  public render(): TemplateResult {
+    const {
+      toggleSwitch: toggleField,
+      defaultInput,
+      switchInput,
+    } = this.nileSwitchConfig;
+
+    return html`<div class="input-container">
+      ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}
+    </div>`;
+  }
+}
+
+export default NileSwitcher;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-switcher': NileSwitcher;
+  }
+}

package/src/nile-textarea/nile-textarea.ts

@@ -157,11 +157,13 @@ export class NileTextarea extends NileElement  {
       this.setTextareaHeight();
       this.resizeObserver.observe(this.input);
     });
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);
+    this.emit('nile-destroy');
   }
 
   private handleBlur() {