@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

package/dist/src/nile-switcher/nile-switcher.js

@@ -0,0 +1,375 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-switcher.css';
+import NileElement from '../internal/nile-element';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { watch } from '../internal/watch';
+import { HasSlotController } from '../internal/slot';
+export var POSITIONS;
+(function (POSITIONS) {
+    POSITIONS["INLINE"] = "inline";
+    POSITIONS["BLOCK"] = "block";
+})(POSITIONS || (POSITIONS = {}));
+export var INPUT_TYPE;
+(function (INPUT_TYPE) {
+    INPUT_TYPE["DEFAULT"] = "defaultInput";
+    INPUT_TYPE["SWITCH"] = "switchInput";
+})(INPUT_TYPE || (INPUT_TYPE = {}));
+export var INPUT_TYPE_NAMES;
+(function (INPUT_TYPE_NAMES) {
+    INPUT_TYPE_NAMES["DROPDOWN"] = "dropdown";
+    INPUT_TYPE_NAMES["TEXT"] = "text";
+    INPUT_TYPE_NAMES["CHECKBOX"] = "checkbox";
+    INPUT_TYPE_NAMES["TEXTAREA"] = "text-area";
+    INPUT_TYPE_NAMES["RADIO"] = "radio";
+    INPUT_TYPE_NAMES["CONTENTEDITOR"] = "content-editor";
+    INPUT_TYPE_NAMES["OBJECT_MAPPER"] = "object-mapper";
+    INPUT_TYPE_NAMES["CODE_EDITOR"] = "code-editor";
+})(INPUT_TYPE_NAMES || (INPUT_TYPE_NAMES = {}));
+export var MODE;
+(function (MODE) {
+    MODE["CREATE"] = "create";
+    MODE["EDIT"] = "edit";
+})(MODE || (MODE = {}));
+let NileSwitcher = class NileSwitcher extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'label');
+        this.current = 0;
+        this.isToggleSwitch = (item) => {
+            return typeof item === 'undefined' || item;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.emit('nile-init');
+    }
+    handleSwitcherChange() {
+        this.setCurrentInput();
+    }
+    setCurrentInput() {
+        if (this.nileSwitchConfig?.inputs) {
+            this.currentInput = this.nileSwitchConfig.inputs.filter((input, index) => {
+                return index === this.current;
+            })[0];
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emit('nile-destroy');
+    }
+    renderNileText(Input) {
+        const { value, label, placeholder, disabled, required, error, errorMessage, inputType, noborder, } = Input;
+        return html `<nile-input
+      class=${classMap({
+            'switcher-input': true,
+            'switcher-input--noborder': !!noborder,
+        })}
+      .value=${value}
+      .label=${label}
+      .disabled=${disabled}
+      .required=${required}
+      .errorMessage=${errorMessage}
+      .placeholder=${placeholder}
+      .error=${error}
+      @nile-input=${(e) => {
+            this.handleChange(e, inputType);
+        }}
+    ></nile-input>`;
+    }
+    renderDropdown(Input) {
+        const { options, multiple, placeholder, disabled, value, error, errorMessage, inputType, noborder, } = Input;
+        return html `<nile-select
+      part="dropdown"
+      class=${classMap({
+            'switcher-dropdown': true,
+            'switcher-dropdown--noborder': !!noborder,
+        })}
+      .placeholder=${placeholder}
+      .disabled="${disabled}"
+      .multiple="${multiple}"
+      .value="${value}"
+      .error="${error}"
+      .errorMessage="${errorMessage}"
+      @nile-change=${(e) => {
+            this.handleChange(e, inputType);
+        }}
+    >
+      ${options?.map((option) => {
+            return html `<nile-option .value="${option}">${option} </nile-option>`;
+        })}
+    </nile-select>`;
+    }
+    renderNileTextArea(Input) {
+        const { value, disabled, readonly, errorMessage, error, inputType } = Input;
+        return html `<nile-textarea
+      class="switcher-textarea"
+      .value=${value}
+      .disabled=${disabled}
+      ?readonly=${readonly}
+      .error=${error}
+      .errorMessage=${errorMessage}
+      @nile-input=${(e) => {
+            this.handleChange(e, inputType);
+        }}
+    ></nile-textarea>`;
+    }
+    renderNileCheckBox(Input) {
+        const { value, label, disabled, inputType } = Input;
+        return html `<nile-checkbox
+        class="switcher-checkbox"
+        .checked=${value}
+        .label=${label}
+        .disabled=${disabled}
+        @valueChange=${(e) => {
+            this.handleChange(e, inputType);
+        }}
+      ></nile-checkbox
+      >; `;
+    }
+    renderNileRadio(Input) {
+        const { options, value, disabled, errorMessage, inputType } = Input;
+        const haserrorMessage = !!errorMessage;
+        return html `<nile-radio-group
+      class="switcher-radio-group"
+      .value=${value}
+      .disabled=${disabled}
+      @change=${(e) => {
+            this.handleChange(e, inputType);
+        }}
+    >
+      ${options &&
+            options.map((option) => {
+                return html `<nile-radio .value="${option}">${option} </nile-radio>`;
+            })}
+      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}
+    </nile-radio-group> `;
+    }
+    renderErrorMessage(errorMessage) {
+        return html `
+      <nile-form-error-message>${errorMessage}</nile-form-error-message>
+    `;
+    }
+    renderContentEditor(Input) {
+        let { options, inputType, errorMessage, type, readonly, noborder, value, updateValue, } = Input;
+        return html `<nile-content-editor
+      class="switcher-content-editor"
+      .value=${value}
+      .options=${options}
+      .type=${type}
+      .readonly=${readonly}
+      .noborder=${noborder}
+      .updateValue=${updateValue}
+      .errorMessage=${errorMessage}
+      @nile-change=${(e) => {
+            this.handleChange(e, inputType);
+        }}
+    >
+    </nile-content-editor>`;
+    }
+    renderObjectMapper(Input) {
+        let { options, inputType, error, errorMessage, type, readonly, noborder } = Input;
+        const value = this.currentInput.mode === MODE.CREATE
+            ? 'Click to Create - Not Mapped'
+            : 'Click to Edit';
+        return html `<nile-input
+      class=${classMap({
+            'switcher-object-mapper': true,
+            'switcher-object-mapper--noborder': !!noborder,
+        })}
+      .value=${value}
+      .errorMessage=${errorMessage}
+      .error=${error}
+      readonly="true"
+      @click="${(e) => this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}"
+    >
+      <nile-icon
+        class="pointer-cursor switcher-object-mapper-icon"
+        slot="suffix"
+        name="var(--nile-icon-expand-2, var(--ng-icon-expand-06))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+        color="var(--nile-colors-primary-600)"
+        size="16"
+      >
+      </nile-icon>
+    </nile-input>`;
+    }
+    renderCodeEditor(Input) {
+        const { value, multiLine, customAutoCompletions, disabled, readonly, errorMessage, error, inputType, noborder, expand, updateValue, } = Input;
+        return html `<nile-code-editor
+      part="switcher-code-editor"
+      exportparts="code-editor-base"
+      class=${classMap({
+            'code-editor': true,
+        })}
+      @nile-expand="${(e) => this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
+      @nile-change="${(e) => this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
+      .multiline="${multiLine}"
+      .value="${value}"
+      .readonly=${readonly}
+      .expandable="${expand}"
+      .error=${error}
+      .noborder=${noborder}
+      .updateValue=${updateValue}
+      .errorMessage=${errorMessage}
+      .customAutoCompletions="${customAutoCompletions}"
+    ></nile-code-editor> `;
+    }
+    handleExpand(event, inputType) {
+        this.currentInput.expand = event.detail.expand;
+        this.emit('nile-change', { input: this.currentInput });
+    }
+    handleChange(event, inputType) {
+        switch (inputType) {
+            case INPUT_TYPE_NAMES.OBJECT_MAPPER:
+                this.currentInput.value = 'clicked';
+                break;
+            case INPUT_TYPE_NAMES.CHECKBOX:
+                this.currentInput.value = event.detail.checked;
+                break;
+            case INPUT_TYPE_NAMES.CODE_EDITOR:
+                this.currentInput.value = event.detail.value;
+                break;
+            default:
+                this.currentInput.value = event.detail.value;
+        }
+        event.stopPropagation();
+        this.emit('nile-change', { input: this.currentInput });
+    }
+    renderIcon() {
+        const inputs = this.nileSwitchConfig.inputs;
+        const toolTipPosition = this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
+        return html `
+      <div part="icons-container" class="switcher-icons-container">
+        ${repeat(inputs, (input, index) => html ` <nile-tooltip
+            class=${classMap({
+            'switcher-tooltip-container': true,
+        })}
+            content=${input.helperText}
+            placement=${toolTipPosition}
+          >
+            <div  class=${classMap({
+            'switcher-icon-container': true,
+            current: index === this.current,
+        })}>
+               <nile-icon
+              size="16"
+              class=${classMap({
+            'pointer-cursor': true,
+            'pointer-cursor-not-allowed': index === this.current,
+        })}
+              .name=${input.icon}
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+              color="#000000"
+              @click=${() => this.toggleField(input, index)}
+            ></nile-icon>
+            <div>
+           
+          </nile-tooltip>`)}
+      </div>
+    `;
+    }
+    toggleField(currentInput, index) {
+        this.emit('nile-switch', {
+            inputClicked: index,
+            currentInput: currentInput,
+        });
+    }
+    singleFieldSwitcher() {
+        this.setCurrentInput();
+        return html `
+      ${choose(this.currentInput.inputType, [
+            [INPUT_TYPE_NAMES.TEXT, () => this.renderNileText(this.currentInput)],
+            [
+                INPUT_TYPE_NAMES.CHECKBOX,
+                () => this.renderNileCheckBox(this.currentInput),
+            ],
+            [
+                INPUT_TYPE_NAMES.TEXTAREA,
+                () => this.renderNileTextArea(this.currentInput),
+            ],
+            [
+                INPUT_TYPE_NAMES.RADIO,
+                () => this.renderNileRadio(this.currentInput),
+            ],
+            [
+                INPUT_TYPE_NAMES.DROPDOWN,
+                () => this.renderDropdown(this.currentInput),
+            ],
+            [
+                INPUT_TYPE_NAMES.CONTENTEDITOR,
+                () => this.renderContentEditor(this.currentInput),
+            ],
+            [
+                INPUT_TYPE_NAMES.OBJECT_MAPPER,
+                () => this.renderObjectMapper(this.currentInput),
+            ],
+            [
+                INPUT_TYPE_NAMES.CODE_EDITOR,
+                () => this.renderCodeEditor(this.currentInput),
+            ],
+        ], () => this.renderNileText(this.currentInput))}
+    `;
+    }
+    render() {
+        const hasLabelSlot = this.hasSlotController.test('label');
+        const align = this.nileSwitchConfig.align;
+        const disable = this.nileSwitchConfig.disable;
+        return html `<div
+      part="base"
+      class=${classMap({
+            'switcher-block': align === POSITIONS.BLOCK,
+            'switcher-inline': align === POSITIONS.INLINE,
+            'switcher-container': true,
+        })}
+    >
+      <div class="label-container">
+        ${hasLabelSlot
+            ? html `
+           <label
+          part="switcher-label"
+          class="switcher__label"
+          for="input"
+        >
+          <slot name="label"></slot>
+        </label>
+          </div> `
+            : ''}
+        ${!disable ? html `${this.renderIcon()}` : ''}
+      </div>
+      ${this.singleFieldSwitcher()}
+    </div>`;
+    }
+};
+/**
+ * The styles for nile switcher
+ * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+ */
+NileSwitcher.styles = styles;
+__decorate([
+    property({ type: Object })
+], NileSwitcher.prototype, "nileSwitchConfig", void 0);
+__decorate([
+    property({ type: Number })
+], NileSwitcher.prototype, "current", void 0);
+__decorate([
+    property({ type: Object })
+], NileSwitcher.prototype, "currentInput", void 0);
+__decorate([
+    watch(['current'], { waitUntilFirstUpdate: true })
+], NileSwitcher.prototype, "handleSwitcherChange", null);
+NileSwitcher = __decorate([
+    customElement('nile-switcher')
+], NileSwitcher);
+export { NileSwitcher };
+export default NileSwitcher;
+//# sourceMappingURL=nile-switcher.js.map

