@ng-nest/ui 20.3.3 → 20.3.5

package/affix/affix.component.html

@@ -0,0 +1,3 @@
+<div #affix class="x-affix" [style.top]="top()" [style.left]="left()">
+  <ng-content></ng-content>
+</div>

package/affix/affix.component.scss

@@ -0,0 +1,10 @@
+// Affix
+
+@use '../style/mixins/reset.scss' as *;
+@use './style/mixin.scss' as *;
+@use './style/param.scss' as *;
+
+.#{$x-affix} {
+  @include reset-component();
+  @include affix();
+}

package/affix/affix.component.spec.ts

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { XAffixComponent, XAffixPrefix } from '@ng-nest/ui/affix';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+@Component({
+    imports: [XAffixComponent],
+    template: `
+    <x-affix>
+      <div>affix</div>
+    </x-affix>
+  `
+})
+class XTestAffixComponent {}
+
+@Component({
+    imports: [XAffixComponent],
+    template: `
+    <x-affix [top]="top()" [left]="left()">
+      <div>float info</div>
+    </x-affix>
+  `
+})
+class XTestAffixPropertyComponent {
+  top = signal('10px');
+  left = signal('10px');
+}
+
+xdescribe(XAffixPrefix, () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [XTestAffixComponent, XTestAffixPropertyComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        provideZonelessChangeDetection()
+      ]
+    }).compileComponents();
+  });
+  xdescribe('default.', () => {
+    let fixture: ComponentFixture<XTestAffixComponent>;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(XTestAffixComponent);
+      fixture.detectChanges();
+    });
+    it('define.', () => {
+      const com = fixture.debugElement.query(By.directive(XAffixComponent));
+      expect(com).toBeDefined();
+    });
+  });
+  xdescribe(`input.`, async () => {
+    let fixture: ComponentFixture<XTestAffixPropertyComponent>;
+    let component: XTestAffixPropertyComponent;
+    beforeEach(async () => {
+      fixture = TestBed.createComponent(XTestAffixPropertyComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+    it('top.', () => {
+      const affix = fixture.debugElement.query(By.css('.x-affix'));
+      expect(affix.nativeElement.style.top).toBe('10px');
+
+      component.top.set('20px');
+      fixture.detectChanges();
+
+      expect(affix.nativeElement.style.top).toBe('20px');
+    });
+    it('left.', () => {
+      const affix = fixture.debugElement.query(By.css('.x-affix'));
+      expect(affix.nativeElement.style.left).toBe('10px');
+
+      component.left.set('20px');
+      fixture.detectChanges();
+
+      expect(affix.nativeElement.style.left).toBe('20px');
+    });
+  });
+});

package/affix/affix.component.ts

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { XAffixPrefix, XAffixProperty } from './affix.property';
+
+@Component({
+  selector: `${XAffixPrefix}`,
+  templateUrl: './affix.component.html',
+  styleUrls: ['./affix.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class XAffixComponent extends XAffixProperty {}

package/affix/affix.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { XAffixComponent } from './affix.component';
+
+@NgModule({
+  exports: [XAffixComponent],
+  imports: [XAffixComponent]
+})
+export class XAffixModule {}

package/affix/affix.property.ts

@@ -0,0 +1,43 @@
+import { XNumber, XPropertyFunction, XToCssPixelValue } from '@ng-nest/ui/core';
+import { Component, input } from '@angular/core';
+
+/**
+ * Affix
+ * @selector x-affix
+ * @decorator component
+ */
+export const XAffixPrefix = 'x-affix';
+export const X_AFFIX_CONFIG_NAME = 'affix';
+
+/**
+ * Affix Property
+ */
+@Component({ selector: `${XAffixPrefix}-property`, template: '' })
+export class XAffixProperty extends XPropertyFunction(X_AFFIX_CONFIG_NAME) {
+  /**
+   * @zh_CN 顶部距离
+   * @en_US Distance from top
+   * @example
+   * 
+   * ```html
+   * <x-affix top="5rem">
+   *   <div>有垂直滚动条，我与顶部距离5rem</div>
+   * </x-affix>
+   * ```
+   * 
+   */
+  readonly top = input<string, XNumber>(this.config?.top!, { transform: XToCssPixelValue });
+  /**
+   * @zh_CN 左边距离
+   * @en_US Distance from left
+   * @example
+   * 
+   * ```html
+   * <x-affix left="5rem">
+   *   <div>有横向滚动条，我与左边距离5rem</div>
+   * </x-affix>
+   * ```
+   * 
+   */
+  readonly left = input<string, XNumber>(this.config?.left!, { transform: XToCssPixelValue });
+}

package/affix/docs/readme.en_US.md

@@ -0,0 +1,20 @@
+---
+label: 'Affix'
+category: 'Navigation'
+---
+
+# Affix
+
+Keep page elements in visual range.
+
+## Used alone
+
+{{ __component }}
+
+## Sample code
+
+{{ __examples }}
+
+## API
+
+{{ __api }}

package/affix/docs/readme.zh_CN.md

@@ -0,0 +1,20 @@
+---
+label: 'Affix 固钉'
+category: 'Navigation'
+---
+
+# Affix 固钉
+
+将页面元素钉在可视范围。
+
+## 单独引入此组件
+
+{{ __component }}
+
+## 示例代码
+
+{{ __examples }}
+
+## API
+
+{{ __api }}

package/affix/examples/en_US/default/default/default.component.html

@@ -0,0 +1,10 @@
+<div class="row scroll">
+  <div class="box">
+    <x-affix top="0">
+      <x-button>Scroll down, I'm going to fix it to the top</x-button>
+    </x-affix>
+    <x-affix [style.margin-left.rem]="1" top="5rem">
+      <x-button>Scroll down, I'm 5rem away from the top</x-button>
+    </x-affix>
+  </div>
+</div>

package/affix/examples/en_US/default/default/default.component.scss

@@ -0,0 +1,17 @@
+:host {
+  .row.scroll {
+    height: 12rem;
+    width: 100%;
+    overflow: auto;
+    border-radius: 0.125rem;
+    border: 0.0625rem solid var(--x-border);
+  }
+  .row .box {
+    height: 25rem;
+    width: 200%;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  }
+  .row x-affix:not(:first-child) {
+    margin-left: 1rem;
+  }
+}

package/affix/examples/en_US/default/default/default.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
+
+@Component({
+    selector: 'ex-default',
+    imports: [XAffixComponent, XButtonComponent],
+    templateUrl: './default.component.html',
+    styleUrls: ['./default.component.scss']
+})
+export class ExDefaultComponent {}

package/affix/examples/en_US/default/default/readme.md

@@ -0,0 +1,6 @@
+---
+order: 1
+label: 'Base'
+---
+
+Sets the distance from the top with the `top` property.

package/affix/examples/en_US/default/readme.md

@@ -0,0 +1,4 @@
+---
+order: 1
+label: 'Base'
+---

package/affix/examples/en_US/default/scope/readme.md

@@ -0,0 +1,6 @@
+---
+order: 2
+label: 'Within range'
+---
+
+`top` and `left` are set together to fix the position.

package/affix/examples/en_US/default/scope/scope.component.html

@@ -0,0 +1,21 @@
+<div class="row scroll">
+  <div class="box">
+    <x-affix top="2rem">
+      <x-button>top </x-button>
+    </x-affix>
+  </div>
+</div>
+<div class="row scroll">
+  <div class="box">
+    <x-affix left="2rem">
+      <x-button>left </x-button>
+    </x-affix>
+  </div>
+</div>
+<div class="row scroll">
+  <div class="box">
+    <x-affix top="2rem" left="2rem">
+      <x-button>top + left</x-button>
+    </x-affix>
+  </div>
+</div>

package/affix/examples/en_US/default/scope/scope.component.scss

@@ -0,0 +1,17 @@
+:host {
+  .row.scroll {
+    height: 12rem;
+    width: 100%;
+    overflow: auto;
+    border-radius: 0.125rem;
+    border: 0.0625rem solid var(--x-border);
+  }
+  .row .box {
+    height: 25rem;
+    width: 200%;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  }
+  .row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}

package/affix/examples/en_US/default/scope/scope.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
+
+@Component({
+    selector: 'ex-scope',
+    imports: [XAffixComponent, XButtonComponent],
+    templateUrl: './scope.component.html',
+    styleUrls: ['./scope.component.scss']
+})
+export class ExScopeComponent {}

package/affix/examples/index.ts

@@ -0,0 +1,2 @@
+export * from './zh_CN/default/default/default.component';
+export * from './zh_CN/default/scope/scope.component';

package/affix/examples/zh_CN/default/default/default.component.html

@@ -0,0 +1,10 @@
+<div class="row scroll">
+  <div class="box">
+    <x-affix top="0">
+      <x-button>滚动条下滑，我将固定到顶部</x-button>
+    </x-affix>
+    <x-affix [style.margin-left.rem]="1" top="5rem">
+      <x-button>滚动条下滑，我与顶部距离5rem</x-button>
+    </x-affix>
+  </div>
+</div>

package/affix/examples/zh_CN/default/default/default.component.scss

@@ -0,0 +1,17 @@
+:host {
+  .row.scroll {
+    height: 12rem;
+    width: 100%;
+    overflow: auto;
+    border-radius: 0.125rem;
+    border: 0.0625rem solid var(--x-border);
+  }
+  .row .box {
+    height: 25rem;
+    width: 200%;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  }
+  .row x-affix:not(:first-child) {
+    margin-left: 1rem;
+  }
+}

package/affix/examples/zh_CN/default/default/default.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
+
+@Component({
+    selector: 'ex-default',
+    imports: [XAffixComponent, XButtonComponent],
+    templateUrl: './default.component.html',
+    styleUrls: ['./default.component.scss']
+})
+export class ExDefaultComponent {}

package/affix/examples/zh_CN/default/default/readme.md

@@ -0,0 +1,6 @@
+---
+order: 1
+label: '基础用法'
+---
+
+通过 `top` 属性设置距离顶部的距离。

package/affix/examples/zh_CN/default/readme.md

@@ -0,0 +1,4 @@
+---
+order: 1
+label: '基础用法'
+---

package/affix/examples/zh_CN/default/scope/readme.md

@@ -0,0 +1,6 @@
+---
+order: 2
+label: '范围内'
+---
+
+`top` 与 `left` 一起设置来固定位置。

package/affix/examples/zh_CN/default/scope/scope.component.html

@@ -0,0 +1,21 @@
+<div class="row scroll">
+  <div class="box">
+    <x-affix top="2rem">
+      <x-button>top </x-button>
+    </x-affix>
+  </div>
+</div>
+<div class="row scroll">
+  <div class="box">
+    <x-affix left="2rem">
+      <x-button>left </x-button>
+    </x-affix>
+  </div>
+</div>
+<div class="row scroll">
+  <div class="box">
+    <x-affix top="2rem" left="2rem">
+      <x-button>top + left</x-button>
+    </x-affix>
+  </div>
+</div>

package/affix/examples/zh_CN/default/scope/scope.component.scss

@@ -0,0 +1,17 @@
+:host {
+  .row.scroll {
+    height: 12rem;
+    width: 100%;
+    overflow: auto;
+    border-radius: 0.125rem;
+    border: 0.0625rem solid var(--x-border);
+  }
+  .row .box {
+    height: 25rem;
+    width: 200%;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  }
+  .row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}

package/affix/examples/zh_CN/default/scope/scope.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
+
+@Component({
+    selector: 'ex-scope',
+    imports: [XAffixComponent, XButtonComponent],
+    templateUrl: './scope.component.html',
+    styleUrls: ['./scope.component.scss']
+})
+export class ExScopeComponent {}

package/affix/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/affix/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "./public-api.ts"
+  }
+}

package/affix/public-api.ts

@@ -0,0 +1,3 @@
+export * from './affix.component';
+export * from './affix.module';
+export * from './affix.property';

package/affix/style/mixin.scss

@@ -0,0 +1,11 @@
+// Affix
+
+@use '../../style/params/index.scss' as *;
+@use './param.scss' as *;
+
+@mixin affix {
+  & {
+    position: sticky;
+    display: inline-block;
+  }
+}

package/affix/style/param.scss

@@ -0,0 +1,4 @@
+// Affix style paramters
+@use '../../style/params/index.scss' as *;
+
+$x-affix: $x-prefix + '-affix';

package/alert/alert.component.html

@@ -0,0 +1,71 @@
+@if (!styleHide() && !hide()) {
+  <div
+    class="x-alert"
+    [class.x-alert-has-close]="!hideClose()"
+    [class.x-alert-icon-content]="showIcon() && content()"
+    cdkDrag
+    (cdkDragEnded)="dragEnded.emit($event)"
+    [cdkDragFreeDragPosition]="dragFreeDragPosition()!"
+    [cdkDragDisabled]="!draggable()"
+    [cdkDragBoundary]="dragBoundary()!"
+    [ngClass]="classMap()"
+    animate.enter="x-connect-enter"
+    animate.leave="x-connect-leave"
+    [class.x-animate-disabled]="disabledAnimation()"
+    (animationend)="onCloseAnimationDone()"
+    [xResizable]="resizable()!"
+    (resizing)="resizing.emit($event)"
+    [offsetLeft]="offsetLeft()"
+    [offsetTop]="offsetTop()"
+    [style.minWidth]="minWidth()"
+    [style.minHeight]="minHeight()"
+  >
+    @if (showIcon()) {
+      <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+    }
+    <ng-template #iconTpl>
+      @switch (type()) {
+        @case ('success') {
+          <x-icon class="x-alert-icon" type="adf-check-circle"></x-icon>
+        }
+        @case ('info') {
+          <x-icon class="x-alert-icon" type="adf-info-circle"></x-icon>
+        }
+        @case ('warning') {
+          <x-icon class="x-alert-icon" type="adf-exclamation-circle"></x-icon>
+        }
+        @case ('error') {
+          <x-icon class="x-alert-icon" type="adf-close-circle"></x-icon>
+        }
+        @case ('loading') {
+          <x-icon class="x-alert-icon" type="fto-loader" [spin]="true"></x-icon>
+        }
+      }
+    </ng-template>
+    <div class="x-alert-inner">
+      <span class="x-alert-title" cdkDragHandle [class.x-bold]="title() && content()">
+        <ng-container *xOutlet="title(); context: { $iconTpl: iconTpl }">{{ title() }}</ng-container>
+      </span>
+      @if (content()) {
+        <div class="x-alert-content">
+          <ng-container *xOutlet="content(); context: { $iconTpl: iconTpl }">{{ content() }}</ng-container>
+        </div>
+      }
+      <div class="x-alert-close">
+        <div class="x-alert-operation" *xOutlet="operationTpl()">{{ operationTpl() }}</div>
+        @if (!hideClose()) {
+          <x-button
+            class="x-alert-operation-close"
+            size="small"
+            [icon]="!closeText() ? 'fto-x' : ''"
+            [type]="'text'"
+            (click)="onClose()"
+            closable
+          >
+            {{ closeText() }}
+          </x-button>
+        }
+      </div>
+    </div>
+  </div>
+}

package/alert/alert.component.scss

@@ -0,0 +1,14 @@
+// Alert
+
+@use '../style/mixins/reset.scss' as *;
+@use './style/mixin.scss' as *;
+@use './style/param.scss' as *;
+
+#{$x-alert} {
+  display: block;
+}
+
+.#{$x-alert} {
+  @include reset-component();
+  @include alert();
+}