@aquera/nile-elements 0.0.21 → 0.0.23

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

@@ -83,6 +83,8 @@ export class NileSwitcher extends NileElement {
   static styles: CSSResultGroup = styles;
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
+  @property() value: string;
+
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -124,12 +126,19 @@ export class NileSwitcher extends NileElement {
       multiple,
       placeholder,
       disabled,
+      value,
+      error,
+      errorMessage,
       inputType: inputTypeName,
     } = Input;
+
     return html`<nile-select
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
+      .value="${value}"
+      .error="${error}"
+      .errorMessage="${errorMessage}"
       @nile-change=${(e: CustomEvent) => {
         this.handleChange(e, inputType, inputTypeName);
       }}
@@ -166,35 +175,50 @@ export class NileSwitcher extends NileElement {
     const { value, label, disabled, inputType: inputTypeName } = Input;
 
     return html`<nile-checkbox
-      .checked=${value}
-      .label=${label}
-      .disabled=${disabled}
-      @valueChange=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
-      }}
-    ></nile-checkbox>`;
+        .checked=${value}
+        .label=${label}
+        .disabled=${disabled}
+        @valueChange=${(e: CustomEvent) => {
+          this.handleChange(e, inputType, inputTypeName);
+        }}
+      ></nile-checkbox
+      >; `;
   }
 
   renderNileRadio(Input: switchInputType, inputType: string) {
-    const { options, value, disabled, inputType: inputTypeName } = Input;
+    const {
+      options,
+      value,
+      disabled,
+      inputType: inputTypeName,
+      errorMessage,
+    } = Input;
+
+    const haserrorMessage = !!errorMessage;
 
     return html`<nile-radio-group
-      .value=${value}
-      .disabled=${disabled}
-      @change=${(e: CustomEvent) => {
-        this.handleChange(e, inputType, inputTypeName);
-      }}
-    >
-      ${options &&
-      options.map((option: any) => {
-        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
-      })}
-    </nile-radio-group>`;
+        .value=${value}
+        .disabled=${disabled}
+        @change=${(e: CustomEvent) => {
+          this.handleChange(e, inputType, inputTypeName);
+        }}
+      >
+        ${options &&
+        options.map((option: any) => {
+          return html`<nile-radio .value="${option}">${option} </nile-radio>`;
+        })}
+      </nile-radio-group>
+      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}`;
+  }
+
+  renderErrorMessage(errorMessage: string) {
+    return html`
+      <nile-form-error-message>${errorMessage}</nile-form-error-message>
+    `;
   }
 
   renderContentEditor(Input: switchInputType, inputType: string) {
-    const {
-      value,
+    let {
       options,
       inputType: inputTypeName,
       errorMessage,
@@ -203,7 +227,7 @@ export class NileSwitcher extends NileElement {
       noborder,
     } = Input;
     return html`<nile-content-editor
-      .value=${value}
+      .value=${this.value}
       .options=${options}
       .type=${type}
       .readonly=${readonly}

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

@@ -38,7 +38,7 @@ export const styles = css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-900);
   }
 
   .tab:focus {