package/dist/src/nile-switcher/nile-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-switcher.css';\nimport NileElement from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { watch } from '../internal/watch';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * @summary Allows you to switch between nile elements\n *\n * @dependency nile-icon\n * @dependency nile-input\n * @dependency nile-checkbox\n * @dependency nile-dropdown\n * @dependency nile-textarea\n *\n * @event nile-change - Emitted when the control's value changes.\n * @event nile-switch - Emitted when the nile component is being switched.\n */\n\nexport interface switchconfig {\n  [key: string]: any;\n  toggleSwitch: boolean;\n  disable?: boolean;\n  confirmation?: boolean;\n  align: 'block' | 'inline';\n  inputs: switchInputType[];\n}\n\nexport interface switchInputType {\n  inputType:\n    | INPUT_TYPE_NAMES.DROPDOWN\n    | INPUT_TYPE_NAMES.TEXT\n    | INPUT_TYPE_NAMES.CHECKBOX\n    | INPUT_TYPE_NAMES.TEXTAREA\n    | INPUT_TYPE_NAMES.RADIO\n    | INPUT_TYPE_NAMES.CONTENTEDITOR\n    | INPUT_TYPE_NAMES.OBJECT_MAPPER\n    | INPUT_TYPE_NAMES.CODE_EDITOR;\n  value?: String | boolean;\n  label?: String;\n  readonly?: boolean;\n  type?: string;\n  icon: string;\n  mode?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  options?: Array<any>;\n  customAutoCompletions?: any;\n  helperText?: string;\n  multiple?: boolean;\n  noborder?: boolean;\n  multiLine?: boolean;\n  expand?: boolean;\n  updateValue?: false;\n}\n\nexport enum POSITIONS {\n  INLINE = 'inline',\n  BLOCK = 'block',\n}\n\nexport enum INPUT_TYPE {\n  DEFAULT = 'defaultInput',\n  SWITCH = 'switchInput',\n}\n\nexport enum INPUT_TYPE_NAMES {\n  DROPDOWN = 'dropdown',\n  TEXT = 'text',\n  CHECKBOX = 'checkbox',\n  TEXTAREA = 'text-area',\n  RADIO = 'radio',\n  CONTENTEDITOR = 'content-editor',\n  OBJECT_MAPPER = 'object-mapper',\n  CODE_EDITOR = 'code-editor',\n}\n\nexport enum MODE {\n  CREATE = 'create',\n  EDIT = 'edit',\n}\n\n@customElement('nile-switcher')\nexport class NileSwitcher extends NileElement {\n  /**\n   * The styles for nile switcher\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'label');\n\n  @property({ type: Object }) nileSwitchConfig: switchconfig;\n\n  @property({ type: Number }) current: Number = 0;\n\n  @property({ type: Object }) currentInput: switchInputType;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n  }\n\n  @watch(['current'], { waitUntilFirstUpdate: true })\n  handleSwitcherChange() {\n    this.setCurrentInput();\n  }\n\n  setCurrentInput() {\n    if (this.nileSwitchConfig?.inputs) {\n      this.currentInput = this.nileSwitchConfig.inputs.filter(\n        (input: switchInputType, index: Number) => {\n          return index === this.current;\n        }\n      )[0];\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  renderNileText(Input: switchInputType) {\n    const {\n      value,\n      label,\n      placeholder,\n      disabled,\n      required,\n      error,\n      errorMessage,\n      inputType,\n      noborder,\n    } = Input;\n    return html`<nile-input\n      class=${classMap({\n        'switcher-input': true,\n        'switcher-input--noborder': !!noborder,\n      })}\n      .value=${value}\n      .label=${label}\n      .disabled=${disabled}\n      .required=${required}\n      .errorMessage=${errorMessage}\n      .placeholder=${placeholder}\n      .error=${error}\n      @nile-input=${(e: CustomEvent) => {\n        this.handleChange(e, inputType);\n      }}\n    ></nile-input>`;\n  }\n\n  renderDropdown(Input: switchInputType) {\n    const {\n      options,\n      multiple,\n      placeholder,\n      disabled,\n      value,\n      error,\n      errorMessage,\n      inputType,\n      noborder,\n    } = Input;\n\n    return html`<nile-select\n      part=\"dropdown\"\n      class=${classMap({\n        'switcher-dropdown': true,\n        'switcher-dropdown--noborder': !!noborder,\n      })}\n      .placeholder=${placeholder}\n      .disabled=\"${disabled}\"\n      .multiple=\"${multiple}\"\n      .value=\"${value}\"\n      .error=\"${error}\"\n      .errorMessage=\"${errorMessage}\"\n      @nile-change=${(e: CustomEvent) => {\n        this.handleChange(e, inputType);\n      }}\n    >\n      ${options?.map((option: any) => {\n        return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n      })}\n    </nile-select>`;\n  }\n\n  renderNileTextArea(Input: switchInputType) {\n    const { value, disabled, readonly, errorMessage, error, inputType } = Input;\n\n    return html`<nile-textarea\n      class=\"switcher-textarea\"\n      .value=${value}\n      .disabled=${disabled}\n      ?readonly=${readonly}\n      .error=${error}\n      .errorMessage=${errorMessage}\n      @nile-input=${(e: CustomEvent) => {\n        this.handleChange(e, inputType);\n      }}\n    ></nile-textarea>`;\n  }\n\n  renderNileCheckBox(Input: switchInputType) {\n    const { value, label, disabled, inputType } = Input;\n\n    return html`<nile-checkbox\n        class=\"switcher-checkbox\"\n        .checked=${value}\n        .label=${label}\n        .disabled=${disabled}\n        @valueChange=${(e: CustomEvent) => {\n          this.handleChange(e, inputType);\n        }}\n      ></nile-checkbox\n      >; `;\n  }\n\n  renderNileRadio(Input: switchInputType) {\n    const { options, value, disabled, errorMessage, inputType } = Input;\n\n    const haserrorMessage = !!errorMessage;\n\n    return html`<nile-radio-group\n      class=\"switcher-radio-group\"\n      .value=${value}\n      .disabled=${disabled}\n      @change=${(e: CustomEvent) => {\n        this.handleChange(e, inputType);\n      }}\n    >\n      ${options &&\n      options.map((option: any) => {\n        return html`<nile-radio .value=\"${option}\">${option} </nile-radio>`;\n      })}\n      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}\n    </nile-radio-group> `;\n  }\n\n  renderErrorMessage(errorMessage: string) {\n    return html`\n      <nile-form-error-message>${errorMessage}</nile-form-error-message>\n    `;\n  }\n\n  renderContentEditor(Input: switchInputType) {\n    let {\n      options,\n      inputType,\n      errorMessage,\n      type,\n      readonly,\n      noborder,\n      value,\n      updateValue,\n    } = Input;\n    return html`<nile-content-editor\n      class=\"switcher-content-editor\"\n      .value=${value}\n      .options=${options}\n      .type=${type}\n      .readonly=${readonly}\n      .noborder=${noborder}\n      .updateValue=${updateValue}\n      .errorMessage=${errorMessage}\n      @nile-change=${(e: CustomEvent) => {\n        this.handleChange(e, inputType);\n      }}\n    >\n    </nile-content-editor>`;\n  }\n\n  renderObjectMapper(Input: switchInputType) {\n    let { options, inputType, error, errorMessage, type, readonly, noborder } =\n      Input;\n\n    const value =\n      this.currentInput.mode === MODE.CREATE\n        ? 'Click to Create - Not Mapped'\n        : 'Click to Edit';\n\n    return html`<nile-input\n      class=${classMap({\n        'switcher-object-mapper': true,\n        'switcher-object-mapper--noborder': !!noborder,\n      })}\n      .value=${value}\n      .errorMessage=${errorMessage}\n      .error=${error}\n      readonly=\"true\"\n      @click=\"${(e: CustomEvent) =>\n        this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}\"\n    >\n      <nile-icon\n        class=\"pointer-cursor switcher-object-mapper-icon\"\n        slot=\"suffix\"\n        name=\"var(--nile-icon-expand-2, var(--ng-icon-expand-06))\"\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        color=\"var(--nile-colors-primary-600)\"\n        size=\"16\"\n      >\n      </nile-icon>\n    </nile-input>`;\n  }\n\n  renderCodeEditor(Input: switchInputType) {\n    const {\n      value,\n      multiLine,\n      customAutoCompletions,\n      disabled,\n      readonly,\n      errorMessage,\n      error,\n      inputType,\n      noborder,\n      expand,\n      updateValue,\n    } = Input;\n    return html`<nile-code-editor\n      part=\"switcher-code-editor\"\n      exportparts=\"code-editor-base\"\n      class=${classMap({\n        'code-editor': true,\n      })}\n      @nile-expand=\"${(e: CustomEvent) =>\n        this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}\"\n      @nile-change=\"${(e: CustomEvent) =>\n        this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}\"\n      .multiline=\"${multiLine}\"\n      .value=\"${value}\"\n      .readonly=${readonly}\n      .expandable=\"${expand}\"\n      .error=${error}\n      .noborder=${noborder}\n      .updateValue=${updateValue}\n      .errorMessage=${errorMessage}\n      .customAutoCompletions=\"${customAutoCompletions}\"\n    ></nile-code-editor> `;\n  }\n\n  handleExpand(event: CustomEvent, inputType: string) {\n    this.currentInput.expand = event.detail.expand;\n    this.emit('nile-change', { input: this.currentInput });\n  }\n\n  handleChange(event: CustomEvent, inputType: string) {\n    switch (inputType) {\n      case INPUT_TYPE_NAMES.OBJECT_MAPPER:\n        this.currentInput.value = 'clicked';\n        break;\n      case INPUT_TYPE_NAMES.CHECKBOX:\n        this.currentInput.value = event.detail.checked;\n        break;\n      case INPUT_TYPE_NAMES.CODE_EDITOR:\n        this.currentInput.value = event.detail.value;\n        break;\n      default:\n        this.currentInput.value = event.detail.value;\n    }\n    event.stopPropagation();\n    this.emit('nile-change', { input: this.currentInput });\n  }\n\n  renderIcon() {\n    const inputs = this.nileSwitchConfig.inputs;\n    const toolTipPosition =\n      this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';\n\n    return html`\n      <div part=\"icons-container\" class=\"switcher-icons-container\">\n        ${repeat(\n          inputs,\n          (input: any, index: number) => html` <nile-tooltip\n            class=${classMap({\n              'switcher-tooltip-container': true,\n            })}\n            content=${input.helperText}\n            placement=${toolTipPosition}\n          >\n            <div  class=${classMap({\n              'switcher-icon-container': true,\n              current: index === this.current,\n            })}>\n               <nile-icon\n              size=\"16\"\n              class=${classMap({\n                'pointer-cursor': true,\n                'pointer-cursor-not-allowed': index === this.current,\n              })}\n              .name=${input.icon}\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n              color=\"#000000\"\n              @click=${() => this.toggleField(input, index)}\n            ></nile-icon>\n            <div>\n           \n          </nile-tooltip>`\n        )}\n      </div>\n    `;\n  }\n\n  isToggleSwitch = (item: any) => {\n    return typeof item === 'undefined' || item;\n  };\n\n  toggleField(currentInput: switchInputType, index: Number) {\n    this.emit('nile-switch', {\n      inputClicked: index,\n      currentInput: currentInput,\n    });\n  }\n\n  singleFieldSwitcher() {\n    this.setCurrentInput();\n\n    return html`\n      ${choose(\n        this.currentInput.inputType,\n        [\n          [INPUT_TYPE_NAMES.TEXT, () => this.renderNileText(this.currentInput)],\n          [\n            INPUT_TYPE_NAMES.CHECKBOX,\n            () => this.renderNileCheckBox(this.currentInput),\n          ],\n          [\n            INPUT_TYPE_NAMES.TEXTAREA,\n            () => this.renderNileTextArea(this.currentInput),\n          ],\n          [\n            INPUT_TYPE_NAMES.RADIO,\n            () => this.renderNileRadio(this.currentInput),\n          ],\n          [\n            INPUT_TYPE_NAMES.DROPDOWN,\n            () => this.renderDropdown(this.currentInput),\n          ],\n          [\n            INPUT_TYPE_NAMES.CONTENTEDITOR,\n            () => this.renderContentEditor(this.currentInput),\n          ],\n          [\n            INPUT_TYPE_NAMES.OBJECT_MAPPER,\n            () => this.renderObjectMapper(this.currentInput),\n          ],\n          [\n            INPUT_TYPE_NAMES.CODE_EDITOR,\n            () => this.renderCodeEditor(this.currentInput),\n          ],\n        ],\n        () => this.renderNileText(this.currentInput)\n      )}\n    `;\n  }\n\n  public render(): TemplateResult {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const align = this.nileSwitchConfig.align;\n    const disable = this.nileSwitchConfig.disable;\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        'switcher-block': align === POSITIONS.BLOCK,\n        'switcher-inline': align === POSITIONS.INLINE,\n        'switcher-container': true,\n      })}\n    >\n      <div class=\"label-container\">\n        ${hasLabelSlot\n          ? html`\n           <label\n          part=\"switcher-label\"\n          class=\"switcher__label\"\n          for=\"input\"\n        >\n          <slot name=\"label\"></slot>\n        </label>\n          </div> `\n          : ''}\n        ${!disable ? html`${this.renderIcon()}` : ''}\n      </div>\n      ${this.singleFieldSwitcher()}\n    </div>`;\n  }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-switcher': NileSwitcher;\n  }\n}\n"]}

package/dist/src/nile-tab/index.js

@@ -0,0 +1,2 @@
+export { NileTab } from './nile-tab';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { NileTab } from './nile-tab';\n"]}

package/dist/src/nile-tab/nile-tab.css.js

@@ -0,0 +1,98 @@
+/**
+ * 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';
+/**
+ * Tab CSS
+ */
+export const styles = css `
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: inline-block;
+    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));
+    --tab-hover-background-color:transparent;
+    --tab-active-background-color: transparent;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  :host([centered]) {
+    flex: 1;
+    text-align: center;
+  }
+
+  .tab {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    border-radius: var(--tab-border-radius);
+    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));
+    padding: var(--tab-padding);
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+    transition: 0.2s box-shadow, 0.2s color;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    height: 36px;
+    box-sizing: border-box;
+  }
+
+  .tab:hover:not(.tab--disabled) {
+    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--tab-hover-background-color);
+  }
+
+  .tab:focus {
+    outline: none;
+  }
+
+  .tab:focus-visible:not(.tab--disabled) {
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+  }
+
+  .tab.tab--active:not(.tab--disabled) {
+    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--tab-active-background-color);
+  }
+
+  .tab.tab--closable {
+    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .tab.tab--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab__close-button {
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .tab__close-button::part(base) {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  @media (forced-colors: active) {
+    .tab.tab--active:not(.tab--disabled) {
+      outline: solid 1px transparent;
+      outline-offset: -3px;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-tab.css.js.map

package/dist/src/nile-tab/nile-tab.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab.css.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tab CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tab/nile-tab.js

@@ -0,0 +1,137 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-tab.css';
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { query } from 'lit/decorators.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+let id = 0;
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tab
+ *
+ *
+ * @dependency nile-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event nile-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<nile-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+let NileTab = class NileTab extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.attrId = ++id;
+        this.componentId = `nile-tab-${this.attrId}`;
+        /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+        this.panel = '';
+        /** Draws the tab in an active state. */
+        this.active = false;
+        /** Makes the tab closable and shows a close button. */
+        this.closable = false;
+        /** Disables the tab and prevents selection. */
+        this.disabled = false;
+        this.centered = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tab');
+    }
+    handleCloseClick(event) {
+        event.stopPropagation();
+        this.emit('nile-close');
+    }
+    handleActiveChange() {
+        if (this.active)
+            this.emit('nile-toggle-change', { value: this.panel });
+        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+    }
+    handleDisabledChange() {
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
+    /** Sets focus to the tab. */
+    focus(options) {
+        this.tab.focus(options);
+    }
+    /** Removes focus from the tab. */
+    blur() {
+        this.tab.blur();
+    }
+    render() {
+        // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+        this.id = this.id.length > 0 ? this.id : this.componentId;
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            tab: true,
+            'tab--centered': this.centered,
+            'tab--active': this.active,
+            'tab--closable': this.closable,
+            'tab--disabled': this.disabled
+        })}
+        tabindex=${this.disabled ? '-1' : '0'}
+      >
+      <slot name="prefix"></slot>
+        <slot></slot>
+        ${this.closable
+            ? html `
+              <nile-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                name="var(--nile-icon-close, var(--ng-icon-x-close))"
+                library="system"
+                label="close"
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                tabindex="-1"
+              ></nile-icon-button>
+            `
+            : ''}
+      </div>
+    `;
+    }
+};
+NileTab.styles = styles;
+__decorate([
+    query('.tab')
+], NileTab.prototype, "tab", void 0);
+__decorate([
+    property({ reflect: true })
+], NileTab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileTab.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTab.prototype, "centered", void 0);
+__decorate([
+    watch('active')
+], NileTab.prototype, "handleActiveChange", null);
+__decorate([
+    watch('disabled')
+], NileTab.prototype, "handleDisabledChange", null);
+NileTab = __decorate([
+    customElement('nile-tab')
+], NileTab);
+export { NileTab };
+export default NileTab;
+//# sourceMappingURL=nile-tab.js.map