@aquera/nile-elements 0.0.72 → 0.0.73

package/package.json

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

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

@@ -107,11 +107,12 @@ export class NileCalendar extends NileElement {
   }
 
   @watch('allowedDates')
-  checkValidAllowedDate() {
+  checkValidAllowedDate() {    
     if (Object.keys(this.allowedDates).length ==0) {
       this.validAllowedDates = false;
       return;
     }
+    this.hideInput=true;
     const startDate = new Date(
       Date.UTC(
         this.allowedDates?.startDate?.slice(0, 4),
@@ -137,6 +138,8 @@ export class NileCalendar extends NileElement {
     }
   }
 
+  @state() hideInput: Boolean = false;
+
   @property({ type: Boolean,attribute:'hide-time-input' }) hideTimeInput: Boolean = false;
 
   @property({ type: Array, attribute: 'hide-duration-fields' })
@@ -871,12 +874,14 @@ export class NileCalendar extends NileElement {
           <div class="calender-input">
             <div>
                   <span class="manual-input-label">From </span>
-                  <div class="from">
-                        <nile-input class="manual-input" value="${this.formatDate(
+                  <div class="from"> 
+                    ${!this.hideInput ? html`<nile-input class="manual-input" value="${this.formatDate(
                           this.startDate
                         )}" placeholder="DD/MM/YYYY" @nile-change="${
                         this.handleStartDateInput
-                      }"></nile-input>
+                      }">
+                      </nile-input>`:html`` }
+                   
                         <nile-input class="manual-input  ${this.hideTimeInput ? 'hidden':''}" value="${this.formatTime(
                           this.startDate
                         )}" placeholder="HH:MM:SS" @nile-change="${
@@ -888,11 +893,12 @@ export class NileCalendar extends NileElement {
             <div>
                   <span class="manual-input-label">To </span>
                   <div class="from">
-                      <nile-input class="manual-input" value="${this.formatDate(
+                    ${!this.hideInput ? html`<nile-input class="manual-input" value="${this.formatDate(
                         this.endDate
                       )}" placeholder="DD/MM/YYYY" @nile-change="${
                         this.handleEndDateInput
-                      }"></nile-input>
+                      }"></nile-input>`:html``}
+                   
                       <nile-input class="manual-input  ${this.hideTimeInput ? 'hidden':''} " value="${this.formatTime(
                         this.endDate
                       )}" placeholder="HH:MM:SS" @nile-change="${

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

@@ -123,6 +123,11 @@ export const styles = css`
     box-sizing: border-box;
   }
 
+  .checkbox__icon__container{
+    display:flex;
+    align-items:center;
+  }
+
   .checkbox__label__text {
     display: block;
     font-size: 14px;

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

@@ -112,6 +112,10 @@ export class NileCheckbox extends NileElement {
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
+  @query('.checkbox__label__text') labelContainer:HTMLElement;
+
+  @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;
+
   private handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
@@ -177,6 +181,7 @@ export class NileCheckbox extends NileElement {
     if (changedProperties.has('helpText')) {
       this.updateHostClass();
     }
+    this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';
   }
 
   private updateHostClass() {
@@ -200,57 +205,59 @@ export class NileCheckbox extends NileElement {
           'checkbox--disabled': this.disabled,
           'checkbox--focused': this.hasFocus,
           'checkbox--indeterminate': this.indeterminate
-        })}
+        })} 
       >
-        <span
-          part="control${this.checked ? ' control--checked' : ''}${this
-            .indeterminate
-            ? ' control--indeterminate'
-            : ''}"
-          class="checkbox__control"
-        >
-          <!-- An empty title prevents browser validation tooltips from appearing on hover -->
-          <input
-            class="checkbox__input"
-            type="checkbox"
-            title=${ this.title }
-            name=${this.name}
-            value=${ifDefined(this.value)}
-            .indeterminate=${live(this.indeterminate)}
-            .checked=${live(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            aria-checked=${this.checked ? 'true' : 'false'}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-          />
-          ${this.checked
-            ? html`
-                <nile-icon
-                  part="checked-icon"
-                  class="checkbox__checked-icon"
-                  color="white"
-                  library="system"
-                  name="tick"
-                  size="12"
-                ></nile-icon>
-              `
-            : ''}
-          ${!this.checked && this.indeterminate
-            ? html`
-                <nile-icon
-                  part="indeterminate-icon"
-                  class="checkbox__indeterminate-icon"
-                  library="system"
-                  color="white"
-                  name="minus"
-                  size="12"
-                ></nile-icon>
-              `
-            : ''}
-        </span>
+        <div class="checkbox__icon__container">
+          <span
+            part="control${this.checked ? ' control--checked' : ''}${this
+              .indeterminate
+              ? ' control--indeterminate'
+              : ''}"
+            class="checkbox__control"
+          >
+            <!-- An empty title prevents browser validation tooltips from appearing on hover -->
+            <input
+              class="checkbox__input"
+              type="checkbox"
+              title=${ this.title }
+              name=${this.name}
+              value=${ifDefined(this.value)}
+              .indeterminate=${live(this.indeterminate)}
+              .checked=${live(this.checked)}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              aria-checked=${this.checked ? 'true' : 'false'}
+              @click=${this.handleClick}
+              @input=${this.handleInput}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+            />
+            ${this.checked
+              ? html`
+                  <nile-icon
+                    part="checked-icon"
+                    class="checkbox__checked-icon"
+                    color="white"
+                    library="system"
+                    name="tick"
+                    size="12"
+                  ></nile-icon>
+                `
+              : ''}
+            ${!this.checked && this.indeterminate
+              ? html`
+                  <nile-icon
+                    part="indeterminate-icon"
+                    class="checkbox__indeterminate-icon"
+                    library="system"
+                    color="white"
+                    name="minus"
+                    size="12"
+                  ></nile-icon>
+                `
+              : ''}
+          </span>
+        </div>
 
         <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel?'margin-left:0;':''}">
           ${this.label ? html`<span class="checkbox__label__text">${this.label}</span>` : ``}