@aquera/nile-elements 1.3.9-beta-1.4 → 1.4.0-beta-1.0

package/src/nile-side-bar-footer-text/nile-side-bar-footer-text.css.ts

@@ -14,7 +14,7 @@ export const styles = css`
 
   .main {
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     white-space: nowrap;
     overflow: hidden;

package/src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.ts

@@ -9,8 +9,8 @@ export const styles = css`
     flex: 1 1 auto;        
     min-width: 0;         
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  
-    line-height: var(--nile-line-height-small)
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-small);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
     white-space: nowrap;

package/src/nile-skeleton-loader/index.ts

@@ -0,0 +1,2 @@
+export { NileSkeletonLoader } from './nile-skeleton-loader';
+

package/src/nile-skeleton-loader/nile-skeleton-loader.css.ts

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton-loader {
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton {
+    display: block;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));
+    animation: blink 1.2s ease-in-out infinite;
+    box-sizing: border-box;
+  }
+
+  .skeleton--rectangular {
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+  }
+
+  .skeleton--circular {
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+  }
+
+  .skeleton--text {
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    height: 1em;
+  }
+
+  .skeleton--rounded {
+    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md));
+  }
+
+  @keyframes blink {
+    0%, 100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+`;
+
+export default [styles];
+

package/src/nile-skeleton-loader/nile-skeleton-loader.ts

@@ -0,0 +1,106 @@
+import {
+  LitElement,
+  html,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-skeleton-loader.css';
+import NileElement from '../internal/nile-element';
+
+@customElement('nile-skeleton-loader')
+export class NileSkeletonLoader extends NileElement {
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' | 'rounded' = 'text';
+
+  @property({ type: String }) width: string | number = '';
+
+  @property({ type: String }) height: string | number = '';
+
+  @property({ type: String, attribute: 'border-radius' }) borderRadius = '';
+
+  private formatDimension(value: string | number): string {
+    if (!value) return '';
+    if (typeof value === 'number') {
+      return `${value}px`;
+    }
+    const trimmed = String(value).trim();
+    if (/^\d+(\.\d+)?$/.test(trimmed)) {
+      return `${trimmed}px`;
+    }
+    return trimmed;
+  }
+
+  private getComputedWidth(): string {
+    const formattedWidth = this.formatDimension(this.width);
+    if (formattedWidth) {
+      return formattedWidth;
+    }
+    return this.variant === 'circular' ? '40px' : 'calc(100% - 20px)';
+  }
+
+  private getComputedHeight(): string {
+    const formattedHeight = this.formatDimension(this.height);
+    if (formattedHeight) {
+      return formattedHeight;
+    }
+    if (this.variant === 'circular') {
+      return '40px';
+    }
+    return this.variant === 'text' ? '1em' : '20px';
+  }
+
+  private getComputedBorderRadius(): string {
+    if (this.borderRadius) {
+      return this.borderRadius;
+    }
+    if (this.variant === 'circular') {
+      return '50%';
+    }
+    if (this.variant === 'rounded') {
+      return 'var(--nile-radius-radius-md, var(--ng-radius-md, 4px))';
+    }
+    if (this.variant === 'text') {
+      return 'var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))';
+    }
+    return 'var(--nile-radius-radius-xs, var(--ng-radius-xs))';
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        part="base"
+        class="skeleton-loader"
+      >
+        <div
+          part="skeleton"
+          class=${classMap({
+            skeleton: true,
+            'skeleton--text': this.variant === 'text',
+            'skeleton--circular': this.variant === 'circular',
+            'skeleton--rectangular': this.variant === 'rectangular',
+            'skeleton--rounded': this.variant === 'rounded',
+          })}
+          style="
+            width: ${this.getComputedWidth()};
+            height: ${this.getComputedHeight()};
+            border-radius: ${this.getComputedBorderRadius()};
+          "
+        ></div>
+      </div>
+    `;
+  }
+}
+
+export default NileSkeletonLoader;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-skeleton-loader': NileSkeletonLoader;
+  }
+}
+

package/src/nile-tag/nile-tag.ts

@@ -62,6 +62,9 @@ export class NileTag extends NileElement {
   /** Makes the tag removable and shows a remove button. */
   @property({ type: Boolean }) removable = false;
 
+  /** Disables the tag and cannot remove the tag. */
+  @property({ type: Boolean }) disabled = false;
+
   private handleRemoveClick() {
     this.emit('nile-remove');
   }
@@ -137,6 +140,7 @@ export class NileTag extends NileElement {
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
                  color=${this.getCloseButtonColor()}
+                ?disabled=${this.disabled}
               ></nile-icon-button>
             `
           : ''}