@aquera/nile-elements 0.0.6-7 → 0.0.6-8

package/package.json

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

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

@@ -445,6 +445,7 @@ export class NileInput extends NileElement implements NileFormControl {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const hasClearIcon =
@@ -474,6 +475,8 @@ export class NileInput extends NileElement implements NileFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <div
             part="base"

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

@@ -209,6 +209,7 @@ export class NileRadioGroup extends NileElement {
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
@@ -247,6 +248,8 @@ export class NileRadioGroup extends NileElement {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <div class="visually-hidden">
             <label class="radio-group__validation">

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

@@ -873,6 +873,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
@@ -903,6 +904,8 @@ export class NileSelect extends NileElement implements NileFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <nile-popup
             class=${classMap({

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

@@ -56,18 +56,7 @@ export class NileSwitcher extends NileElement {
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
   static styles: CSSResultGroup = styles;
-  @property({ type: Object }) nileSwitchConfig: switchconfig = {
-    toggleSwitch: false,
-    defaultInput: {
-      inputType: 'radio',
-      value: 'True',
-      options: ['True', 'False'],
-    },
-    switchInput: {
-      inputType: 'text-area',
-      value: 'test',
-    },
-  };
+  @property({ type: Object }) nileSwitchConfig: switchconfig;
 
   connectedCallback() {
     super.connectedCallback();
@@ -93,19 +82,18 @@ export class NileSwitcher extends NileElement {
   }
 
   renderDropdown(Input: switchInputType, inputType: string) {
-    const { options, multiple, placeholder } = Input;
+    const { options, multiple, placeholder, disabled } = Input;
     return html`<nile-select
       .placeholder=${placeholder}
+      .disabled="${disabled}"
       .multiple="${multiple}"
       @nile-change=${(e: CustomEvent) => {
         this.handleChange(e, inputType);
       }}
-      ${
-        options &&
-        options.map((option: any) => {
-          return html`<nile-option .value="${option}">${option} </nile-option>`;
-        })
-      }
+    >
+      ${options?.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
     </nile-select>`;
   }
 
@@ -134,10 +122,11 @@ export class NileSwitcher extends NileElement {
   }
 
   renderNileRadio(Input: switchInputType, inputType: string) {
-    const { options, value } = Input;
+    const { options, value, disabled } = Input;
 
     return html`<nile-radio-group
       .value=${value}
+      .disabled=${disabled}
       @change=${(e: CustomEvent) => {
         this.handleChange(e, inputType);
       }}
@@ -155,7 +144,7 @@ export class NileSwitcher extends NileElement {
     } else {
       this.nileSwitchConfig.switchInput.value = event.detail.value;
     }
-    console.log(this.nileSwitchConfig);
+    event.stopPropagation();
     this.emit('nile-change', { config: this.nileSwitchConfig });
   }