@aquera/nile-elements 0.0.38-6 → 0.0.39

package/src/nile-popover/nile-popover.ts

@@ -0,0 +1,138 @@
+/**
+ * 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 {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import { styles } from './nile-popover.css';
+import type NilePopup from '../nile-popup/nile-popup';
+import { string } from '../nile-icon/icons/svg';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popover
+ *
+ */
+@customElement('nile-popover')
+export class NilePopover extends LitElement {
+  /**
+   * The styles for Popover
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip
+   * inside of the viewport.
+   */
+  @property() placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'top';
+
+  /** The distance in pixels from which to offset the popover away from its target. */
+  @property({ type: Number }) distance = 18;
+
+  /** Gives the title to the popover */
+  @property({ type: String }) title = '';
+
+  @state() private isShow = false;
+
+  @property({ attribute: 'arrow-placement' }) arrowPlacement:
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'anchor' = 'anchor';
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleDocumentClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.handleDocumentClick);
+  }
+
+  private handleClick = () => {
+    this.isShow = !this.isShow;
+  };
+
+  private handleDocumentClick = () => {
+    if (this.isShow) {
+      this.isShow = !this.isShow;
+    }
+  };
+
+  public render(): TemplateResult {
+    return html`
+      <nile-popup
+        active
+        ?arrow="${this.title ? this.isShow : false}"
+        distance="${this.distance}"
+        placement="${this.placement}"
+        @click=${(e: Event) => e.stopPropagation()}
+        arrowPlacement="${this.arrowPlacement}"
+        flip
+        shift
+      >
+        <slot
+          slot="anchor"
+          name="anchor"
+          aria-describedby="tooltip"
+          @click=${this.handleClick}
+        ></slot>
+        ${this.title && this.isShow
+          ? html` <div
+              part="popover"
+              class="popover__box"
+            >
+              <slot name="title" class="popover__title">${this.title}</slot>
+              <slot></slot>
+              <slot name="action" class="popover__action"> </slot>
+            </div>`
+          : html``}
+      </nile-popup>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NilePopover;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-popover': NilePopover;
+  }
+}

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

@@ -121,4 +121,9 @@ export const styles = css`
     font-size: var(--nile-type-scale-3);
     margin-top: 2px;
   }
