@aquera/nile-elements 0.0.118 → 0.0.119

package/package.json

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

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

@@ -63,15 +63,6 @@ export const styles = css`
 		grid-row-gap: var(--nile-spacing-spacing-xs, 3px);
   }
 
-
-  @media not all and (min-resolution: .001dpcm) {
-    @supports (-webkit-appearance:none)
-    { .day-names, .days_container {
-       /* column-gap: 6px; */
-      }
-    }
-  }
-
   .day_date ,.day_name{
 		font-family: var( --nile-font-family-serif);
 		font-style: normal;
@@ -284,6 +275,11 @@ export const styles = css`
     background:#005291;
   }
 
+  nile-input::part(input)::-webkit-inner-spin-button,
+  nile-input::part(input)::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+
   .hidden {
     display: none !important;
   }

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

@@ -273,7 +273,9 @@ export class NileCalendar extends NileElement {
       <div class="unit-input-container">
         <nile-input 
         class="manual-input duration-input" 
-        label="Duration"  
+        label="Duration"
+        inputmode="numeric"
+        type="number"
         value="${this.selectedValue}" 
         @nile-input="${this.handleDurationChange}"
         placeholder="Enter Value"
@@ -281,7 +283,6 @@ export class NileCalendar extends NileElement {
 
         <nile-select class="manual-input time-input"  
           label="Unit of time" 
-          style="margin-top:3px" 
           value="${ this.selectedUnit }"
           @nile-change="${this.handleUnitChange}"
         >
@@ -553,8 +554,13 @@ export class NileCalendar extends NileElement {
   /**
    * Function to handle relative date selection
    */
-  handleDurationChange(event: any) {
-    this.selectedValue = Number(event.detail.value);
+  handleDurationChange(event: CustomEvent) {
+    event.detail.value = event.detail.value.replace(/e/gi, "");
+    const duration=Number(event.detail.value);
+    if(!duration) {
+      return
+    };
+    this.selectedValue = duration
     if (this.selectedUnit && this.selectedValue) {
       this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
     }

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

@@ -540,9 +540,10 @@ export class NileInput extends NileElement implements NileFormControl {
 
         <div part="form-control-input" class="form-control-input">
         <nile-popup ?active=${this.hasPrintableCharacters}
-        placement="bottom-start"
-        distance="5"
-        strategy="fixed"
+          placement="bottom-start"
+          distance="5"
+          exportparts="input"
+          strategy="fixed"
         >
           <div
             slot="anchor"
@@ -595,7 +596,7 @@ export class NileInput extends NileElement implements NileFormControl {
               step=${ifDefined(this.step as number)}
               .value=${live(this.value)}
               autocapitalize=${ifDefined(this.autocapitalize)}
-              autocomplete=${ifDefined(this.autocomplete)}
+              autocomplete=${ifDefined(this.autocomplete as any)}
               autocorrect=${ifDefined(this.autocorrect)}
               ?autofocus=${this.autofocus}
               spellcheck=${this.spellcheck}

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

@@ -26,6 +26,7 @@ export const styles = css`
     height: 38px;
     box-sizing: border-box;
     cursor: pointer;
+    text-decoration:none;
   }
 
   .link__label {

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

@@ -44,6 +44,8 @@ export class NileLink extends NileElement {
 
   @property({ type: Boolean }) button = false;
 
+  @property({ type: String }) href:string;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
@@ -89,8 +91,9 @@ export class NileLink extends NileElement {
    */
   public render(): TemplateResult {
     return html`
-      <div
+      <a
         part="base"
+        href="${ifDefined(this.href)}"
         class=${classMap({
           'link': true,
           'link--disabled': this.disabled,
@@ -110,7 +113,7 @@ export class NileLink extends NileElement {
         <slot name="prefix" part="prefix" class="link__prefix"></slot>
         <slot part="label" class="link__label"></slot>
         <slot name="suffix" part="suffix" class="link__suffix"></slot>
-      </div>
+      </a>
     `;
   }
 

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

@@ -36,13 +36,13 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: block;
-    margin-bottom: 12px;
+    margin-bottom: 6px;
     color: var(--nile-colors-dark-900);
     font-family: Colfax-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    line-height: 14px;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 

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

@@ -1,9 +1,21 @@
 import { css } from 'lit';
 
 export default css`
+  :host{
+    --slide-toggle-width:auto;
+    display:inline-block;
+    width:var(--slide-toggle-width);
+  }
+
   .nile-slide-toggle {
     display: inline-flex;
     align-items: baseline;
+    justify-content:space-between;
+    width:100%;
+  }
+
+  .nile-slide-toggle--reverse{
+    flex-direction:row-reverse;
   }
 
   .nile-slide-toggle__switch {
@@ -13,24 +25,33 @@ export default css`
     width: 36px;
     height: 20px;
     line-height: 22px;
+  }
+
+  .nile-slide-toggle__switch--left{
     margin-right: 8px;
   }
 
+  .nile-slide-toggle__switch--right{
+    margin-left: 8px;
+  }
+
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    font-size: 14px;
-    color: var(--nile-colors-gray-light-mode-700);
+    gap: 2px;
     font-family: var(--nile-font-family-serif);
-    font-size: 14px;
+    letter-spacing: 0.2px;
     font-style: normal;
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
     font-weight: 500;
     line-height: 20px;
-    letter-spacing: 0.2px;
-    gap: 2px;
   }
 
   .nile-slide-toggle__sublabel {
+    font-family: var(--nile-font-family-serif);
+    letter-spacing: 0.2px;
+    font-style: normal;
     color: var(--nile-colors-gray-light-mode-600);
     font-size: 12px;
     font-weight: 400;

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
 import { LitElement, html, property, customElement } from 'lit-element';
 import styles from './nile-slide-toggle.css';
 import NileElement from '../internal/nile-element';
@@ -9,10 +9,15 @@ export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
   @property({ type: String }) label = '';
+
   @property({ type: String }) sublabel = '';
 
+  @property({ type: String, attribute:'text-position' }) textPosition:'left' | 'right' = 'right';
+
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
+  @property({ type: Boolean, reflect: true, attribute:'full-width' }) fullWidth = false;
+
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
@@ -22,6 +27,7 @@ export class NileSlideToggle extends NileElement {
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
+    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')
   }
 
   disconnectedCallback() {
@@ -44,9 +50,16 @@ export class NileSlideToggle extends NileElement {
         class=${classMap({
           'nile-slide-toggle': true,
           'nile-slide--disabled': this.disabled,
+          'nile-slide-toggle--reverse':this.textPosition=='left'
         })}
       >
-        <label class="nile-slide-toggle__switch">
+        <label 
+        class="${classMap({
+          'nile-slide-toggle__switch':true,
+          'nile-slide-toggle__switch--left':this.textPosition=='right',
+          'nile-slide-toggle__switch--right':this.textPosition=='left',
+        })}"
+        class="nile-slide-toggle__switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}