+  .radio__label_border {
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid var(--Neutral-Normal, #E5E9EB);
+  }
 `;

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

@@ -48,6 +48,9 @@ export class NileRadio extends NileElement {
   /** Disables the radio. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** The radio's labelborder. */
+  @property({ type: Boolean, reflect: true }) islabelborder = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleBlur = this.handleBlur.bind(this);
@@ -129,6 +132,7 @@ export class NileRadio extends NileElement {
           'radio--disabled': this.disabled,
           'radio--focused': this.hasFocus,
           'radio--medium': this.size === 'medium',
+          'radio__label_border':this.islabelborder
         })}
       >
         <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">

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

@@ -8,7 +8,7 @@ export default css`
 
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: 1.3rem !important;
+    margin-right: 24px !important;
   }
 
   .form-control {

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

@@ -70,6 +70,9 @@ export class NileRadioGroup extends NileElement {
 
   @property({ attribute: 'error-message' }) errorMessage = '';
 
+  /** The radio's labelborder for whole gp. */
+  @property({ type: Boolean, reflect: true }) islabelborder = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -176,9 +179,14 @@ export class NileRadioGroup extends NileElement {
   private handleSlotChange() {
     const radios = this.getAllRadios();
 
-    radios.forEach(radio => (radio.checked = radio.value === this.value));
-
-    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'nile-radio-button');
+    radios.forEach(radio => {
+      radio.checked = radio.value === this.value;
+      if (this.islabelborder) {
+        radio.islabelborder=true;
+      }
+    });
+    const nile_radio_check='nile-radio-button';
+    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === nile_radio_check);
 
     if (!radios.some(radio => radio.checked)) {
       if (this.hasButtonGroup) {

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

@@ -37,6 +37,7 @@ import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -152,6 +153,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) optionsLoading = false;
 
+  @property({ type: Boolean, reflect: true }) noWidthSync = false;
+
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
@@ -1055,7 +1058,7 @@ export class NileSelect extends NileElement implements NileFormControl {
             distance="6"
             flip
             shift
-            sync="width"
+            sync=${ifDefined(!this.noWidthSync ? 'width' : undefined)}
             auto-size="vertical"
             auto-size-padding="10"
           >

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

@@ -19,6 +19,11 @@ export const styles = css`
     display: inline-block;
   }
 
+  :host([centered]) {
+    flex: 1;
+    text-align: center;
+  }
+
   .tab {
     display: inline-flex;
     align-items: center;

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

@@ -55,6 +55,8 @@ export class NileTab extends NileElement {
   /** Disables the tab and prevents selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  @property({ type: Boolean, reflect: true }) centered = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'tab');
@@ -94,6 +96,7 @@ export class NileTab extends NileElement {
         part="base"
         class=${classMap({
           tab: true,
+          'tab--centered': this.centered,
           'tab--active': this.active,
           'tab--closable': this.closable,
           'tab--disabled': this.disabled

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

@@ -75,6 +75,9 @@ export class NileTabGroup extends NileElement {
   /** Disables the scroll arrows that appear when tabs overflow. */
   @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
 
+  /** Controls whether tabs are centered and have equal width */
+  @property({ type: Boolean, reflect: true }) centered = false;
+
   connectedCallback() {
     const whenAllDefined = Promise.allSettled([
       customElements.whenDefined('nile-tab'),
@@ -335,6 +338,10 @@ export class NileTabGroup extends NileElement {
     this.panels = this.getAllPanels();
     this.syncIndicator();
 
+    this.tabs.forEach((tab:any) => {
+      tab.centered = this.centered;
+    });
+
     // After updating, show or hide scroll controls as needed
     this.updateComplete.then(() => this.updateScrollControls());
   }

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

@@ -1,18 +1,17 @@
 /**
-* 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.
-*/
+ * 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-element';
+import { css } from 'lit-element';
 
 /**
  * Tooltip CSS
  */
 export const styles = css`
-
-:host {
+  :host {
     --max-width: 20rem;
     --hide-delay: 0ms;
     --show-delay: 150ms;
@@ -52,14 +51,20 @@ export const styles = css`
     max-width: var(--max-width);
     border-radius: 0.25rem;
     background-color: hsl(240 3.7% 15.9%);
-    font-size: 0.875rem;
+    font-size: 10.24px;
     font-weight: 400;
-    line-height: 1;
+    line-height: 10.24px;
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;
     word-break: break-word;
   }
+
+  .tooltip__body--large {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 500;
+  }
 `;
 
 export default [styles];

package/src/nile-tooltip/nile-tooltip.ts

@@ -5,13 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, CSSResultArray, TemplateResult} from 'lit-element';
-import {styles} from './nile-tooltip.css';
+import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import { styles } from './nile-tooltip.css';
 import '../nile-popup/nile-popup';
 import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
-import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import {
+  getAnimation,
+  setDefaultAnimation,
+} from '../utilities/animation-registry';
 import { html } from 'lit';
 // import { LocalizeController } from '../utilities/localize';
 import { waitForEvent } from '../internal/event';
@@ -27,15 +30,13 @@ import type NilePopup from '../nile-popup/nile-popup';
  */
 @customElement('nile-tooltip')
 export class NileTooltip extends NileElement {
-
-	/**
-	 * The styles for Tooltip
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
+  /**
+   * The styles for Tooltip
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
 
   private hoverTimeout: number;
   // private readonly localize = new LocalizeController(this);
@@ -47,6 +48,9 @@ export class NileTooltip extends NileElement {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   @property({ type: String, reflect: true }) content = '';
 
+  /** Size Property to decide the tool tip size */
+  @property({ reflect: true }) size: 'small' | 'large' = 'small';
+
   /**
    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
    * inside of the viewport.
@@ -162,7 +166,9 @@ export class NileTooltip extends NileElement {
 
   private handleMouseOver() {
     if (this.hasTrigger('hover')) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--show-delay')
+      );
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.show(), delay);
     }
@@ -170,7 +176,9 @@ export class NileTooltip extends NileElement {
 
   private handleMouseOut() {
     if (this.hasTrigger('hover')) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--hide-delay')
+      );
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
     }
@@ -194,7 +202,9 @@ export class NileTooltip extends NileElement {
       await stopAnimations(this.body);
       this.body.hidden = false;
       this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: '' });
+      const { keyframes, options } = getAnimation(this, 'tooltip.show', {
+        dir: '',
+      });
       await animateTo(this.popup.popup, keyframes, options);
 
       this.emit('nile-after-show');
@@ -203,7 +213,9 @@ export class NileTooltip extends NileElement {
       this.emit('nile-hide');
 
       await stopAnimations(this.body);
-      const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: '' });
+      const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
+        dir: '',
+      });
       await animateTo(this.popup.popup, keyframes, options);
       this.popup.active = false;
       this.body.hidden = true;
@@ -229,7 +241,7 @@ export class NileTooltip extends NileElement {
 
   /** Shows the tooltip. */
   async show() {
-    if (this.open || !(this.content?.trim().length)) {
+    if (this.open || !this.content?.trim().length) {
       return undefined;
     }
 
@@ -257,7 +269,7 @@ export class NileTooltip extends NileElement {
         "
         class=${classMap({
           tooltip: true,
-          'tooltip--open': this.open
+          'tooltip--open': this.open,
         })}
         placement=${this.placement}
         distance=${this.distance}
@@ -273,7 +285,10 @@ export class NileTooltip extends NileElement {
           name="content"
           part="body"
           id="tooltip"
-          class="tooltip__body"
+          class=${classMap({
+            tooltip__body: true,
+            'tooltip__body--large': this.size === 'large',
+          })}
           role="tooltip"
           aria-live=${this.open ? 'polite' : 'off'}
         >
@@ -287,17 +302,17 @@ export class NileTooltip extends NileElement {
 setDefaultAnimation('tooltip.show', {
   keyframes: [
     { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 1, scale: 1 },
   ],
-  options: { duration: 150, easing: 'ease' }
+  options: { duration: 150, easing: 'ease' },
 });
 
 setDefaultAnimation('tooltip.hide', {
   keyframes: [
     { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 0, scale: 0.8 },
   ],
-  options: { duration: 150, easing: 'ease' }
+  options: { duration: 150, easing: 'ease' },
 });
 
 export default NileTooltip;